<template>
  <a-modal
    v-model="opened"
    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-auto-complete
              id="chooseCustom-buyerSn"
              placeholder="请选择客户"
              allowClear
              v-model="form.buyerSn"
              :filter-option="filterOption"
              @select="custSelect"
              @change="custChange">
              <template slot="dataSource">
                <a-select-option v-for="item in custAllList" :key="item.customerSn" :title="item.id">{{ item.customerName }}</a-select-option>
              </template>
            </a-auto-complete>
            </a-button></a-form-model-item>
        </a-col>
        <a-col :span="16">
          <a-form-model-item><a-button type="dashed" 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="provinceSn">
                  <a-select id="chooseCustom-provinceSn" @change="getCityList" v-model="form.provinceSn" 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="citySn">
                  <a-select id="chooseCustom-citySn" @change="getAreaList" v-model="form.citySn" 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="countySn">
                  <a-select id="chooseCustom-countySn" @change="areaCharged" v-model="form.countySn" 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="30"
              v-model="form.consigneeTel"
              placeholder="请输入联系电话(最多30个字符)"
              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="!isEdit"
                  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="settleStyle">
            <v-select code="SETTLE_STYLE_NAME" id="chooseCustom-settleStyle" v-model="form.settleStyle" allowClear placeholder="请选择收款方式"></v-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="distributionFalg">
            <v-select code="FLAG" id="chooseCustom-distributionFalg" v-model="form.distributionFalg" 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>
</template>

<script>
import { getArea } from '@/api/data'
import { custAllList, custFindById, custSave } from '@/api/customer'
import { salesInsert } from '@/api/sales'
import { getUserAllList } from '@/api/power-user'
import { VSelect } from '@/components'
export default {
  name: 'ChooseCustomModal',
  components: { VSelect },
  props: {
    show: [Boolean]
  },
  data () {
    return {
      opened: this.show,
      confirmLoading: false,
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      form: {
        buyerName: '', // 客户名称
        buyerSn: '', // 客户sn
        consigneeTel: '', //  联系电话
        consigneeName: '', //  联系人
        provinceSn: undefined, //  省
        shippingAddressProvinceName: '',
        citySn: undefined, // 市
        shippingAddressCityName: '',
        countySn: undefined, // 区
        shippingAddressCountyName: '',
        shippingAddress: '', //  详细地址
        fax: '', //  客户传真
        dispatchType: '', //  配送方式
        satelliteFlag: 0, //  是否卫星仓客户
        customerTypeSn: undefined, //  客户类型
        priceType: '', //  价格类型
        // payType: '', //  支付方式
        settleStyle: '', //  收款方式
        salesManSn: undefined, //  业务员
        salesManName: '',
        distributionFalg: '0', // 铺货出库
        salesTragetType: 'C',
        remarks: '' //  备注
      },
      custInfo: {}, // 客户信息
      rules: {
        buyerSn: [
          { required: true, message: '请输入客户名称', trigger: ['change', 'blur'] }
        ],
        consigneeTel: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        provinceSn: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        citySn: [
          { required: true, message: '请选择市', trigger: 'change' }
        ],
        countySn: [
          { required: true, message: '请选择区/县', trigger: 'change' }
        ],
        shippingAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        priceType: [
          { required: true, message: '请选择价格类型', trigger: 'change' }
        ],
        // payType: [
        //   { required: true, message: '请选择支付方式', trigger: 'change' }
        // ],
        settleStyle: [
          { required: true, message: '请选择收款方式', trigger: 'change' }
        ],
        distributionFalg: [
          { required: true, message: '请选择是否铺货出库', trigger: 'change' }
        ]
        // salesManSn: [
        //   { required: true, message: '请选择业务员', trigger: 'change' }
        // ]
      },
      custAllList: [], //  客户 下拉数据
      addrProvinceList: [], //  省下拉
      addrCityList: [], //  市下拉
      addrDistrictList: [], //  区下拉
      userList: [], // 业务员 下拉
      custId: undefined, // 客户id
      isEdit: true //  是否可编辑
    }
  },
  methods: {
    // 业务员
    salesManChange (id) {
      this.form.salesManName = this.userList.find(item => item.id == id).name
    },
    // 客户 select
    custSelect (v) {
      const cust = this.custAllList.find(item => item.customerSn == v)
      this.custId = cust.id
      this.form.buyerName = cust.customerName
      this.isEdit = false
      this.getDetail()
    },
    // 客户 change
    custChange (val) {
      if (val == undefined || val == '') {
        this.$refs.ruleForm.resetFields()
      }
      this.custId = undefined
      this.isEdit = true
    },
    // 编辑客户信息
    editCust (data) {
      console.log(data)
      if (data.provinceSn) { this.getArea('city', data.provinceSn) }
      if (data.citySn) { this.getArea('district', data.citySn) }
      this.form = data
    },
    //  获取详情
    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, //  联系人
            provinceSn: data.provinceSn, //  省
            shippingAddressProvinceName: data.provinceName,
            citySn: data.citySn, // 市
            shippingAddressCityName: data.cityName,
            countySn: data.countySn, // 区
            shippingAddressCountyName: data.countyName,
            shippingAddress: data.customerAddr, //  详细地址
            fax: data.fax, //  客户传真
            dispatchType: data.dispatchType, //  配送方式
            satelliteFlag: data.satelliteFlag, //  是否卫星仓客户
            customerTypeSn: data.customerTypeSn, //  客户类型
            priceType: data.priceType, //  价格类型
            settleStyle: data.settleStyleSn //  收款方式
          })
          // 临时存储客户信息
          this.custInfo = data
        } else {
          this.$message.error('获取客户信息失败')
          this.$refs.ruleForm.resetFields()
        }
        this.$refs.ruleForm.clearValidate()
      })
    },
    // 保存客户信息
    handleSaveCust () {
      custSave({
        id: this.custInfo.id,
        customerName: this.form.buyerName,
        contactTel: this.form.consigneeTel, //  联系电话
        contactName: this.form.consigneeName, //  联系人
        provinceSn: this.form.provinceSn, //  省
        provinceName: this.form.shippingAddressProvinceName,
        citySn: this.form.citySn, // 市
        cityName: this.form.shippingAddressCityName,
        countySn: this.form.countySn, // 区
        countyName: this.form.shippingAddressCountyName,
        customerAddr: this.form.shippingAddress, //  详细地址
        dispatchType: this.form.dispatchType, //  配送方式
        customerTypeSn: this.form.customerTypeSn, //  客户类型
        priceType: this.form.priceType, //  价格类型
        settleStyleSn: this.form.settleStyle //  收款方式
      }).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) {
          // 保存客户信息
          _this.handleSaveCust()
          // 新建销售单
          const form = this.form
          console.log(form, 'save data')
          salesInsert(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('ok', res.data)
              _this.cancel()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel () {
      this.opened = false
      this.$refs.ruleForm.resetFields()
      this.$emit('cancel')
    },
    // 客户无分页列表数据
    getCustAllList () {
      const _this = this
      custAllList().then(res => {
        if (res.status == 200) {
          _this.custAllList = res.data || []
        } else {
          _this.custAllList = []
        }
      })
    },
    // 获取业务员列表数据
    getUserAllList () {
      getUserAllList({}).then(res => {
        if (res.status == 200) {
          this.userList = res.data || []
        } else {
          this.userList = []
        }
      })
    },
    // 获取城市列表
    getCityList (val) {
      console.log(val, '-------------')
      this.addrCityList = []
      this.addrDistrictList = []
      this.form.citySn = undefined
      this.form.shippingAddressCityName = ''
      this.form.countySn = 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.countySn = 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
      )
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (newValue) {
        this.getArea('province')
        this.getCustAllList()
        this.getUserAllList()
      }
    }
  }
}
</script>

<style>
</style>
