<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form :model="searchForm" ref="formName" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="出库时间" prop="time">
              <el-date-picker
                class="w100"
                size="small"
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="出库单号" prop="bizNum">
              <el-input
                size="small"
                class="w100"
                placeholder="请输入"
                v-model="searchForm.bizNum"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="领料人" prop="deliveryman">
              <el-input
                size="small"
                class="w100"
                placeholder="请输入"
                v-model="searchForm.deliveryman"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="状态" prop="auditStatus">
              <el-select
                filterable
                size="small"
                class="w100"
                v-model="searchForm.auditStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in auditStatus"
                  :key="item.code"
                  :value="item.code"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <div style="text-align: right">
              <el-button icon="el-icon-refresh-left" size="small" @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="doSearch"
                >搜索</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-form>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add"
            >新建</el-button
          >
          <el-button type="text" @click="details">详情</el-button>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
      <el-table
        class="mt10"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
      >
        <el-table-column width="80px" label="序号">
          <template slot-scope="{ $index }">
            {{ $tableIndex($index, pages.page, pages.size) }}
          </template>
        </el-table-column>
        <el-table-column label="单号">
          <template slot-scope="{ row }">
            <el-link @click="details(row)">{{ row.bizNum }}</el-link>
            <p class="col">{{ row.createTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="{ row }">
            <span :class="getAuditStatus(row.verifyStatus).class">{{
              getAuditStatus(row.verifyStatus).label
            }}</span>
          </template></el-table-column
        >
        <el-table-column label="来源单据" prop="documentSource">
        </el-table-column>
        <el-table-column label="领料人">
          <template slot-scope="scope">
            <p>{{ scope.row.deliveryName }}</p>
            <p class="col">出库：{{ scope.row.verifyTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="登记人" prop="createUserName">
        </el-table-column>
        <!-- <el-table-column label="审核状态">
            <template slot-scope="{ row }">
              <span :class="getAuditStatus(row.auditStatus).class">{{
                getAuditStatus(row.auditStatus).label
              }}</span>
            </template>
          </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="details(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="right mt10">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[5, 10, 15, 20, 30, 40, 50]"
          :page-size.sync="pages.size"
          :current-page.sync="pages.page"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  // import { getPage } from '@/api/stockManagement'
  import { useDict } from '@/utils/dict/index';
  import { auditStatus } from '@/utils/dict/common';

  export default {
    data() {
      return {
        auditStatus,
        searchForm: {
          page: 1,
          size: 5,
          bizNum: '',
          auditStatus: '',
          deliveryman: '',
          bizStatus: 2
        },
        tableData: [],
        pages: {
          page: 1,
          size: 5
        },
        total: 0,
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },

          {
            prop: 'bizNum',
            label: '单号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'verifyStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'documentSource',
            label: '来源单据',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'deliveryName',
            label: '送货人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createUserName',
            label: '登记人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {
      // this.handleList();
    },
    methods: {
      async datasource({ page, limit, where }) {
        const params = Object.assign(this.formData);
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        delete params.time;
        params.bizStatus = 1;
        const res = await getPage(params);
        return {
          list: res.data.records,
          count: res.data.total
        };
      },
      getAuditStatus: useDict(auditStatus),
      async handleList() {
        const parmas = {
          ...this.searchForm,
          ...this.pages
        };
        if (parmas.time?.length) {
          parmas.startTime = parmas.time[0];
          parmas.endTime = parmas.time[1];
        }
        delete parmas.time;
        const res = await getPage(parmas);
        if (res?.success) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      },
      add() {
        this.$router.push({
          path: '/warehouseManagement/outgoingManagement/add'
        });
      },
      details({ id }) {
        this.$router.push({
          path: '/warehouseManagement/outgoingManagement/details',
          query: {
            id
          }
        });
      },
      handleCurrentChange() {
        this.handleList();
      },
      handleSizeChange() {
        this.pages.page = 1;
        this.handleList();
      },
      doSearch() {
        this.pages.page = 1;
        this.handleList();
      },
      reset() {
        this.$refs.formName.resetFields();
        this.doSearch();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .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>
