<!-- 三方商品管理 - 商品列表 -->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="thetopbox">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="'商品分类'">
              <el-cascader
                style="width: 100%"
                class="theCascader"
                v-model="queryParams.theOptions"
                :options="optionList"
                :props="regionParams"
                clearable
                @visible-change="validateCascader"
                ref="cascader"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'商品名称'">
              <el-input v-model="queryParams.productName" clearable />
            </el-form-item>
          </el-col>
          
          <el-col :span="4">
           
            <el-form-item :label="'是否上架'">
              <el-select
                v-model="queryParams.isPutOn"
                clearable
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in yesnoList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item label="品牌名称">
              <el-input v-model="queryParams.brandName" clearable />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="4">
            <el-form-item :label="'平台'">
              <el-select @change="changeSource" v-model="queryParams.source" :placeholder="'请选择'">
                <el-option
                  v-for="item in sourceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <!--
          <el-col :span="4">
            <el-form-item :label="'商品分类'">
              <el-select
                v-model="queryParams.category"
                clearable
                :placeholder="'请选择'"
                @change="changeClaasify"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.tid"
                  :label="item.title"
                  :value="item.tid"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
         
          
          <el-col :span="4">
            <el-form-item :label="'直供序号'">
              <el-input
                type="number"
                v-model="queryParams.pkTWaresSku"
                clearable
                @blur="changeTWaresSku"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'是否推荐'">
              <el-select clearable v-model="queryParams.isRecommend">
                <el-option
                  v-for="item in isTj"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'供应价起止'">
              <div class="qzprice">
                <el-input
                  clearable
                  v-model="queryParams.agreementPriceStart"
                  :placeholder="'请输入'"
                >
                  <!-- <i slot="suffix" class="neibu"
                    >{{ `${getUser.currency.symbol}` }}
                  </i> -->
                </el-input>
                <div class="xian">——</div>
                <el-input
                  clearable
                  v-model="queryParams.agreementPriceEnd"
                  :placeholder="'请输入'"
                >
                  <!-- <i slot="suffix" class="neibu"
                    >{{ `${getUser.currency.symbol}` }}
                  </i> -->
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'售价起止'">
              <div class="qzprice">
                <el-input
                  clearable
                  v-model="queryParams.priceStart"
                  :placeholder="'请输入'"
                >
                </el-input>
                <div class="xian">——</div>
                <el-input
                  clearable
                  v-model="queryParams.priceEnd"
                  :placeholder="'请输入'"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="searchbox">
              <el-button
                class="my_search"
                @click="
                  () => {
                    getSearch();
                    getCzNum();
                  }
                "
              >
                {{ '搜索' }}</el-button
              >
              <el-button class="my_reset" @click="reChongzhi">
                {{ '重置' }}</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            size="small"
            class="thebtn1"
            @click="update()"
            :disabled="single"
            >{{ '修改' }}</el-button
          >
          <el-button
            size="small"
            class="thebtn2"
            :disabled="multiple"
            @click="handelSxjia(0)"
            >{{ '上架' }}</el-button
          >
          <el-button
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="handelSxjia(1)"
            >{{ '下架' }}</el-button
          >
          <el-button size="small" class="thebtn4" @click="handleExport">
            {{ '导出' }}</el-button
          >
          <el-button
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="deleteData()"
          >
            {{ '删除' }}</el-button
          >
        </div>
      </div>
      <div class="maintable">
        <el-table
          :data="tableData"
          v-loading="loading"
          height="660px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- type="index" -->
          <el-table-column
            align="center"
            prop="pkTWaresSku"
            :label="'直供序号'"
          >
          </el-table-column>
          <el-table-column align="center" :label="'商品图片'">
            <template slot-scope="scope">
              <el-image
                style="
                  width: 48px;
                  height: 48px;
                  border-radius: 10px;
                  cursor: pointer;
                "
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'商品名称'"
            min-width="200px"
          >
          </el-table-column>
          <el-table-column
            min-width="150px"
            align="center"
            prop="titleCategory"
            :label="'商品分类'"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="productClassify"
            label="类目分类"
          >
          </el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="brandName"
            min-width="150px"
            label="品牌名称"
          >
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="specValueNames"
            min-width="150px"
            :label="'商品规格'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="sourceVal"
            :label="'平台'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="agreementPrice"
            :label="`${'供应价'}(${getUser.currency.symbol})`"
            min-width="120px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="price"
            :label="`${'售价'}(${getUser.currency.symbol})`"
            min-width="120px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="achieve"
            :label="`${'业绩'}` + `(${getUser.currency.symbol})`"
            min-width="120px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="achievementDollar"
            :label="`${'业绩'}` + `(${isLocals()})`"
            min-width="120px"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="grossProfit"
            :label="`${'毛利润'}(${getUser.currency.symbol})`"
            min-width="120px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="netProfit"
            :label="`${'纯利润'}(${getUser.currency.symbol})`"
            min-width="120px"
          >
          </el-table-column>
          <el-table-column align="center" prop="sale" :label="'虚拟销量'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="realSale"
            :label="'实际销量'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="summer"
            :label="'销量'"
          >
            <template slot-scope="scope">
              {{ scope.row.sale + scope.row.realSale }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="isRecommendVal"
                           :label="'是否推荐'">
          </el-table-column>
          <el-table-column
            min-width="150px"
            align="center"
            prop="putOnRemark"
            :label="'下架说明'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            min-width="180px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="update(scope.row)"
                type="text"
                size="small"
                class="button-s"
                style="color: #48b2fd; padding: 0"
              >
                {{ '修改' }}
              </el-button>
              <el-button
                @click.native.prevent="handelSxjia(0, scope.row)"
                type="text"
                size="small"
                class="button-s"
                v-if="scope.row.isPutOn == 1"
                style="color: #009b58; padding: 0"
              >
                {{ '上架' }}
              </el-button>

              <el-button
                class="button-s"
                @click.native.prevent="handelSxjia(1, scope.row)"
                type="text"
                size="small"
                style="color: #e41b1b; padding: 0"
                v-if="scope.row.isPutOn == 0"
              >
                {{ '下架' }}
              </el-button>

              <el-button
                class="button-s"
                @click.native.prevent="handelRecommend(0, scope.row)"
                type="text"
                size="small"
                style="color: #009b58; padding: 0"
                v-if="scope.row.isRecommend == 1"
                >{{ '推荐' }}</el-button
              >
              <el-button
                class="button-s"
                @click.native.prevent="handelRecommend(1, scope.row)"
                type="text"
                size="small"
                style="color: #e41b1b; padding: 0"
                v-if="scope.row.isRecommend == 0"
              >
                {{ '取消' }} {{ '推荐' }}</el-button
              >
              <el-button
                class="button-s"
                @click.native.prevent="deleteData(scope.row)"
                type="text"
                size="small"
                style="color: #e41b1b; padding: 0"
              >
                {{ '删除' }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getSearch"
      :pageSizes="pageSizes"
    />
    <el-dialog
      :title="'修改'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="40%"
      center
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="'商品名称'" prop="productName">
              <el-input v-model="form.productName" clearable />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="品牌名称" prop="brandName">
              <el-input v-model="form.brandName" clearable />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item :label="'商品分类'" prop="theOptions">
              <el-cascader
                style="width: 100%"
                v-model="form.theOptions"
                :options="optionList"
                :props="regionParams"
                clearable
                @visible-change="validateCascader2"
                ref="cascader2"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'虚拟销量'" prop="sale">
              <el-input type="number" :min="0" v-model="form.sale" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="`${'售价'}(${getUser.currency.symbol})`"
              prop="price"
            >
              <el-input v-model="form.price" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'业绩比例' + '(%)'" prop="yjbl">
              <el-input
                @input="changeChieve"
                type="number"
                v-model="form.yjbl"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="'业绩' + `(${isLocals()})`"
              prop="achievementDollar"
            >
              <el-input
                :style="
                  form.achievementDollar <= 0 ? 'border:1px solid red' : ''
                "
                disabled
                v-model="form.achievementDollar"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="'业绩' + `(${getUser.currency.symbol})`"
              prop="achieve"
            >
              <el-input
                :style="form.achieve <= 0 ? 'border:1px solid red' : ''"
                disabled
                v-model="form.achieve"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="`${'供应价'}(${getUser.currency.symbol})`"
              prop="agreementPrice"
            >
              <el-input disabled v-model="form.agreementPrice" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="`${'毛利润'}(${getUser.currency.symbol})`"
            >
              <el-input
                :style="form.grossProfit < 0 ? 'border:1px solid red' : ''"
                disabled
                v-model="form.grossProfit"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'商品规格'" prop="specValueNames">
              <el-input v-model="form.specValueNames" disabled clearable />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              :label="`${'纯利润'}(${getUser.currency.symbol})`"
            >
              <el-input
                :style="form.netProfit < 0 ? 'border:1px solid red' : ''"
                disabled
                v-model="form.netProfit"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="'实际销量'" prop="realSale">
              <el-input disabled v-model="form.realSale" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button type="primary" @click="onSubmit('form')">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import * as three from "@/api/threegoods";
import { isLocals } from "@/utils/numberToCurrency";
import { mapGetters } from "vuex";
export default {
  name: "ThreeGoodsList",
  components: {
    topBar,
  },
  data() {
    return {
      moren: "threeGoodsList",
      topList: [
        {
          name: '商品列表',
          path: "threeGoodsList",
        },
      ],
      loading:false,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        source: 0,
        isPutOn: 1,
        theOptions: [], //商品分类
        pkTWaresSku: "",
      },
      sourceList: [],
      yesnoList: [],
      wayList: [
        { value: "1", label: '比例' },
        { value: "2", label: '比值' },
      ],
      total: 0,
      multipleSelection: [],
      multiple: true,
      single: true,
      dialogVisible: false,
      form: {
        productName: "", //商品名称
        brandName: "", //品牌名称
        theOptions: [], //商品分类
        yjbl: "",
        // pkProductClassify: "", //类目分类
        specValueNames: "", //商品规格
        price: "", //售价
        achieve: "", //pv
        shareAchieve: "", //分享pv
        grossProfit: "", //毛利润
        netProfit: "", //纯利润
        pkCategoryOne: "",
        pkCategoryTwo: "",
        pkCategoryThree: "",
        sale: "0",
      },
      regionParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      pageSizes: [100, 200, 500],
      optionList: [],
      isTj:[
        {
          label: '推荐',
          value: 0,
        },
        {
          label: '不推荐',
          value: 1,
        },
      ],
      rules: {
        productName: [
          { required: true, message: '请输入商品名称', trigger: "blur" },
        ],
        // brandName: [
        //   { required: true, message: "请输入品牌名称", trigger: "blur" },
        // ],
        theOptions: [
          { required: true, message: '请选择商品分类', trigger: "change" },
        ],

        // specValueNames: [
        //   { required: true, message: "请输入商品规格", trigger: "blur" },
        // ],
        yjbl: [
          {
            pattern: /^(0|[1-9]\d*)(\.\d{1,2})?$/,
            message: '业绩比例不正确',
            trigger: "blur",
          },
        ],
        price: [
          { required: true, message: '请输入售价', trigger: "blur" },
        ],
        // achieve: [{ required: true, message: "请输入业绩", trigger: "blur" }],
        sale: [
          { required: true, trigger: "blur", message: '请输入虚拟销量' },
          {
            pattern: /^[0-9]\d*$/,
            message: '虚拟销量需为正整数',
            trigger: "blur",
          },
        ],
        
      },
    };
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  watch: {
    // "form.yjbl"(n, o) {
    //   this.changeChieve(n);
    // },
    "form.price"(n, o) {
      this.changePrice(n);
    },
    "form.achieve"(n, o) {
      this.changePrice();
    },
    "queryParams.theOptions"(n, o) {
      this.changeValidate();
    },
    "form.theOptions"(n, o) {
      this.changeValidate2();
    },
  },
  created() {
    this.getSearch();
    this.getOthers();
  },
  methods: {
    //删除
    deleteData(row) {
      this.$confirm('是否确认操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        if (row) {
          //单笔删除
          three.deletSatWares({ idList: [row.pkId] }).then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getSearch();
          });
        } else {
          //批量
          let thepkIds = [];
          thepkIds = this.multipleSelection.map((item) => item.pkId);
          three
            .deletSatWares({
              idList: thepkIds,
            })
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getSearch();
            });
        }
      });
    },
    //导出
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        this.download(
          "/sale/manage/sa-t-wares/export",
          { ...this.queryParams },
          `${'商品订单'}${new Date().getTime()}.xlsx`
        );
      });
    },
    validateCascader(value) {
      if (!value && this.queryParams.theOptions.length < 2) {
        this.$message({
          message: '请选择一二级分类',
          type: "warning",
        });
        this.queryParams.theOptions = [];
        this.$refs.cascader.dropDownVisible = false;
      }
    },
    changeValidate() {
      if (
        this.queryParams.theOptions.length > 2 ||
        this.queryParams.theOptions.length > 1
      ) {
        this.$refs.cascader.dropDownVisible = false;
      }
    },
    changeValidate2() {
      if (this.form.theOptions.length > 2 || this.form.theOptions.length > 1) {
        this.$refs.cascader2.dropDownVisible = false;
      }
    },

    validateCascader2(value) {
      if (!value && this.form.theOptions.length < 2) {
        this.$message({
          message: '请选择一二级分类',
          type: "warning",
        });
        this.form.theOptions = [];
      }
    },
    changeChieve(val) {
      // console.log("🌈", val);
      //根据业绩比例算业绩
      if (!this.form.price) {
        this.$message({
          message: '请输入售价',
          type: "warning",
        });
        this.$set(this.form, "price", "");
        this.$set(this.form, "achievementDollar", "");
        this.$set(this.form, "achieve", "");
      } else {
        //业绩 = 售价*业绩比例
        let theachieve = "";
        theachieve = val * 0.01 * this.form.price;
        this.$set(this.form, "achieve", theachieve);
        let thedollar = "";
        thedollar = parseFloat(
          theachieve / this.getUser.currency.inExchangeRate
        );
        this.$set(this.form, "achievementDollar", thedollar);
      }
    },
    isLocals,
    //根据售价变化计算毛利润、纯利润
    //毛利润 = 售价 - 供应价
    //纯利润 = 毛利润 - PV
    changePrice(val) {
      if (val) {
        this.form.grossProfit = parseFloat(
          val - this.form.agreementPrice
        ).toFixed(2);
        this.form.netProfit = parseFloat(
          this.form.grossProfit - this.form.achieve
        ).toFixed(2);
      } else {
        this.form.netProfit = parseFloat(
          this.form.grossProfit - this.form.achieve
        ).toFixed(2);
      }
    },
    changeTWaresSku() {
      if (
        this.queryParams.pkTWaresSku &&
        !/^[0-9]+$/.test(this.queryParams.pkTWaresSku)
      ) {
        this.$message({
          message: '直供序号为正整数',
          type: "warning",
        });
        this.queryParams.pkTWaresSku = "";
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.pkCategoryOne = this.form.theOptions[0] || "";
          this.form.pkCategoryTwo = this.form.theOptions[1] || "";
          this.form.pkCategoryThree = this.form.theOptions[2] || "";
          three
            .updateWaresList(
              Object.assign({}, this.form, { source: this.queryParams.source })
            )
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.dialogVisible = false;
                this.getSearch();
              }
            });
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs["form"].clearValidate();
      this.$refs["form"].resetFields();
    },
    //上下架
    handelSxjia(index, row) {
      this.$confirm('是否确认操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        //0上架1下架
        if (row && row.pkId) {
          //单笔
          let thepkId = [row.pkId];
          three
            .updatePuton({
              isPutOn: index,
              pkIdList: thepkId,
              source: this.queryParams.source,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getSearch();
              }
            });
        } else {
          //批量
          let thepkIds = [];
          thepkIds = this.multipleSelection.map((item) => item.pkId);
          three
            .updatePuton({
              isPutOn: index,
              pkIdList: thepkIds,
              source: this.queryParams.source,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getSearch();
              }
            });
        }
      });
    },
    // 修改推荐
    handelRecommend(index, row) {
      this.$confirm('是否确认操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        // 0推荐1取消推荐
        const pkTWares = [row.pkTWares];
        three
          .updateRecommend({
            isRecommend: index,
            pkTWaresList: pkTWares,
            source: this.queryParams.source,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getSearch();
            }
          });
      });
    },
    getOthers() {
      three.getJxhhSource().then((res) => {
        this.sourceList = res.data;
      });
      three.getDealerYesNo().then((res) => {
        this.yesnoList = res.data;
      });
      three.getOptionList({ source: this.queryParams.source }).then((res) => {
        this.optionList = res.data;
      });
    },

    // //商品分类
    // changeClaasify(val) {
    //   if (val) {
    //     this.optionList.forEach((ele) => {
    //       if (val == ele.tid) {
    //         three
    //           .getOptionList({
    //             source: this.queryParams.source,
    //             parentId: val,
    //           })
    //           .then((res) => {
    //             this.optionList = res.data;
    //           });
    //       }
    //     });
    //   } else {
    //     this.form.pkProductClassify = "";
    //     this.optionList = [];
    //   }
    // },
    update(row) {
      if (row) {
        three
          .getWaresDetailList({
            source: this.queryParams.source,
            pkId: row.pkId,
          })
          .then((res) => {
            this.form = res.data;
            if (this.form.pkCategoryOne) {
              let arr = [
                res.data.pkCategoryOne + "",
                res.data.pkCategoryTwo + "",
                (res.data.pkCategoryThree || "") + "",
              ];
              arr = arr.filter((s) => {
                return s && s.trim();
              });
              this.$set(this.form, "theOptions", arr);
            } else {
              this.$set(this.form, "theOptions", []);
            }

            this.dialogVisible = true;
          });
      } else {
        three
          .getWaresDetailList({
            source: this.queryParams.source,
            pkId: this.multipleSelection[0].pkId,
          })
          .then((res) => {
            this.form = res.data;
            if (this.form.pkCategoryOne) {
              let arr = [
                res.data.pkCategoryOne + "",
                res.data.pkCategoryTwo + "",
                (res.data.pkCategoryThree || "") + "",
              ];
              arr = arr.filter((s) => {
                return s && s.trim();
              });
              this.$set(this.form, "theOptions", arr);
            } else {
              this.$set(this.form, "theOptions", []);
            }

            this.dialogVisible = true;
          });
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multiple = !val.length;
      this.single = val.length !== 1;
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 100,
        source: 0,
        isPutOn: 1,
        theOptions: [], //商品分类
      };
      this.getSearch();
    },
    getSearch() {
      this.loading = true
      this.queryParams.pkCategoryOne = this.queryParams.theOptions[0] || "";
      this.queryParams.pkCategoryTwo = this.queryParams.theOptions[1] || "";
      this.queryParams.pkCategoryThree = this.queryParams.theOptions[2] || "";
      three.getWaresList(this.queryParams).then((res) => {
        this.loading = false
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    getCzNum() {
      this.queryParams.pageNum = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.theCascader .el-cascader-node > .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}

// ::v-deep .el-form-item__content {
//   line-height: 34px;
// }
.qzprice {
  display: flex;
  align-items: center;
  .xian {
    color: #ccc8c8;
  }
}
::v-deep .el-image-viewer__close {
  right: 500px;
}
::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    padding: 15px 20px 15px 0;
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .searchtitle {
      margin-right: 10px;
    }
    .searchbtn {
      background: #08143f;
      color: #ffffff;
    }
  }
  .main {
    //margin-top: 20px;
    background: #f9f9f9;
    //border-radius: 8px;
    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: #48b2fd;
          width: 68px;
          height: 32px;
        }
        .thebtn2 {
          color: #ffffff;
          background: #009b58;
          width: 68px;
          height: 32px;
        }
        .thebtn3 {
          color: #ffffff;
          background: #c8161d;
          width: 68px;
          height: 32px;
        }
        .thebtn4 {
          color: #ffffff;
          background: #ffad41;
          width: 68px;
          height: 32px;
        }
      }
    }
  }
}
.el-cascader-menu__wrap {
  height: 350px !important;
}
</style>
