<template>
  <div class="app-container">
    <!-- 检索区 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="出库搜索" prop="keyword">
          <el-input
            v-model="queryParams.keyword"
            placeholder="出库单号/商品名称/订单号"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="出库类型" prop="outboundType">
          <el-select v-model="queryParams.outboundType" placeholder="全部" clearable style="width: 150px">
            <el-option v-for="item in outboundTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="经办人" prop="operatorId">
          <el-select v-model="queryParams.operatorId" placeholder="全部" clearable filterable style="width: 140px">
            <el-option
              v-for="item in operatorOptions"
              :key="item.operatorId"
              :label="item.operatorName"
              :value="item.operatorId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <br/>

    <!-- 列表区 -->
    <el-card shadow="never" class="table-card">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-minus" size="mini" @click="handleCreate" v-hasPermi="['agri:seller:stock:outbound:add']">商品出库</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table border v-loading="loading" :data="outboundList" :empty-text="emptyTableText">
        <el-table-column label="出库单号" align="center" prop="outboundNo" min-width="180" :show-overflow-tooltip="true" />
        <el-table-column label="出库类型" align="center" width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.outboundTypeText || outboundTypeLabel(scope.row.outboundType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出库时间" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.outboundTime) || '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经办人" align="center" prop="operatorName" width="100" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.operatorName || '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)" v-hasPermi="['agri:seller:stock:outbound:query']">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 详情抽屉 -->
    <seller-stock-outbound-detail
      ref="outboundDetail"
      :visible.sync="detailOpen"
      :outbound-id="currentOutboundId"
    />

    <!-- 手工出库抽屉 -->
    <seller-stock-outbound-form
      :visible.sync="formOpen"
      @success="handleFormSuccess"
    />
  </div>
</template>

<script>
import {
  listSellerStockOutbound,
  listStockOutboundOperators
} from "@/api/agri/seller/stock/outbound"
import { getSellerContext } from "@/api/agri/seller/context"
import { setSellerShopContext } from "@/utils/sellerShop"
import SellerStockOutboundDetail from "./detail"
import SellerStockOutboundForm from "./form"

const OUTBOUND_TYPE_MAP = {
  "0": "下单扣减",
  "1": "删除产品规格",
  "2": "订单出库",
  "3": "过期出库",
  "4": "其他出库"
}

export default {
  name: "AgriSellerStockOutbound",
  components: { SellerStockOutboundDetail, SellerStockOutboundForm },
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      outboundList: [],
      dateRange: [],
      operatorOptions: [],
      detailOpen: false,
      formOpen: false,
      currentOutboundId: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        outboundType: undefined,
        operatorId: undefined
      },
      outboundTypeOptions: [
        { value: "0", label: "下单扣减" },
        { value: "1", label: "删除产品规格" },
        { value: "2", label: "订单出库" },
        { value: "3", label: "过期出库" },
        { value: "4", label: "其他出库" }
      ]
    }
  },
  computed: {
    hasSearchFilter() {
      return !!(this.queryParams.keyword || this.queryParams.outboundType || this.queryParams.operatorId || (this.dateRange && this.dateRange.length))
    },
    emptyTableText() {
      return this.hasSearchFilter ? "未找到符合条件的出库单" : "暂无出库记录"
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    outboundTypeLabel(type) {
      return OUTBOUND_TYPE_MAP[type] || "—"
    },
    initPage() {
      this.loadShopContext().then(() => {
        this.loadOperators()
        this.getList()
      }).catch(() => {
        this.loadOperators()
        this.getList()
      })
    },
    loadShopContext() {
      return getSellerContext().then(response => {
        const data = response.data || {}
        if (data.shopId != null) {
          setSellerShopContext(data.shopId, data.shopName)
        }
      })
    },
    loadOperators() {
      listStockOutboundOperators().then(response => {
        this.operatorOptions = response.data || []
      }).catch(() => {
        this.operatorOptions = []
      })
    },
    getList() {
      this.loading = true
      listSellerStockOutbound(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.outboundList = response.rows || []
        this.total = response.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleCreate() {
      this.formOpen = true
    },
    handleDetail(row) {
      this.currentOutboundId = row.outboundId
      this.detailOpen = true
    },
    handleFormSuccess() {
      this.loadOperators()
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.mb8 {
  margin-bottom: 8px;
}
</style>
