<template>
  <ele-pro-table
    ref="linkTable"
    :columns="linkColumns"
    :datasource="tableLinkData"
    :toolkit="[]"
    class="el-form-box"
    :need-page="false"
  >
    <!-- 表头工具栏 -->
    <template v-slot:toolbar>
      <el-button type="primary" @click="addLink">添加</el-button>
      <el-button type="primary" @click="save">确认修改</el-button>
    </template>
    <template v-slot:action="{ row, $index }">
      <el-link
        type="danger"
        :underline="false"
        icon="el-icon-delete"
        @click="handleLinkDel(row, $index)"
        >删除
      </el-link>
    </template>
    <template v-slot:linkNameHeader="{ column }">
      <span>{{ column.label }}</span
      ><span style="color: red">*</span>
    </template>
    <template v-slot:mobilePhoneHeader="{ column }">
      <span>{{ column.label }}</span
      ><span style="color: red">*</span>
    </template>
    <template v-slot:statusHeader="{ column }">
      <span>{{ column.label }}</span
      ><span style="color: red">*</span>
    </template>

    <template v-slot:linkName="{ row }">
      <el-input
        v-model="row.linkName"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:mobilePhone="{ row }">
      <el-input
        v-model="row.mobilePhone"
        placeholder="请输入"
        maxlength="20"
      ></el-input>
    </template>
    <template v-slot:phone="{ row }">
      <el-input
        v-model="row.phone"
        placeholder="请输入"
        maxlength="20"
      ></el-input>
    </template>

    <template v-slot:wechat="{ row }">
      <el-input
        v-model="row.wechat"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>

    <template v-slot:email="{ row }">
      <el-input
        v-model="row.email"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:deptName="{ row }">
      <el-input
        v-model="row.deptName"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
    <template v-slot:post="{ row }">
      <el-input
        v-model="row.post"
        placeholder="请输入"
        maxlength="20"
      ></el-input>
    </template>
    <template v-slot:ifChief="{ row, $index }">
      <el-select
        v-model="row.ifChief"
        placeholder="请选择"
        class="w100"
        @change="
          (value) => {
            ifChiefChange(value, $index);
          }
        "
      >
        <el-option
          v-for="item in ifChiefList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template v-slot:isDefault="{ row, $index }">
            <el-select
              v-model="row.isDefault"
              placeholder="请选择"
              class="w100"
      
              
            >
              <el-option
                v-for="item in ifChiefList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
    <template v-slot:status="{ row }">
      <DictSelection
        dictName="联系人状态"
        v-model="row.status"
      ></DictSelection>
    </template>
    <template v-slot:remark="{ row }">
      <el-input
        v-model="row.remark"
        placeholder="请输入"
        maxlength="50"
      ></el-input>
    </template>
  </ele-pro-table>
</template>

<script>
import { contactDetail, contactUpdate } from '@/api/saleManage/contact';

import dictMixins from '@/mixins/dictMixins';
export default {
  mixins: [dictMixins],
  components: {},
  data() {
    return {
      tableLinkData: [],
      form: {},
      linkColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '姓名',
          prop: 'linkName',
          slot: 'linkName',
          action: 'linkName',
          headerSlot: 'linkNameHeader',
          align: 'center'
        },
        {
          label: '手机',
          prop: 'mobilePhone',
          slot: 'mobilePhone',
          action: 'mobilePhone',
          headerSlot: 'mobilePhoneHeader',
          align: 'center'
        },
        {
          label: '电话',
          prop: 'phone',
          slot: 'phone',
          action: 'phone',
          align: 'center'
        },

        {
          label: '微信号',
          prop: 'wechat',
          slot: 'wechat',
          action: 'wechat',
          align: 'center'
        },
        {
          label: '邮箱',
          prop: 'email',
          slot: 'email',
          action: 'email',
          align: 'center'
        },
        {
          label: '部门',
          prop: 'deptName',
          slot: 'deptName',
          action: 'deptName',
          align: 'center'
        },
        {
          label: '职务',
          prop: 'post',
          slot: 'post',
          action: 'post',
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          slot: 'status',
          action: 'status',
          headerSlot: 'statusHeader',
          align: 'center'
        },
        {
          label: '是否首要',
          prop: 'ifChief',
          slot: 'ifChief',
          action: 'ifChief',
          align: 'center'
        },
        {
          label: '是否默认收件人',
          prop: 'isDefault',
          slot: 'isDefault',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          action: 'remark',
          align: 'center'
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center'
        }
      ],
      ifChiefList: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ]
    };
  },
  methods: {
    async init(row) {
      this.form = row;
      this.tableLinkData = row.linkList;
      if (this.tableLinkData && this.tableLinkData.length > 0) {
        this.tableLinkData.forEach((e) => (e.status = e.status + ''));
      }
    },

    addLink() {
      this.tableLinkData.push({
        linkName: '',
        mobilePhone: '',
        phone: '',
        email: '',
        post: '',
        status: '',
        ifChief: 0,
        remark: ''
      });
    },
    ifChiefChange(value, idx) {
      if (value === 1) {
        this.tableLinkData.forEach((e) => (e.ifChief = 0));
        this.tableLinkData[idx].ifChief = 1;
      }
    },
    handleLinkDel(row, index) {
      this.tableLinkData.splice(index, 1);
    },
    save() {
      if (this.tableLinkData.length == 0) {
        this.$message.error('联系人信息至少有1条');
        return;
      }
      this.form.linkList = this.tableLinkData;

      contactUpdate(this.form)
        .then((res) => {
          this.$message.success('修改成功');
        })
        .catch((e) => {
          //this.loading = false;
        });
    }
  }
};
</script>
