<template>
  <div class="stockOrOutgoingManagement_index">
    <el-card shadow="never">
      <item-search @search="reload" ref="refSeavch" :type="type"></item-search>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        @cell-click="cellClick"
        cache-key="systemRoleTable"
      >
        <!-- <template v-slot:selection="{ row }">
          <el-radio class="radio" v-model="currentId" :label="row.id"
            ><i></i
          ></el-radio>
        </template> -->
        <!-- 表头工具栏 -->
        <template v-slot:toolbar="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            @click="downLoad"
          >
            导出收发明细表
          </el-button>
        </template>
        <!-- 状态 -->
        <template v-slot:verifyStatus="{ row }">
          <span :class="status[row.verifyStatus].class">
            {{ status[row.verifyStatus].label }}
          </span>
        </template>
        <template v-slot:bizType="{ row }">
          {{ handleBizType(row.bizType, row.type) }}
        </template>
        <template v-slot:assetType="{ row }">
          {{ handleAssetType(row.extInfo.assetType) }}
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import { sendReceiveExcel } from '@/api/warehouseManagement/statisticalReports';
  import ItemSearch from './components/item-search.vue';
  import * as XLSX from 'xlsx';
  import storageApi from '@/api/warehouseManagement';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { allCategoryLevel } from '@/api/classifyManage';
  import {
    warehousingType,
    sceneState,
    outputSceneState,
    auditStatus,
    useDict
  } from '@/utils/dict/index';
  export default {
    components: { ItemSearch },
    data() {
      return {
        type: '',
        params: {},
        auditStatus,
        outputSceneState,
        warehousingType,
        sceneState,
        codeList: [],
        factoryList: [],
        tableData: [],
        formData: {
          deptIds: '',
          categoryCode: '',
          categoryName: '',
          sourceBizNo: '',
          startTime: '',
          endTime: '',
          status: '',
          factoryId: '',
          time: []
        },
        total: 0,
        status: [
          { label: '未审核', class: 'ele-text-info' },
          { label: '审核中', class: 'ele-text-primary' },
          { label: '审核通过', class: 'ele-text-success' },
          { label: '驳回', class: 'ele-text-danger' }
        ],
        currentId: '',
        currentRow: {},
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },
          {
            prop: 'bizNo',
            label: '单号',
            align: 'center',
            slot: 'bizNo',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'bizType',
            slot: 'bizType',
            label: '出入库类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'assetType',
            slot: 'assetType',
            label: '物品类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'categoryNames',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'categoryCodes',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'sourceBizNo',
            label: '来源单据',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'createUserName',
            label: '操作人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            width: 160,
            prop: 'storageTime',
            label: '出入库时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'verifyName',
            label: '审核人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'verifyStatus',
            label: '状态',
            align: 'center',
            slot: 'verifyStatus',
            showOverflowTooltip: true,
            width: 100
          }
        ]
      };
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    created() {
      this.getTypeList();
    },
    methods: {
      downLoad() {
        const params = Object.assign({}, this.$refs.refSeavch.params);
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        delete params.time;
        sendReceiveExcel(params).then((data) => {
          try {
            let objectUrl1 = window.URL.createObjectURL(new Blob([data]));
            let elink = document.createElement('a');
            elink.setAttribute(
              'download',
              decodeURI(decodeURI('收发明细.xlsx'))
            );
            elink.style.display = 'none';
            elink.href = objectUrl1;
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
            window.URL.revokeObjectURL(elink.href);
          } catch (err) {
            this.$message.error('导出失败,请联系管理员!');
          }
        });
      },
      // 单击获取id
      cellClick(row) {
        this.currentRow = row;
        this.currentId = row.id;
      },
      async getTypeList() {
        const { data } = await allCategoryLevel();
        this.codeList = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },
      handleAssetType(r) {
        const code = this.codeList.find((item) => item.dictCode == r);
        return code?.dictValue;
      },
      handleBizType(code, type) {
        if (type == 1) {
          // 入库
          for (const key in this.sceneState) {
            if (this.sceneState[key].code == code) {
              return this.sceneState[key].label;
            }
          }
        } else {
          // 出库
          for (const key in this.outputSceneState) {
            if (this.outputSceneState[key].code == code) {
              return this.outputSceneState[key].label;
            }
          }
        }
      },
      async datasource({ page, limit, where }) {
        if (where.time && where.time.length > 0) {
          where.startTime = where.time[0];
          where.endTime = where.time[1];
          delete where.time;
        }
        const res = await storageApi.getInboundList({
          pageNum: page,
          size: limit,
          ...where
        });

        return res;
      },
      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      getAuditStatus: useDict(auditStatus),
      getList() {
        this.$refs.table.reload();
      },
      handleCurrentChange() {
        this.getList();
      },
      handleSizeChange() {
        this.formData.page = 1;
        this.getList();
      },
      search() {
        this.formData.page = 1;
        this.getList();
      },
      reset() {
        this.$refs.formName.resetFields();
        this.search();
      }
    }
  };
</script>

<style lang="scss" scoped>
  #stockOrOutgoingManagement_index {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // element-ui样式穿透
    ::v-deep .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            display: flex;
            flex-direction: column;
            .el-table__body-wrapper {
              flex: 1;
            }
          }
        }
      }
    }
    .w100 {
      width: 100% !important;
    }
    .p20 {
      padding: 20px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .mt10 {
      margin-top: 10px;
    }
    .el-form {
      overflow: hidden;
    }
    .float-right {
      float: right;
      text-align: right;
      margin-right: 20px;
    }
    .right {
      text-align: right;
    }
    .col {
      color: #aaa;
    }
    .pr10 {
      padding-right: 10px;
    }
  }
</style>
