<template>
  <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form :inline="true">
          <el-form-item>
            <el-select v-model="search.type" placeholder="请选择商品类型">
              <el-option
                v-for="item in commodityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="search.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="productStatus" placeholder="请选择商品状态">
              <el-option
                v-for="item in productStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >
              搜索
            </el-button>
            <el-button @click="handleResetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleCommodityAdd"
          >新增商品</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="search.resultList" border stripe style="width: 100%">
      <el-table-column
        type="index"
        :index="pageIndex"
        align="center"
        label="序号"
        width="50"
      ></el-table-column>

      <el-table-column
        prop="productName"
        label="商品名称"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="type"
        label="商品类型"
        width="140"
        align="center"
        :formatter="fmtCommodityType"
      ></el-table-column>

      <el-table-column
        prop="oriPrice"
        label="产品原价（元）"
        width="140"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="favouredPrice"
        label="折扣后价格（元）"
        width="140"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width="240"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column label="是否启用" width="80" align="center">
        <template slot-scope="scope">
          <el-switch disabled v-model="scope.row.enable"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDetails(scope.row)">
            更多
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <br />

    <div style="text-align: right">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        :current-page="search.resultPagination.currentPage"
        :page-sizes="search.resultPagination.pageSizes"
        :page-size="search.resultPagination.pageSize"
        :total="search.resultPagination.total"
        @size-change="handleSearchResultSizeChange"
        @current-change="handleSearchResultCurrentChange"
      ></el-pagination>
    </div>

    <dialog-commodity-edit
      ref="dialogCommodityEdit"
      @close="handleDialogClose"
    ></dialog-commodity-edit>
  </div>
</template>

<script>
import CommodityService from "@/api/commodity";
import DialogCommodityEdit from "./components/dialog-commodity-edit.vue";

// 商品类型
const commodityOptions = [
  {
    value: "base",
    label: "基础主体套餐",
  },
  {
    value: "ext",
    label: "附加增值套餐",
  },
];

export default {
  name: "CommodityAll",
  components: {
    DialogCommodityEdit,
  },
  data() {
    return {
      loading: false,
      commodityOptions: commodityOptions,
      productStatusList: [
        {
          value: true,
          label: "启用",
        },
        {
          value: false,
          label: "未启用",
        },
      ],
      productStatus: true,
      search: {
        type: "", // 商品类型
        name: "", // 商品名称
        resultList: [],
        resultPagination: {
          currentPage: 1,
          pageSizes: [10, 30, 50, 100],
          pageSize: 10,
          total: 0,
        },
      },
    };
  },
  created() {
    this.callFind(
      this.search.resultPagination.currentPage,
      this.search.resultPagination.pageSize
    );
  },
  methods: {
    pageIndex(index) {
      let currentPage = this.search.resultPagination.currentPage; // 当前页码，具体看组件取值
      let pageSize = this.search.resultPagination.pageSize; // 每页条数，具体是组件取值
      return index + 1 + (currentPage - 1) * pageSize;
    },
    fmtCommodityType(row, column, cellValue) {
      let result = cellValue;
      for (const item of commodityOptions) {
        if (item.value === cellValue) {
          result = item.label;
          break;
        }
      }
      return result;
    },
    handleSearch() {
      this.callFind(1, this.search.resultPagination.pageSize);
    },
    handleResetSearch() {
      this.search.type = "";
      this.search.name = "";
    },
    handleSearchResultSizeChange(val) {
      this.callFind(1, val);
    },
    handleSearchResultCurrentChange(val) {
      this.callFind(val, this.search.resultPagination.pageSize);
    },
    handleCommodityAdd() {
      this.$router.push({
        name: "CommodityAdd",
      });
    },
    callFind(pageNum, pageSize) {
      this.loading = true;
      let _this = this;
      CommodityService.find({
        productName: this.search.name,
        type: this.search.type,
        enable: this.productStatus,
        pageNum: pageNum,
        pageSize: pageSize,
      })
        .then((val) => {
          _this.search.resultPagination.total = val.data.total;
          _this.search.resultPagination.pageSize = val.data.size;
          _this.search.resultPagination.currentPage = val.data.current;
          _this.search.resultList = val.data.records;
        })
        .catch((err) => {
          _this.$message.error(err);
        })
        .finally(() => {
          _this.loading = false;
        });
    },
    handleDetails(row) {
      const rowCopy = JSON.parse(JSON.stringify(row));
      this.$refs.dialogCommodityEdit.open(rowCopy);
    },

    handleDialogClose() {
      this.callFind(
        this.search.resultPagination.currentPage,
        this.search.resultPagination.pageSize
      );
    },
  },
};
</script>

<style lang="stylus" scoped></style>
