<template>
  <div>
    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancel="cancel">
      <a-form :form="form" id="codeItemModal-form" @submit="handleSubmit">
        <a-row :gutter="24">
          <a-col :span="24">
            <!-- code -->
            <a-form-item label="字典码" id="codeItemModal-lookupCode" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-input
                disabled
                placeholder=""
                v-decorator="['formData.lookupCode', {
                  initialValue: formData.lookupCode,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12" style="padding-right: 0px;">
            <!-- 名称 -->
            <a-form-item label="名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-dispName"
                placeholder="请输入名称(最多30个字符)"
                :maxLength="30"
                v-decorator="['formData.dispName', {
                  initialValue: formData.dispName,
                  rules: [{ required: true, message: '请输入名称!' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 项编码 -->
            <a-form-item label="项编码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-code"
                placeholder="请输入项编码"
                v-decorator="['formData.code', {
                  initialValue: formData.code,
                  rules: [{ required: true, message: '请输入项编码!' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12" style="padding-right: 0px;">
            <a-form-item label="启用" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-radio-group
                id="codeItemModal-isEnable"
                name="radioGroup"
                v-decorator="[
                  'formData.isEnable',
                  {
                    initialValue: formData.isEnable,
                    rules: [] },
                ]"
              >
                <a-radio :value="1" id="codeItemModal-isEnable1">是</a-radio>
                <a-radio :value="0" id="codeItemModal-isEnable0">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <!-- 排序值 -->
          <a-col :span="12">
            <a-form-item label="排序值" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input-number
                id="codeItemModal-sort"
                style="width: 100%;"
                placeholder="请输入排序值(0~999999)"
                v-decorator="['formData.sort', {
                  initialValue: formData.sort,
                  rules: [{ required: true, message: '请输入排序值!' }] }]"
                :max="999999"
                :min="0"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 扩展参数 -->
        <a-row :gutter="24">
          <a-col :span="12" style="padding-right: 0px;">
            <!-- 扩展一 -->
            <a-form-item label="扩展一" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-attr1"
                placeholder=""
                v-decorator="['formData.attr1', {
                  initialValue: formData.attr1,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 扩展二 -->
            <a-form-item label="扩展二" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                placeholder=""
                id="codeItemModal-attr2"
                v-decorator="['formData.attr2', {
                  initialValue: formData.attr2,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" style="padding-right: 0px;">
            <!-- 扩展三 -->
            <a-form-item label="扩展三" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-attr3"
                placeholder=""
                v-decorator="['formData.attr3', {
                  initialValue: formData.attr3,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 扩展四 -->
            <a-form-item label="扩展四" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-attr4"
                placeholder=""
                v-decorator="['formData.attr4', {
                  initialValue: formData.attr4,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" style="padding-right: 0px;">
            <!-- 扩展五 -->
            <a-form-item label="扩展五" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-attr5"
                placeholder=""
                v-decorator="['formData.attr5', {
                  initialValue: formData.attr5,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 扩展六 -->
            <a-form-item label="扩展六" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                id="codeItemModal-attr6"
                placeholder=""
                v-decorator="['formData.attr6', {
                  initialValue: formData.attr6,
                  rules: [] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-textarea
                id="codeItemModal-remarks"
                v-decorator="[
                  'formData.remarks',
                  {
                    initialValue: formData.remarks,
                    rules: [] },
                ]"
                :maxLength="500"
                style="min-height: 60px;"
                placeholder="最多500字符"
                autosize />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button id="codeItemModal-save-btn" type="primary" @click="handleSubmit()">
            保存
          </a-button>
          <a-button id="codeItemModal-cancel-btn" :style="{ marginLeft: '8px' }" @click="handleCancel()">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
// 组件
import { STable, VSelect } from '@/components'
// 接口
import { saveLookUpItem } from '@/api/lookup.js'
export default {
  name: 'CodeItemModal',
  components: { STable, VSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      titleText: '添加字典项', // 弹窗标题
      isshow: this.visible, // 打开关闭弹窗
      formLayout: 'horizontal',
      // form设置
      form: this.$form.createForm(this, { name: 'miniForm' }),
      roleList: [], // 列表数据
      // 提交参数
      formData: {
        lookupCode: '', // 字典码
        code: '', // code
        dispName: '',
        isEnable: 1, // 活动状态
        sort: '', // 排序
        attr1: '', // 扩展1
        attr2: '', // 扩展2
        attr3: '', // 扩展3
        attr4: '', // 扩展4
        attr5: '', // 扩展5
        attr6: '', // 扩展6
        remarks: ''// 备注
      }
    }
  },
  methods: {
    // 关闭
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        console.log(values, 'values222')
        if (!err) {
          console.log(values.formData, ' formData.type222222222')
          saveLookUpItem(Object.assign(this.formData, values.formData)).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message)
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确定取消吗?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          _this.clear()
          _this.cancel()
        }
      })
    },
    // 重置
    clear () {
      this.form.resetFields()
      delete this.formData.id
      this.formData.lookupCode = ''
      this.formData.code = ''
      this.formData.dispName = ''
      this.formData.isEnable = 1
      this.formData.sort = ''
      this.formData.attr1 = ''
      this.formData.attr2 = ''
      this.formData.attr3 = ''
      this.formData.attr4 = ''
      this.formData.attr5 = ''
      this.formData.attr6 = ''
      this.formData.remarks = ''
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'miniForm' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.data.id) { // 编辑
          this.titleText = '编辑字典项'
          this.formData = Object.assign({}, this.data)

          delete this.formData.no
          this.formData.isEnable = Number(this.formData.isEnable)
          console.log(this.formData, 'this.formData')
        } else {
          this.formData.lookupCode = this.data.lookupCode
          this.titleText = '添加字典项'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style >
  .modalBox{
    width: 650px !important;
  }
  .ant-modal-footer {
    display: none;
  }
</style>