<!-- 反馈履历子组件 -->
<template>
  <div class="feedBackTimeSub">
    <dym-form :componentList="componentList" :formValue="form"></dym-form>
    <div class="feedbackdiv" v-if="form.feedbackHistoryRelationDtos.length > 0">
      <externalTransition class="feedbackexternal" :isCollapse="true" :title="$t('effectDealFeedBackMain.relationResolution')">
        <template slot="transition">
          <data-table class="feedbackTable" :sourceData.sync="form.feedbackHistoryRelationDtos" :columns="columns" :showPage="showPage" maxHeight="400px" :span-method="objectSpanMethod">
          <template slot="practicableSuggestion" slot-scope="scope">
            <span-plus :index="scope.data.$index" :text="scope.data.row.practicableSuggestion"></span-plus>
          </template>
          <template slot="relationResolution" slot-scope="scope">
            <span-plus :index="scope.data.$index" :text="scope.data.row.relationResolution"></span-plus>
          </template>
            <template slot="relationFileIds" slot-scope="scope">
              <btn-batch-download :disabled="scope.data.row.relationFileIds.length === 0" size="small" :title="$t('common.downLoad')" :fileID="scope.data.row.relationFileIds" :downloadFileName="scope.data.row.relationFileIds.length > 1 ? $t('coordManageMain.relatedAttachment') + '.zip':null"></btn-batch-download>
            </template>
          </data-table>
        </template>
      </externalTransition>
    </div>
  </div>
</template>

<script>
import { DataTable, dymForm, btnBatchDownload, SpanPlus } from 'newepoch-components'
import * as format from '@/filters/index'
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
export default {
  components: { DataTable, dymForm, externalTransition, btnBatchDownload, SpanPlus },
  props: {
    form: {
      required: true,
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      showPage: false,
      table: [],
      componentList: [
        {
          // 律所意见
          value: 'feedbackQuestionContent',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.replyLawContent,
          type: 'textarea',
          labelWidth: '120px',
          name: 'feedbackQuestionContent',
          autosize: { minRows: 4 },
          cols: [24, 24, 24, 24],
          prop: 'feedbackQuestionContent'
        }, {
          // 合规意见
          value: 'practicableSuggestion',
          disabled: true,
          componentName: 'el-input',
          type: 'textarea',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.practicableSuggestic,
          labelWidth: '120px',
          name: 'practicableSuggestion',
          autosize: { minRows: 4 },
          cols: [24, 24, 24, 24],
          prop: 'practicableSuggestion'
        }
      ],
      columns: [
        {
          // 问题序号
          prop: 'qusetionNumber',
          align: 'center',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.feedbackQustionNo
        }, {
          // 合规落实
          prop: 'practicableSuggestion',
          align: 'left',
          width: '160px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.practicableSuggeste,
          slot: true
        }, {
          // 相关方
          prop: 'relationType',
          align: 'center',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.relation,
          format (row) {
            if (row.relationChargeUserName && row.relationChargeUserName !== '') {
              return format.formatDict(row.relationType, 'AUDIT_OUT_RELATION_TYPE') + '-' + row.relationChargeUserName
            } else {
              return format.formatDict(row.relationType, 'AUDIT_OUT_RELATION_TYPE')
            }
          }
        }, {
          // 相关方意见
          prop: 'relationResolution',
          align: 'left',
          width: '160px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.relationResolution
        }, {
          // 相关方附件
          prop: 'relationFileIds',
          align: 'center',
          slot: true,
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.relation + this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.annex
        }
      ]
    }
  },
  mounted () {
    this.getRowSpan()
  },
  methods: {
    // 获取合并的数组
    getRowSpan () {
      this.rowSpanArr = []
      if (this.form.feedbackHistoryRelationDtos.length > 0) {
        this.form.feedbackHistoryRelationDtos.forEach((item, index) => {
          if (index === 0) {
            this.rowSpanArr.push(1)
            this.position = 0
          } else {
            if (this.form.feedbackHistoryRelationDtos[index].qusetionNumber === this.form.feedbackHistoryRelationDtos[index - 1].qusetionNumber) {
              this.rowSpanArr[this.position] += 1 // 项目名称相同，合并到同一个数组中
              this.rowSpanArr.push(0)
              this.form.feedbackHistoryRelationDtos[index].qusetionNumber = this.form.feedbackHistoryRelationDtos[index - 1].qusetionNumber
            } else {
              this.rowSpanArr.push(1)
              this.position = index
            }
          }
        })
      }
    },
    // 行合并
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let $row = this.rowSpanArr[rowIndex]
        return {
          rowspan: $row, // 行
          colspan: 1 // 列
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/assetoutfeedback/common.scss'
</style>
