<template>
  <div class="app-container">
    <!-- <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="商品名称" prop="spuName">
        <el-input
          v-model="queryParams.spuName"
          placeholder="请输入商品名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </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-table v-loading="loading" :data="configList" row-key="id">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.goodsDto.pic"
            :preview-src-list="[scope.row.goodsDto.pic]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsDto.title }}
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsDto.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsDto.skuList[0].skuPriceList[0].price }}/{{
            scope.row.goodsDto.unit
          }}
        </template>
      </el-table-column>

      <el-table-column label="起批量" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsDto.skuList[0].skuPriceList[0].minPurchase
          }}{{ scope.row.goodsDto.unit }}
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsDto.skuList[0].stock }}{{ scope.row.goodsDto.unit }}
        </template>
      </el-table-column>
      <el-table-column label="经营区域" align="center">
        <template slot-scope="scope">
          {{
            scope.row.goodsDto.scope == 0
              ? "全国"
              : scope.row.goodsDto.scope == 1
              ? "同城"
              : "特价"
          }}
        </template>
      </el-table-column>

      <el-table-column label="销售模式" align="center">
        <template slot-scope="scope">
          {{
            scope.row.goodsDto.saleModel == 1
              ? "现货"
              : scope.row.goodsDto.saleModel == 2
              ? "预售"
              : ""
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="销售方式" align="center">
        <template slot-scope="scope">
          {{
            scope.row.goodsDto.saleType == 0
              ? "整车"
              : scope.row.goodsDto.saleType == 1
              ? "同城"
              : scope.row.goodsDto.saleType == 2
              ? "拼车"
              : scope.row.goodsDto.saleType == 3
              ? "一件代发"
              : ""
          }}  
        </template>
      </el-table-column> --> 
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >编辑商品</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getGoodsListPage,
  getGoodsInfo,
  GoodsUpOrDown,
  editGoods,
  getGoodsDraftById,
  goodsRemove,
  deleteGoodsDraft,
  getGoodsDraftByUserId,
} from "@/api/manage/product";
export default {
  name: "product",
  data() {
    return {
      // 遮罩层
      loading: true,
      configList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getGoodsDraftByUserId().then((res) => {
        this.configList = res.data;
        console.log(this.configList);
        this.loading = false;
      });
    },
    handleDelete(record) {
      this.$confirm("是否确认删除该商品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteGoodsDraft({
            id: record.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`删除成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleUpdate(record) {
      getGoodsDraftById({ id: record.id }).then((res) => {
        if (res.code == 200) {
          let params = res.data.goodsDto;
          params.goodsDraftId=record.id
          this.$router.push({
            path: "/product/product/updateProduct",
            query: { params },
          });
        }
      });
    },
  },
};
</script>
<style>
.el-form-item {
  margin-bottom: 10px;
}
</style>
