<template>
  <div>
    <xy-dialog :title="type === 'add' ? '新增分类' : '编辑分类'" :is-show.sync="isShow" type="form" :form="form" :rules="rules" ref="dialog" @submit="submit">
      <template v-slot:pid>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>父级：
          </div>
          <div class="xy-table-item-content">
            <el-cascader
              :key="cascaderId"
              clearable
              style="width: 300px;"
              :show-all-levels="false"
              :value="form.pid"
              :options="types"
              :props="{value:'id',label:'name',checkStrictly:true}"
              @change="handleChange"></el-cascader>
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>菜单名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请填写分类名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:sortnumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            排序：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.sortnumber" placeholder="请填写排序" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {index,store,save} from "@/api/type"
import { Message } from 'element-ui'
export default {
  data() {
    return {
      cascaderId:1,
      id:'',
      isShow:false,
      type:'add',
      types:[{}],

      form:{
        pid:0,
        name:'',
        sortnumber:''
      },
      rules:{
        pid:[
          {required:true,message:'请选择父级编号'}
        ],
        name:[
          {required:true,message:'请填写名称'}
        ],
        sortnumber:[
          {pattern:/^[0-9]+/,message:"请填写数字"}
        ]
      }
    }
  },
  methods: {
    async getTypes(){
      const res = await index()
      this.types = [{
        id:0,
        name:'根结点',
        children:res
      }]
    },

    handleChange(e){
      if(e.length > 0){
        this.form.pid = e.at(-1)
      }else{
        this.form.pid = ''
      }
    },
    submit(){
      if(this.type === 'add'){
        store({
          pid:this.form.pid,
          name:this.form.name,
          sortnumber:this.form.sortnumber
        }).then(res => {
          Message({
            type:'success',
            message:'新增成功'
          })
          this.$refs['dialog'].reset()
          this.id = ''
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          pid:this.form.pid,
          name:this.form.name,
          sortnumber:this.form.sortnumber
        }).then(res => {
          Message({
            type:'success',
            message:'更改成功'
          })
          this.$refs['dialog'].reset()
          this.id = ''
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        this.getTypes()
      }else{
        this.types = []
        this.$refs['dialog'].reset()
        this.id = ''
      }
    },
    types(){
      ++this.cascaderId
    }
  }
}
</script>

<style scoped lang="scss">
</style>
