<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>

          <!-- <el-popover
            class="templatePopo"
            placement="bottom"
            width="300px"
            trigger="click">
            <div class="divboxbig" v-if="hasLen">
              <div class="divbox">
                <a :href="exportMain" class="aBtn">
                  <el-button class="btn" type="">生成excel表头</el-button>
                </a>
                <div class="aBtn2">
                    <uploadImgFile @uploadResult="uploadResult" :templateId="templateId[templateId.length - 1]"
                    ref="uploadImgRef"></uploadImgFile>
                </div>
              </div>
              <div class="tips">*注：请按系统生成的标准excel表头上传文件</div>
            </div>

            <el-button slot="reference" @click="onOnekey">商品一键导入</el-button>
          </el-popover>
            <img @click="hoslist" class="imgHist" src="@/assets/img/icons/history1.png" alt=""> -->
        </div>


      </div>
        <!-- 添加商品 -->
    <addprodialog v-if="dialogData.isShowDrawer"
     :dialogData="dialogData" :tableData="excelRes"
     @resData="changeData"></addprodialog>
    </div>
  </section>
</template>

<script>
import { _supplierId,_getStorage } from '@/utils/utils'
import uploadImgFile from './modules/uploadImg_file'
import addprodialog from "./modules/addproDialog";
import qs from 'qs'
export default {
  data() {
    return {
      templateId: [],
      goods: [],
      props: {
        value: "id",
        label: "name",
        children: "menus"
      },
      selectedName:[],
      hasLen:false,
      excelRes:[],
      dialogData:{
        isShowDrawer:false,//弹窗
      },
    };
  },
  components: {
    uploadImgFile,addprodialog
  },
  computed: {
    exportMain(){
      var info = localStorage.getItem('info') == "" ? "" : JSON.parse(localStorage.getItem('info'));
      var token = info && info.token ? info.token : '';
      var params = {};
        params.token = token;
        params.brandId = info.brandId;
        params.templateId = this.templateId[this.templateId.length - 1]
        let dataparams = qs.stringify(params);
        return '/api/excel/createExcel?' + dataparams;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    hoslist(){
      this.onExcel()
    },
       changeData(res,ok){
          this.dialogData.isShowDrawer = res
          if(ok){
            // this.getData()
          }
      },
        uploadResult(res,file){
              if(res && res.type==1){
                this.$message.success(res.content)
              }else{
                this.$message.error(res.content)
                this.onExcel()
              }
        },


    onImport(){
      let id = this.templateId[this.templateId.length - 1]
      this.$axios.post("/excel/read",{
          templateId:id
      }).then(res => {
        let {code, data,message,msg} = res.data
        if(code === 200){
          this.$message.success(message||msg)
        }else{
          this.$message.error(message||msg)
        }
      });
    },
    onExcel(){
      this.$axios.get("/excel/createExcelResult").then(res => {
        let {code, data,message,msg} = res.data
        if(code === 200){
          if(data && data.length>0){
              this.dialogData.isShowDrawer =true
              this.excelRes = data
          }
          // this.$message.success(message || msg)
        }else{
          this.$message.error(message || msg)
        }
      });
    },
    onOnekey() {
      if (this.templateId.length === 0) {
        this.$message.error("请选择完整类目");
        this.hasLen =false
      }else{
        this.hasLen =true
      }
    },
    onNext() {
      if (this.templateId.length === 0) {
        this.$message.error("请选择完整类目");
      }else{
        this.$router.replace({path:"/goods/newProduct",query:{
          menuId:this.templateId[this.templateId.length - 1]
        }})
      }
    },
    init() {
      let { brandId } = _getStorage('info');
      this.$axios.get("/products/sdSupplierMenuList",{
        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>
.templatePopo{
  margin: 10px;
}
.divboxbig{
  .tips{
    padding: 16px;
    padding-top: 0;
    color: red;
  }
}
  .divbox{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 16px;
    .aBtn{
      margin-right: 20px;
    }
  }
.container0 {
  // min-height: 500px;
  padding-top: 50px;
    .f_c_theme{
    color: #f60;
  }
  .select-product {
    width:540px;
    margin:0 auto;
    /deep/ .el-cascader-menu__wrap{
      height:368px;
    }
    .btn-box {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      .btn {}
      .imgHist{
        width: 24px;
        display: block;
        cursor: pointer;
      }
    }
  }
}
</style>
