<template>
  <div style="width: 60%">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="160px"
      :disabled="$route.query.type == 'show'"
    >
      <el-form-item label="平台商品分组" prop="merchantCategoryId">
        <div v-if="form.merchantCategoryName">
          <el-tag
            :key="form.merchantCategoryName"
            :closable="$route.query.type != 'show'"
            @close="classifyClose('1')"
          >
            {{ form.merchantCategoryName }}
          </el-tag>
        </div>
        <el-button @click="getCategory(1)" v-else>选择平台商品分组</el-button>
      </el-form-item>

      <el-form-item label="商家商品分组" prop="productCategoryList">
        <template v-if="form.productCategoryList">
          <el-tag
            v-for="(v, i) in form.productCategoryList"
            :key="v.categoryId"
            :closable="$route.query.type != 'show'"
            @close="classifyClose('2', i)"
            style="margin: 0 10px 5px 0"
          >
            {{ v.categoryName }}
          </el-tag>
        </template>
        <el-button @click="getCategory(2)" v-if="$route.query.type != 'show'"
          >选择商家商品分组</el-button
        >
      </el-form-item>

      <el-form-item label="供应商" prop="supplierId">
        <el-select
          v-model="form.supplierId"
          :disabled="$route.query.type == 'show'"
          placeholder="请选择供应商"
          clearable
          style="width: 100%"
          filterable
        >
          <el-option
            v-for="(v, i) in supplierList"
            :key="i"
            :label="v.supplierName"
            :value="v.supplierId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品名称" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入商品名称"
          :disabled="$route.query.type == 'show'"
          maxlength="50"
          clearable
        />
      </el-form-item>
      <el-form-item label="商品短标题" prop="shortTitle">
        <el-input
          v-model="form.shortTitle"
          placeholder="请输入商品短标题"
          :disabled="$route.query.type == 'show'"
          maxlength="50"
          clearable
        />
      </el-form-item>
      <el-form-item label="商品封面图片" prop="coverImage">
        <imageUpload
          v-model="form.coverImage"
          unique="coverImage"
          :disabled="$route.query.type == 'show'"
          :limit="1"
        />
      </el-form-item>

      <el-form-item label="商品多图片" prop="images">
        <imageUpload
          v-model="form.images"
          unique="images"
          :disabled="$route.query.type == 'show'"
          :limit="5"
        />
      </el-form-item>

      <el-form-item label="商品视频" prop="videoUrl">
        <uploadVideo
          :videoUrl="form.videoUrl"
          :disabled="$route.query.type == 'show'"
          @updataVideo="updataVideo"
        />
      </el-form-item>

      <el-form-item label="商品内容" prop="content">
        <editor
          v-model="form.content"
          :min-height="192"
          :readOnly="$route.query.type == 'show'"
        />
      </el-form-item>
      <el-form-item label="排序" prop="orderIndex">
        <el-input-number
          v-model="form.orderIndex"
          :disabled="$route.query.type == 'show'"
          controls-position="right"
          :min="0"
          :precision="0"
          placeholder="请输入排序"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="每人限购数" prop="purchaseLimit">
        <el-input-number
          v-model="form.purchaseLimit"
          :disabled="$route.query.type == 'show'"
          controls-position="right"
          :min="0"
          :precision="0"
          placeholder="请输入每人限购数"
        ></el-input-number>
        <span style="color: #666666; margin-left: 10px">0代表不限购</span>
      </el-form-item>

      <el-form-item label="初始销量" prop="initialSales">
        <el-input-number
          v-model="form.initialSales"
          :disabled="$route.query.type == 'show'"
          controls-position="right"
          :min="0"
          :precision="0"
          placeholder="请输入初始销量"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input
          :disabled="$route.query.type == 'show'"
          v-model="form.unit"
          placeholder="请输入单位"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="商品类型" prop="productPaymentMode">
        <el-select
          v-model="form.productPaymentMode"
          :disabled="
            $route.query.type == 'show' ? true : form.productId ? true : false
          "
          placeholder="请选择商品类型"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="(v, i) in paymentModeList"
            :key="i"
            :label="v.label"
            :value="v.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否可以赠送积分" prop="canGivePoint">
        <el-radio-group v-model="form.canGivePoint">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="赠送积分比例"
        prop="givePointRate"
        v-if="form.canGivePoint"
      >
        <el-input-number
          v-model="form.givePointRate"
          :disabled="$route.query.type == 'show'"
          controls-position="right"
          :min="0"
          :max="100"
          :precision="2"
          placeholder="请输入赠送积分比例"
        ></el-input-number>
        <span style="color: #666666; margin-left: 10px">%</span>
      </el-form-item>

      <el-form-item label="商品类型" prop="productUseType">
        <el-radio-group v-model="form.productUseType">
          <el-radio :label="0">商城商品</el-radio>
          <el-radio :label="1">店铺商品</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="是否可以自提" prop="canSelfPickup">
        <el-radio-group v-model="form.canSelfPickup">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="包邮" prop="freeShippingStatus">
        <el-radio-group v-model="form.freeShippingStatus">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="!form.freeShippingStatus"
        label="物流模板"
        prop="logisticsTemplateId"
      >
        <el-select
          v-model="form.logisticsTemplateId"
          :disabled="$route.query.type == 'show'"
          placeholder="请选择物流模板"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="(v, i) in freightTemplateList"
            :key="i"
            :label="v.name"
            :value="v.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="新品" prop="newStatus">
        <el-radio-group v-model="form.newStatus">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="推荐置顶" prop="recommendStatus">
        <el-radio-group v-model="form.recommendStatus">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示价格" prop="showPrice">
        <el-radio-group v-model="form.showPrice">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否单规格" prop="singleSku">
        <el-radio-group v-model="form.singleSku">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="是否上架" prop="shelvedStatus">
        <el-radio-group v-model="form.shelvedStatus">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <!-- 平台商品分组 -->
    <classifyDialog
      ref="classifyDialogRef1"
      :list="platformClassIndexList"
      @setClassify="setClassify"
    />

    <!-- 商家商品分组 -->
    <classifyDialog
      ref="classifyDialogRef2"
      :list="shopTypeList"
      @setClassify="setClassify"
    />
  </div>
</template>
<script>
import { productCategoryTree } from "@/api/goodsClassify";
import { merchantCategoryTree } from "@/api/platformClass";
import { supplierList } from "@/api/supplier";
import { freightTemplateListSlim } from "@/api/operating";
import classifyDialog from "./classifyDialog.vue";
import uploadVideo from "@/components/oss/oss-uploadvideo.vue";

export default {
  components: {
    classifyDialog,
    uploadVideo,
  },
  data() {
    return {
      platformClassIndexList: [], // 平台商品分组
      shopTypeList: [], // 商家商品分组
      supplierList: [], // 供应商
      freightTemplateList: [], // 运费模板数据
      form: {
        canGivePoint: false,
        canSelfPickup: false,
        freeShippingStatus: true,
        // hot: false,
        newStatus: false,
        recommendStatus: false,
        showPrice: false,
        shelvedStatus: false,
        singleSku: false,
        content: "",
        initialSales: 0,
        purchaseLimit: 0,
        productUseType: 0,
        productPaymentMode: 0
      },
      rules: {
        title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        productCategoryList: [
          { required: true, message: "请选择商品分组", trigger: "change" },
        ],
        images: [
          { required: true, message: "请上传商品图片", trigger: "change" },
        ],
        coverImage: [
          { required: true, message: "请上传商品封面图", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入商品内容", trigger: "change" },
        ],
        merchantCategoryId: [
          { required: true, message: "请选择平台商品分组", trigger: "change" },
        ],
        unit: [{ required: true, message: "请输入商品单位", trigger: "blur" }],
        productPaymentMode: [
          { required: true, message: "请选择商品类型", trigger: "change" },
        ],
        logisticsTemplateId: [
          { required: true, message: "请选择物流模板", trigger: "change" },
        ],
        orderIndex: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
        givePointRate: [
          { required: true, message: "请输入赠送积分比例", trigger: "blur" },
        ]
      },
      paymentModeList: [
        { label: "普通商品", value: 0 },
        { label: "积分商品", value: 1 },
      ],
    };
  },
  created() {
    this.getPlatformCategoryTree();
    this.getProductCategoryTree();
    this.getSupplierList();
    this.getFreightTemplateListSlim();

  },
  methods: {
    setEditData(data) {
      this.form = { ...data };
    },
    updataVideo(url) {
      // console.log('updataVideo', url)
      // this.form.videoUrl = url;
      this.form = {
        ...this.form,
        videoUrl: url,
      };
    },
    // 运费模板
    getFreightTemplateListSlim() {
      freightTemplateListSlim().then((res) => {
        if (res.code == 200) {
          this.freightTemplateList = res.data;
        }
      });
    },
    // 分组选择组件回调
    setClassify({ list, type }) {
      // console.log(list, type);
      if (type == 1) {
        this.form = {
          ...this.form,
          merchantCategoryId: list[0].categoryId,
          merchantCategoryName: list[0].categoryName,
        };
      } else {
        this.form = {
          ...this.form,
          productCategoryList: [...list],
        };
      }
    },
    // 点击弹出分组选择组件
    getCategory(type) {
      this.$refs[`classifyDialogRef${type}`].open(
        type,
        type == 2 ? this.form.productCategoryList : undefined
      );
    },
    // 平台商品分组
    getPlatformCategoryTree() {
      merchantCategoryTree({all:false}).then((res) => {
        if (res.code == 200) {
          this.platformClassIndexList = res.data;
        }
      });
    },
    // 商家商品分组
    getProductCategoryTree() {
      productCategoryTree({all:false}).then((res) => {
        if (res.code == 200) {
          this.shopTypeList = res.data;
        }
      });
    },

    // 获取供应商列表
    getSupplierList() {
      supplierList().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.supplierList = res.data;
        }
      });
    },
    // 移除选中的商品分组
    classifyClose(type, tagIndex) {
      // console.log(tagIndex);
      if (type == 1) {
        this.form.merchantCategoryId = undefined;
        this.form.merchantCategoryName = undefined;
      } else {
        this.form.productCategoryList.splice(tagIndex, 1);
      }
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((res) => {
          if (this.form.freeShippingStatus) {
            this.form.logisticsTemplateId = undefined;
          }
          resolve({
            valid: res,
            value: res ? this.form : null,
          });
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
