<template>
    <!--律所反馈 dialog-->
    <div>
        <dialog-edit :autoClose="true" @close="close"  :form="form" :title="$t('traceMgr.lawFirmsFeedback')" :visible.sync="visible"
                    class="el-dialog--center"
                    :close-on-click-modal="false" :editModel="editModel" :before-close="closeDialog" :footerBtnShow="false">
            <el-row>
                <payment-info :keyId="keyId" :title="$t('traceMgr.orderInfo')"></payment-info>
            </el-row>
            <el-row class="textRight threeBtn">
                <auth-button type="primary" size="medium" :label="$t('traceMgr.downloadingData')" @click="showBusinessFileDownloadDialog" class="iconfont iconycxiazai"></auth-button>
                <auth-button type="primary" size="medium" :label="$t('common.lawFirmFeedbackProcessingDetails')" @click="getLawView"></auth-button>
                <auth-button type="primary" size="medium" :label="$t('common.save')" @click="saveLawFirm" :loading="isLoading" class="iconfont iconbaocun11"></auth-button>
            </el-row>
            <!--律所审核-->
            <el-row>
                <el-tabs>
                    <el-tab-pane :label="$t('traceMgr.lawFirm')"></el-tab-pane>
                </el-tabs>
            </el-row>
            <el-form :model="formTableData" ref="formTableData" :show-message="false">
                <!--律所问题列表-->
                <pro-blem-list class="margin_top_10" :formTableData="problemListData"></pro-blem-list>
            </el-form>
            <!--话术-->
            <el-row>
                <el-row class="head_msg">
                    <el-col :span="4">
                        <!--联系人-->
                        <span>{{$t('common.contact')}}&nbsp;</span>
                        <span>{{  lawFeedbackReviewList.contacts }}</span>
                    </el-col>
                    <el-col :span="20">
                        <!--联系人电话-->
                        <span>{{$t('common.phoneNum')}}&nbsp;</span>
                        <span>{{  lawFeedbackReviewList.contactsTel }}</span>
                    </el-col>
                </el-row>
                <!--话术-->
                <el-row class="body_msg">
                    <el-col :span="1" class="text-center">
                        <span>{{$t('common.discourse')}}</span>
                    </el-col>
                    <el-col :span="10">
                        <speech-craft-input :autosize="autosize" v-model="lawFeedbackReviewList.discourse" ></speech-craft-input>
                    </el-col>
                </el-row>
            </el-row>
            <!--律所反馈处理详情 dialog-->
            <dialog-edit :visible.sync="lawBoxVisible"
                         :title="$t('common.lawFirmFeedbackProcessingDetails')"
                         :editModel="'V'"
                         :form="form"
                         :api="api"
                         :footerBtnShow="isFootView"
                         :appendToBody="true">
                <data-table :sourceData.sync="detailsInfosListData"
                            :columns="detailColumns"
                            :border="true"
                            :stripe="true"
                            operateBtnLayout=""
                            :showPage="false"
                            :queryParas="searchFormQueryParas"
                            :spanMethod="mergedCell">
                    <!--操作-->
                    <template slot="processingTime" slot-scope="scope">
                        <el-date-picker v-model="scope.data.row.processingTime" type="datetime" style="width: 200px"></el-date-picker>
                    </template>
                    <el-table-column :label="$t('traceMgr.relatedPartyAttachments')" align="center" fixed="right" :width="180">
                        <template slot-scope="scope">
                            <btn-download fileID="2001031119322940001"></btn-download>
                        </template>
                    </el-table-column>
                </data-table>
            </dialog-edit>
            <!--底部按钮-->
            <el-row class="submit_button">
                <auth-button type="primary" size="medium" :label="$t('common.complete')" @click="submitLawFirm"></auth-button>
            </el-row>
            <!--弹出资料下载-->
            <business-file-download-dialog
                    :visible = "showBusinessFileDownloadDialogValue"
                    :form="{}"
                    :closeDownBatch="businessFileDownloadDialogClose">
            </business-file-download-dialog>
        </dialog-edit>
    </div>
</template>
<script>
import {
  DataTable,
  authButton,
  DialogEdit,
  speechCraftInput,
  btnBatchUpload,
  btnBatchDownload,
  btnUpload,
  btnDownload,
  paymentInfo
} from 'newepoch-components'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
import DatePicker from '@/components/element/DatePick.vue'
import businessFileDownloadDialog from '@/components/tracemgr/common/businessFileDownloadDialog.vue'
import proBlemList from '@/components/tracemgr/regionalCommissioner/TaskTable/lawFirm/problemList.vue'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    speechCraftInput,
    authButton,
    tracemgrApi,
    DataTable,
    DialogEdit,
    DatePicker,
    proBlemList,
    btnBatchUpload,
    btnBatchDownload,
    btnUpload,
    btnDownload,
    paymentInfo,
    businessFileDownloadDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    /* editModel: {
              type: String
            }, */
    api: {
      type: String,
      default: ''
    },
    /* form: {
              type: Object
            }, */
    close: {
      type: Function
    }
  },
  data () {
    return {
      keyId: '2002241636461020001',
      showBusinessFileDownloadDialogValue: false,
      handleFlag: true,
      dialogForm: {},
      dialogApi: {},
      uploadApi: '',
      editModel: 'V',
      form: {},
      searchFormQueryParas: {},
      operateBtnLayout: '',
      fileId: '2002281715317860001',
      showTable: false,
      auditor: '张三',
      checkTime: '2018-02-06 21:22:52',
      feedbackTime: '2018-02-06 21:22:52',
      taskDialogShow: false,
      contact: '王五',
      phoneNumber: '136746452574',
      content: '',
      testtest: [],
      problemListData: {
        sourceData: []
      },
      // orderForm: {
      //   productInfo: '',
      //   originalOwner: '',
      //   paymentConfirmNo: '',
      //   supplierName: '',
      //   nameOfCompany: '',
      //   factoringAmount: '',
      //   nameOfTheContract: '',
      //   contractNo: '',
      //   chamberlainName: '',
      //   chamberlainBank: '',
      //   chamberlainNum: '',
      //   region: '',
      //   businessPersonnel: '',
      //   factoringCommissioner: '',
      //   stampingMethod: '',
      //   invoiceNum: ''
      // },
      isFootView: true,
      // 律所反馈列表：主表
      lawFeedbackReviewList: {
        frequency: '1'
      },
      autosize: {
        minRows: 8,
        maxRows: 10
      },
      detailsInfosListData: [],
      columns: [
        {
          prop: 'operationalMatters',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.operationalMatters,
          showOverflowTooltip: true
        },
        {
          prop: 'operator',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.operator,
          showOverflowTooltip: true
        },
        {
          prop: 'operateTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.operateTime,
          showOverflowTooltip: true
        },
        {
          prop: 'details',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.details,
          showOverflowTooltip: true
        }
      ],
      detailColumns: [
        // 反馈批次
        {
          prop: 'feedbackBatch',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackBatch,
          showOverflowTooltip: true
        },
        // 律所反馈意见
        {
          prop: 'lawFirmFeedback',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.lawFirmFeedback,
          showOverflowTooltip: true
        },
        // 合规处理意见
        {
          prop: 'complianceHandlingOpinions',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.complianceHandlingOpinions,
          showOverflowTooltip: true
        },
        // 需补资料
        {
          prop: 'needToSupplementData',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.needToSupplementData,
          showOverflowTooltip: true
        },
        // 相关方
        {
          prop: 'interestedParty',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.interestedParty,
          showOverflowTooltip: true
        },
        // 处理人
        {
          prop: 'handler',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.handler,
          showOverflowTooltip: true
        },
        // 处理时间
        {
          prop: 'processingTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.processingTime,
          width: '200px',
          slot: true
        },
        // 处理状态
        {
          prop: 'processingStatus',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.processingStatus,
          showOverflowTooltip: true
        },
        // 相关方意见
        {
          prop: 'CommentsFromInterestedParties',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.CommentsFromInterestedParties,
          showOverflowTooltip: true
        }
      ],
      lawBoxVisible: false,
      spanArr: [],
      sIdx: 0,
      position: 0,
      sameRowArr: []
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          let $this = this
          // 区域专员任务台-任务-律所反馈处理-反馈信息列表
          tracemgrApi['lawFirmProblemList'].getList({ 'assetCode': '2003231914588930001' }).then(res => {
            $this.problemListData.sourceData = res.data.lawFeedbackList
          })
        }
      }
    }
  },
  // 初始化加载
  mounted () {
    // 区域专员任务台：任务办理界面：律所反馈处理：律所反馈处理详情
    tracemgrApi['taskDialog'].getDetailList({ 'assetCode': this.keyId }).then(res => {
      this.detailsInfosListData = res.data
    })
  },
  methods: {
    showBusinessFileDownloadDialog () {
      this.showBusinessFileDownloadDialogValue = true
    },
    businessFileDownloadDialogClose () {
      this.showBusinessFileDownloadDialogValue = false
    },
    getLawView () {
      this.lawBoxVisible = true
    },
    closeDialog () {
      this.dialogVisible = false
    },
    save () {
      console.log('save')
    },
    submitLawFirm () {
      let data = {}
      let test = {}
      test.fileId = ''
      test.fileName = ''
      this.testtest.push(test)
      data['keyId'] = this.lawFeedbackReviewList
      data['estimateSupplementTime'] = this.estimateSupplementTime
      data['relationResolution'] = this.lawFeedbackReviewList.feedbackContent
      data['fileList'] = JSON.stringify(this.testtest)
      tracemgrApi['taskDialog'].submit({ 'keyId': '1111111' }).then(res => {
        // 隐藏加载
        this.isLoading = false

        if (res.data === true) {
          this.success(this.$i18n.messages[this.$i18n.locale].common.operationSuccessful)
        } else {
          this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.submitError)
        }
      }, res => {
        this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.submitError)
        this.isLoading = false
      })
    },
    lawFirmDetail () {
      this.taskDialogShow = true
    },
    upload (row) {
      console.log(row)
    },
    closeLawFirms () {

    },
    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
        }
      }
      if (columnIndex === 2) { // 对第三列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3) { // 对第四列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) { // 对第一列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getSpanArr () {
      this.spanArr = [] // 避免表格错乱！
      this.sIdx = 0
      let $this = this
      this.detailsInfosListData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          $this.spanArr.push(1)
          $this.position = 0
          $this.sameRowArr.push([index])
        } else {
          // 这里是要合并行 判断反馈批次数据是否相等
          if ($this.detailsInfosListData[index].feedbackBatch === $this.detailsInfosListData[index - 1].feedbackBatch) {
            $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])
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    @import './src/styles/tracemgr/regionalCommissioner/taskTable/lawFirm/taskDialog.scss';
</style>
