<template>
  <div class="product-base-info">
    <div class="product-img">
      <avatar-upload
        title="商品图片"
        bizTyp="feature"
        ref="avatarUpload"
        @change="handleAvatarChange"
      ></avatar-upload>
    </div>

    <el-form
      ref="productForm"
      label-position="top"
      :model="form"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="商品名称" prop="productName">
            <el-input
              v-model.trim="form.productName"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="商品类型" prop="type">
            <el-select v-model="form.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-col>

        <el-col :span="6">
          <el-form-item label="商品原价（元）" prop="oriPrice">
            <el-input-number
              :controls="false"
              :min="0"
              :max="1000000"
              :precision="2"
              v-model="form.oriPrice"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="商品折扣后价格（元）" prop="favouredPrice">
            <el-input-number
              :controls="false"
              :min="0"
              :max="1000000"
              :precision="2"
              v-model="form.favouredPrice"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="对应开票商品" prop="invoiceProductId">
        <el-card>
          <select-invoice-products
            ref="selectInvoiceProducts"
            v-model="form.invoiceProductId"
          ></select-invoice-products>
        </el-card>
      </el-form-item>

      <el-form-item label="商品说明：">
        <el-input v-model="form.productDesc" v-show="false"></el-input>
        <wang-editor-ex
          ref="wangEditorEx"
          :contentText="form.productDesc"
          :height="100"
          @change="handleDetailsChange"
        ></wang-editor-ex>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AvatarUpload from "@/components/AvatarUpload";
import wangEditorEx from "@/components/wangEditorEx";
import SelectInvoiceProducts from "./select-invoice-products.vue";

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

export default {
  name: "ProductBaseInfo",
  components: {
    AvatarUpload,
    wangEditorEx,
    SelectInvoiceProducts,
  },
  data() {
    return {
      commodityOptions: commodityOptions,

      // 商品图片；
      imgId: "",
      imgUrl: "",

      form: {
        productName: "", // 商品名称
        type: "", // 商品类型
        oriPrice: 0, // 商品原价
        favouredPrice: 0, // 商品折扣后价格
        productDesc: "", // 商品说明

        /**
         * 对应开票商品；
         * 若无对应开票商品，值为“无”；
         */
        invoiceProductId: "无",
      },

      rules: {
        productName: [{ required: true, message: "请输入", trigger: "change" }],
        type: [{ required: true, message: "请选择", trigger: "change" }],
        oriPrice: [{ required: true, message: "请输入", trigger: "change" }],
        favouredPrice: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        invoiceProductId: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    /**
     * 商品图像上传更新；
     */
    handleAvatarChange(item) {
      this.imgId = item.imgId;
      this.imgUrl = item.imgUrl;
    },

    /**
     * 商品说明内容改变；
     */
    handleDetailsChange(content) {
      this.$set(this.form, "productDesc", content);
    },

    /**
     * 获取基础信息；
     */
    getInfo() {
      const _this = this;
      let result = false;
      this.$refs["productForm"].validate((valid) => {
        if (valid) {
          result = JSON.parse(JSON.stringify(_this.form));
          result.imgId = _this.imgId;
          result.imgUrl = _this.imgUrl;
        } else {
          _this.$message.error("基础信息不合法，请确认后重试！");
        }
      });
      return result;
    },

    /**
     * 重置基础信息；
     */
    resetInfo() {
      // 重置表单；
      this.$refs.productForm.resetFields();

      // 重置商品图片；
      this.$refs.avatarUpload.reset();

      // 重置开票商品；
      this.$refs.selectInvoiceProducts.reset();

      // 清空商品描述；
      this.$refs.wangEditorEx.clear();
    },

    /**
     * 设置商品信息；
     */
    setInfo(commodityInfo) {
      this.form.productName = commodityInfo.productName;
      this.form.productDesc = commodityInfo.productDesc;
      this.form.type = commodityInfo.type;
      this.form.oriPrice = commodityInfo.oriPrice;
      this.form.favouredPrice = commodityInfo.favouredPrice;

      this.$refs.avatarUpload.setInfo(
        commodityInfo.imgId,
        commodityInfo.imgUrl
      );

      this.$refs.wangEditorEx.set(commodityInfo.productDesc);
      this.$refs.selectInvoiceProducts.setInfo(commodityInfo.invoiceProductId);
    },
  },
};
</script>

<style lang="scss" scoped>
.product-base-info {
  .product-img {
    margin-top: 8px;
    margin-bottom: 18px;
  }

  .short-input {
    width: 200px;
  }

  ::v-deep.el-form--label-top .el-form-item__label {
    padding: 0;
    font-weight: 700;
  }

  ::v-deep.el-input,
  ::v-deep.el-input-number,
  ::v-deep.el-select {
    width: 100%;
  }

  ::v-deep.el-input__inner {
    text-align: left;
  }
}
</style>
