<template>
  <div>
    <div v-for="(item, index) in contactForm.contactList" :key="item.employeeLeavelId + '.' + index">
      <el-row>
        <el-col :span="24" align="right" :class="index === 0 ? 'btn-bottom' : 'btn-del'">
          <auth-button v-if="index === 0" type="primary" size="medium" icon="iconfont iconxinzeng"  @click="showCreate"
                       :label="$t('enterpriseInfoManage.supplierInfoManage.createContact')"
                       :menuCode="menuId" perms="contactCreate" :openPerms="true"></auth-button>
          <auth-button v-if="!item.forbiddenStatus" type="danger" icon="iconfont iconshanchu" size="medium" @click="showDelEdit(index)"
                       :label="$t('enterpriseInfoManage.supplierInfoManage.delContact')"
                       :menuCode="menuId" perms="contactDelete" :openPerms="true"></auth-button>
        </el-col>
      </el-row>
      <div>
        <div class="header-title">
          <el-collapse v-model="activeNames" @change="collapseChange">
            <el-collapse-item :name="index * 2 + 1">
              <template slot="title">
                <i v-if="item.forbiddenStatus" :class="['iconfont', deleteReasonShow(index * 2 + 1) ? 'iconshanchu' : 'iconxinzeng1']"></i>
                <span>{{contactTitle(item.contactLevel1, item)}}</span>
                <span v-if="item.forbiddenStatus && editModel !== 'V'" class="redColor">
                  {{'(删除原因：'}}
                  <el-tooltip class="item" effect="dark" :content="item.deleteReason" placement="top">
                    <a>{{item.deleteReason.substr(0, 20)}}</a>
                  </el-tooltip>
                  {{item.deleteReason.length > 20 ? '...)' : ')'}}
                </span>
              </template>
              <contact-basic-info :item="item" :formRules="formRules" :proplabel="'contactList.' + index" :editModel="basicEditModel(item)" :index="index"
                                  :enterpriseId="contactForm.existingAccount.enterpriseId"></contact-basic-info>
            </el-collapse-item>
            <el-collapse-item :name="index * 2 + 2">
              <template slot="title">
                <i v-if="item.forbiddenStatus" :class="['iconfont', deleteReasonShow(index * 2 + 2) ? 'iconshanchu' : 'iconxinzeng1']"></i>
                <span >{{businessTitle(item.contactLevel1, item)}}</span>
                <span v-if="item.forbiddenStatus && editModel !== 'V'" class="redColor">
                  {{'(删除原因：'}}
                  <el-tooltip class="item" effect="dark" :content="item.deleteReason" placement="top">
                    <a>{{item.deleteReason.substr(0, 20)}}</a>
                  </el-tooltip>
                  {{item.deleteReason.length > 20 ? '...)' : ')'}}
                </span>
              </template>
              <contact-bus-info :item="item" :formRules="formRules" :proplabel="'contactList.' + index"
                                :optionList="optionList"
                                v-bind="$attrs"
                                :editModel="basicEditModel(item)" :index="index" :enterpriseType="enterpriseType"></contact-bus-info>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <del-hint-edit :visible.sync="showDelFlag" :menuId="menuId" :delStatus="true" :form="item" :editModel="delModel" @delSuccess="delSuccess"></del-hint-edit>
    <create-contact-edit :visible.sync="showDetail" :menuId="menuId" :enterpriseType="enterpriseType" :form="item" :editModel="showModel" :regMsg="regMsg" @createSuccess="createSuccess"></create-contact-edit>
  </div>
</template>

<script>
import { authButton, SelectDictionary } from 'newepoch-components'
import SelectDepartment from '@/components/element/enterpriseInfoManage/SelectDepartmentModify.vue'
import contactBasicInfo from './contactBasicInfo.vue'
import contactBusInfo from './contactBusInfo.vue'
import DelHintEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/delEnterpriseEdit.vue'
import CreateContactEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/createContactEdit.vue'
export default {
  name: 'employeeItem',
  components: {
    authButton,
    SelectDictionary,
    SelectDepartment,
    contactBasicInfo,
    contactBusInfo,
    DelHintEdit,
    CreateContactEdit
  },
  props: {
    surplusCount: {
      type: Number
    },
    regMsg: {
      type: [Object]
    },
    optionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    editModel: {
      type: [Number, String],
      required: true
    },
    menuId: {
      type: String,
      default: null
    },
    contactForm: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    },
    formRules: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    },
    enterpriseType: {
      type: String,
      default: function () {
        return null
      }
    },
    form: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      showCloseView: [],
      showDelFlag: false,
      item: {},
      delModel: 'C',
      showModel: 'C',
      showDetail: false
    }
  },
  computed: {
    deleteReasonShow () {
      return (index) => {
        return this.showCloseView.some(it => it === index)
      }
    },
    basicEditModel () {
      return (item) => {
        return item.forbiddenStatus ? 'V' : 'E'
      }
    },
    activeNames: {
      get () {
        if (this.contactForm.contactList.length > 0) {
          let arr = []
          for (let i = 0; i < this.contactForm.contactList.length; i++) {
            if (!this.contactForm.contactList[i].forbiddenStatus) {
              arr.push(i * 2 + 1)
              arr.push(i * 2 + 2)
            }
          }
          return arr
        } else {
          return []
        }
      },
      set (val) {
        this.$emit('update:activeNames', val)
      }
    }
  },
  methods: {
    collapseChange (data) {
      this.showCloseView = data
    },
    createSuccess (contactItem) {
      this.$emit('createSuccess', contactItem)
    },
    // 新建联系人
    showCreate () {
      let data = {}
      data.account = this.contactForm.account
      data.enterpriseName = this.contactForm.enterpriseName
      data.employeeAccountType = this.contactForm.employeeAccountType
      data.enterpriseId = this.form.enterpriseId
      // 企业标签
      data.tagCode = this.form.tagCode
      data.accountKeyId = this.form.keyId
      // 账号ID
      data.accountId = this.form.accountId
      data.resTemplate = this.contactForm.resTemplate
      data.flag = 1
      data.businessStatus = this.contactForm.businessStatus
      data.calendarType = 0
      data.reload = this.reload
      data.optionList = this.optionList
      // this.reload = !this.reload
      this.showModel = 'C'
      this.item = Object.assign({ loading: false }, data)
      this.showDetail = true
    },
    // 删除联系人
    showDelEdit (index) {
      console.log(this.surplusCount)
      if (this.surplusCount === 1) {
        this.warning(this.$i18n.messages[this.$i18n.locale].common.deleteInfo)
      } else {
        this.delModel = 'C'
        this.item = Object.assign({}, { keyId: this.form.keyId, employeeId: this.contactForm.contactList[index].employeeKeyId, enterpriseId: this.contactForm.enterpriseId })
        this.showDelFlag = true
      }
    },
    // 删除联系人成功
    delSuccess () {
      this.$emit('delSuccess')
    },
    // 动态表单--联系人基本信息表头
    contactTitle (index, item) {
      let common = this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage
      return index + common.contactBasicInfo
    },
    // 动态表单--联系人业务信息表头
    businessTitle (index, item) {
      let common = this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage
      return index + common.contactBusInfo
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/contactInfoEdit.scss';
</style>
