<template>
  <div class="sign-confirmation-content">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>签署文件</cy-info-title>
      <el-form-item label="签署确认" prop="signConfirm">
        <el-radio-group v-model="ruleForm.signConfirm" :disabled="signDisabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.signConfirm === 1"
        label="已签文件："
        style="width: 100%;"
        prop="salesContractApprovalFile"
        class="form-required"
      >
        <cy-upload
          ref="salesContractApprovalFile"
          :upload-params="{
            mouldName: 'salesContractApprovalFile'
          }"
          :file-data="ruleForm.salesContractApprovalFile"
          :upload-from-orange-status="true"
          placeholder="请上传已签文件"
          :disabled="signDisabled"
        />
      </el-form-item>
      <cy-info-title v-if="ruleForm.signConfirm === 1">签署人信息</cy-info-title>
      <div v-if="ruleForm.signConfirm === 1" class="table-box" style="width: 100%">
        <el-table :data="signeList" @current-change="handleSelectionChange">
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.type"
                placeholder="请选择类型："
                disabled
              >
                <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="name" label="姓名">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="请输入姓名"
                :disabled="signDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="联系方式">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.mobile"
                placeholder="请输入联系方式"
                :disabled="signDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="type === 'edit' && !signDisabled" prop="id" width="50px" label="选择" align="center">
            <!-- <template slot-scope="scope">
              <el-radio-group v-model="radio">
                <el-radio class="item" :label="scope.row.id"></el-radio>
              </el-radio-group>
            </template> -->
            <template slot-scope="scope">
              <el-radio
                v-model="scope.row.id"
              >
              </el-radio>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    signDisabled: {
      type: Boolean,
      default: false
    },
    signConfirmation: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      type: '',
      ruleForm: {
        signConfirm: '',
        salesContractApprovalFile: []
      },
      rules: {
        signConfirm: [{ required: true, message: '请选择是否签署确认', trigger: 'change' }],
        salesContractApprovalFile: [{ required: true, message: '请上传已签文件', trigger: 'change' }]
      },
      signeList: [],
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'constant'
    ])
  },
  watch: {
    signConfirmation: {
      handler(newV) {
        if (Object.keys(newV).length) {
          const { signeListDeatails, salesContractApprovalFile, signConfirm } = JSON.parse(JSON.stringify(newV))
          this.ruleForm.signConfirm = signConfirm === null || signConfirm === undefined ? '' : signConfirm
          this.ruleForm.salesContractApprovalFile = salesContractApprovalFile || []
          this.signeList = signeListDeatails || []
        }
        this.$store.dispatch('getConstant', ['salesContractPersonType'])
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['salesContractPersonType'])
    const { type } = this.$route.query
    this.type = type
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const { taskName } = this.$route.query
            const params = {
              signConfirm: this.ruleForm.signConfirm
            }
            if (this.ruleForm.signConfirm) {
              const salesContractApprovalFileList = this.$refs.salesContractApprovalFile.getFileLists
              if (!salesContractApprovalFileList) {
                this.$message.warning('请上传已签文件')
                return
              }
              if (this.multipleSelection.length === 0) {
                this.$message.warning('请至少选择一条签署人信息')
                return
              }
              params.fileIds = salesContractApprovalFileList.map(item => item.id)
              if (taskName === '信息审核') {
                const personInfoHistoryRefList = []
                personInfoHistoryRefList.push(this.multipleSelection)
                params.personInfoHistoryRefList = personInfoHistoryRefList
              } else if (taskName === '变更审核') {
                const personInfoHistoryRef = []
                personInfoHistoryRef.push(this.multipleSelection)
                params.personInfoHistoryRef = personInfoHistoryRef
              }
            }
            resolve(params)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sign-confirmation-content {
  .item .el-radio__label {
    display: none;
  }
}
</style>
