<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增活动分类' : '编辑活动分类'" :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>
    </xy-dialog>
  </div>
</template>

<script>
import {store,show,save} from "@/api/activityType"
import { Message } from 'element-ui'
export default {

  data() {
    return {
      isShow:false,
      type:'add',
      id:'',
      editName:'',
      // types:[],
      form:{
        name:"",
      },
      rules:{
        name:[
          {required:true,message:'请输入活动分类名称'}
        ],
      }
    }
  },
  created(){
  },
  methods: {

    async getDetail(){
      // const res = await show({id:this.id})
      this.form = {
        name:this.editName,
      }
    },

    submit(){
      if(this.type === 'add'){
        store({
          pid:0,
          name:this.form.name,
        }).then(res => {
          Message({
            type:'success',
            message:'新增活动分类成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          pid:0,
          id:this.id,
          name:this.form.name
        }).then(res => {
          Message({
            type:'success',
            message:'编辑活动分类成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.editName = ''
        this.$refs['dialog'].reset()
      }
    }
  }

}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 160px;
}
.img__delete{
  transform: scale(0.8,0.8);

  position: absolute;
  top: 4px;
  right: 4px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar {
  width: 80px !important;
  display: block;
  border-radius: 6px;
}

::v-deep .xy-table-item-label{
  width: 160px !important;
}

::v-deep .el-date-editor .el-range-separator{
  width: auto !important;
}

::v-deep .el-input-number .el-input__inner{
  text-align: left !important;
}
</style>
