<template>
  <el-dialog :title="dialogObj.title"
             :visible.sync="dialogObj.show">
    <el-form label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          class="upload-demo"
          :on-remove="handleRemove"
          action="/api/public/upload"
          :http-request="uploadFile"
          list-type="picture-card"
          multiple
          :limit="1"
          :file-list="imgList">
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogObj.show = false">取 消</el-button>
    <el-button type="primary" @click="onSave()">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import {getCategoryApi,addCategoryApi,updateMenuApi,uploadFileApi} from "../../service/api";

  export default {
    name: "menuDialog",
    data(){
      return {
        imgList:[],
        form:{
          name:'',
          pid:'',
          cover:'',
          type:0
        }
      }
    },
    methods:{
      initDialog(){
        switch (this.dialogObj.type) {
          case 0:
            this.form = {
              name:'',
              pid:this.dialogObj.pid,
              cover:'',
              type:0
            };
            this.imgList = [];
            break;
          case 1:
            this.form = {
              name:this.dialogObj.that.name,
              pid:this.dialogObj.that.pid,
              cover:this.dialogObj.that.cover,
              type:0
            };
            this.imgList = [];
            if(this.form.cover){
              this.imgList.push({name:this.dialogObj.that.cover,url:this.dialogObj.that.cover,title:'',lable:''})
            }
        }
      },
      handleRemove(){
        this.imgList = [];
        this.form.cover = ''
      },
      onSave(){
        if(this.imgList[0]){
          this.form.cover = this.imgList[0].url;
        }else{
          this.form.cover = ''
        }
        switch (this.dialogObj.type) {
          case 0:
            addCategoryApi(this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.dialogObj.show = false;
              this.$emit('reflash')
            });
            break;
          case 1:
            updateMenuApi(this.dialogObj.category_id,this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogObj.show = false;
              this.$emit('reflash')
            })
        }
      },
      uploadFile(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.imgList[0]= {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
        })
      }
    },
    props:[
      'dialogObj'
    ],
    watch:{
      'dialogObj'(){
        this.initDialog()
      }
    }
  }
</script>

<style scoped>

</style>