<template>
  <a-modal
    v-model="opened"
    :title="title"
    centered
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    width="80%"
    :footer="null"
    @cancel="cancel"
  >
    <a-form-model
      id="chooseCustom-form"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-row :gutter="15">
        <a-col :span="8">
          <a-form-model-item label="客户名称" prop="buyerSn">
            <a-select
              id="chooseCustom-buyerSn"
              show-search
              placeholder="请选择客户"
              v-model="form.buyerSn"
              :filter-option="filterOption"
              @change="custChange">
              <a-select-option v-for="item in custAllList" :key="item.id" :value="item.customerSn">{{ item.customerName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="16">
          <a-form-model-item>
            <a-button type="primary" class="button-primary" @click="openNewCust" icon="plus">新增</a-button>
            （点击新增按钮新增客户）
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="15">
        <a-col :span="16">
          <a-form-model-item label="客户地址" required style="margin: 0;" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
            <a-row :gutter="15">
              <!-- 客户地址 -->
              <a-col span="8">
                <a-form-model-item prop="shippingAddressProvinceSn">
                  <a-select id="chooseCustom-provinceSn" @change="getCityList" v-model="form.shippingAddressProvinceSn" placeholder="请选择省">
                    <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item prop="shippingAddressCitySn">
                  <a-select id="chooseCustom-citySn" @change="getAreaList" v-model="form.shippingAddressCitySn" placeholder="请选择市">
                    <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item prop="shippingAddressCountySn">
                  <a-select id="chooseCustom-countySn" @change="areaCharged" v-model="form.shippingAddressCountySn" placeholder="请选择区/县">
                    <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="" prop="shippingAddress">
            <a-input
              id="chooseCustom-shippingAddress"
              :maxLength="60"
              v-model="form.shippingAddress"
              placeholder="请输入详细地址(最多60个字符)"
              allowClear />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="15">
        <a-col :span="8">
          <a-form-model-item label="联系人" prop="consigneeName">
            <a-input
              id="chooseCustom-consigneeName"
              :maxLength="30"
              v-model="form.consigneeName"
              placeholder="请输入联系人(最多30个字符)"
              allowClear />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="联系电话" prop="consigneeTel">
            <a-input
              id="chooseCustom-consigneeTel"
              :maxLength="11"
              v-model="form.consigneeTel"
              placeholder="请输入联系电话(最多11个字符)"
              allowClear />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="15">
        <a-col :span="8">
          <a-form-model-item label="价格类型" prop="priceType">
            <a-row :gutter="15">
              <a-col :span="20">
                <v-select
                  code="PRICE_TYPE"
                  :disabled="priceTypeDisabled"
                  id="chooseCustom-priceType"
                  v-model="form.priceType"
                  allowClear
                  placeholder="请选择价格类型" ></v-select>
              </a-col>
              <a-col :span="4">
                <a-popover>
                  <template slot="content">（选择后在当前工单不可修改）</template>
                  <a-icon type="question-circle" />
                </a-popover>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-model-item label="支付方式" prop="payType">
            <v-select code="PAY_TYPE" id="chooseCustom-payType" v-model="form.payType" allowClear placeholder="请选择支付方式" />
          </a-form-model-item>
        </a-col> -->
        <a-col :span="8">
          <a-form-model-item label="收款方式" prop="settleStyleSn">
            <a-select placeholder="请选择收款方式" v-model="form.settleStyleSn">
              <a-select-option v-for="item in settleStyleList" :key="item.settleStyleSn" :value="item.settleStyleSn">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="配送方式" prop="dispatchType">
            <v-select code="DISPATCH_TYPE" id="chooseCustom-dispatchType" v-model="form.dispatchType" allowClear placeholder="请选择配送方式"></v-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="15">
        <a-col :span="8">
          <a-form-model-item label="业务员" prop="salesManSn">
            <a-select id="chooseCustom-salesManSn" @change="salesManChange" v-model="form.salesManSn" placeholder="请选择业务员">
              <a-select-option v-for="item in userList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="铺货出库" prop="distributionFlag">
            <v-select code="FLAG" id="chooseCustom-distributionFlag" v-model="form.distributionFlag" allowClear placeholder="请选择"></v-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="15">
        <a-col :span="8">
          <a-form-model-item label="备注" prop="remarks">
            <a-input
              id="chooseCustom-remarks"
              type="textarea"
              :maxLength="100"
              v-model="form.remarks"
              placeholder="请输入联系电话(最多100个字符)"
              allowClear />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="开单人">{{ $store.state.user.info.userNameCN }}</a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
        <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
        <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
      </a-form-model-item>
    </a-form-model>
    <!-- 新增客户 -->
    <a-modal
      v-model="isNewCust"
      title="新增客户"
      centered
      width="60%"
      :maskClosable="false"
      @cancel="cancelNewCust"
      :footer="null"
    >
      <CustomerManagementEdit ref="newCust" model="modal" @ok="newCustFun"></CustomerManagementEdit>
    </a-modal>
  </a-modal>
</template>

<script>
import { getArea } from '@/api/data'
import { custAllList, custFindById, custSave, updateByCustomerSn } from '@/api/customer'
import { salesSave } from '@/api/sales'
import { getUserAllList } from '@/api/power-user'
import { settleStyleQueryAll } from '@/api/settleStyle'
import { VSelect } from '@/components'
import CustomerManagementEdit from '@/views/customerManagement/customerInfo/edit.vue'
export default {
  name: 'ChooseCustomModal',
  components: { VSelect, CustomerManagementEdit },
  props: {
    show: [Boolean]
  },
  data () {
    return {
      opened: this.show,
      title: '选择客户',
      confirmLoading: false,
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      buyerSnBak: '', // 更改前客户sn备份
      priceTypeBak: '', // 更改前客户价格类型备份
      form: {
        buyerName: '', // 客户名称
        buyerSn: undefined, // 客户sn
        consigneeTel: '', //  联系电话
        consigneeName: '', //  联系人
        shippingAddressProvinceSn: undefined, //  省
        shippingAddressProvinceName: '',
        shippingAddressCitySn: undefined, // 市
        shippingAddressCityName: '',
        shippingAddressCountySn: undefined, // 区
        shippingAddressCountyName: '',
        shippingAddress: '', //  详细地址
        fax: '', //  客户传真
        dispatchType: undefined, //  配送方式
        satelliteFlag: 0, //  是否卫星仓客户
        priceType: undefined, //  价格类型
        settleStyleSn: '', //  收款方式
        salesManSn: undefined, //  业务员
        salesManName: '',
        distributionFlag: '0', // 铺货出库
        salesTragetType: 'C',
        remarks: '' //  备注
      },
      rules: {
        buyerSn: [
          { required: true, message: '请选择客户', trigger: ['change', 'blur'] }
        ],
        consigneeTel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }],
        shippingAddressProvinceSn: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        shippingAddressCitySn: [
          { required: true, message: '请选择市', trigger: 'change' }
        ],
        shippingAddressCountySn: [
          { required: true, message: '请选择区/县', trigger: 'change' }
        ],
        shippingAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        priceType: [
          { required: true, message: '请选择价格类型', trigger: ['change', 'blur'] }
        ],
        settleStyleSn: [
          { required: true, message: '请选择收款方式', trigger: ['change', 'blur'] }
        ],
        distributionFlag: [
          { required: true, message: '请选择是否铺货出库', trigger: 'change' }
        ]
        // salesManSn: [
        //   { required: true, message: '请选择业务员', trigger: 'change' }
        // ]
      },
      custAllList: [], //  客户 下拉数据
      addrProvinceList: [], //  省下拉
      addrCityList: [], //  市下拉
      addrDistrictList: [], //  区下拉
      userList: [], // 业务员 下拉
      settleStyleList: [], // 收款方式
      custId: undefined, // 客户id
      isEdit: false, //  是否编辑状态
      priceTypeDisabled: false, // 价格类型可编辑
      isChangeCust: false, // 是否更换客户
      interId: null,
      isNewCust: false // 是否新增客户
    }
  },
  methods: {
    openNewCust () {
      this.isNewCust = true
      setTimeout(() => {
        this.$refs.newCust.getBaseData()
      }, 500)
    },
    // 新建客户
    newCustFun (data) {
      console.log(data, this.isEdit)
      this.isNewCust = false
      // 更新客户信息
      this.custAllList.unshift(data)
      setTimeout(() => {
        this.custChange(data.customerSn)
      }, 300)
    },
    // 业务员
    salesManChange (id) {
      this.form.salesManName = this.userList.find(item => item.id == id).name
    },
    // 客户 change
    custChange (val) {
      console.log(val, 'custChange')
      const _this = this
      const cust = this.custAllList.find(item => item.customerSn == val)
      // 编辑
      if (this.isEdit) {
        this.$confirm({
          title: '提示',
          content: '更换客户后信息需要重新完善，确认要更换吗？',
          centered: true,
          onOk () {
            _this.custId = cust.id
            _this.form.buyerName = cust.customerName
            _this.priceTypeDisabled = false
            _this.getDetail()
          },
          onCancel () {
            _this.form.buyerSn = _this.buyerSnBak
          }
        })
      } else {
        _this.custId = cust.id
        _this.form.buyerName = cust.customerName
        _this.getDetail()
      }
    },
    // 编辑客户信息
    editCust (data) {
      console.log(data)
      this.title = '编辑客户信息'
      this.isEdit = true
      this.priceTypeDisabled = true
      if (data.shippingAddressProvinceSn) { this.getArea('city', data.shippingAddressProvinceSn) }
      if (data.shippingAddressCitySn) { this.getArea('district', data.shippingAddressCitySn) }
      this.form = Object.assign(this.form, data)
      this.buyerSnBak = this.form.buyerSn
      this.priceTypeBak = this.form.priceType
    },
    //  获取详情
    getDetail () {
      custFindById({ id: this.custId }).then(res => {
        const data = res.data
        if (res.status == 200 && data) {
          if (data.provinceSn) { this.getArea('city', data.provinceSn) }
          if (data.citySn) { this.getArea('district', data.citySn) }
          this.form = Object.assign(this.form, {
            buyerName: data.customerName, // 客户名称
            buyerSn: data.customerSn, // 客户sn
            consigneeTel: data.contactTel, //  联系电话
            consigneeName: data.contactName, //  联系人
            shippingAddressProvinceSn: data.provinceSn, //  省
            shippingAddressProvinceName: data.provinceName,
            shippingAddressCitySn: data.citySn, // 市
            shippingAddressCityName: data.cityName,
            shippingAddressCountySn: data.countySn, // 区
            shippingAddressCountyName: data.countyName,
            shippingAddress: data.customerAddr, //  详细地址
            fax: data.fax, //  客户传真
            dispatchType: data.dispatchType, //  配送方式
            satelliteFlag: data.satelliteFlag, //  是否卫星仓客户
            priceType: data.priceType, //  价格类型
            settleStyleSn: data.settleStyleSn //  收款方式
          })
          // this.buyerSnBak = this.form.buyerSn
          // this.priceTypeBak = this.form.priceType
        } else {
          this.$message.error('获取客户信息失败')
          this.$refs.ruleForm.resetFields()
        }
        this.$refs.ruleForm.clearValidate()
      })
    },
    // 保存客户信息
    handleSaveCust () {
      const params = {
        customerName: this.form.buyerName,
        customerSn: this.form.buyerSn,
        contactTel: this.form.consigneeTel, //  联系电话
        contactName: this.form.consigneeName, //  联系人
        provinceSn: this.form.shippingAddressProvinceSn, //  省
        provinceName: this.form.shippingAddressProvinceName,
        citySn: this.form.shippingAddressCitySn, // 市
        cityName: this.form.shippingAddressCityName,
        countySn: this.form.shippingAddressCountySn, // 区
        countyName: this.form.shippingAddressCountyName,
        customerAddr: this.form.shippingAddress, //  详细地址
        dispatchType: this.form.dispatchType, //  配送方式
        priceType: this.form.priceType, //  价格类型
        settleStyleSn: this.form.settleStyleSn //  收款方式
      }
      updateByCustomerSn(params).then(res => {
        if (res.status != 200) {
          this.$message.error(res.message)
        }
      })
    },
    //  保存
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(_this.priceTypeBak, _this.form.priceType)
          // 如果价格类型改变，提示
          if (_this.priceTypeBak != _this.form.priceType && this.isEdit) {
            this.$confirm({
              title: '提示',
              content: '价格类型变更，确认提交吗？',
              centered: true,
              onOk () {
                // 保存客户信息
                _this.handleSaveCust()
                // 保存销售单
                if (_this.form.buyerSn) {
                  _this.salesSaveFun()
                }
              }
            })
          } else {
            // 保存客户信息
            _this.handleSaveCust()
            // 保存销售单
            if (_this.form.buyerSn) {
              _this.salesSaveFun()
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 新建或编辑销售单
    salesSaveFun () {
      const _this = this
      const form = this.form
      console.log(form, 'save data')
      salesSave(form).then(res => {
        if (res.status == 200) {
          _this.$message.success(res.message)
          _this.$emit('ok', res.data)
          if (_this.form.id) {
            _this.$emit('updateData', form.priceType)
          }
          _this.cancel()
        }
      })
    },
    cancel () {
      this.opened = false
      this.$emit('cancel')
      this.$refs.ruleForm.resetFields()
    },
    cancelNewCust () {
      this.isNewCust = false
      this.$refs.newCust.getBaseData()
    },
    // 客户无分页列表数据
    getCustAllList () {
      const _this = this
      custAllList().then(res => {
        if (res.status == 200) {
          _this.custAllList = res.data || []
        } else {
          _this.custAllList = []
        }
      })
    },
    // 获取业务员列表数据
    getUserAllList () {
      getUserAllList({ loginFlag: 1 }).then(res => {
        if (res.status == 200) {
          this.userList = res.data || []
        } else {
          this.userList = []
        }
      })
    },
    // 获取城市列表
    getCityList (val) {
      console.log(val, '-------------')
      this.addrCityList = []
      this.addrDistrictList = []
      this.form.shippingAddressCitySn = undefined
      this.form.shippingAddressCityName = ''
      this.form.shippingAddressCountySn = undefined
      this.form.shippingAddressCountyName = ''
      this.form.shippingAddress = ''
      this.form.shippingAddressCountyName = this.addrProvinceList.find(item => item.id == val).name
      this.getArea('city', val)
    },
    // 获取区县列表
    getAreaList (val) {
      this.addrDistrictList = []
      this.form.shippingAddressCountySn = undefined
      this.form.shippingAddressCountyName = ''
      this.form.shippingAddress = ''
      this.form.shippingAddressCityName = this.addrCityList.find(item => item.id == val).name
      this.getArea('district', val)
    },
    // 区县变更
    areaCharged (val) {
      this.form.shippingAddress = ''
      this.form.shippingAddressCountyName = this.addrDistrictList.find(item => item.id == val).name
    },
    //  省/市/区
    getArea (type, sn) {
      let params
      if (type == 'province') {
        params = { level: '1' }
      } else {
        params = { psn: sn }
      }
      getArea(params).then(res => {
        if (res.status == 200) {
          if (type == 'province') {
            this.addrProvinceList = res.data || []
          } else if (type == 'city') {
            this.addrCityList = res.data || []
          } else if (type == 'district') {
            this.addrDistrictList = res.data || []
          }
        } else {
          if (type == 'province') {
            this.addrProvinceList = []
          } else if (type == 'city') {
            this.addrCityList = []
          } else if (type == 'district') {
            this.addrDistrictList = []
          }
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 获取收款方式
    getSettleStyle () {
      settleStyleQueryAll().then(res => {
        if (res.status == 200) {
          this.settleStyleList = res.data
        }
      })
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (newValue) {
        this.getArea('province')
        this.getCustAllList()
        this.getUserAllList()
        this.getSettleStyle()
      }
    }
  }
}
</script>

<style>
</style>
