<template>
  <div class="addMenu app-container">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="130px"
    >

      <el-form-item label="分类名称：" prop="cateName">
        <el-input
          v-model="setQuery.cateName"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      
       <el-form-item label="排序：" prop="sort">
        <el-input
        type="number"
          v-model.number="setQuery.sort"
          :maxlength="5"
          class="item-width-300"
        ></el-input>
      </el-form-item>

      <el-form-item label="上级分类：" prop="parentId">
        <el-cascader :disabled="this.$route.query.mode=='edit'" class="item-width-300" v-model="setQuery.parentId" :show-all-levels="false" :options="options1" :props="{ checkStrictly: true,value:'id',label:'cateName',children:'child' }" clearable></el-cascader>
       
      </el-form-item>

    </el-form>

    <div class="btn-group">
       <el-button>取 消</el-button>
     <el-button type="primary" :loading="loading"  @click="save">确 定</el-button>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/Upload'
import {addOrUpdateGoodsType,getData} from '@/api/goods'
export default {
    components: {
        Upload,
    },
  data() {
    return {
        loading:false,
        options:[
            {
                label:'纵向',
                value:1
            },
            {
                label:'横向',
                value:2
            }
        ],
        options1:[],
      setQuery: {
        "cateLevel": 1,
        "cateName": "",
        "parentId": [],
        "sort": 0,
        },
      rules: {
        cateName: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        sort: [{ required: true, message: "请输入权重", trigger: "blur" }],
      },
    };
  },
  methods: {
    chooseParent(val){
        this.setQuery.cateLevel = val.length + 1
        if(val.length){
            this.setQuery.parentId = val[val.length-1]
        }else{
            this.setQuery.parentId = 0
        }
    },
    uploadEnd(val){
      this.setQuery[val.type] = val.url
    },
    save() {
      this.$refs.setQuery.validate((v) => {
        if (v) {
          this.loading = true
          let obj = JSON.parse(JSON.stringify(this.setQuery))
          obj.parentId = this.setQuery.parentId[this.setQuery.parentId.length-1]
          obj.cateLevel = this.setQuery.parentId.length + 1
          addOrUpdateGoodsType(obj).then(res=>{
            this.loading = false

            if(res.state == 'Success'){

              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
               
                  this.$router.push('/operationManage/goodsType/index')
            }
          })
              
        }
      });
    },
    filter(data){
          data.map(item=>{
            if(item.pages&&item.pages.length){
              item.pages.map(i=>{
                delete i.pages
              })
            }
          })
          return data
    },
    getData(){
      getData().then(res=>{
        if(res.state == 'Success'){
          this.options1 = this.filter(res.content)
        }
      })
    }
  },
  beforeDestroy(){
      sessionStorage.removeItem('studyMenu')
  },
  created () {
    this.getData()
    // 当前id 编辑时才有
    if(this.$route.query.mode){
        let menuInfo = JSON.parse(sessionStorage.getItem('studyMenu'))
        this.setQuery.id = menuInfo.id
        this.setQuery.cateLevel = menuInfo.cateLevel
        this.setQuery.cateName = menuInfo.cateName
        this.setQuery.sort = menuInfo.sort

    }
    if(this.$route.query.parentId && this.$route.query.level == '二级分类'){
      this.setQuery.parentId = [Number(this.$route.query.parentId) ]
    }else if(this.$route.query.parentId && this.$route.query.level == '三级分类'){
      this.setQuery.parentId = (this.$route.query.id? [Number(this.$route.query.parentId),Number(this.$route.query.id)]: [Number(this.$route.query.parentId)])
    }
  },
};
</script>

<style lang="scss" scoped>
.addMenu {
  padding-bottom: 40px;
  .btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>