<template>
  <div>
    <el-dialog
      :title="`选择${type == 1 ? '入库' : '出库'}申请单`"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="main">
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          @cell-click="cellClick"
          cache-key="workOrderTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:action="{ row }">
            <el-radio class="radio" v-model="currentId" :label="row.id"
              ><i></i
            ></el-radio>
          </template>
          <template v-slot:totalCount="{ row }">
            {{ row.totalCount }} {{ row.measuringUnit }}
          </template>

          <template v-slot:totalPackage="{ row }">
            {{ row.totalPackage }}
          </template>

          <template v-slot:totalWeight="{ row }">
            {{ row.totalWeight }} {{ row.weightUnit }}
          </template>

          <template v-slot:status="{ row }">
            <span>
              {{ statusFormatter(row.status) }}
            </span>
          </template>
        </ele-pro-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { outputSceneState, sceneState } from '@/utils/dict/index';
  import storageApi from '@/api/warehouseManagement';
  import { getCode } from '@/api/codeManagement/index.js';
  export default {
    props: {
      // 1入库 2出库
      type: {
        type: String,
        default: '1'
      }
    },
    data() {
      return {
        outputSceneState,
        sceneState,
        dialogVisible: false,
        currentRow: {},
        currentId: '',
        statusOpt: [
          { label: '待处理', value: 0 },
          { label: '已处理', value: 1 },
          { label: '已撤销', value: 2 }
        ]
      };
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            action: 'action',
            slot: 'action',
            align: 'center',
            label: '选择'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'categoryNames',
            label: '名称',
            align: 'center'
          },
          { label: '型号', prop: 'modelType', width: '150' },
          { label: '规格', prop: 'specification', width: '150' },
          { label: '牌号', prop: 'brandNum', width: '100' },
          {
            prop: 'sourceType',
            label: '出入库类型',
            align: 'center',
            formatter: (row, column, cellValue) => {
              console.log(row);
              switch (this.type) {
                case '1':
                  // 入库
                  return this.sceneState.filter(
                    (item) => item.code == row.sourceType
                  )[0].label;
                case '2':
                  // 出库
                  return this.outputSceneState.filter(
                    (item) => item.code == row.sourceType
                  )[0].label;
              }
            }
          },
          {
            prop: 'approvalUserName',
            label: '审核人',
            align: 'center'
          },
          {
            prop: 'createUserName',
            label: '申请人',
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'status',
            label: '状态',
            align: 'center'
          }
        ];
      }
    },
    methods: {
      handleMine() {
        if (!this.currentId) {
          return this.$message.warning(
            `请选择${this.type == 1 ? '入库' : '出库'}申请单`
          );
        }

        storageApi
          .getApplystoragedetail({ applyId: this.currentId })
          .then(async (res) => {
            this.$emit('detailData', res, this.currentRow.code);
            this.dialogVisible = false;
          });
      },
      // 单击获取id
      cellClick(row) {
        this.currentRow = row;
        this.currentId = row.id;
      },
      statusFormatter(status) {
        const obj = this.statusOpt.find((i) => i.value == status);
        return obj && obj.label;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return storageApi.getinboundRequestsList({
          pageNum: page,
          size: limit,
          status: 0,
          type: this.type,
          ...where
        });
      },
      open() {
        this.dialogVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
      }
    }
  };
</script>
