<template>
  <el-dialog :visible.sync="show" title="快速新建客户" :close-on-click-modal="false" class="quick-create-customer">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" :validate-on-rule-change="false">
      <el-form-item label="客户类别" prop="type">
        <dict-selector :type="DICT_TYPE.CUSTOMER_TYPE" form-type="checkbox" multiple v-model="form.type"></dict-selector>
      </el-form-item>
      <el-form-item label="客户名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入客户名称" />
      </el-form-item>

      <el-form-item label="联系人" prop="customerContacts.0.name">
        <el-input v-model="form.customerContacts[0].name" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="手机号" prop="customerContacts.0.phoneNew">
        <el-select v-model="form.customerContacts[0].areaCode" placeholder="请选择区号" filterable class="w-200">
          <el-option v-for="(item, index) in countryList"
                      :key="index" :label="item.nameShort + item.nameZh + '(' + item.tel + ')'" :value="item.tel" />
        </el-select>
        <el-input v-model="form.customerContacts[0].phoneNew" placeholder="请输入联系方式" class="w-150 ml-10"/>
      </el-form-item>

      <el-form-item label="客户来源" prop="source">
        <el-select v-model="form.source" placeholder="请选择客户来源">
          <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
                      :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="form.createTime"
          type="datetime"
          value-format="timestamp"
          placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客户经理" prop="customerService">
        <el-select v-model="form.customerService" placeholder="请选择客户经理">
          <el-option v-for="item in serviceUserList"
                      :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" placeholder="请输入备注"/>
      </el-form-item>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createCustomer} from '@/api/ecw/customer'
import {listServiceUser} from "@/api/system/user"
import { getCountryListAll } from '@/api/ecw/country'
import {getCustomerContactsSelect} from '@/api/ecw/customerContacts'

export default {
  name: "quickCreateCustomer",
  props:{
    type: String,
  },

  data(){
    return {
      show: true,

      // 表单参数
      form: {
        customerContacts:[{}]
      },
      // 表单校验
      rules: {
        name                          : [{ required: true, message: this.$t("客户名称不能为空"), trigger: "blur" }],
        'customerContacts.0.phoneNew' : [{ required: true, message: this.$t("手机号不能为空"), trigger: "blur" }],
        'customerContacts.0.name'     : [{ required: true, message: this.$t("联系人不能为空"), trigger: "blur" }],
        type                          : [{ required: true, message: this.$t("客户类别不能为空"), trigger: "blur" }],
        createTime                    : [{ required: true, message: this.$t("创建时间不能为空"), trigger: "blur" }],
        source                        : [{ required: true, message: this.$t("客户来源不能为空"), trigger: "blur" }],
        customerService               : [{ required: true, message: this.$t("客户经理不能为空"), trigger: "blur" }],
        status                        : [{ required: true, message: this.$t("客户状态不能为空"), trigger: "blur" }],
        founder                       : [{ required: true, message: this.$t("创建人不能为空"), trigger: "blur" }],
      },
      serviceUserList: [],
      countryList: [],
    }
  },
  watch:{
    show(){
      if(!this.show){
        this.$emit('close')
      }
    }
  },
  created() {
    if(this.type){
      this.$set(this.form, 'type', this.type)
    }
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
    getCountryListAll().then(r => {
      this.countryList = r.data
    })
  },
  methods: {
    open(){
      this.show = true
    },
    /** 取消按钮 */
    cancel() {
      this.show = false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 添加的提交
        createCustomer(this.form).then(res => {
          this.$modal.msgSuccess("新增成功");
          return getCustomerContactsSelect({customerId: res.data})
        }).then(res => {
          this.$emit('success', res.data.list[0])
        })
      });
    },
  }
}
</script>
<style lang="scss">
.quick-create-customer .el-form-item{
  margin-bottom: 22px;
}
</style>
