<template>
  <!-- 再报理资料准备 -->
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <!-- 搜索栏 -->
      <search-form :formValue.sync="queryParas" searchPerms="search" @handleFilter="handleFilter" @clearParam="clearParam"
        slot="query" resetPerms="reset" :componentList="componentList"></search-form>
      <!-- 表格列表 -->
      <template slot="table">
        <data-table ref="dataTable" :api="api" v-bind="elHeightObj" :deleteApi="api" selectable="false" :handleFlag.sync="handleFlag" :menuFlag="false"
          :queryParas="queryParas" :sourceData.sync="sourceData" :loadCount.sync="loadCount" :columns="columns"
          :showSelection="false" :otherHeight="'240'" operateBtnLayout="" :IsRight="false" :pageAll="true" :operatWidth="'200'" @getTableData="getTableData">
          <!-- 操作工具栏 -->
          <template slot="headButton">
            <div align="right">
              <auth-button class="iconfont iconxinzeng" :size="'medium'" :label="$t('common.create')" @click="isAdd = true"
                type="primary"></auth-button>
            </div>
          </template>
          <!-- 单行操作 -->
          <el-table-column align="center" min-width="300px" :label="$t('common.operate')" fixed="right">
            <template slot-scope="scope">
              <!-- 查看 -->
              <auth-button class="iconCircle" icon="iconfont iconview" :title="$t('common.view')" @click="checkInfo(0,scope.row)"></auth-button>
              <!-- 编辑 -->
              <auth-button class="iconCircle" icon="iconfont iconbianji" v-if="scope.row.assetPackageStatus === '1'" :title="$t('common.edit')" @click="checkInfo(1,scope.row)"></auth-button>
              <!-- 重新生成 -->
              <auth-button class="iconCircle" icon="iconfont iconzhongxinshengcheng" :title="$t('common.remake')" @click="operateItem(scope.row.keyId,0)"></auth-button>
              <!-- 下载 -->
              <!-- <btn-batch-download v-if="scope.row.fileList && scope.row.fileList.length > 0 && computeFile(scope.row.fileList)" :fileID="scope.row.fileList" :title="$t('common.downLoad')"></btn-batch-download> -->
              <auth-button class="iconCircle" icon="iconfont iconxiazai" :title="$t('common.downLoad')" @click="operateItem(scope.row,1)" :disabled="!(scope.row.fileList && scope.row.fileList.length > 0 && computeFile(scope.row.fileList))"></auth-button>
              <!-- 删除 -->
              <auth-button class="iconCircle iconCircleDel" icon="iconfont iconycjian" v-if="scope.row.assetPackageStatus === '1'" :title="$t('common.delete')" @click="operateItem(scope.row.keyId,2)"></auth-button>
              <!-- 提交银行 -->
              <!-- <auth-button class="iconCircle" icon="iconfont icondaochu" v-if="scope.row.assetPackageStatus === '1'" :title="$t('common.submitBank')" @click="operateItem(scope.row.keyId,3)"></auth-button> -->
              <auth-button class="iconCircle" icon="iconfont iconlashi" v-if="scope.row.assetPackageStatus === '1' && scope.row.operateUserId !== $store.getters.userId" :title="$t('common.submitBank')" @click="operateItem(scope.row.keyId,3)"></auth-button>
              <!-- 撤回提交银行 -->
              <!-- <auth-button class="iconCircle" icon="iconfont icontuihui" v-if="scope.row.assetPackageStatus === '2' || scope.row.assetPackageStatus === '3'" :title="$t('common.withdrawBank')" @click="operateItem(scope.row.keyId,4)"></auth-button> -->
              <auth-button class="iconCircle" icon="iconfont iconchexiao" v-if="(scope.row.assetPackageStatus === '2' || scope.row.assetPackageStatus === '3') && scope.row.operateUserId !== $store.getters.userId" :title="$t('common.withdrawBank')" @click="operateItem(scope.row.keyId,4)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 新增资产包弹窗 -->
    <package-operations-add-pop ref="addPop" :visible.sync="isAdd" editModel="C" :form="form" :autoSave="false" @onSaved="addItem"></package-operations-add-pop>
    <!-- 查看和编辑资产包弹窗 -->
    <package-operations-mod-pop :visible.sync="isEdit" :editModel="editModel" :form="form" :currentRow="currentRow"></package-operations-mod-pop>
  </div>
</template>
<script>
import {
  upDownLayout,
  searchForm,
  DataTable,
  authButton,
  SelectReFactoringBank,
  SelectDictionary
} from 'newepoch-components'
import SelectProductName from '@/components/element/assetpkgmgr/SelectProductName'
import packageOperationsModPop from './packageOperationsModPop' // 查看和编辑资产包
import packageOperationsAddPop from './packageOperationsAddPop' // 新增资产包
import fileApi from '@/api/fileApi.js'
import {
  downFile
} from '@/utils/devUtils'
import packageOperation from '@/api/assetpkgmgr/packageOperationApi.js' // 再报理资料准备api接口
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'packageOperationIndex',
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    authButton,
    packageOperationsModPop,
    packageOperationsAddPop
  },
  data () {
    return {
      handleFlag: true,
      loadCount: 0,
      editModel: 'V',
      currentRow: {},
      isAdd: false, // 添加资产包弹窗控件
      isEdit: false, // 编辑和查看资产包弹窗控件
      // 搜索表单
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      form: {},
      // 搜索表单组件
      componentList: [
        {
        // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.projectName,
          value: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '160px',
          clearable: true,
          name: 'project',
          componentName: SelectProductName
        },
        {
        // 再保理银行
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.suppliersNames,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          disabled: false,
          value: 'factorBankId',
          labelWidth: '160px',
          clearable: true,
          componentName: SelectReFactoringBank
        },
        {
        // 账款到期日
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.dueDate,
          value: 'dueDate',
          componentName: 'el-date-picker',
          clearable: true,
          labelWidth: '160px',
          format: 'timestamp'
        },
        {
        // 资产包编号
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.assetPackageCode,
          disabled: false,
          value: 'assetPackageCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.assetCode,
          disabled: false,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 资产包状态
          label: this.$i18n.messages[this.$i18n.locale].bankPrice.assetPackageStatus,
          disabled: false,
          value: 'assetPackageStatus',
          labelWidth: '160px',
          clearable: true,
          dictTypeCode: 'bk_pkg_asset_package_status',
          componentName: SelectDictionary
        }
      ],
      // 表头
      columns: [
        {
        // 产品名称
          prop: 'projectName',
          align: 'left',
          headerAlign: 'center',
          width: '230px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.projectName
        },
        {
        // 资产包编号
          prop: 'assetPackageCode',
          align: 'center',
          width: '240px',
          showOverflowTooltip: true,
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.assetPackageCode
        },
        {
        // 计划管理人/再保理银行
          prop: 'factorBankName',
          align: 'left',
          headerAlign: 'center',
          showOverflowTooltip: true,
          width: '230px',
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.suppliersNames
        },
        {
        // 再报理总金额（元）
          prop: 'factoringMoneyTotal',
          headerAlign: 'center',
          align: 'right',
          showOverflowTooltip: true,
          width: '200px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.factoringMoneyTotal,
          format: (row) => {
            return format.thousandFilter(row.factoringMoneyTotal)
          }
        },
        {
        // 账款到期日
          prop: 'dueDate',
          align: 'center',
          width: '150px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.dueDate,
          format: (row) => {
            return format.formatDateTpcModify(row.dueDate)
          }
        },
        {
        // 资料准备人
          prop: 'dataPreparationPerson',
          align: 'left',
          headerAlign: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.DataPreparationPerson
        },
        {
        // 资料准备时间
          prop: 'operateTime',
          align: 'center',
          width: '171px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.operateTime
        },
        {
        // 交银行时间
          prop: 'sendBackTime',
          align: 'center',
          width: '171px',
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.DeliveryTime
        },
        {
        // 资产包状态
          prop: 'assetPackageStatus',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].packageOperation.assetPackageStatus,
          format: (row) => {
            return format.formatDict(row.assetPackageStatus, 'bk_pkg_asset_package_status')
          }
        }
      ],
      sourceData: []
    }
  },
  computed: {
    // api接口
    api () {
      return packageOperation.search
    }
  },
  // 切换路由刷新列表，不然缓存会造成非法操作
  activated () {
    this.handleFilter()
  },
  mounted () {
    // 触发loadCount去请求获得表格数据
    this.handleFilter()
  },
  methods: {
    getTableData (data) {
      data = data.map(item => {
        item.factoringMoneyTotal = Number(item.factoringMoneyTotal)
        return item
      })
    },
    // 文件列表判空
    computeFile (e) {
      for (let index in e) {
        let item = e[index]
        if (item < 1) {
          return false
        }
      }
      return true
    },
    // 重置搜索表单
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
    },
    // 新增
    addItem (e) {
      let $this = this
      packageOperation.add.create(e).then(res => {
        this.assetpkgmgrFullScreenLoading().close()
        this.$refs.addPop.assetpkgmgrButtonLoading = false
        if (res.success) {
          $this.success($this.$t('common.addSuccess'))
          $this.isAdd = false // 关闭遮罩
          $this.handleFilter() // 重置列表
        }
      }).catch(res => {
        this.assetpkgmgrFullScreenLoading().close()
        this.$refs.addPop.assetpkgmgrButtonLoading = false
      })
    },
    // 查看和编辑
    checkInfo (e, row) {
      this.editModel = e === 0 ? 'V' : 'E'
      this.currentRow = row
      this.isEdit = true
    },
    // 操作栏
    operateItem (id, type) { // id:keyId;type:0 重新生成;1 下载;2 删除;3 提交银行
      let that = this
      let apiName = [that.$t('common.remake'), that.$t('common.downLoad'), that.$t('common.delete'), that.$t('common.submitBank'), that.$t('common.withdrawBank')]
      let api = ['recreate', 'download', 'deleteItem', 'submitBank', 'withdrawBank']
      if (type === 1 && !id) {
        that.warning(that.$t('common.remakePrompt'))
        return
      }
      // 确认提示框
      that.$confirm(that.$t('common.confirm') + apiName[type] + '？', that.$t('common.tip'), {
        type: 'warning'
      }).then(() => {
        that.assetpkgmgrFullScreenLoading()
        if (type === 1) {
          // 下载文件
          fileApi.file.batchDownload({
            keyIds: id.fileList
          }).then(res => {
            that.assetpkgmgrFullScreenLoading().close()
            downFile(res, id.assetPackageCode + '.zip')
          }).catch(res => {
            that.assetpkgmgrFullScreenLoading().close()
            that.error(res.message)
          })
        } else {
          let params = {
            keyId: id
          }
          packageOperation.packageOperation[api[type]](params).then(function (res) {
            that.assetpkgmgrFullScreenLoading().close()
            that.handleSubmit(res, function () {
              that.success(apiName[type] + that.$t('common.successfully'))
              // 重置表格
              that.$refs.dataTable.loadTableData()
            })
          }).catch(res => {
            that.assetpkgmgrFullScreenLoading().close()
          })
        }
      }).catch((e) => {
        // console.log(e)
      })
    },
    // 提交回调
    handleSubmit (res, callback) {
      let that = this
      if (res.success) {
        // 回调函数
        callback && callback()
      } else {
        that.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss">
  @import '~@/styles/assetpkgmgr/packageOperation/packageOperationIndex.scss';
</style>
