<template>
  <a-modal
    centered
    class="add-category-modal"
    :footer="null"
    :maskClosable="false"
    :title="pageType==='add'?'新增类目':pageType==='addChild'?'新增子类目':'编辑'"
    v-model="isShow"
    @cancel="isShow = false"
    :width="700">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="add-category-form"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-form-model-item label="父类名称" v-if="pageType==='addChild'&&parentData&&parentData.categorySn">
          {{ parentData&&parentData.categoryName ||'--' }}
        </a-form-model-item>
        <a-form-model-item label="上传图标" prop="iconUrl">
          <Upload
            class="upload"
            id="add-category-iconUrl"
            v-model.trim="form.iconUrl"
            ref="imageSet"
            :fileSize="10"
            :maxNums="1"
            @change="changeImage"
            listType="picture-card"></Upload>
        </a-form-model-item>
        <a-form-model-item label="类目名称" prop="categoryName">
          <a-input
            id="add-category-name"
            :maxLength="5"
            v-model.trim="form.categoryName"
            placeholder="请输入类目名称（最多5个字符）"
            allowClear/>
        </a-form-model-item>
        <a-form-model-item label="易码通优先级" prop="sort">
          <a-input-number
            style="width:100%;"
            id="add-category-sort"
            v-model.trim="form.sort"
            :min="0"
            :precision="0"
            :max="99999999"
            placeholder="请输入正整数，数字越大优先级越低"
            allowClear />
        </a-form-model-item>
      </a-form-model>
      <div class="btn-cont">
        <a-button id="add-category-modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
        <a-button type="primary" id="add-category-modal-save" @click="handleSave">保存</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import { Upload } from '@/components'
// 接口
import { saveShopCategory, shopCategoryDetail } from '@/api/shopCategory'
export default {
  name: 'AddCategoryModal',
  mixins: [commonMixin],
  components: { Upload },
  props: {
    openModal: {//  弹框显示状态
      type: Boolean,
      default: false
    },
    parentData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pageType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      // 设置表单label布局
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      // 添加参数
      form: {
        parentSn: undefined,
        categoryName: '', //  类目名称
        sort: undefined, //  优先级
        iconUrl: '' //  上传图标
      },
      // 必填项验证
      rules: {
        iconUrl: [{ required: true, message: '请选择上传图标', trigger: 'change' }],
        categoryName: [{ required: true, message: '请输入类目名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入优先级', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //  图片上传
    changeImage (file) {
      this.form.iconUrl = file
      if (file) {
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate('iconUrl')
        })
      }
    },
    //  保存
    handleSave () {
      const _this = this
      //  处理表单校验
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.spinning = true
          if (_this.parentData && _this.parentData.categorySn && _this.pageType === 'addChild') {
            _this.form.parentSn = _this.parentData.categorySn
          }
          saveShopCategory(_this.form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.$emit('ok')
                _this.isShow = false
                _this.spinning = false
              }, 1000)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置
    resetAddForm () {
      this.form.categorySn = undefined
      this.form.parentSn = undefined
      this.form.categoryName = ''
      this.form.sort = undefined
      this.form.iconUrl = ''
      this.$refs.imageSet.setFileList('')
      this.$refs.ruleForm.resetFields()
    },
    // 获取详情数据
    getDetailData (ajaxData) {
      this.spinning = true
      shopCategoryDetail(ajaxData).then(res => {
        if (res.status == 200) {
          this.form = res.data
          this.$refs.imageSet.setFileList(res.data.iconUrl)
        }
        this.spinning = false
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.resetAddForm()
      } else {
        this.form = {}
      }
    }
  }
}
</script>

<style lang="less">
.add-category-modal {
	.ant-modal-body {
		padding: 40px 40px 24px;
	}
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
  .ant-radio + span{
    line-height: 40px;
  }
}
</style>
