<!--添加基础资料-->
<template>
  <ContainerTit>
    <el-form
      ref="base_form"
      :inline="true"
      :model="base_form"
      label-width="120px"
      :rules="base_rules"
      size="small"
    >
      <el-card class="box-card">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <div class="info-main">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品相册：" prop="goods_img">
                <ul v-if="base_form.images" class="clearfix">
                  <li
                    v-for="(item, index) in base_form.images"
                    :key="index"
                    style="padding-right: 10px"
                    class="float_left"
                  >
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="item"
                      fit="contain"
                    ></el-image>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品编码：">
                {{ base_form.code }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品条码：">
                {{ base_form.barCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品分类：">
                {{ base_form.categoryName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生命周期：">
                {{ base_form.expireTime }}天
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品品牌：">
                {{ base_form.brandName || "--" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售店铺：">
                {{ base_form.shopName || "--" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售区域：">
                <span v-for="(item, index) in base_form.salesArea" :key="index">
                  {{ item.name }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前价格：">
                {{ base_form.price || "--" }}元
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品推荐：">
                {{ base_form.shopRecommend || "--" }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="关键词汇：">
                <span v-for="(item, index) in base_form.tag" :key="index">
                  {{ item }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="基本单位：">
                <span v-if="base_form.masterUnit">
                  {{ base_form.masterUnit.name }}
                </span>
                <span v-else>---</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="禁止销售店铺：">
                {{ base_form.noSalesShopNames || "--" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="辅助单位：">
                <span v-if="base_form.branchUnit">
                  <el-tag
                    v-for="(item, index) in base_form.branchUnit"
                    :key="index"
                  >
                    <span v-if="item.isNew === 4">
                      1{{ base_form.masterUnit.unitName }}={{ item.conversion
                      }}{{ item.unitName }}
                    </span>
                    <span>
                      1{{ item.unitName }}={{ item.conversion
                      }}{{ base_form.masterUnit.unitName }}
                    </span>
                  </el-tag>
                </span>
                <span v-else>---</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header">
          <span>商品详情</span>
          <div style="margin: 20px" v-html="base_form.content"></div>
        </div>
      </el-card>
    </el-form>
    <BrandSelModel
      :is-check="false"
      :dialog-visible="sel_brand"
      @close="sel_brand = false"
      @confirm="brandConfirm"
    />
  </ContainerTit>
</template>

<script>
  import BrandSelModel from "@/component/goods/BrandSelModel.vue";
  import {
    getAllUnit,
    getGoodsInfo,
    editGoodsBasic,
    addGoodsBasic,
  } from "@/api/goods";
  export default {
    name: "GoodsDetail",
    components: {
      BrandSelModel,
    },
    data() {
      const validateUnit = (rule, value, callback) => {
        if (value.name === "") {
          callback(new Error("请设置基本单位"));
        } else {
          callback();
        }
      };
      return {
        img_list: [],
        masterUnitId: "",
        content: "",
        // 关键词
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
        // 关键词 END
        assist_model: false,
        edit_assist_model: false,
        unit_index: 0,
        assist_index: 0,
        unit_options: [
          {
            unitName: "件",
            unitId: 1,
          },
          {
            unitName: "袋",
            unitId: 2,
          },
          {
            unitName: "箱",
            unitId: 3,
          },
          {
            unitName: "包",
            unitId: 4,
          },
          {
            unitName: "KG",
            unitId: 5,
          },
          {
            unitName: "瓶",
            unitId: 6,
          },
          {
            unitName: "盒",
            unitId: 7,
          },
          {
            unitName: "卷",
            unitId: 8,
          },
          {
            unitName: "桶",
            unitId: 9,
          },
          {
            unitName: "斤",
            unitId: 10,
          },
        ],
        assist_form: {
          name: "",
          uniId: "",
          conversion: "",
        },
        assist_rules: {
          name: [
            { required: true, message: "请输入辅助单位名称", trigger: "blur" },
          ],
          conversion: [
            {
              required: true,
              message: "请输入辅助单位与基本单位的换算关系",
              trigger: "blur",
            },
          ],
        },
        sel_brand: false, // 打开品牌选择弹窗
        sel_shop: false, // 打开店铺选择弹窗
        master_unit_name: "",
        base_form: {
          //  基本信息
          branchUnit: [],
          brandName: "",
          categoryPath: [], // 分类选择
          shopName: "",
          masterUnit: {
            name: "",
            id: "",
          },
          title: "",
          code: "",
          barCode: "",
          categoryId: "",
          expireTime: "",
          brandId: "",
          tag: "",
          description: "",
          salesShop: "",
          images: [],
        },
        base_rules: {
          // 基本信息验证
          images: [
            {
              type: "array",
              required: true,
              message: "请上传商品图片",
              trigger: "change",
            },
          ],
          title: [
            { required: true, message: "请输入商品名称", trigger: "blur" },
          ],
          barCode: [
            { required: true, message: "请输入商品条码", trigger: "blur" },
          ],
          categoryId: [
            { required: true, message: "请选择商品分类", trigger: "change" },
          ],
          expireTime: [
            { required: true, message: "请输入商品生命周期", trigger: "blur" },
          ],
          brandId: [
            { required: true, message: "请选择商品品牌", trigger: "change" },
          ],
          masterUnit: [
            { required: true, validator: validateUnit, trigger: "change" },
          ],
          // branchUnit: [{ required: true, type: 'array', message: '请设置辅助单位', trigger: 'change' }]
          // tag: [{ required: true, message: '请设置商品关键词', trigger: 'change' }]
        },
        uploadFiles: {
          // 上传信息
          img: [], // 物料相册文件
          fileList: [],
          blobImg: [],
          specificationUploadImgIndex: 0, // 所上传规格索引
        },
        base_goods_id: 0,
      };
    },
    async created() {
      await this.getAllUnit();
      if (this.$route.params.id) {
        this.base_goods_id = this.$route.params.id;
        await this.getGoodsInfo();
      }
    },
    methods: {
      // 请求基本单位数据
      async getAllUnit() {
        const { data } = await getAllUnit({
          page: 1,
          pageSize: 99,
        });

        this.unit_options = data.map((item) => {
          return {
            unitId: item.id,
            unitName: item.unitName,
          };
        });
      },
      // 选择基本单位
      masterUnitChange(val) {
        const target = this.unit_options.find((item) => item.id === val);
        this.base_form.masterUnit = target;
      },
      // 关键词
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick((_) => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      },
      // 关键词END
      // 选择辅助单位
      assitUnitChange(val) {
        const target = this.unit_options.find((item) => item.id === val);
        this.assist_form.name = target.name;
      },
      // 设置计量单位
      delFuUnit(it) {
        this.base_form.branchUnit.splice(it, 1);
      },
      // 新增辅助单位
      addFuUnit() {
        this.assist_model = true;
        this.edit_assist_model = false;
        this.assist_form = {
          name: "",
          uniId: "",
          conversion: "",
        };
      },
      // 修改附单位
      EditFuUnit(it) {
        this.assist_model = true;
        this.edit_assist_model = true;
        this.assist_form = this.base_form.branchUnit[it];
        this.assist_index = it;
      },
      // 弹窗提交
      subAssist() {
        if (!this.edit_assist_model) {
          this.base_form.branchUnit.push(this.assist_form);
        } else {
          this.base_form.branchUnit[this.assist_index] = this.assist_form;
        }
        this.assist_model = false;
      },
      // 获取详情
      async getGoodsInfo() {
        const { data } = await getGoodsInfo(this.base_goods_id);

        this.base_form = {
          ...data,
          categoryPath: data.categoryPath
            ? data.categoryPath.split(",").map((item) => {
                return parseInt(item);
              })
            : [],
        };
        this.img_list = data.images.map((item) => {
          return {
            name: "",
            url: item,
          };
        });
        this.dynamicTags = data.tag.split(",");
        this.base_form.brandName = data.brandTitle;
        this.masterUnitId = data.masterUnit.id;
      },
      // 发布商品
      async submitGoods() {
        this.$refs["base_form"].validate(async (valid) => {
          if (valid) {
            const params = {
              categoryPath: this.base_form.categoryPath.join(","),
              title: this.base_form.title,
              masterUnit: this.base_form.masterUnit,
              branchUnit: this.base_form.branchUnit,
              code: this.base_form.code,
              barCode: this.base_form.barCode,
              categoryId: this.base_form.categoryId,
              expireTime: this.base_form.expireTime,
              brandId: this.base_form.brandId,
              tag: this.dynamicTags.join(","),
              description: this.base_form.description,
              salesShop: this.base_form.salesShop,
              images: this.base_form.images,
            };
            let target = {};
            if (this.$route.params.id) {
              target = await editGoodsBasic(this.base_goods_id, params);
            } else {
              target = await addGoodsBasic(params);
            }
            const data = target;

            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.$closeCurrentGoEdit("/goods/manageG/BaseDataList");
          }
        });
      },
      // 商品分类选择
      categoryChange(val) {
        this.base_form.categoryId = val[val.length - 1];
      },
      // 品牌选择
      brandConfirm(val) {
        if (val.length > 1) {
          this.$message({
            type: "error",
            message: "请选择一个品牌！",
          });
          return;
        }
        this.base_form.brandName = val[0].title;
        this.base_form.brandId = val[0].id;
      },
      // 商铺选择
      shopConfirm(val) {
        this.base_form.shopName = val
          .map((item) => {
            return item.name;
          })
          .join(",");
        this.base_form.salesShop = val
          .map((item) => {
            return item.id;
          })
          .join(",");
      },
    },
  };
</script>
<style scoped>
  .de_input {
    width: 200px;
  }
  .unit-li-div,
  .unit-li {
    margin-bottom: 10px;
  }
  .unit-li-item {
    margin-bottom: 10px;
  }
</style>
<style>
  .unit-li .el-tag + .el-tag {
    margin-left: 10px;
  }
  .unit-li .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .unit-li .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .unit-li-div .el-icon-edit {
    padding: 2px;
    cursor: pointer;
  }
  .unit-li-div .el-icon-edit:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 100%;
  }
</style>
