<template>
  <div class="template-review-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title v-if="isPreliminary" style="margin-bottom: 25px">审核条件</cy-info-title>
      <div v-if="isPreliminary" class="table-box" style="width: 100%; margin-bottom: 25px">
        <!-- height="calc(100vh - 0.85rem - 180px)" -->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          :span-method="combineRow"
          :header-cell-style="handerMethod"
        >
          <el-table-column prop="institutionName" label="审核类别" width="120"></el-table-column>
          <el-table-column prop="name" label="审核类别" width="140"></el-table-column>
          <el-table-column prop="approvalPoint" label="审核要点"></el-table-column>
          <el-table-column prop="loanCondition" label="放款条件"></el-table-column>
          <el-table-column prop="agree" label-class-name="selectionRes" width="80">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.agree"
                :true-label="1"
                :false-label="0"
                :disabled="disabled"
              >
              </el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <cy-info-title>审批结论</cy-info-title>
      <el-form-item label="审批结论" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.approvalConclusion" :disabled="disabled">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
        </el-radio-group>
      </el-form-item>
      <cy-info-title style="margin-bottom: 25px; display: block;">
        审批意见
        <div v-if="!disabled" slot="right">
          <el-button type="primary" style="float:right" @click="addInfo">增加</el-button>
        </div>
      </cy-info-title>
      <div class="table-box" style="width: 100%">
        <el-table :data="conclusionList">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="comments" label="审批意见" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.comments"
                placeholder="请输入审批意见"
                :disabled="disabled"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column v-if="!disabled" label="操作" width="100">
            <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 { getReviewConditions } from '@/api/salesContractManagement/salesContractManagement'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatailsInfo: {
      type: Object,
      default: () => {}
    },
    businessName: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      key: 0,
      loading: false,
      tableData: [],
      multipleSelection: [],
      moneyDetailList: [],
      taskName: '',
      conclusionList: [],
      ruleForm: {
        approvalConclusion: 'pass'
      },
      rules: {
        approvalConclusion: [
          { required: true, message: '请选择审批结论', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    isPreliminary() {
      return this.taskName === '模板初审' || this.taskName === '变更初审' || this.businessName === '模板初审' || this.businessName === '变更初审'
    }
  },
  watch: {
    deatailsInfo: {
      handler(newV) {
        if (this.deatailsInfo && Object.keys(newV).length) {
          const { approvalConclusion, comments, approvalConditions } = JSON.parse(JSON.stringify(newV))
          this.ruleForm.approvalConclusion = approvalConclusion
          setTimeout(() => {
            if (this.taskName === '模板初审' || this.taskName === '变更初审' || this.businessName === '模板初审' || this.businessName === '变更初审') {
              const formalityExaminationList = approvalConditions.filter(item => item.approvalType === 0)
              const contentAdvisorList = approvalConditions.filter(item => item.approvalType === 1)
              formalityExaminationList.forEach(item => {
                item['institutionName'] = '基础交易合同'
                item['name'] = '形式审查'
              })
              contentAdvisorList.forEach(item => {
                item['institutionName'] = '基础交易合同'
                item['name'] = '内容审查'
              })
              const dataList = {}
              dataList.list1 = formalityExaminationList
              dataList.list2 = contentAdvisorList
              Object.keys(dataList).forEach((item) => {
                const len = dataList[item].length
                dataList[item].forEach((_item, _index) => {
                  _item.merge = _index !== 0 ? 0 : len
                  this.tableData.push(_item)
                })
              })
            }
          }, 100)
          comments.map(data => {
            this.conclusionList.push({
              comments: data
            })
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const { taskName, type } = this.$route.query
    this.taskName = taskName
    if (type === 'edit' && (taskName === '模板初审' || taskName === '变更初审')) {
      this.getReviewConditions()
    }
  },
  methods: {
    getReviewConditions() {
      getReviewConditions().then((data) => {
        const formalityExaminationList = data.data.filter(item => item.approvalType === 0)
        const contentAdvisorList = data.data.filter(item => item.approvalType === 1)
        formalityExaminationList.forEach(item => {
          item['institutionName'] = '基础交易合同'
          item['name'] = '形式审查'
        })
        contentAdvisorList.forEach(item => {
          item['institutionName'] = '基础交易合同'
          item['name'] = '内容审查'
        })
        const dataList = {}
        dataList.list1 = formalityExaminationList
        dataList.list2 = contentAdvisorList
        Object.keys(dataList).forEach((item) => {
          const len = dataList[item].length
          dataList[item].forEach((_item, _index) => {
            _item.merge = _index !== 0 ? 0 : len
            this.tableData.push(_item)
          })
        })
      })
    },
    combineRow({ row, column, rowIndex, columnIndex }) {
      const dataLength = this.tableData.length
      const _row = row.merge
      const _col = _row > 0 ? 1 : 0
      if (columnIndex === 0) {
        return {
          rowspan: dataLength,
          colspan: rowIndex === 0 ? 1 : 0
        }
      }
      if (columnIndex === 1) {
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    handerMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 1) {
      //   return { color: '#fff' }
      // }
      if (columnIndex === 0) {
        return { borderRight: '0' }
      }
      if (row[0]) {
        row[0].colSpan = 2
      }
      if (row[1]) {
        row[1].colSpan = 0
      }
    },
    addInfo() {
      this.conclusionList.push({
        comments: ''
      })
    },
    deleteInfo(index) {
      this.conclusionList.splice(index, 1)
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            resolve(this.ruleForm)
          } else {
            reject()
          }
        })
      })
    },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const { id, taskId } = this.$route.query
            if (this.ruleForm.approvalConclusion === 'back') {
              if (!this.conclusionList.length) {
                this.$message.warning('请添加审批意见')
                return
              }
            }
            if (this.conclusionList.length) {
              for (let i = 0; i < this.conclusionList.length; i++) {
                const { comments } = this.conclusionList[i]
                if (!comments) {
                  this.$message.warning(`第${i + 1}条审批意见不能为空`)
                  return
                }
              }
            }
            const params = {
              Loading: true,
              approvalConditions: this.tableData,
              approvalConclusion: this.ruleForm.approvalConclusion,
              cSalesContractManagementId: id,
              taskId
            }
            params.comments = this.conclusionList.map((item, index) => {
              return item.comments
            })
            resolve(params)
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

<style>
.selectionRes .cell:before {
  content: '满足';
  position: absolute;
  right: 11px;
}
</style>
