<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="一级分类：">
        <el-select
          v-model="formInline.region"
          placeholder="请选择"
          @change="getCategory2(formInline.region)"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类：">
        <el-select
          v-model="formInline.region2"
          placeholder="请选择"
          @change="getCategory3(formInline.region2)"
        >
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="三级分类：">
        <el-select
          v-model="formInline.region3"
          placeholder="请选择"
          @change="AttrInfoList"
        >
          <el-option
            v-for="item in options3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "vueSelects",
  data() {
    return {
      formInline: {
        region: "",
        region2: "",
        region3: "",
      },
      options: [],
      options2: [],
      options3: [],
      Category1Id: "",
      Category2Id: "",
    };
  },
  mounted() {
    this.getCategory1();
  },
  methods: {
    //   获取一级分类数据
    async getCategory1() {
      let res = await this.$API.attr.reqGetCategory1();
      //   console.log(res);
      if (res.code == 200) {
        this.options = res.data;
      } else {
        console.log("获取一级分类数据失败");
      }
    },
    //   获取二级分类数据
    async getCategory2(id) {
      this.options2 = [];
      this.options3 = [];
      this.formInline.region2 = "";
      this.formInline.region3 = "";
      let res = await this.$API.attr.reqGetCategory2(id);
      //   console.log(res);
      if (res.code == 200) {
        this.options2 = res.data;
      } else {
        console.log("获取二级分类数据失败");
      }
    },
    //   获取三级分类数据
    async getCategory3(id) {
      this.formInline.region3 = "";
      let res = await this.$API.attr.reqGetCategory3(id);
      //   console.log(res);
      if (res.code == 200) {
        this.options3 = res.data;
      } else {
        console.log("获取三级分类数据失败");
      }
    },
    // 获取商品基础属性
    AttrInfoList() {
      this.$emit("getAttrInfoList", this.formInline);
    },
  },
};
</script>

<style scoped>
</style>