<template>
  <!-- 新建联系人弹窗 -->
  <el-dialog append-to-body :title="title" :visible.sync="contactVisible" @close="contactClose">
    <el-form ref="contactForm" :model="contactForm" :rules="contactRules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="cuctName">
            <el-input v-model="contactForm.cuctName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="custName">
            <el-input v-model="contactForm.custName" disabled placeholder="请输入客户名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号码" prop="telephone">
            <el-input v-model="contactForm.telephone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="contactForm.wechat" placeholder="请输入微信" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="contactForm.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务" prop="postion">
            <el-input v-model="contactForm.postion" placeholder="请输入职务" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否关键决策人" prop="policy">
            <el-radio-group v-model="contactForm.policy">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="cuctGender">
            <el-radio-group v-model="contactForm.cuctGender">
              <el-radio label="10">男</el-radio>
              <el-radio label="20">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="contactForm.remark"
          maxlength="500"
          placeholder="请输入备注"
          resize="none"
          :rows="5"
          show-word-limit
          type="textarea" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button v-show="contactForm.id" type="primary" @click="contactEdit">保存</el-button>
      <el-button v-show="!contactForm.id" type="primary" @click="contactSave">保存</el-button>
      <el-button @click="contactVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import to from 'await-to-js'
  import api from '@/api/customer'

  export default {
    data() {
      var validateTel = (rule, value, callback) => {
        const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (value === '') {
          callback(new Error('请输入手机号码'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确手机号码'))
        } else {
          callback()
        }
      }
      return {
        title: '新增联系人',
        contactVisible: false,
        contactForm: {
          custId: '', //客户ID  (必传)
          custName: '', //客户名称
          cuctName: '', //联系人名字
          cuctGender: '10', //性别(10男20女)
          postion: '', //职位
          telephone: '', //电话
          wechat: '', //微信
          email: '', //邮箱
          remark: '', //备注
          policy: 0, //是否决策人 0 不是  1 是
        },
        contactRules: {
          cuctName: [{ required: true, trigger: 'blur', message: '请输入联系人姓名' }],
          custName: [{ required: true, trigger: 'blur', message: '请输入客户名称' }],
          telephone: [{ required: true, trigger: 'blur', validator: validateTel }],
        },
      }
    },
    methods: {
      // 联系人新建
      async contactSave() {
        let params = { ...this.contactForm }
        const [err, res] = await to(api.createContact(params))
        if (err) return
        this.$message.success(res.msg)
        this.contactVisible = false
        this.$emit('contactSave')
      },
      // 联系人编辑
      async contactEdit() {
        let params = { ...this.contactForm }
        const [err, res] = await to(api.updateContact(params))
        if (err) return
        this.$message.success(res.msg)
        this.contactVisible = false
        this.$emit('contactSave')
      },
      contactClose() {
        this.$refs.contactForm.resetFields()
        this.contactForm.custId = ''
      },
    },
  }
</script>

<style></style>
