    <template>
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('traceMgr.externalMechanismAnomaly')"
                 :footerBtnShow="isFootView"
                 :editModel="'V'"
                 :form="form"
                 :api="api"
                 :appendToBody="true">
        <component :is="currentComponentName" :ref="currentComponentName" :readonly="!needComplete"></component>
        <el-row>
                    <div>
                        <payment-info :keyId="assetInfoId" :title="$t('traceMgr.basicInformationOfOrder')"></payment-info>
                    </div>
        </el-row>

                <el-row>
                    <el-tabs>
                        <el-tab-pane :label="$t('traceMgr.aListOfLawFirmFeedbackProcessingDetails')">
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            <el-form  :show-message="false">

                <data-table :cellStyle="cellStyle" :loadList="loadList" :stripe="true" :spanMethod="mergedCell"
                            :api="api" :handleFlag.sync="handleFlag" :border="true" :showPage="false" :menuFlag="false"
                            :queryParas="queryParas" @getTableData="tableData" :sourceData.sync="sourceData"
                            :loadCount.sync="loadCount" :columns="columns" :operateBtnLayout="operateBtnLayout">

                    <el-table-column :label="$t('traceMgr.relatedPartyAttachments')" align="center" fixed="right" :width="180">
                        <template slot-scope="scope">
                            <btn-batch-download v-if="scope.row.fileIds.length > 0" :fileID="scope.row.fileIds"></btn-batch-download>
                        </template>
                    </el-table-column>

                </data-table>
            </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
        </div>
    </dialog-edit>
</template>
<script>
import { DataTable, btnDownload, DialogEdit, paymentInfo, BtnBatchDownload } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi.js'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage(),
  name: 'lawFirmAbnormalDetailDialog',
  mixins: [mixin],
  components: {
    BtnBatchDownload,
    tracemgrApi,
    DataTable,
    btnDownload,
    DialogEdit,
    format,
    paymentInfo
  },
  props: {
    processParas: {
      type: Object
    },
    visible: {
      type: Boolean
    },
    url: {
      type: String
    },
    needComplete: {
      type: Boolean
    },
    form: {
      type: [Object],
      required: true
    },
    assetInfoId: {
      type: String
    },
    assetCode: {
      type: String
    }
  },
  mounted () {
  },
  data () {
    return {
      loadList: 'getLawFirmAbnormalListByOrderId',
      handleFlag: true,
      isFootView: false,
      keyId: '2002241636461020001',
      dialogForm: {},
      dialogApi: {},
      spanArr: [],
      sameRowArr: [],
      activeName: 'second',
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        assetCode: this.assetCode
      },
      loadCount: 0,
      operateBtnLayout: '',
      sourceData: [],
      columns: [
        {
          prop: 'feedbackFrequency',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackBatch,
          showOverflowTooltip: true,
          width: '30px',
          // format: function (row) {
          //   if (row.feedbackFrequency) {
          //     return this.stringReplace(this.$i18n.messages[this.$i18n.locale].traceMgr.LawFeedback_SubmitVal_feedbackContent, row.feedbackFrequency)
          //     return '第' + row.feedbackFrequency + '批'
          //   }
          // }
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'feedbackQuestionContent',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.lawFirmFeedback,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'practicableSuggestion',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.complianceHandlingOpinions,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'supplementNoFile',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.needToSupplementData,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'relationType',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.interestedParty,
          showOverflowTooltip: true,
          width: '30px',
          format: (row) => {
            return format.formatDict(row.relationType === undefined ? '' : row.relationType + '', 'tracemgr_lawfirms_related_part')
          }
        },
        {
          prop: 'relationChargeUserName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.handler,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'dealTime',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.processingTime,
          showOverflowTooltip: true,
          width: '40px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          },
          format: function (row) {
            if (row.dealTime) {
              return row.dealTime.replace(/.[0-9]*$/, '')
            }
          }
        },
        {
          prop: 'relationDealStatus',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.processingStatus,
          showOverflowTooltip: true,
          width: '30px',
          format: (row) => {
            return format.formatDict(row.relationDealStatus === undefined ? '' : row.relationDealStatus + '', 'tracemgr_lawfirms_task_status')
          }
        },
        {
          prop: 'relationResolution',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.commentsFromInterestedParties,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        }

      ],
      currentProcessParas: {},
      currentComponentName: null
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        this.getComp()
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    getTitle: {
      get: function () {
        return this.title
      },
      set: function (val) {
        this.$emit('update:title', val)
      }
    },
    api () {
      return tracemgrApi['abnormalOrderListApi']
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          this.queryParas.assetCode = this.assetCode
          this.sourceData = []
          this.$nextTick(function () {
            this.handleFilter()
          })
        }
      },
      'sourceData': {
        deep: true,
        handler: function () {
          this.spanArr = []
          this.sameRowArr = []
        }
      }
    }
  },
  methods: {
    tableData (data) {
      let arr = []
      for (let i = 0; i < data.length; i++) {
        let feedbackFrequency = data[i].feedbackFrequency
        let feedbackQuestionContent = data[i].feedbackQuestionContent
        for (let j = 0; j < data[i].relationHistoryRelationDtos.length; j++) {
          data[i].relationHistoryRelationDtos[j].feedbackFrequency = feedbackFrequency
          data[i].relationHistoryRelationDtos[j].feedbackQuestionContent = feedbackQuestionContent
          arr.push(data[i].relationHistoryRelationDtos[j])
        }
      }
      this.assetInfoId = this.form.assetInfoId
      this.sourceData = arr
      this.spanArr = []
      this.sameRowArr = []
    },
    getComp: function () {
      if (!this.visible) {
        // return
      }
    },
    handleFilter: function () {
      this.loadCount = this.loadCount + 1
      this.spanArr = []
      this.sameRowArr = []
    },
    mergedCell: function ({ row, column, rowIndex, columnIndex }) {
      if (this.spanArr.length === 0) {
        this.getSpanArr()
      }
      if (columnIndex === 0) { // 对第一列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 1) { // 对第二列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getSpanArr () {
      this.spanArr = [] // 避免表格错乱！
      let $this = this
      this.sIdx = 0
      this.sourceData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          $this.spanArr.push(1)
          $this.position = 0
          $this.sameRowArr.push([index])
        } else {
          if ($this.sourceData[index].feedbackFrequency === $this.sourceData[index - 1].feedbackFrequency &&
              $this.sourceData[index].feedbackQuestionContent === $this.sourceData[index - 1].feedbackQuestionContent) { // 这里是要合并行
            $this.spanArr[this.position] += 1
            $this.spanArr.push(0)
            $this.sameRowArr[$this.sIdx].push(index)
          } else {
            $this.spanArr.push(1)
            $this.position = index
            $this.sIdx += 1
            $this.sameRowArr.push([index])
          }
        }
      })
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.errorFields instanceof Array) {
        let flag = false
        row.errorFields.forEach(row => {
          if (row === column.property) {
            flag = true
          }
        })
        if (flag) {
          return 'color: red'
        } else {
          return ''
        }
      } else {
        return ''
      }
    }
  }
}
</script>
    <style scoped lang="scss">
      @import '~@/styles/tracemgr/factoringCommissioner/taskTable/lawFirm/taskDialog.scss';
    </style>
