<template>
  <div v-if="opened">
    <a-modal
      v-model="opened"
      :title="title"
      centered
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      :width="960"
      :footer="null"
      @cancel="cancel"
    >
      <a-spin :spinning="spinning" tip="Loading...">
        <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="16">
              <a-form-model-item label="客户名称" prop="buyerSn" :labelCol="{ span: 3 }" :wrapperCol="{ span: 20 }">
                <custList ref="custList" :isValidateEnabled="true" id="chooseCustom-buyerSn" @change="custChange" v-model="form.buyerSn"></custList>
              </a-form-model-item>
            </a-col>
            <a-col :span="8" v-if="$hasPermissions('B_customer_customerInfo_add')">
              <a-form-model-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
                <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="24">
              <a-form-model-item label="客户地址" required style="margin: 0;" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
                <a-row :gutter="15">
                  <!-- 客户地址 -->
                  <a-col span="8">
                    <a-form-model-item prop="shippingAddressProvinceSn">
                      <a-select id="chooseCustom-provinceSn" allowClear @change="getCityList" v-model="form.shippingAddressProvinceSn" placeholder="请选择省">
                        <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + '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" allowClear @change="getAreaList" v-model="form.shippingAddressCitySn" placeholder="请选择市">
                        <a-select-option v-for="item in addrCityList" :value="item.areaSn" :key="item.areaSn + '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" allowClear @change="areaCharged" v-model="form.shippingAddressCountySn" placeholder="请选择区/县">
                        <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + '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="24">
              <a-form-model-item label="详细地址" prop="shippingAddress" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
                <a-input
                  id="chooseCustom-shippingAddress"
                  :maxLength="60"
                  v-model.trim="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.trim="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="15"
                  v-model.trim="form.consigneeTel"
                  placeholder="请输入联系电话(最多15个字符)"
                  allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="联系手机" prop="contactMobile">
                <a-input
                  id="chooseCustom-contactMobile"
                  :maxLength="11"
                  v-model.trim="form.contactMobile"
                  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="请选择收款方式" allowClear 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" allowClear @change="salesManChange" v-model="form.salesManSn" placeholder="请选择业务员">
                  <a-select-option v-for="item in userList" :value="item.employeeSn" :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.trim="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="960"
          :maskClosable="false"
          @cancel="cancelNewCust"
          :footer="null"
        >
          <CustomerManagementEdit ref="newCust" model="modal" @ok="newCustFun"></CustomerManagementEdit>
        </a-modal>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getArea } from '@/api/data'
import { custFindById, updateByCustomerSn } from '@/api/customer'
import { salesSave } from '@/api/sales'
import { employeeAllList } from '@/api/salesman'
import { settleStyleQueryAll } from '@/api/settleStyle'
import { VSelect } from '@/components'
import custList from '@/views/common/custList.vue'
import CustomerManagementEdit from '@/views/customerManagement/customerInfo/edit.vue'
export default {
  name: 'ChooseCustomModal',
  components: { VSelect, CustomerManagementEdit, custList },
  props: {
    show: [Boolean]
  },
  data () {
    return {
      spinning: false,
      opened: this.show,
      title: '选择客户',
      confirmLoading: false,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      buyerSnBak: '', // 更改前客户sn备份
      priceTypeBak: '', // 更改前客户价格类型备份
      form: {
        buyerName: '', // 客户名称
        buyerSn: undefined, // 客户sn
        consigneeTel: '', //  联系电话
        contactMobile: '',
        consigneeName: '', //  联系人
        shippingAddressProvinceSn: undefined, //  省
        shippingAddressProvinceName: '',
        shippingAddressCitySn: undefined, // 市
        shippingAddressCityName: '',
        shippingAddressCountySn: undefined, // 区
        shippingAddressCountyName: '',
        shippingAddress: '', //  详细地址
        fax: '', //  客户传真
        dispatchType: undefined, //  配送方式
        satelliteFlag: 0, //  是否卫星仓客户
        priceType: undefined, //  价格类型
        settleStyleSn: undefined, //  收款方式
        salesManSn: undefined, //  业务员
        salesManName: '',
        distributionFlag: '0', // 铺货出库
        salesTragetType: 'CUSTOMER',
        remarks: '' //  备注
      },
      rules: {
        buyerSn: [
          { required: true, message: '请选择客户', trigger: ['change', 'blur'] }
        ],
        contactMobile: [{ required: false, pattern: /^\d{11}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        shippingAddressProvinceSn: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        shippingAddressCitySn: [
          { required: true, message: '请选择市', trigger: 'change' }
        ],
        shippingAddressCountySn: [
          { required: true, message: '请选择区/县', trigger: 'change' }
        ],
        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' }
        // ]
      },
      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.$refs.custList.setData({ key: data.customerSn, label: data.customerName, row: data })
      this.custChange({ key: data.customerSn, label: data.customerName, row: data })
    },
    // 业务员
    salesManChange (employeeSn) {
      if (employeeSn) {
        this.form.salesManName = this.userList.find(item => item.employeeSn == employeeSn).name
      } else {
        this.form.salesManName = ''
      }
    },
    // 客户 change
    custChange (obj) {
      const _this = this
      if (obj && obj.key) {
        const cust = obj.row
        this.form.buyerSn = cust.customerSn
        // 编辑
        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()
        }
      } else {
        this.$refs.ruleForm.resetFields()
        this.$refs.custList.resetForm()
      }
    },
    // 编辑客户信息
    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, //  联系电话
            contactMobile: data.contactMobile,
            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, //  联系电话
        contactMobile: this.form.contactMobile,
        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 //  收款方式
      }
      this.spinning = true
      updateByCustomerSn(params).then(res => {
        this.spinning = false
        if (res.status == 200) {
          // 保存销售单
          this.salesSaveFun()
          this.spinning = false
        } else {
          this.spinning = false
        }
      })
    },
    //  保存
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      console.log(_this.form, '------save')
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 如果价格类型改变，提示
          if (_this.priceTypeBak != _this.form.priceType && this.isEdit) {
            this.$confirm({
              title: '提示',
              content: '价格类型变更，确认提交吗？',
              centered: true,
              onOk () {
                // 保存客户信息
                _this.handleSaveCust()
              }
            })
          } else {
            // 保存客户信息
            _this.handleSaveCust()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 新建或编辑销售单
    salesSaveFun () {
      const _this = this
      const form = this.form
      _this.spinning = true
      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()
          _this.spinning = false
        } else {
          _this.spinning = false
        }
      })
    },
    cancel () {
      this.opened = false
      this.$emit('cancel')
      this.$refs.ruleForm.resetFields()
      this.$refs.custList.resetForm()
    },
    cancelNewCust () {
      this.isNewCust = false
      this.$refs.newCust.getBaseData()
    },
    // 获取业务员列表数据
    getUserAllList () {
      employeeAllList({}).then(res => {
        if (res.status == 200) {
          this.userList = res.data || []
        } else {
          this.userList = []
        }
      })
    },
    // 获取城市列表
    getCityList (val) {
      this.addrCityList = []
      this.addrDistrictList = []
      this.form.shippingAddressCitySn = undefined
      this.form.shippingAddressCityName = ''
      this.form.shippingAddressCountySn = undefined
      this.form.shippingAddressCountyName = ''
      if (val) {
        this.getArea('city', val)
        this.form.shippingAddressProvinceName = this.addrProvinceList.find(item => item.areaSn == val).name
      } else {
        this.form.shippingAddressProvinceName = ''
      }
    },
    // 获取区县列表
    getAreaList (val) {
      this.addrDistrictList = []
      this.form.shippingAddressCountySn = undefined
      this.form.shippingAddressCountyName = ''
      if (val) {
        this.getArea('district', val)
        this.form.shippingAddressCityName = this.addrCityList.find(item => item.areaSn == val).name
      } else {
        this.form.shippingAddressCityName = ''
      }
    },
    // 区县变更
    areaCharged (val) {
      if (val) {
        this.form.shippingAddressCountyName = this.addrDistrictList.find(item => item.areaSn == val).name
      } else {
        this.form.shippingAddressCountyName = ''
      }
    },
    //  省/市/区
    getArea (leve, sn) {
      let params
      if (leve == 'province') {
        params = { type: '2' }
      } else {
        params = { parentId: sn, type: leve == 'city' ? '3' : '4' }
      }
      getArea(params).then(res => {
        if (res.status == 200) {
          if (leve == 'province') {
            this.addrProvinceList = res.data || []
          } else if (leve == 'city') {
            this.addrCityList = res.data || []
          } else if (leve == 'district') {
            this.addrDistrictList = res.data || []
          }
        } else {
          if (leve == 'province') {
            this.addrProvinceList = []
          } else if (leve == 'city') {
            this.addrCityList = []
          } else if (leve == 'district') {
            this.addrDistrictList = []
          }
        }
      })
    },
    // 获取收款方式
    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.getUserAllList()
        this.getSettleStyle()
      }
    }
  }
}
</script>
