<!--
  @description: 新增/编辑参数
  @Modifier：dijia
  @date：  2021/6/30
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childenData.dialog"
      :close-on-click-modal="false"
      title="新增"
      modal-append-to-body
      append-to-body
      width="35%"
      custom-class="shop_mall_dialog"
    >
      <div style="padding-bottom: 20px">
        <el-form
          ref="addForm"
          :label-position="labelPosition"
          :model="formLabelAlign"
          :rules="rules"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td><el-form-item label="参数名称" prop="paramName" /></td>
              <td>
                <el-input v-model.trim="formLabelAlign.paramName" placeholder="请输入参数名称" />
              </td>
            </tr>
            <tr>
              <td><el-form-item label="参数编码" prop="paramCode" /></td>
              <td>
                <el-input v-model.trim="formLabelAlign.paramCode" placeholder="编码自动生成且不可修改" disabled="disabled" />
              </td>
            </tr>
            <tr>
              <td><el-form-item label="参数类型" prop="paramType" /></td>
              <td>
                <el-radio-group v-model="formLabelAlign.paramType" class="pl10">
                  <el-radio label="00">
                    主要参数
                  </el-radio>
                  <el-radio label="01">
                    普通参数
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td><el-form-item label="是否启用" prop="useStatus" /></td>
              <td>
                <el-radio-group v-model="formLabelAlign.useStatus" class="pl10">
                  <el-radio label="01">
                    启用
                  </el-radio>
                  <el-radio label="02">
                    禁用
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
          </table>
        </el-form>
        <div class="footer">
          <el-button type="purple" @click="addClickBtn">
            确定
          </el-button>
          <el-button class="ml30" @click="colseClickBtn">
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addParamInfo } from '@/api/shoppingmall/products.js'
export default {
  props: {
    childenData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      disabled: true,
      labelPosition: 'right',
      formLabelAlign: {
        paramName: '',
        useStatus: '01',
        paramType: '00',
        goodsClassId: '',
        paramCode: '',
        goodsClassName: '',
        goodsClassCode: ''
      },
      rules: {
        paramName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        useStatus: [
          { required: true, message: '请选择参数状态' }
        ],
        paramType: [
          { required: true, message: '请选择参数类型' }
        ]
      }
    }
  },
  watch: {
    childenData: {
      handler(newValue, oldValue) {
        if (newValue.code === 'edit') {
          this.formLabelAlign = JSON.parse(JSON.stringify(newValue.detail))
        }
        this.formLabelAlign.goodsClassName = newValue.goodsClassName
        this.formLabelAlign.goodsClassCode = newValue.goodsClassCode
        // 关闭弹框时 重置
        if (!newValue.dialog) {
          this.$refs.addForm.resetFields()
          this.$refs.addForm.clearValidate()
        }
      },
      immediate: true
    }
  },
  methods: {
    addClickBtn() {
      if (this.childenData.code !== 'edit') {
        this.formLabelAlign.goodsClassId = this.childenData.id
      }
      // 表单验证
      this.$refs.addForm.validate(valid => {
        if (!valid) return // 验证失败
        addParamInfo(this.formLabelAlign).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              message: this.childenData.code === 'edit' ? '编辑参数成功' : '新增参数成功',
              type: 'success'
            })
            this.$emit('repload')
            this.childenData.dialog = false
          }
        }).catch((err) => {
          throw new Error('获取参数失败' + err)
        })
      })
    },
    colseClickBtn() {
      this.childenData.dialog = false
    }
  }
}
</script>

<style scoped lang="less">
.footer{
  text-align: center;
  margin-top: 30px;
}
.pl10 {
  padding-left: 10px;
}
.ml30 {
  margin-left: 30px;
}
</style>
