<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="ruleForm.personInfoList">
          <el-table-column prop="type" label="类型" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-form-item
                label=""
                :prop="`personInfoList[${scope.$index}].type`"
                style="width: 100%;"
                :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
              >
                <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>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="belongDepartment" label="姓名" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-form-item
                label=""
                :prop="`personInfoList[${scope.$index}].name`"
                style="width: 100%;"
                :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
              >
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入姓名"
                  :disabled="personnelDisabled"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-form-item
                label=""
                :prop="`personInfoList[${scope.$index}].mobile`"
                style="width: 100%;"
                :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]"
              >
                <el-input
                  v-model="scope.row.mobile"
                  placeholder="请输入联系方式"
                  :disabled="personnelDisabled"
                />
              </el-form-item>
            </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: {
        personInfoList: []
      },
      rules: {},
      key: 0,
      loading: false,
      personInfoList: []
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    personInfo: {
      handler(newV) {
        this.ruleForm.personInfoList = this.personInfo
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['salesContractPersonType'])
    setTimeout(() => {
      if (!this.personInfo.length) {
        const newObjects = [{ type: 'salesContractPersonType_sign', name: '', mobile: '' }, { type: 'salesContractPersonType_acceptance', name: '', mobile: '' }, { type: 'salesContractPersonType_settlement', name: '', mobile: '' }]
        this.ruleForm.personInfoList.unshift(...newObjects)
      }
    }, 200)
  },
  methods: {
    addInfo() {
      this.ruleForm.personInfoList.push({
        type: '',
        name: '',
        mobile: ''
      })
    },
    deleteInfo(index) {
      this.ruleForm.personInfoList.splice(index, 1)
    },
    getParams() {
      return new Promise((resolve, reject) => {
        const { type } = this.$route.query
        if (!this.ruleForm.personInfoList.length) {
          this.$message.warning('请添加人员信息')
          return
        }
        const signList = this.ruleForm.personInfoList.filter(item => item.type === 'salesContractPersonType_sign')
        const acceptanceList = this.ruleForm.personInfoList.filter(item => item.type === 'salesContractPersonType_acceptance')
        const settlementList = this.ruleForm.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 = {}
        if (type === 'change') {
          params.supplementPersonInfos = this.ruleForm.personInfoList
        } else {
          params.personInfoList = this.ruleForm.personInfoList
        }
        this.$refs.ruleForm.validate(flag => {
          if (flag) {
            resolve(params)
          } else {
            reject()
          }
        })
        // resolve(params)
      })
    },
    getParamsTemp() {
      return new Promise((resolve, reject) => {
        const { type } = this.$route.query
        const params = {}
        if (type === 'change') {
          params.supplementPersonInfos = this.ruleForm.personInfoList
          resolve(params)
        } else {
          params.personInfoList = this.ruleForm.personInfoList
          this.$refs.ruleForm.validate(flag => {
            if (flag) {
              resolve(params)
            } else {
              reject()
            }
          })
        }
      })
    }
  }
}
</script>

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

}
</style>
