<template>
  <div class="addMenu app-container">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="栏目封面：" v-if="$route.query.level != '二级栏目'" prop="columnImg">
         <Upload
          type="columnImg"
          id="columnImg"
          width="150px"
          height="150px"
          uploadType="SHOP_INFO"
          :imgUrl="setQuery.columnImg"
          @uploadEnd="uploadEnd"
        ></Upload>
      </el-form-item>
      <el-form-item label="栏目名称：" prop="columnName">
        <el-input
          v-model="setQuery.columnName"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="栏目描述：" v-if="$route.query.level != '二级栏目'" prop="columnMsg">
        <el-input
          v-model="setQuery.columnMsg"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="小程序：" prop="belongType">
        <el-select
          v-model="setQuery.belongType"
          clearable
          class="item-width-200"
          placeholder="请选择小程序"
        >
          <el-option
            v-for="item in belongTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="蒙层颜色：" v-if="setQuery.templateType == 2&&$route.query.level == '三级栏目'" prop="colour">
        <el-input
          v-model.number="setQuery.colour"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      
       <el-form-item label="排序：" prop="sort">
        <el-input
          v-model.number="setQuery.sort"
          class="item-width-300"
        ></el-input>
      </el-form-item>
       <el-form-item label="显示状态：" prop="status">
        <el-switch
        v-model="setQuery.status"
        active-text="显示"
        inactive-text="隐藏"
        :active-value="1"
        :inactive-value="2"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item label="上级分类：" prop="parentId">
        <!-- <el-cascader  class="item-width-300" v-model="setQuery.parentId" :show-all-levels="false" :options="options1" :props="{ checkStrictly: true,value:'id',label:'columnName',children:'pages' }" clearable></el-cascader> -->
        <el-select  class="item-width-300" v-model="setQuery.parentId" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.columnName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="商品分类："  prop="goodsCateId">
       <el-cascader
       class="item-width-300"
        v-model="setQuery.goodsCateId"
        :options="typeOptions"
        :show-all-levels="false"
        :props="{
          value:'id',
          label:'cateName',
          emitPath: false,
          children:'child',
          multiple: true
        }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="使用模板：" v-if="$route.query.level == '二级栏目'" prop="templateType">
       <el-select
          v-model="setQuery.templateType"
          clearable
          class="item-width-300"
          placeholder="请选择模板"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="下级顶部图：" v-if="!setQuery.parentId||!setQuery.parentId.length" prop="secondaryImg">
         <Upload
          type="secondaryImg"
          id="secondaryImg"
          width="150px"
          height="150px"
          uploadType="SHOP_INFO"
          :imgUrl="setQuery.secondaryImg"
          @uploadEnd="uploadEnd"
        ></Upload>
      </el-form-item>

    </el-form>

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

<script>
import Upload from '@/components/Upload'
import {addOrUpdate,getAllColumn} from '@/api/study';
import {getData} from '@/api/goods'

export default {
    components: {
        Upload,
    },
  data() {
    return {
        loading:false,
        options:[
            {
                label:'纵向',
                value:1
            },
            {
                label:'横向',
                value:2
            }
        ],
        options1:[],
        typeOptions:[],
        belongTypeOptions:[
        { 
          label: "贵大",
          value: '1',
        },
        {
          label: "慧研学",
          value: '2',
        },
      ],
      setQuery: {
        "columnImg": "",
        "secondaryImg":'',
        "columnLevel": 1,
        "columnMsg": "",
        "columnName": "",
        "parentId": [],
        "sort": 0,
        "colour":'',
        "status": 1,
        "templateType": 1,
        "goodsCateId":'',
        "belongType":'2'
        },
      rules: {
        columnImg: [{ required: true, message: "请上传栏目封面", trigger: "change" }],
        secondaryImg: [{ required: true, message: "请上传下级顶部图", trigger: "change" }],
        columnName: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        belongType: [{ required: true, message: "选择小程序", trigger: "change" }],
        columnMsg: [{ required: true, message: "请输入栏目描述", trigger: "blur" }],
        sort: [{ required: true, message: "请输入权重", trigger: "blur" }],
        colour: [{ required: true, message: "请输入蒙层颜色", trigger: "blur" }],
        goodsCateId: [{ required: true, message: "请选择商品分类", trigger: "change" }],
      },
    };
  },
  methods: {
    chooseParent(val){
        this.setQuery.columnLevel = val.length + 1
        if(val.length){
            this.setQuery.parentId = val[val.length-1]
        }else{
            this.setQuery.parentId = 0
        }
    },
    cancel(){
      this.$router.push('/studyManage/menuManage/index')
    },
    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.goodsCateId = obj.goodsCateId.join(",")
          obj.columnLevel = this.setQuery.parentId?2 : 1
          addOrUpdate(obj).then(res=>{
            this.loading = false
            if(res.state == 'Success'){
              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
              this.$router.push('/studyManage/menuManage/index')
            }
          })
              
        }
      });
    },

    getAllColumn(){
      getAllColumn().then(res=>{
        if(res.state == 'Success'){
           this.options1 =  res.content
          // res.content.map(item=>{
          //    this.options1.push({
          //     id:item.id,
          //     columnName:item.columnName,
          //    })
          // })
        }
      })
    },
    // 获取商品分类
    getData(){
      getData().then(res=>{
        if(res.state == 'Success'){
          this.typeOptions = res.content.map(e=>{
            try{
              e.child.map(
              r=>{
                delete r.child
                return r
              }
            )
            }catch(e){
              console.log(e);
            }
            return e
          });
        }
      })
    },
  },
  beforeDestroy(){
      sessionStorage.removeItem('studyMenu')
  },
  created () {
    this.getData()
    this.getAllColumn()
    // 当前id 编辑时才有
    if(this.$route.query.mode){
        let menuInfo = JSON.parse(sessionStorage.getItem('studyMenu'))
        this.setQuery.id = menuInfo.id
        this.setQuery.columnImg = menuInfo.columnImg
        this.setQuery.columnLevel = menuInfo.columnLevel
        this.setQuery.columnMsg = menuInfo.columnMsg
        this.setQuery.columnName = menuInfo.columnName
        this.setQuery.sort = menuInfo.sort
        this.setQuery.colour = menuInfo.colour
        this.setQuery.status = menuInfo.status
        this.setQuery.belongType = menuInfo.belongType
        this.setQuery.templateType = menuInfo.templateType
        this.setQuery.secondaryImg = menuInfo.secondaryImg
        console.log(menuInfo.goodsCateId)
        try{
          this.setQuery.goodsCateId = menuInfo.goodsCateId.split(',').map(e=>+e) || ""
          console.log('this.setQuery.goodsCateId',this.setQuery.goodsCateId);
        }catch(e){
          this.setQuery.goodsCateId = ""
        }
    }
      this.setQuery.parentId = this.$route.query.parentId

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