<template>
  <div class="outboundRecord">
    <div class="common-box">
      <div class="common-box-button">
        <el-button type="primary" @click="handleExport('是否下载模板', 0)">下载模板</el-button>
        <el-button type="primary" @click="upload">导入</el-button>
        <el-button type="warning" @click="handleDelete(removeArr)" :disabled="removeArr.length == 0">删除</el-button>
        <el-button type="primary" @click="matching('auto')">自动匹配</el-button>
      </div>
      <div class="common-box-search">
        <el-input placeholder="请输入分类名称、编号" v-model="queryParam" class="input-with-select" @keyup.enter.native="fetchTableData">
          <el-button slot="append" icon="el-icon-search" @click="fetchTableData"></el-button>
        </el-input>
      </div>
    </div>
    <WUpload :action="action" ref="WUpload" @onSuccess="onUpload"></WUpload>
    <MappingCoding ref="MappingCoding" currentNodeKey="" @handleMappingCoding="handleMappingCoding" />
    <LTable ref="table" @selection-change="selection" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" :pagination="pagination" />
  </div>
</template>

<script>
import MappingCoding from './mappingCoding/index.vue'
import { columns, options } from './outboundRecord'
import { autoMatching, handMatching, getOutBoundRecord, removeOutBoundRecord, getImportModel } from '@/api/carrierStandard/carrierSailingMaterialConsumeRecord'
export default {
  components: { MappingCoding },
  name: 'OutboundRecord',
  data() {
    // 这里存放数据
    return {
      action: process.env.VUE_APP_BASE_API + '/carryingtask/overyearAvmatConsume/importOutBoundRecord',
      queryParam: '',
      removeArr: [],
      columns: columns(this),
      options,
      // 分页
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableData: []
    }
  },
  mounted() {
    // const { consumeDataId } = this.$route.params
    // this.$store.commit('app/updataTagsItemMetaTitle', { id: consumeDataId, otherTitle: '携行清单机务编制-查看详情', newTitle: `携行清单机务编制-查看详情-${this.detail.taskName}` })
  },
  methods: {
    async fetchTableData() {
      if (this.$refs.table) {
        this.$refs.table.clearSelection()
      }
      const { pageIndex, pageSize } = this.pagination
      const { consumeDataId } = this.$route.params
      const {
        data: { list, totalCount }
      } = await getOutBoundRecord({
        consumeDataId,
        pageIndex,
        pageSize,
        queryParam: this.queryParam
      })
      this.tableData = list
      this.pagination.total = totalCount
    },

    handleDelete(params) {
      this.$confirm('是否确认删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { success } = await removeOutBoundRecord(params.map((e) => e.outboundRecordId))
          if (success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }
          this.fetchTableData()
        })
        .catch(() => {})
    },

    async autoMatching(params) {
      try {
        const { success, msg } = await autoMatching(params)
        if (success) {
          this.$message({
            type: 'success',
            message: msg
          })
        }
      } catch (error) {}
      await this.fetchTableData()
    },

    async manuallyMatching(params) {
      try {
        const { success } = await handMatching(params)
        if (success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      } catch (error) {}
      await this.fetchTableData()
    },

    async handleMappingCoding(params) {
      this.manuallyMatching(params)
    },

    matching(type, row) {
      const Auto_Type = 'auto'
      const Manually_Type = 'manually'
      const { consumeDataId } = this.$route.params
      const params = {
        consumeDataId,
        outPutType: 0
      }
      switch (type) {
        case Auto_Type:
          this.autoMatching(params)
          break
        case Manually_Type:
          this.$refs.MappingCoding.openMappingCoding({ ...params, volumeOrder: row.volumeOrder })
          break
      }
    },

    selection(data) {
      this.removeArr = data
    },

    upload() {
      const { consumeDataId } = this.$route.params
      this.$refs.WUpload.openDialog()
      this.$refs.WUpload.setUploadParams({ consumeDataId })
    },

    onUpload(response) {
      const { code, msg } = response
      this.$message({
        type: code == 200 ? 'success' : 'warning',
        message: msg
      })

      if (code == 200) {
        this.$refs.WUpload.closeDialog()
        this.fetchTableData()
      } else {
        this.$refs.WUpload.clearFiles()
      }
    },

    handleExport(msg, type) {
      const downTemplate = 0
      this.$confirm(`${msg}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (type) {
            case downTemplate:
              getImportModel(0)
              break
          }
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
