<template>
  <div class="app-container">
    <el-row :gutter="20"
      class="container">
      <!--商品分类-->
      <category-tree :options="seriesOptions"
        :defaultProps="defaultProps"
        :nodeKey="nodeKey"
        placeholder="搜索商品系列"
        v-model="queryParams.seriesId"
        @search="handleQuery"
        :colSpan="4"></category-tree>
      <!--商品数据-->
      <el-col :span="20"
        :xs="24"
        class="right_col">
        <el-form :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px">
          <el-form-item label="商品编码"
            prop="prdCode">
            <el-input v-model="queryParams.prdCode"
              placeholder="请输入商品编码"
              clearable
              style="width: 240px"
              @input="handleQuery" />
          </el-form-item>
          <el-form-item label="商品名称"
            prop="prdName">
            <el-input v-model="queryParams.prdName"
              placeholder="请输入商品名称"
              clearable
              style="width: 240px"
              @input="handleQuery" />
          </el-form-item>
          <el-form-item label="商品状态"
            prop="status">
            <el-select v-model="queryParams.saleStatus"
              placeholder="请选择商品状态"
              clearable
              style="width: 240px"
              @change="handleQuery">
              <el-option v-for="dict in product_sale_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-row :gutter="10"
          class="mb8">
          <right-toolbar v-model:showSearch="showSearch"
            @queryTable="getProductList"
            :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="loading"
          :data="productList">
          <el-table-column label="商品编码"
            key="prdCode"
            prop="prdCode"
            v-if="columns[0].visible" />
          <el-table-column label="商品名字"
            key="prdName"
            prop="prdName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true" />
          <el-table-column label="系列名字"
            key="series"
            prop="series"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true" />
          <el-table-column label="条码"
            key="prdSpec"
            prop="prdSpec"
            v-if="columns[3].visible"
            :show-overflow-tooltip="true" />
          <el-table-column label="售卖状态"
            key="saleStatus"
            v-if="columns[4].visible">
            <template v-slot="scope">
              <el-switch v-model="scope.row.saleStatus"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作"
            class-name="small-padding fixed-width"
            v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination class="pagination"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getProductList" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getSeriesListAPI, getProductListAPI } from "@/api";
const { proxy } = getCurrentInstance();
const { product_sale_status } = proxy.useDict("product_sale_status"); // 商品售卖状态 0:停售,1:在售

const seriesOptions = ref([]) // 系列树结构数据
const defaultProps = reactive({ // 系列树默认取值字段
  label: 'seriesName',
  children: 'children'
})
const nodeKey = ref('seriesId')// 系列树主键字段
const queryParams = reactive({ // 查询参数
  pageNum: 1,
  pageSize: 10,
  seriesId: '',
})
const productList = ref([]) // 商品列表
const loading = ref(true) // 表格遮罩层
const showSearch = ref(true) // 显示搜索条件
const total = ref(0) // 商品总条数
// 列信息
const columns = ref([
  { key: 0, label: `商品编码`, visible: true },
  { key: 1, label: `商品名字`, visible: true },
  { key: 2, label: `系列名字`, visible: true },
  { key: 3, label: `条码`, visible: true },
  { key: 4, label: `售卖状态`, visible: true },
  { key: 5, label: `操作`, visible: true }
])

/** 查询系列树结构 */
const getSeriesTree = () => {
  getSeriesListAPI().then(response => {
    seriesOptions.value = response.data;
  });
}
/** 查询商品列表 */
const getProductList = () => {
  loading.value = true;
  getProductListAPI(queryParams).then(response => {
    productList.value = response.data.rows;
    total.value = response.data.total;
    loading.value = false;
  });
}
/** 搜索表单触发操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getProductList();
}

// 售卖状态改变
const handleStatusChange = (row) => {

}

getSeriesTree()
getProductList()
</script>

<style scoped
  lang="scss">
  .app-container {
    .container {
      flex-direction: row;

      .right_col {
        flex: 1 !important;
        transition: all .5s;
        display: flex;
        flex-direction: column;
        height: 100%;

        .el-form-item {
          margin-bottom: 0;
        }

        .pagination {
          /* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
          margin-top: auto;
        }

        &.el-col-20 {
          width: 83.33333333%;
          max-width: none;
        }
      }
    }
  }
</style>