<template>
  <div class="contract-conclusion">
    <cy-info-title>结论</cy-info-title>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="rule-form-orange">
      <el-form-item label="结论" prop="conclusion" class="one-form-item">
        <el-radio-group v-model="ruleForm.conclusion" :disabled="disabled">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
          <el-radio label="vite">否决</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="ruleForm.conclusion === 'pass'">
        <el-form-item label="合同签署方式" prop="contractSignMethod" class="one-form-item">
          <el-radio-group v-model="ruleForm.contractSignMethod" :disabled="disabled">
            <el-radio :label="1">线上电子签</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="线上签署文件" prop="electronicSign" style="width: 100%">
          <el-checkbox-group v-model="ruleForm.electronicSign" :disabled="disabled">
            <el-checkbox v-for="(item, index) in signWayList" :key="index" :label="item.code" name="type">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传合同文件" prop="doUpload" class="one-form-item">
          <el-radio-group v-model="ruleForm.doUpload" :disabled="disabled">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="合同制作意见" prop="suggestion" class="one-form-item">
          <el-input v-model="ruleForm.suggestion" :disabled="disabled" placeholder="请输入合同制作意见" clearable />
        </el-form-item>
      </template>
      <template v-if="ruleForm.conclusion === 'pass' && ruleForm.doUpload">
        <el-form-item style="width: 100%">
          <cy-comm-table
            ref="commTable"
            :columns="columns"
            :data="tableData"
            :count="0"
          />
        </el-form-item>
      </template>

    </el-form>
  </div>
</template>

<script>
import { getSignContract, getSignFiles } from '@/api/financingManage'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        conclusion: '',
        contractSignMethod: 1,
        doUpload: '',
        suggestion: '',
        electronicSign: []
      },
      rules: {
        conclusion: [
          { required: true, message: '请选择结论', trigger: 'change' }
        ],
        contractSignMethod: [
          { required: true, message: '请选择合同签署方式', trigger: 'change' }
        ],
        electronicSign: [
          { required: true, message: '请选择线上签署文件', trigger: 'change' }
        ],
        doUpload: [
          { required: true, message: '请选择上传合同文件', trigger: 'change' }
        ]
      },
      tableData: [
        { contractName: '', contractType: '', signatoryNameList: [], fileStorage: [] }
      ],
      signList: [],
      signWayList: []
    }
  },
  computed: {
    columns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '合同名称',
          render: (h, row) => {
            return (<el-input v-model={row.contractName} disabled={this.disabled} placeholder='请输入合同名称'></el-input>)
          }
        },
        {
          label: '合同类型',
          render: (h, row, index) => {
            return (<el-radio-group v-model={row.contractType} disabled={this.disabled} onChange={() => { this.contractTypeChange(index) }}>
              <el-radio label='master'>主合同</el-radio>
              <el-radio label='annex'>附件</el-radio>
            </el-radio-group>)
          }
        },
        {
          label: '签署人',
          render: (h, row) => {
            const item = this.filterSignList(row.contractType).map(item => <el-checkbox label={item.name} name='checkbox'>{item.name}</el-checkbox>)
            return <el-checkbox-group disabled={this.disabled} v-model={row.signatoryNameList}>
              {item}
            </el-checkbox-group>
          }
        },
        {
          label: '签署文件',
          render: (h, row, index) => {
            return <cy-upload
              ref={`fileStorage${index}`}
              uploadParams={{}}
              fileData={row.fileStorage}
              disabled={this.disabled}
              limit={1}
              defaultDesc='请上传签署文件'
            />
          }
        },
        {
          label: '操作',
          show: !this.disabled,
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '新增',
                category: 'add'
              },
              {
                msg: '删除',
                category: 'delete',
                number: 0
              }
            ]
            const options = btnList.map(item => {
              return (
                item.number !== index && <span class='table-icon-box' style='font-size: 12px;' onClick={() => { this.handlerOperate(item.category, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ]
    },
    filterSignList() {
      return (type) => {
        return this.signList.filter((item) => item.contractType === type)
      }
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { conclusion, doUpload, suggestion, electronicSign, uploadContractInfoList } = JSON.parse(JSON.stringify(newV))
        this.ruleForm = {
          conclusion,
          contractSignMethod: 1,
          doUpload,
          suggestion,
          electronicSign
        }
        if (uploadContractInfoList && uploadContractInfoList.length) {
          this.tableData = uploadContractInfoList.map(item => {
            item.fileStorage = [item.fileStorage]
            return item
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getSignList()
    this.getSignFilesList()
  },
  methods: {
    getSignList() {
      const { id } = this.$route.params
      getSignContract({ id }).then(({ data }) => {
        this.signList = data
      })
    },
    getSignFilesList() {
      getSignFiles({ contractInfoId: this.detailsInfo.id }).then(({ data }) => {
        this.signWayList = data
      })
    },
    handlerOperate(type, index) {
      if (type === 'add') {
        this.tableData.push(
          { contractName: '', contractType: '', signatoryNameList: [], fileStorage: [] }
        )
      } else if (type === 'delete') {
        this.tableData.splice(index, 1)
      }
    },
    contractTypeChange(index) {
      this.tableData[index].signatoryNameList = []
    },
    async getParameter(type) {
      const { doUpload, conclusion } = this.ruleForm
      var uploadContractInfoList = []
      if (conclusion === 'pass' && doUpload) {
        uploadContractInfoList = this.tableData.map((item, index) => {
          const { contractName, contractType, signatoryNameList } = item
          const uploadContractSignatories = this.signList.filter(item => item.contractType === contractType && signatoryNameList.includes(item.name))
          return {
            contractName,
            contractType,
            fileStorageId: this.$refs.commTable.$refs[`fileStorage${index}`].getFileLists.map(item => item.id)[0],
            uploadContractSignatories
          }
        })
      }
      const params = {
        ...this.ruleForm,
        uploadContractInfoList
      }
      return params
    },
    getParams(type) {
      return new Promise((resolve, reject) => {
        if (type === 'temp') {
          resolve(this.getParameter(type))
        } else {
          this.$refs.ruleForm.validate(valid => {
            if (valid) {
              resolve(this.getParameter(type))
            } else {
              return false
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
