<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" :title="type === 'add' ? '新增攻略分类' : '编辑攻略分类'" type="form" :form="form" :rules="rules" @submit="submit">
      <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:icon>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            图标：
          </div>
          <div class="xy-table-item-content img-suggestion">
            <div v-if="form.icon" style="position: relative;">
              <img :src="form.icon" class="avatar">
              <Button
                shape="circle"
                icon="md-close"
                type="error"
                size="small"
                class="img__delete"
                @click="form.icon = ''"></Button>
            </div>
            <el-upload
              v-else
              accept="picture"
              :limit="1"
              class="avatar-uploader"
              list-type="picture-card"
              :action="action"
              :show-file-list="true"
              :on-error="uploadFail"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:state>
        <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-switch v-model="form.state"></el-switch>
          </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-number placeholder="请输入排序" v-model="form.sortNumber" :controls="false" :precision="0" :min="0" style="width: 100px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:callLogo>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            调用标识：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.callLogo" placeholder="请填写调用标识" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            备注：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请输入备注" v-model="form.remark" :autosize="{'minRows':2}" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {store,save} from '@/api/strategyType'
import { Message } from 'element-ui'
import {deepCopy} from "@/utils"
export default {
  data() {
    return {
      id:'',
      isShow:false,
      type:'',
      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

      detail:{},
      form:{
        name:'',
        icon:'',
        state:true,
        callLogo:'',
        sortNumber:0,
        remark:''
      },
      rules:{
        name:[
          {required:true,message:'请填写分类名称'}
        ]
      }
    }
  },
  methods: {
    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.icon = response.url
    },
    uploadBefore(file){
      if((file.size/1000) > 2024){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },


    getDetail(){
      const res = deepCopy(this.detail)
      console.log(res)
      this.form = {
        name:res.name,
        icon:res.icon,
        state:res?.state ? true : false,
        callLogo:res.call_logo,
        sortNumber:0,
        remark:res.remark
      }
    },
    submit(){
      if(this.type === 'add'){
        store({
          name:this.form.name,
          icon:this.form.icon,
          call_logo:this.form.callLogo,
          state:this.form.state ? 1 : 0,
          sort_number:this.form.sortNumber
        }).then(res => {
          Message({
            type:'success',
            message:'添加分类成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          name:this.form.name,
          icon:this.form.icon,
          call_logo:this.form.callLogo,
          state:this.form.state ? 1 : 0,
          sort_number:this.form.sortNumber
        }).then(res => {
          Message({
            type:'success',
            message:'编辑分类成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.detail = {}
        this.$refs['dialog'].reset()
      }
    }
  }

}
</script>

<style scoped lang="scss">
</style>
<style>
.avatar-uploader .el-upload {
  width: 110px;
  height: 110px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #BF617C;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 110px;
  display: block;
  border-radius: 6px;
}
.img__delete{
  transform: scale(0.7,0.7);

  position: absolute;
  top: 1px;
  left: 4%;
}
.img-suggestion::after{
  content:'推荐大小 80*80';
  font-size: 12px;
  color: rgb(160,160,160);
  transform: scale(0.9,0.95);

  position: absolute;
  bottom: -28px;
  left: 140px;
}
</style>
