<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-input v-model="searchParams.search_name" placeholder="请输入商品名称" size="small" style="width:250px" />
      <el-button
        type="primary"
        size="small"
        @click="searchParams.page_index = 1;getGoodStock()"
      >
        查询
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="img_url"
        label="图片"
        width="70"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-image
            style="width: 40px; height: 40px"
            :src="row.img_url"
            fit="scale-down"
            class="hoverImg"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        align="center"
      />
      <el-table-column
        prop="total"
        label="总库存"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.total ? row.total : '不限量' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="goodstotal"
        label="总待出库数量"
        align="center"
      >
        <template slot="header" slot-scope="{ column }">
          <el-tooltip class="item" effect="dark" content="点击查看具体规格" placement="top">
            <i class="el-icon-info">{{ column.label }}</i>
          </el-tooltip>
        </template>
        <template slot-scope="{ row }">
          <el-button type="text" @click="showStockGood(row)">{{ row.goodstotal }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="查看规格"
        width="120"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="showStockGood(row)">查看规格</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="batch-container">
      <!-- 分页 -->
      <pagination
        :total="tableTotal"
        :limit="searchParams.page_size"
        :page="searchParams.page_index"
        style="margin-top:0"
        @pagination="changePagination"
        @update:limit="changePagination"
      />
    </div>
    <el-drawer
      title="待出库商品规格"
      :visible.sync="visible.stock"
      direction="rtl"
    >
      <el-form label-width="20px">
        <el-form-item>
          <div v-for="(item, i) in stockGoogs" :key="i" style="line-height: 23px;">
            <p>{{ `${Object.values(item.style).join('-')}-(数量: ${item.num})` }}</p>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
// api
import { getGoodStock } from '@/api/stock/goods'
export default {
  data() {
    return {
      searchParams: {
        search_name: '',
        page_size: 10,
        page_index: 1
      },
      table: [],
      tableTotal: 0,
      stockGoogs: [],
      visible: {
        stock: false
      },
      loadingFull: false
    }
  },
  created() {
    this.getGoodStock()
  },
  methods: {
    // 获取列表
    async getGoodStock() {
      this.loadingFull = true
      try {
        const res = await getGoodStock(this.searchParams)
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          const { total, list } = data
          this.tableTotal = total
          this.table = list
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error('获取商品库存失败!!')
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getGoodStock()
    },
    // 查看库存规格
    showStockGood(row) {
      const { style } = row
      this.stockGoogs = style
      this.visible.stock = true
    }
  }
}
</script>
<style lang="scss" scoped>
    .tableBorder{
        border: 1px solid #EBEEF5;
        margin: 20px 0;
    }
</style>
