<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
            class="filter-item" @keyup.enter.native="getTableData" />
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.categoryId" placeholder="请选择商品分类" style="width: 100%;">
            <el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.typeEnum" placeholder="请选择商品规格" style="width: 100%;">
            <el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <el-row>
        <el-col>
          <router-link :to="{ name: 'add_shop' }">
            <el-button type="primary" icon="el-icon-plus">添加商品</el-button>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <el-table :data="tableData.data" v-loading="tableData.loading">
        <el-table-column label="商品信息">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.coverImg"
                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
                <div class="img_error" slot="error">
                  <i class="icon el-icon-document-delete"></i>
                </div>
              </el-image>
              <div class="info">
                <span>{{ scope.row.name }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价">
          <template v-slot="scope">
            <span>￥{{ scope.row.lowPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销量/库存">
          <template v-slot="scope">
            <span>{{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上架区域">
          <template v-slot="scope">
            <div v-if="scope.row.isShowCash">收银端</div>
            <div v-if="scope.row.isShowMall">小程序</div>
            <div v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</div>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" sortable />
        <el-table-column label="更新时间" prop="createdAt">
          <template v-slot="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
              <el-button type="text" icon="el-icon-edit">编辑</el-button>
            </router-link>
            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
              <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
                slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
        @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import settings from '@/settings'
import { tbProduct, tbShopCategoryGet, tbProductDelete } from '@/api/shop'
export default {
  data() {
    return {
      dayjs,
      query: {
        name: '',
        categoryId: '',
        typeEnum: ''
      },
      categorys: [],
      typeEnums: settings.typeEnum,
      tableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0
      }
    }
  },
  mounted() {
    this.getTableData()
    this.tbShopCategoryGet()
  },
  methods: {
    // 重置查询
    resetHandle() {
      this.query.name = ''
      this.query.categoryId = ''
      this.query.typeEnum = ''
      this.getTableData()
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1
      this.getTableData()
    },
    // 获取商品列表
    async getTableData() {
      this.tableData.loading = true
      try {
        const res = await tbProduct({
          page: this.tableData.page,
          size: this.tableData.size,
          name: this.query.name,
          categoryId: this.query.categoryId,
          typeEnum: this.query.typeEnum,
          shopId: localStorage.getItem('shopId')
        })
        this.tableData.loading = false
        this.tableData.data = res.content
        this.tableData.total = res.totalElements
      } catch (error) {
        console.log(error)
      }
    },
    // 获取商品分类列表
    async tbShopCategoryGet() {
      try {
        const res = await tbShopCategoryGet({
          shopId: localStorage.getItem('shopId'),
          page: 0,
          size: 100,
          sort: 'id'
        })
        this.categorys = res.content
      } catch (error) {
        console.log(error)
      }
    },
    // 删除商品
    async delTableHandle(ids) {
      try {
        await tbProductDelete(ids)
        this.getTableData()
      } catch (error) {
        console.log(error)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}
</style>
