<template>
  <div class="personne-information">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>
        人员信息
        <template v-if="!personnelDisabled" slot="right">
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer" @click="addInfo">添加</span>
        </template>
      </cy-info-title>
      <div class="table-box" style="width: 100%">
        <el-table :data="personInfoList">
          <el-table-column prop="type" label="类型" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.type"
                placeholder="请选择类型："
                :disabled="personnelDisabled"
              >
                <el-option
                  v-for="item in constant.salesContractPersonType"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="belongDepartment" label="姓名" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="请输入姓名"
                :disabled="personnelDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column label="联系方式" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.mobile"
                placeholder="请输入联系方式"
                :disabled="personnelDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="!personnelDisabled" label="操作">
            <template slot-scope="scope">
              <span style="color: #FE7D0B; cursor: pointer;" @click="deleteInfo(scope.$index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    personnelDisabled: {
      type: Boolean,
      default: false
    },
    personInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ruleForm: {},
      rules: {},
      key: 0,
      loading: false,
      personInfoList: []
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    personInfo: {
      handler(newV) {
        this.personInfoList = this.personInfo
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['salesContractPersonType'])
    if (!this.personInfo.length) {
      const newObjects = [{ type: 'salesContractPersonType_sign', name: '', mobile: '' }, { type: 'salesContractPersonType_acceptance', name: '', mobile: '' }, { type: 'salesContractPersonType_settlement', name: '', mobile: '' }]
      this.personInfoList.unshift(...newObjects)
    }
  },
  methods: {
    addInfo() {
      this.personInfoList.push({
        type: '',
        name: '',
        mobile: ''
      })
    },
    deleteInfo(index) {
      this.personInfoList.splice(index, 1)
    },
    getParams() {
      return new Promise((resolve, reject) => {
        if (!this.personInfoList.length) {
          this.$message.warning('请添加人员信息')
          return
        }
        const signList = this.personInfoList.filter(item => item.type === 'salesContractPersonType_sign')
        const acceptanceList = this.personInfoList.filter(item => item.type === 'salesContractPersonType_acceptance')
        const settlementList = this.personInfoList.filter(item => item.type === 'salesContractPersonType_sign')
        if (!signList.length) {
          this.$message.warning('请添加一条合同签署人信息')
          return
        }
        if (!acceptanceList.length) {
          this.$message.warning('请添加一条验收经办人信息')
          return
        }
        if (!settlementList.length) {
          this.$message.warning('请添加一条结算经办人信息')
          return
        }
        const params = {
          personInfoList: this.personInfoList
        }
        resolve(params)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.personne-iInformation {

}
</style>
