<!--
  @description:采购单归档
  @Modifier: zhangyawen
  @routerPath: /procurementArchived/procurementOrderArchived-list
  @date: 2021-4-9-14:06
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :menu="true"
      :search-form="searchForm"
      :tabs="winningAuditStatus"
      search-label-width="100px"
      @on-load="loadData"
    >
      <!--标题-->
      <template v-slot:header>
        <span>采购单归档</span>
      </template>
      <!--查询条件-->
      <template v-slot:search="search">
        <el-form-item
          ref="tenderNo"
          label="采购单编号"
          class="el-form-item--two"
          prop="tenderNo"
        >
          <el-input
            v-model.trim="searchForm.tenderNo"
            placeholder="采购单编号"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item
          ref="tenderName"
          label="采购单名称"
          class="el-form-item--two"
          prop="tenderName"
        >
          <el-input
            v-model.trim="searchForm.tenderName"
            placeholder="采购名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item
          ref="sourcingUserRealName"
          label="采购员"
          class="el-form-item--two"
          prop="sourcingUserRealName"
        >
          <el-input
            v-model.trim="searchForm.sourcingUserRealName"
            placeholder="采购员"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item
          ref="planType"
          label="是否框架"
          prop="planType"
        >
          <el-select
            v-model="searchForm.planType"
            placeholder="是否框架"
          >
            <el-option
              v-for="item in isFrameList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          ref="purchaseProjectStatus"
          label="采购单状态"
          prop="purchaseProjectStatus"
        >
          <el-select
            v-model="searchForm.purchaseProjectStatus"
            placeholder="采购单状态"
          >
            <el-option
              v-for="item in protprojectPurchaseProjectStatusList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <el-button
          v-if="searchForm.archiveStatus === '00'"
          v-loading.fullscreen.lock="archiveLoading"
          type="primary"
          element-loading-text="归档中，请稍后"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.2)"
          @click="allArchive"
        >
          一键归档多条
        </el-button>
        <el-button type="primary" :loading="exportLoading" @click="onExportFile">
          导出
        </el-button>
      </template>
      <template v-slot:GXTable>
        <!-- 已归档 -->
        <alreadyArchivedTable v-if="searchForm.archiveStatus === '01'" :table-data="tableData" :loading="loading">
          <template v-slot:method="{scope}">
            <el-link
              type="primary"
              @click.stop="archiveDetail(scope.row)"
            >
              归档详情
            </el-link>
          </template>
        </alreadyArchivedTable>
        <!-- 未归档 -->
        <notArchivedTable v-else :table-data="tableData" :loading="loading" @handleSelectionChange="handleSelectionChange">
          <template v-slot:method="{scope}">
            <el-link
              type="primary"
              @click.stop="archive(scope.row)"
            >
              归档
            </el-link>
          </template>
        </notArchivedTable>
      </template>
    </table-crud>
  </div>
</template>

<script>
/*   api*/
import { listProcurementArchivePages, getProtprojectProcurementArchiveNum, outputArchiveList } from '@/api/procurement/procurementProject'
import { archiveMultitermByTenderNos } from '@/api/bidding/bidArchive'
/* 公共参数方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 表格列表*/
import alreadyArchivedTable from './alreadyArchivedTable' // 已归档
import notArchivedTable from './notArchivedTable' // 未归档
/* mixins*/
import { archivedDic } from '.././mixins/dicMixins.js'
/* 公用方法*/
export default {
  name: 'ProcurementOrderArchivedList',
  components: {
    alreadyArchivedTable,
    notArchivedTable
  },
  mixins: [archivedDic],
  data() {
    return {
      winningAuditStatus: [
        { name: '未归档', index: '00' },
        { name: '已归档', index: '01' }
      ],
      loading: true,
      exportLoading: false, // 导出
      searchForm: {
        tenderNo: '',
        tenderName: '',
        sourcingUserRealName: '',
        planType: '',
        purchaseProjectStatus: '',
        archiveStatus: '00' // 归档状态 00：未归档 01：已归档
      },
      archiveLoading: false, // 一键归档loading
      tenderNoList: [], // 一键归档参数
      tableData: [], // 归档信息列表
      protprojectPurchaseProjectStatusList: [], // 采购单状态
      orderIds: '' // 多个报名id以,隔开拼接的字符串
    }
  },
  created() {
    this.initGroup() // 获取字典方法
  },
  methods: {
    filterDictText,
    // 获取字典方法
    initGroup() {
      const data = [
        'protprojectPurchaseProjectStatus'
      ]
      this.$store.dispatch('getGroupType', data).then(res => {
        Object.keys(res.bidTypeData).forEach((key) => {
          this[key] = res.bidTypeData[key]
        })
      })
    },
    // 获取数据
    loadData(params, callback, tabData) {
      if (tabData) {
        params.archiveStatus = tabData.index
        this.searchForm.archiveStatus = tabData.index
      }
      listProcurementArchivePages(params).then(response => {
        this.tableData = response.data.records
        this.loading = false
        callback(response.data.total)
      })
        .catch(() => {
          this.loading = false
        })
      getProtprojectProcurementArchiveNum().then((response) => {
        this.winningAuditStatus = [
          {
            name: `未归档(${response.data.unArchiveNum})`,
            index: '00'
          },
          {
            name: `已归档(${response.data.archivedNum})`,
            index: '01'
          }
        ]
      })
    },
    // 归档
    archive(row) {
      this.$router.push({
        name: 'procurementOrderArchived-add',
        params: {
          tenderNo: row.tenderNo
        }
      })
    },
    // 归档详情
    archiveDetail(row) {
      this.$router.push({
        name: 'procurementOrderArchived-detail',
        params: {
          tenderNo: row.tenderNo
        }
      })
    },
    // 一键归档多条
    allArchive() {
      if (this.tenderNoList.length <= 0) {
        this.$message.warning('请选择要归档的数据')
        return
      }
      this.archiveLoading = true
      const params = {
        tenderNos: this.tenderNoList.map(item => item.tenderNo).join(',')
      }
      archiveMultitermByTenderNos(params).then((response) => {
        this.$message.success('归档成功')
        this.$refs.tableCrud.onSearchChange()
      }).catch((error) => {
        this.$message.warning(error)
      }).finally(() => {
        this.archiveLoading = false
        this.$refs.smallTable.clearSelection()
        this.$refs.tableCrud.onSearchChange(this.searchForm)
      })
    },
    // 选择事件
    handleSelectionChange(row) {
      this.tenderNoList = row
    },
    // 导出
    onExportFile() {
      if (this.tableData.length <= 0) {
        this.$message.warning('没有可导出的数据')
        return false
      }
      const params = {
        ...this.searchForm
      }
      const index = this.winningAuditStatus.findIndex(item => item.index === this.searchForm.archiveStatus)
      this.exportLoading = true
      outputArchiveList(params).then((response) => {
        this.exportLoading = false
        download(response, `采购单归档${this.winningAuditStatus[index].name}.xls`)
      }).catch(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
