<template>
  <div class="data-info">
    <!-- <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="base"> -->
    <el-form :model="dataForm" label-width="120px">
      <el-form-item label="产品名称:">
        <el-input v-model="dataForm.name" class="w_input"></el-input>
      </el-form-item>
      <el-form-item label="所属分类:">
        <el-cascader
          v-model="category"
          class="w_input"
          @change="onChangeCategory"
          :options="allCategories"
          :props="props"
          :show-all-levels="false"
        />
      </el-form-item>
      <el-form-item label="所属品牌:">
        <el-select
          v-model="dataForm.brand_id"
          placeholder="请选择品牌"
          size="large"
          class="w_input"
        >
          <el-option
            v-for="item in brandList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属供应商:">
        <el-select
          v-model="dataForm.supplier_id"
          placeholder="请选择供应商"
          size="large"
          class="w_input"
        >
          <el-option
            v-for="item in supplierList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="产品状态:">
        <el-select
          v-model="dataForm.status"
          placeholder="请选择状态"
          size="large"
          @change="onChangeStatus"
          class="w_input"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="市场价格:">
        <el-input v-model="dataForm.price" class="w_input"></el-input>
      </el-form-item>
      <el-form-item label="产地:">
        <el-input v-model="dataForm.product_area" class="w_input"></el-input>
      </el-form-item>
    </el-form>

    <!--  </el-tab-pane> -->
    <!-- <el-tab-pane label="产品属性" name="attrs">
         <el-form :model="dataForm" label-width="120px">
            <el-form-item label="产品属性:">
                <ProductAttrItem   :items="extAttrs"  @onSetAttr="onSetAttr"/>
            </el-form-item>
         </el-form>
      </el-tab-pane>

      <el-tab-pane label="关联文档" name="documents">
         <el-form :model="dataForm" label-width="120px">
            <el-form-item label="关联文档:">
                <el-select v-model="dataForm.linkDocument" :multiple="true"  placeholder="请选择关联文档" size="large"  style="width:100%;">
                    <el-option
                      v-for="item in documentList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    />
                  </el-select>
            </el-form-item>
         </el-form>
      </el-tab-pane>

      <el-tab-pane label="产品介绍" name="intro">
        <el-form :model="dataForm" label-width="120px">
           <el-form-item label="产品介绍:">
               <el-input
               rows="5"
               type="textarea"
               v-model="dataForm.intro"></el-input>
           </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="产品资质" name="qualifications">
        <el-form :model="dataForm" label-width="120px">
           <el-form-item label="产品资质:">
               <el-input
               rows="5"
               type="textarea"
               v-model="dataForm.qualifications"></el-input>
           </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="其它选项" name="other">

        <el-form :model="dataForm" label-width="120px">
          <el-form-item label="是否质保:">
            <el-select v-model="dataForm.is_safe"  placeholder="是否质保" size="large"  style="width:100%;">
                <el-option
                  v-for="item in packageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </el-form-item>
          <el-form-item label="质保时长:" v-if="dataForm.is_safe=='是'">
            <el-select v-model="dataForm.safe_time"  placeholder="质保时长" size="large"  style="width:100%;">
                <el-option
                  v-for="item in safeTime"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </el-form-item>


          <el-form-item label="套餐商品:">
            <el-select v-model="dataForm.is_package"  placeholder="是否为套餐商品" size="large"  style="width:100%;">
                <el-option
                  v-for="item in packageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </el-form-item>
          <el-form-item label="套餐说明:" v-if="dataForm.is_package=='是'">
            <el-input
            rows="10"
            type="textarea"
            v-model="dataForm.package_intro"></el-input>
          </el-form-item>

        </el-form>

      </el-tab-pane> -->
    <!--  </el-tabs> -->

    <!--
    <el-card>
      <el-form :model="dataForm" label-width="120px">

        <el-form-item label="产品名称:">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属分类:">
          <el-cascader v-model="category" style="width:100%;" :options="allCategories" :show-all-levels="false" />
        </el-form-item>
        <el-form-item label="所属品牌:">
          <el-select v-model="dataForm.brand_id"  placeholder="请选择品牌" size="large" style="width:100%;">
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="所属供应商:">
          <el-select v-model="dataForm.supplier_id"  placeholder="请选择供应商" size="large"  style="width:100%;">
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>

        <el-form-item label="产品状态:">
          <el-select v-model="dataForm.status"  placeholder="请选择状态" size="large" @change="onChangeStatus" style="width:100%;">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="市场价格:">
          <el-input v-model="dataForm.price"></el-input>
        </el-form-item>
        <el-form-item label="产地:">
          <el-input v-model="dataForm.product_area"></el-input>
        </el-form-item>
        <el-form-item label="产品属性:">
            <ProductAttrItem   :items="extAttrs"  @onSetAttr="onSetAttr"/>
        </el-form-item>

        <el-form-item label="产品介绍:">
          <el-input
          rows="5"
          type="textarea"
          v-model="dataForm.intro"></el-input>

        </el-form-item>

        <el-form-item label="产品资质:">
          <el-input
          rows="5"
          type="textarea"
          v-model="dataForm.qualifications"></el-input>

        </el-form-item>


        <el-form-item label="是否质保:">
          <el-select v-model="dataForm.is_safe"  placeholder="是否质保" size="large"  style="width:100%;">
              <el-option
                v-for="item in packageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="质保时长:" v-if="dataForm.is_safe=='是'">
          <el-select v-model="dataForm.safe_time"  placeholder="质保时长" size="large"  style="width:100%;">
              <el-option
                v-for="item in safeTime"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>


        <el-form-item label="套餐商品:">
          <el-select v-model="dataForm.is_package"  placeholder="是否为套餐商品" size="large"  style="width:100%;">
              <el-option
                v-for="item in packageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="套餐说明:" v-if="dataForm.is_package=='是'">
          <el-input
          rows="10"
          type="textarea"
          v-model="dataForm.package_intro"></el-input>
        </el-form-item>
      </el-form>
    </el-card> -->

    <div style="text-align: right; margin-top: 20px">
      <el-button type="warning" @click="btnSave">确认保存</el-button>
    </div>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import {
  searchAllCategories,
  createProduct,
  updateProduct,
  getProductInfo,
} from "@/api/product";
import { searchBrand } from "@/api/brand";
import { searchSupplier } from "@/api/supplier";
import { searchDocument } from "@/api/document";
import ProductAttrItem from "@/components/ProductAttrItem";

export default {
  components: {
    Tinymce,
    ProductAttrItem,
  },
  emits: ["onClose"],
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    id: {
      handler(v) {
        let _this = this;
        if (v == null || v <= 0) return;
        _this.getInfo(v);
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      activeName: "base",
      currentCategory: [],
      allCategories: [],
      brandList: [],
      supplierList: [],
      category: [],
      documentList: [],
      dataForm: {
        id: 0,
        name: "",
        price: "",
        product_area: "",
        category_id: "",
        brand_id: "",
        supplier_id: "",
        is_package: "否",
        package_intro: "无",
        is_safe: "否",
        safe_time: "无",
        intro: "",
        qualifications: "",
        attrs: [],
      },
      extAttrs: [
        {
          name: "属性1",
          type: 1,
          value: "",
          valueItems: "",
        },
      ],
      packageList: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      safeTime: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "一年",
          label: "一年",
        },
        {
          value: "两年",
          label: "两年",
        },
      ],

      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "使用中",
        },
        {
          value: 6,
          label: "已停用",
        },
      ],
      cateAttr: [],
      props: {
        value: "id",
        label: "label",
        children: "children",
        checkStrictly: true,
      },
    };
  },

  mounted() {
    let _this = this;
    this.initBrand();
    this.initSupplier();
    this.initCategories();
/*     this.initDocumentList(); */
  },
  methods: {
   /*  initDocumentList() {
      let _this = this;
      searchDocument({ page: 1, pageSize: 999, status: 5 }).then((res) => {
        if (res.status != 200) return;
        _this.documentList = res.data.dataList;
      });
    }, */

    onSetAttr(e) {
      this.dataForm.attrs = e;
    },
    //保存更新
    btnSave(e) {
      let _this = this;
      if (_this.category.length >= 1) {
        _this.dataForm.category_id = _this.category[0];
      }
      _this.dataForm.attrs = JSON.stringify(this.extAttrs);
      _this.dataForm.links = JSON.stringify(this.dataForm.linkDocument);

      if (_this.dataForm.id > 0) {
        updateProduct(_this.dataForm).then((res) => {
          if (res.status != 200) return;
          _this.$message.success("产品信息更新成功");
          _this.$emit("onClose", true); // 添加参数表示需要刷新
        });
      } else {
        createProduct(_this.dataForm).then((res) => {
          if (res.status != 200) return;
          _this.$message.success("产品信息创建成功");
          _this.$emit("onClose", true); // 添加参数表示需要刷新
        });
      }
    },

    //产品详情
    getInfo(id) {
      let _this = this;
      let par = {
        id: id,
      };
      getProductInfo(par).then((res) => {
        if (!res) return;
        if (res.status != 200) return;
        _this.dataForm = res.data;
        _this.extAttrs = JSON.parse(res.data.attrs);
        if (_this.extAttrs.length <= 0) {
          _this.extAttrs = [
            {
              name: "属性1",
              type: 1,
              value: "",
              valueItems: "",
            },
          ];
        }
        _this.category = [res.data.category.parent_id, res.data.category.id];
      });
    },

    onChangeStatus(e) {
      this.dataForm.status = e;
    },
    //修改分类信息
    onChangeCategory(e) {
      let _this = this;
      console.log(e);

      let categories = _this.allCategories.filter((o) => o.id == e[0]);
      let sub = categories[0].children.filter((o) => o.id == e[1]);
      if (sub.length > 0) {
        _this.cateAttr = JSON.parse(sub[0].attrs);
        _this.extAttrs = [];
        for (var i = 0; i < _this.cateAttr.length; i++) {
          _this.extAttrs.push({
            name: _this.cateAttr[i].name,
            type: 1,
            value: "",
            valueItems: "",
          });
        }

        console.log(_this.extAttrs);
      }
    },
    //初始化所有分类
    initCategories() {
      let _this = this;
      searchAllCategories().then((res) => {
        if (res.status != 200) return;
        _this.allCategories = res.data;
      });
    },
    initSupplier() {
      let _this = this;
      searchSupplier({ page: 1, pageSize: 999, status: 5 }).then((res) => {
        if (res.status != 200) return;
        _this.supplierList = [{ id: 0, name: "请选择" }, ...res.data.dataList];
      });
    },
    initBrand() {
      let _this = this;
      searchBrand({ page: 1, pageSize: 999, status: 5 }).then((res) => {
        if (res.status != 200) return;
        _this.brandList = [{ id: 0, name: "请选择" }, ...res.data.dataList];
      });
    },
  },
};
</script>

<style lang="scss">
@import "./dataInfo.scss";
</style>
