<template>
  <!-- 履历 -->
  <div>
    <dialog-edit width="95%" :visible.sync="dialogVisible" :form="form" :editModel="editModel" :closeLabel="editModel === 'V' ? $t('common.close') :$t('common.cancel')" :autoSave="false" :api="api2" :appendToBody="appendToBody"
      :title="$t('supplementInfo.history')">
      <div class="assetpkgmgr-box" v-loading="assetpkgmgrButtonLoading">
        <!-- 基础信息 -->
        <dym-form :formValue.sync="forms" :componentList="componentList"></dym-form>
        <!-- 表格列表 -->
        <data-table :api="api2" v-bind="{maxHeight:300}" :operateBtnLayout="operateBtnLayout" :queryParas="queryParas" :sourceData="modifyData"
          :toolMenuFlag="toolMenuFlag" :columns="modifyColumns" :showSelection="true" :typeLabel="$t('supplementInfo.number')" type="index" :showPage="showPage" loadList="getList" :loadCount.sync="loadCount" :menuFlag="menuFlag">
          <!-- 补出账状态 -->
          <template #supplementStatus="scope">
            <!-- 若补出状态为“补出账确认完成，账户无修改”时，则显示不修改原因 -->
            <div v-if="scope.data.row.supplementStatus == '4' && scope.data.row.noModifyReason">
                <el-popover
                  placement="top-start"
                  :title="$t('supplementInfo.noModifyReason')"
                  width="200"
                  trigger="hover"
                  :content="scope.data.row.noModifyReason">
                  <div slot="reference">
                    {{scope.data.row.supplementStatus| formatDict('bk_pkg_supplement_status')}}
                  </div>
                </el-popover>
            </div>
            <div v-else>
              {{scope.data.row.supplementStatus| formatDict('bk_pkg_supplement_status')}}
            </div>
          </template>
          <!-- 补出账时间 -->
          <template #addTime="scope">
              {{scope.data.row.addTime| formatDateTpcModify('yyyy-MM-dd hh:mm:ss')}}
          </template>
          <!-- 单行操作 -->
          <el-table-column align="center" min-width="150px" :label="$t('common.operate')" fixed="right">
            <template slot-scope="scope">
              <!-- 下载补出账资料 -->
              <auth-button class="iconCircle" icon="iconfont iconziliao2" v-if="scope.row.supplementStatus == '5' && scope.row.fileIds && scope.row.fileIds.length > 0" :title="$t('supplementInfo.downLoad')" @click="operateItem(scope.row)"></auth-button>
              <!-- <btn-batch-download v-if="!(scope.row.fileIds.length > 0)" :fileID="scope.row.fileIds" :title="$t('supplementInfo.downLoad')"></btn-batch-download> -->
            </template>
          </el-table-column>
          <!-- 列表结果集 -->
          <template slot="paginationLeft">
            <div align="left">
              <div>{{$t('common.pagePromptOne') + modifyData.length + $t('common.pagePromptTwo') + modifyData.length + $t('common.pagePromptThree')}}</div>
            </div>
          </template>
        </data-table>
      </div>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import {
  DialogEdit,
  DataTable,
  authButton,
  dymForm
} from 'newepoch-components'
import fileApi from '@/api/fileApi.js'
// import {
//   downFile
// } from '@/utils/devUtils'
import externalApi from '@/api/assetpkgmgr/externalApi.js'
export default {
  extends: new BaseEdit(),
  name: 'supplementHisPop',
  components: {
    DialogEdit,
    DataTable,
    authButton,
    dymForm
  },
  data () {
    return {
      showPage: false,
      appendToBody: true,
      toolMenuFlag: true,
      loadCount: 0,
      menuFlag: false,
      operateBtnLayout: '',
      forms: {}, // 基础信息表单
      // 表格请求参数
      queryParas: {
        assetCode: ''
      },
      // 表格列表
      modifyData: [],
      // 表单组件
      componentList: [
        {
        // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.projectName,
          disabled: true,
          value: 'projectName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          labelWidth: '130px',
          clearable: true,
          cols: [12, 12, 8],
          componentName: 'el-input'
        },
        {
        // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.assetCode,
          disabled: true,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          labelWidth: '130px',
          cols: [12, 12, 8],
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 供应商
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.creditor,
          disabled: true,
          value: 'creditor',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          cols: [12, 12, 8],
          labelWidth: '130px',
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 资产对应客服信息
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.customerAccountName,
          disabled: true,
          value: 'customerAccountName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          cols: [12, 12, 8],
          labelWidth: '130px',
          clearable: true,
          componentName: 'el-input'
        }
      ],
      // 表头
      modifyColumns: [
        {
          // 收款账户名
          prop: 'receiverName',
          align: 'left',
          headerAlign: 'center',
          width: '170px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverName
        },
        {
          // 收款账号
          prop: 'receiverBankAccount',
          headerAlign: 'center',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverBankAccount
        },
        {
          // 开户行
          prop: 'receiverBank',
          headerAlign: 'center',
          align: 'left',
          width: '171px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverBank
        },
        {
        // 补出账原因
          prop: 'supplementReason',
          headerAlign: 'center',
          align: 'left',
          width: '171px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.supplementReason
        },
        {
        // 补出账状态
          prop: 'supplementStatus',
          align: 'center',
          width: '130px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.supplementStatus
        },
        {
        // 发起补出账时间
          prop: 'addTime',
          align: 'center',
          width: '170px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.supplementTime
        }
      ]
    }
  },
  computed: {
    // 接口地址
    api2 () {
      return externalApi.supplement
    }
  },
  methods: {
    // 下载补出账资料
    operateItem (row) {
      let that = this
      // 确认提示框
      that.$confirm(`${that.$t('common.confirm') + that.$t('supplementInfo.downLoad')}？`, that.$t('common.tip'), {
        type: 'warning'
      }).then(() => {
        that.assetpkgmgrFullScreenLoading()
        // 下载
        fileApi.file.batchDownload({ keyIds: row.fileIds }).then(res => {
          that.assetpkgmgrFullScreenLoading().close()
          that.downFile(res, `${that.forms.assetCode}.zip`)
        }).catch(res => {
          that.assetpkgmgrFullScreenLoading().close()
          that.error(res.message)
        })
      }).catch((e) => {})
    },
    // 具名下载
    downFile (res, filename) {
      if ('msSaveOrOpenBlob' in navigator) {
        // edge和ie的下载方法
        window.navigator.msSaveOrOpenBlob(new Blob([res.data]), filename)
      } else {
        let url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', filename)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      }
    },
    // 获取表格列表
    getList () {
      let $this = this
      $this.assetpkgmgrButtonLoading = true
      externalApi.supplement.getRecord($this.queryParas).then(res => {
        if (res.success) {
          let datas = res.data
          // 表单赋值
          $this.modifyData = datas.supplementRecordFiles
          $this.forms = $this.UtilJs.cloneDeep(datas)
          delete $this.forms.supplementRecordFiles
        }
        $this.assetpkgmgrButtonLoading = false
      }).catch(res => {
        $this.assetpkgmgrButtonLoading = false
      })
    }
  },
  props: {
    currentRow: {
      type: [Object],
      default () {
        return null
      }
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        // 初始化
        $this.modifyData = []
        $this.forms = {}
        $this.queryParas = {
          assetCode: $this.currentRow.assetCode
        }
        // 请求列表
        $this.getList()
      }
    }
  }
}
</script>

<style scoped>
  @import "~@/styles/assetpkgmgr/common.scss";
</style>
