<template>
  <section class="main0">

    <div class="container0">
      <div class="select-product">
        <!-- <el-cascader
          v-model="templateId"
          placeholder="请选择发布商品"
          :options="goods"
          :props="props"
        ></el-cascader> -->
        <div class="m_b_10">选择类目：</div>
        <el-cascader-panel
          v-model="templateId"
          placeholder="请选择发布商品"
          @expand-change="handleChange"
          @change="handleChange"
          :options="goods"
          :props="props"></el-cascader-panel>
        <div class="m_t_10">已选类目：
          <span
            class="f_c_theme"
            v-for="(item,index) in selectedName"
            :key="index">{{item}}
            <i class="el-icon-arrow-right f_c_grey" v-if="index != selectedName.length-1"></i></span>
        </div>
        <div class="btn-box">
          <el-button class="btn" @click="onNext" type="primary">下一步，发布商品</el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { _supplierId,_getStorage } from '@/utils/utils'

export default {
  data() {
    return {
      templateId: [],
      goods: [],
      props: {
        value: "id",
        label: "name",
        children: "menus"
      },
      selectedName:[]
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    onNext() {
      if (this.templateId.length === 0) {
        this.$message.error("请选择完整类目");
      }else{
        this.$router.replace({path:"/goods/newProductold",query:{
          menuId:this.templateId[this.templateId.length - 1]
        }})
      }
    },
    init() {
        let { brandId } = _getStorage('info');

      this.$axios.get("/products/operationsMenuList",{
        params:{
          brandId:brandId
        }
      }).then(res => {
        let {code, data} = res.data
        if(code === 200){
          this.goods = data
          // sessionStorage.setItem('supplierMenuList',JSON.stringify(data))
        }
      });
    },
    handleChange(val){
      // 取出各级选中的名称
      let getName = (i,goods,val, nameArry) => {
        if(i > val.length-1){
          // console.log(nameArry)
          return nameArry
        }
        for(let key in goods){
          let good = goods[key]
          if(val[i] == good.id){
            i+=1
            nameArry.push(good.name)
            return getName(i,good.menus,val,nameArry)
          }
        }
      }

      this.selectedName = getName(0,this.goods,val,[])
    }
  }
};
</script>

<style lang='scss' scoped>
.container0 {
  // min-height: 500px;
  .f_c_theme{
    color: #f60;
  }
  padding-top: 50px;
  .select-product {
    width:540px;
    margin:0 auto;
    /deep/ .el-cascader-menu__wrap{
      height:368px;
    }
    .btn-box {
      text-align: center;
      .btn {
        margin-top: 30px;
      }
    }
  }
}
</style>
