<style>
  .Contacts .add-contacts {
    text-align: right;
    padding: 0 0 20px 0;
  }

  .Contacts td {
    font-size: 12px;
  }
</style>
<template>
  <div class="Contacts">
    <div class="add-contacts">
      <el-button icon="el-icon-plus" class="crm-btn query-btn crm-btn-mini margin-right0" @click="addContactsShow=true">
        新建联系人</el-button>
    </div>
    <el-table v-loading="loading" stripe ref="multipleTable" :data="ContactList" tooltip-effect="dark"
      style="width: 100%" row-class-name="font-size-12">
      <el-table-column prop="ContactName" label="姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ContactPhone" label="手机" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ContactDutyStr" label="职务" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="IsFirstContact" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <p v-if="scope.row.IsFirstContact === 1" class="font-color-warning">首要联系人</p>
          <p v-else-if="IsRead === 0 &&　scope.row.IsFirstContact !== 1" class="font-color-link cp"
            @click="SetFirstContact(scope)">设为首要联系人</p>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="addContactsShow">
      <addContacts :ID="CustomerId" @addContactsOk="addContactsOk" />
    </div>
  </div>
</template>
<script>
  import addContacts from "../dialogModel/addContacts";
  export default {
    components: {
      addContacts
    },
    props: {
      CustomerId: {
        type: Number,
        default: 0
      },
      IsRead: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        loading: false,
        addContactsShow: false,
        ContactList: [],
      };
    },
    watch: {
      CustomerId: {
        handler(val, oldVal) {
          this.GetContactByCustomerID()
        },
        deep: true
      }
    },
    mounted() {
      let $this = this
      this.MsgBus.$on('closeaddContacts', function () {
        $this.addContactsShow = false
      })
      this.GetContactByCustomerID()
    },
    methods: {
      addContactsOk() {
        this.GetContactByCustomerID()
      },
      SetFirstContact(scope) {
        this.apipost('/api/Customer/SetFirstContact', {
          CustomerId: this.CustomerId,
          ID: scope.row.ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('操作成功');
            this.GetContactByCustomerID();
          }
        })
      },
      GetContactByCustomerID() {
        if (this.CustomerId === 0) return
        this.loading = true
        this.apipost('/api/Customer/GetContactByCustomerID', {
          CustomerId: this.CustomerId
        }, res => {
          if (res.data.resultCode == 1) {
            this.loading = false
            this.ContactList = res.data.data
          }
        })
      },
    }
  }
</script>