<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="taskName === '模板初审'" style="margin-bottom: 25px">审核条件</cy-info-title>
      <div v-if="taskName === '模板初审'" class="table-box" style="width: 100%; margin-bottom: 25px">
        <!-- height="calc(100vh - 0.85rem - 180px)" -->
        <el-table
          v-loading="loading"
          :data="tableData"
          :span-method="combineRow"
          :header-cell-style="handerMethod"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="institutionName" label="审核类别"></el-table-column>
          <el-table-column prop="name" label="审核类别"></el-table-column>
          <el-table-column prop="customerManager" label="审核要点"></el-table-column>
          <el-table-column prop="terms" label="放款条件"></el-table-column>
          <el-table-column type="selection" label="满足"></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">
          <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 style="float:left">审批意见</div>
        <div style="float: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="moneyDetailList">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="belongDepartment" label="审批意见" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.belongDepartment"
                placeholder="请输入审批意见"
                :disabled="disabled"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <span style="color: #5AC4FC; cursor: pointer;" @click="deleteInfo(scope.$index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    // disabled: {
    //   type: Boolean,
    //   default: false
    // },
    // deatailsInfo: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      key: 0,
      loading: false,
      tableData: [],
      multipleSelection: [],
      moneyDetailList: [],
      taskName: '',
      ruleForm: {
      },
      rules: {
      }
    }
  },
  watch: {
    // deatailsInfo: {

    // }
  },
  created() {
    const { taskName } = this.$route.query
    this.taskName = taskName
    this.fetchData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    fetchData() {
      const dataList = {
        list11: [
          {
            name: '形式审查',
            institutionName: '基础交易合同',
            customerManager: '1-3',
            terms: '1-4'
          },
          {
            name: '形式审查',
            institutionName: '基础交易合同',
            customerManager: '2-3',
            terms: '2-3'
          }
        ],
        list12: [
          {
            name: '内容审查',
            institutionName: '基础交易合同',
            customerManager: '3-3',
            terms: '3-4'
          },
          {
            name: '内容审查',
            institutionName: '基础交易合同',
            customerManager: '4-3',
            terms: '4-4'
          }
        ]
      }
      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
      }
      console.log(row)
    },
    addInfo() {

    },
    getSubmit() {
      // return new Promise((resolve, reject) => {
      //   this.$refs.ruleForm.validate(valid => {
      //     if(valid) {
      //       resolve(this.ruleForm)
      //     }else {
      //       reject()
      //     }
      //   })
      // })
    }
  }
}
</script>

<style  scoped>

</style>
