<template>
  <el-dialog
    title="选择商品"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <div>
      <el-tabs v-model="queryParams.spuType" @tab-click="handleQuery">
        <el-tab-pane label="批发商品" name="0"></el-tab-pane>
        <el-tab-pane label="秒送商品" name="1"></el-tab-pane>
        <el-tab-pane label="福利商品" name="2"></el-tab-pane>
      </el-tabs>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <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 label="商品分类" prop="categoryId">
          <el-cascader
            v-model="queryParams.categoryId"
            ref="formCascader"
            placeholder="请选择分类"
            :props="categoryprops"
            style="width: 240px"
            @change="cascaderChange"
          />
        </el-form-item>

        <el-form-item label="店铺分类" prop="merchantClassifyId">
          <el-cascader
            v-model="queryParams.merchantClassifyId"
            ref="formCascader"
            placeholder="请选择分类"
            :props="categorypropsmerchant"
            style="width: 240px"
            @change="cascadermerchantChange"
          />
        </el-form-item>

        <el-form-item label="商品状态" prop="spuStatus">
          <el-select
            v-model="queryParams.spuStatus"
            placeholder="请选择商品状态"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="售罄" value="2"> </el-option>
            <el-option label="上架" value="0"> </el-option>
            <el-option label="下架" value="1"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="销售方式"
          prop="saleModel"
          v-if="queryParams.spuType == 0"
        >
          <el-select
            v-model="queryParams.saleModel"
            placeholder="请选择销售方式"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="普通商品" value="1"> 普通商品</el-option>
            <el-option label="集采预售" value="2"> 集采预售</el-option>
            <el-option label="团批秒杀" value="3">团批秒杀 </el-option>
            <el-option label="清库专区" value="4"> 清库专区</el-option>
            <el-option label="新店福利" value="5"> 新店福利</el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="销售方式"
          prop="saleModel"
          v-if="queryParams.spuType == 1"
        >
          <el-select
            v-model="queryParams.saleModel"
            placeholder="请选择销售方式"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="普通商品" value="1"> 普通商品</el-option>
            <el-option label="采集预售" value="2"> 预售</el-option>
            <el-option label="团购秒杀" value="3">团购秒杀 </el-option>
            <el-option label="特价" value="4"> 特价</el-option>
            <el-option label="新人福利" value="5"> 新人福利</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖励设置" prop="isShare">
          <el-select
            v-model="queryParams.isShare"
            placeholder="请选择奖励设置"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="未设置" value="0"> 未设置</el-option>
            <el-option label="已设置" value="1"> 已设置</el-option>
          </el-select>
        </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="tableList"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <!-- shareRate -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="checkSelectable"
        />
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.pic"
              :preview-src-list="[scope.row.pic]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          prop="spuName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="分类" align="center" prop="categoryName" />
        <el-table-column
          label="店铺所属分类"
          align="center"
          prop="merchantClassifyName"
        />
        <el-table-column label="价格" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.lowestPrice.toFixed(2) }}/{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="起批量" align="center">
          <template slot-scope="scope">
            {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="预计库存" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalPredictStocks ? scope.row.totalPredictStocks : 0
            }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="实际库存" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalStocks }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="实际销量" align="center" prop="salesVolume">
        </el-table-column>
        <el-table-column
          label="销售方式"
          align="center"
          v-if="queryParams.spuType == 0"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.saleModel == 1
                  ? "普通商品"
                  : scope.row.saleModel == 2
                  ? "采集预售"
                  : scope.row.saleModel == 3
                  ? "团批秒杀"
                  : scope.row.saleModel == 4
                  ? "清库专区"
                  : scope.row.saleModel == 5
                  ? "新店福利"
                  : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="销售方式"
          align="center"
          v-if="queryParams.spuType == 1"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.saleModel == 1
                  ? "普通商品"
                  : scope.row.saleModel == 2
                  ? "预售"
                  : scope.row.saleModel == 3
                  ? "团购秒杀"
                  : scope.row.saleModel == 4
                  ? "特价"
                  : scope.row.saleModel == 5
                  ? "新人福利"
                  : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.spuStatus == 2
                ? "售罄"
                : scope.row.spuStatus == 0
                ? "上架"
                : scope.row.spuStatus == 1
                ? "下架"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="奖励设置" align="center">
          <template slot-scope="scope">
            {{
              scope.row.isShare == 0
                ? "未设置"
                : scope.row.shareRate
                ? scope.row.shareRate + "%"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getMerchantClassifyList } from "@/api/sort/index.js";
import { getGoodsListPage } from "@/api/manage/product";
import { getClassificationListPage } from "@/api/common/index";
export default {
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        saleModel: "",
        pageNo: 1,
        pageSize: 5,
        spuName: "",
        categoryId: "",
        spuStatus: "",
        saleType: "",
        scope: "",
        benefitType: "",
        isShare: "",
        spuType: 0,
      },
      total: 0,
      loading: false,
      tableList: [],
      categoryprops: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoad,
      },
      categorypropsmerchant: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoadmerchant,
      },
      multipleSelection: [],
    };
  },
  methods: {
    checkSelectable(row, index) {
      console.log(row);
      if (row.isShare == 0) {
        return !row.disabled;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogSubmit() {
      this.multipleSelection = this.multipleSelection.map((item) => {
        // 为每个对象添加新字段
        return { ...item, spuType: this.queryParams.spuType };
      });
      this.$emit("productDialogInfo", this.multipleSelection);
      this.handleClose();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      if (this.queryParams.spuType == 2) {
        this.queryParams.benefitType = 1;
      } else {
        this.queryParams.benefitType = "";
      }
      this.getList();
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getGoodsListPage(this.queryParams).then((res) => {
        this.tableList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.dialogVisible = true;
      this.getList();
    },
    cascaderChange(val) {
      if (val.length == 1) {
        this.queryParams.categoryId = val[0];
      } else if (val.length == 2) {
        this.queryParams.categoryId = val[1];
      } else if (val.length == 3) {
        this.queryParams.categoryId = val[2];
      }
    },
    categoryLazyLoad(node, resolve) {
      let level = node.level;
      if (!node.data) {
        getClassificationListPage({ parentId: 0 }).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
          }));
          resolve(nodes);
        });
      } else if (level == 1) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
            // level: 2,
          }));
          resolve(nodes);
        });
      } else if (level == 2) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 1,
            level: 1,
          }));
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
    cascadermerchantChange(val) {
      if (val.length == 1) {
        this.queryParams.merchantClassifyId = val[0];
      } else if (val.length == 2) {
        this.queryParams.merchantClassifyId = val[1];
      } else if (val.length == 3) {
        this.queryParams.merchantClassifyId = val[2];
      }
    },
    categoryLazyLoadmerchant(node, resolve, sortType) {
      let params = {
        classifyType: 1,
      };
      if (sortType) {
        params.isDefault = 1;
      }
      let level = node.level;
      if (!node.data) {
        getMerchantClassifyList(params).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.classifyName}`,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getMerchantClassifyList({
          parentId: node.data.value,
          classifyType: 1,
        }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.classifyName}`,
            leaf: level >= 2,
            // level: 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>

<style>
.el-cascader-panel
  > .el-scrollbar:first-child
  > .el-cascader-menu__wrap
  > .el-cascader-menu__list
  > .el-cascader-node
  > .el-radio {
  display: block;
}
</style>
