<template>
  <div>
    <el-button size="mini" type="primary" @click="isInsertCategory=true">新增</el-button>
    <el-dialog title="新增品类" :visible.sync="isInsertCategory" width="80%" append-to-body>
      <el-form :model="insertCategoryReq">
        <el-row>
          <el-col :span="12" >
            <el-form-item label="父级品类" prop="parentId">
              <treeselect v-model="categoryList.parentId" :options="categoryOptions" :normalizer="normalizer"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品类名称" :label-width="100">
              <el-input v-model="insertCategoryReq.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片上传" :label-width="120">
              <upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品类简介" :label-width="100">
              <el-input v-model="insertCategoryReq.introduction"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isInsertCategory = false">取 消</el-button>
        <el-button type="primary" @click="isInsertCategory = false">确 定</el-button>
      </div>
    </el-dialog>
    <check-brand></check-brand>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getCategoryList} from "@/api/product/category";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadPic from "@/views/product/upload/uploadPic.vue";
import CheckBrand from "@/components/CheckBrand/index.vue";

  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {Treeselect,UploadPic,CheckBrand},
    props: {},
    data() {
      //这里存放数据"

      return {
        //查询品类所需参数
        likeName: "",
        isInsertCategory: false,
        formLabelWidth: 120,
        categoryOptions: [],
        //查询到的所有品类
        categoryList: [],
        //新增请求对象
        insertCategoryReq: {
          id: null,
          name: "",
          image: "",
          parentId: null,
          introduction: "",
          brandIdList: [],
          attributeIdList: [],
          attributeGroupList: []
        },
        //查询出的品牌,属性,属性组,集合
        brandList: [],
        attributeList: [],
        attributeGroupList: [],
        //已选中的品牌,属性 属性组集合
        selectBrandList: [],
        selectAttributeList: [],
        selectAttributeGroupList: [],
        //注: 上一级目录已选中的品牌,属性,属性组,不在可选列表展示
        //上一级目录所选中的品牌,属性,属性组,可以到后端先根据id查出来,然后添加到新品类目录
        //所有上级目录已选中品牌,属性,属性组
        parentSelectBrandList: [],
        parentSelectAttributeList: [],
        parentSelectAttributeGroupList: []
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleImageUrl() {
        const imageUrl = this.$refs.uploadPic.imageUrl;
        this.insertCategoryReq.image = imageUrl
        console.log("获取到的图片地址：", imageUrl);
      },
      /** 转换品类信息数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      },
      /** 查询品类信息下拉树结构 */
      getTreeSelect() {
        getCategoryList(this.likeName).then(response => {
          this.categoryOptions = [];
          const data = { id: 0, name: '顶级节点', children: [] };
          data.children = this.handleTree(response.data, "id", "parentId");
          this.categoryOptions.push(data);
        });
      },
      getCategoryList() {
        getCategoryList(this.likeName).then(
          res => {
            this.categoryList = res.data
          }
        )
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getTreeSelect()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
