<template>
  <!-- <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body> -->
  <div id="CustomersContact" class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="auto"
      :size="size"
      :disabled="this.operatingState == 'Browse'"
    >
      <el-divider content-position="left">
        <span style="width: 50px; height: 40px; font-size: 18px">基本信息</span>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="系统自动生成编码"
              readonly
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gander">
            <el-select v-model="form.gander" placeholder="">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属客户" prop="customerName">
            <dr-popover-select
              v-model="form.customerName"
              title="客户"
              type="CUSTOMER_PARAM_ZT"
              :dataMapping="{
                customer: 'id',
                customerName: 'name',
              }"
              :source.sync="form"
              :disabled="true"
            >
            </dr-popover-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人分类" prop="contactClassification">
            <el-select v-model="form.contactClassification" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_contact_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              clearable
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="籍贯" prop="birthplace">
            <el-input v-model="form.birthplace" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="兴趣爱好" prop="hobby">
            <el-input v-model="form.hobby" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="state">
            <el-select v-model="form.state" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_contact_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <dev style="width: 50px; height: 40px; font-size: 18px">工作信息</dev>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="上级联系人" prop="superiorContactName">
            <dr-popover-select
              v-model="form.superiorContactName"
              title="上级联系人"
              type="LINKMAN_PARAM"
              :dataMapping="{
                superiorContact: 'id',
                superiorContactName: 'name',
              }"
              :source.sync="form"
              :queryParams="additionalCondition"
            >
            </dr-popover-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任职科室" prop="section">
            <el-select v-model.trim="form.section" placeholder="" filterable>
              <el-option
                v-for="dict in dict.type.mk_bo_section"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务" prop="position">
            <el-select v-model="form.position" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_position"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职称" prop="jobTitle">
            <el-select v-model="form.jobTitle" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_job_title"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="决策力" prop="power">
            <el-select v-model="form.power" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_power"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支持度" prop="support">
            <el-select v-model="form.support" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_support"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="擅长领域" prop="fieldExpertise">
            <el-select v-model="form.fieldExpertise" placeholder="">
              <el-option
                v-for="dict in dict.type.mk_bo_field_expertise"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键决策人" prop="decisionMaker">
            <el-select v-model="form.decisionMaker" placeholder="">
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-divider content-position="left">
        <dev style="width: 50px; height: 40px; font-size: 18px">联系信息</dev>
      </el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="form.telephone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="mail">
            <el-input v-model="form.mail" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最佳拜访时间" prop="visitTime">
            <el-input v-model="form.visitTime" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最佳拜访地点" prop="visitPlace">
            <el-input v-model="form.visitPlace" />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-tabs v-model="activeName" v-if="this.operatingState != 'Insert'">
        <el-tab-pane label="学历信息" name="first">
          <EducationList :key="timer" :supForm="this.row" />
        </el-tab-pane>
        <el-tab-pane label="社会关系" name="second">
          <RelationshipList :key="timer" :supForm="this.row" />
        </el-tab-pane>
      </el-tabs>
      <div class="md-auditInfo">
        <el-divider content-position="left">
          <dev style="width: 50px; height: 40px; font-size: 18px">其它信息</dev>
        </el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="form.createByName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="form.createTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改人">
              <el-input v-model="form.updateByName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间">
              <el-input v-model="form.updateTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <el-button
        :size="size"
        type="primary"
        @click="submitForm"
        v-if="this.operatingState != 'Browse'"
        :disabled="submitButtonEditStatus"
        >确 定</el-button
      >
      <el-button :size="size" @click="cancel">取 消</el-button>
    </div>
  </div>
  <!-- </el-dialog> -->
</template>

<script>
import {
  listContact,
  getContact,
  delContact,
  addContact,
  updateContact,
} from "@/api/business/spd/bo/contact";
// import EducationList from '../education/educationList.vue';
// import RelationshipList from '../relationship/relationshipList.vue';

export default {
  name: "CustomersContact",
  props: [
    "operatingState",
    "row",
    "disable",
    "state",
    "customersId",
    "customersName",
    "customersCode",
  ],
  model: {
    prop: "isAdd0",
    event: "jugislist",
  },
  dicts: [
    "sys_user_sex",
    "mk_bo_contact_state",
    "mk_bo_section",
    "mk_bo_position",
    "mk_bo_job_title",
    "mk_bo_power",
    "mk_bo_support",
    "mk_bo_field_expertise",
    "sys_yes_no",
    "mk_bo_contact_type",
  ],
  components: {
    EducationList: () => import("../education/educationList.vue"),
    RelationshipList: () => import("../relationship/relationshipList.vue"),
  },
  data() {
    return {
      size: "mini",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 联系人管理表格数据
      contactList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        telephone: null,
        customerName: null,
      },
      // 表单参数
      form: {
        id: null,
        code: null,
        name: null,
        gander: null,
        customer: null,
        customer_name: null,
        customer_code: null,
        contact_classification: null,
        birthday: null,
        birthplace: null,
        hobby: null,
        state: null,
        superior_contact_name: null,
        superior_contact: null,
        section: null,
        position: null,
        job_title: null,
        power: null,
        support: null,
        field_expertise: null,
        decision_maker: null,
        telephone: null,
        mail: null,
        address: null,
        visit_time: null,
        visit_place: null,
        organization: null,
        organization_name: null,
        area: null,
        department: null,
        department_name: null,
        department_code: null,
        create_by: null,
        create_time: null,
        update_by: null,
        update_time: null,
        del_flag: null,
        bo_id: null,
        zt_id: null,
      },
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        gander: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "blur",
          },
        ],
        customerName: [
          {
            required: true,
            message: "所属客户名称不能为空",
            trigger: "blur",
          },
        ],
        state: [
          {
            required: true,
            message: "状态不能为空",
            trigger: "blur",
          },
        ],
        section: [
          {
            required: true,
            message: "任职科室不能为空",
            trigger: "blur",
          },
        ],
        position: [
          {
            required: true,
            message: "职务不能为空",
            trigger: "blur",
          },
        ],
        jobTitle: [
          {
            required: true,
            message: "职称不能为空",
            trigger: "blur",
          },
        ],
        power: [
          {
            required: true,
            message: "决策力不能为空",
            trigger: "blur",
          },
        ],
        decisionMaker: [
          {
            required: true,
            message: "关键决策人不能为空",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            required: true,
            message: "联系电话不能为空",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      //重新加载子组件参数
      timer: "",
      activeName: "first",
      //确定按钮是否可点
      submitButtonEditStatus: false,
    };
  },
  created() {
    this.initialization();
  },
  methods: {
    // 初始化
    initialization() {
      // 客户数据赋值
      this.form.customer = this.customersId;
      this.form.customerCode = this.customersCode;
      this.form.customerName = this.customersName;
      if (this.operatingState == "Browse") {
        this.handleBrowse(this.row);
      } else if (this.operatingState == "Update") {
        this.handleUpdate(this.row);
      }
    },
    // 取消按钮
    cancel() {
      this.$emit("jugislist", false);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.operatingState = "Update";
      const id = row.id || this.ids;
      getContact(id).then((response) => {
        this.form = response.data;
        this.timer = new Date().getTime();
      });
    },
    /** 查看按钮操作 */
    handleBrowse(row) {
      const id = row.id || this.ids;
      getContact(id).then((response) => {
        this.form = response.data;
        this.operatingState = "Browse";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.submitButtonEditStatus = true;
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            let { code, msg } =
              this.form.id != null
                ? await updateContact(this.form)
                : await addContact(this.form);
            if (code == 200) {
              this.$notify.success(msg);
              this.cancel();
              this.$parent.handleCheck(this.customersId);
            }
          } catch (error) {
          } finally {
            this.submitButtonEditStatus = false;
          }
        } else {
          this.submitButtonEditStatus = false;
        }
      });
    },
    additionalCondition() {
      return {
        parame: {
          customer: this.form.customer ? this.form.customer : "xxx",
        },
      };
    },
  },
};
</script>
