<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>
        供应商发货人
      </cy-info-title>
      <div class="table-box" style="width: 100%">
        <el-table :data="ruleForm.personInfoList">
          <el-table-column type="index" label="序号" />
          <el-table-column label="姓名" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`personInfoList[${scope.$index}].name`" style="width: 100%; margin: 15px 0;" 
                :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入姓名" disabled
                />
              </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}].idCard`" style="width: 100%; margin: 15px 0;"
                :rules="[{ required: true, message: '请输入身份证号', trigger: 'blur' }]">
                <el-input
                  v-model="scope.row.idCard"
                  placeholder="请输入身份证号" disabled
                />
              </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}].contact`" style="width: 100%; margin: 15px 0;"
                :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                <el-input
                  v-model="scope.row.contact"
                  placeholder="请输入联系方式" disabled
                />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    personnelDisabled: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        personInfoList: [
          {
            name: '',
            idCard: '',
            contact: ''
          }
        ]
      },
      rules: {},
      key: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          Object.keys(this.ruleForm).forEach(key => {
            this.ruleForm[key] = [ ...this.info.purchContractBuyerSellerList ]
          })
        }
      },
      immediate: true
    }
  }
}
</script>

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

}
</style>
