<template>
  <a-modal 
  :footer="null" 
  :title="title" 
  centered 
  :maskClosable="false" 
  :zIndex="5000"
  @cancel="cancle" 
  v-model="isShow">
      <a-form :form="form">
        <a-form-item label="原价" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            style="width: 90%;"
            :min=0
            :precision="2"
            v-decorator="[
              'formValidate.itemSrcPrice',
              { initialValue: formValidate.itemSrcPrice,
              rules: [{ required: true, type: 'number', message: '请输入原价', trigger: 'change' }] },
            ]">
            </a-input-number >
            元
        </a-form-item>
        <a-form-item label="数量" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input-number
          style="width: 90%;"
          :precision="0"
          :min=1
          v-decorator="[
            'formValidate.itemNum',
            { initialValue: formValidate.itemNum,
            rules: [{ required: true, type: 'number', message: '请输入数量', trigger: 'change' }] },
          ]"
          >
          </a-input-number>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 18, offset:3}">
            <a-button v-if="!checked" type="primary" style="width:100px;" @click="handleSubmit()">加入</a-button>
            <a-button v-if="checked" type="primary" style="width:100px;" @click="handleSubmit()">保存</a-button>
            <a-button v-if="checked" type="error" style="margin-left: 20px;width:100px;" @click="del()">删除</a-button>
            <a-button @click="cancle()" style="margin-left: 20px;width:100px;">取消</a-button>
        </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
    export default {
       name: 'addServerToHd',
       props: {
          openModal: {
            type: Boolean,
            default: false
          },
          index: {
            type: [String, Number]
          },
       },
       components: { },
       watch: {
         isShow (newValue, oldValue) {
           if (!newValue){
             this.$emit('closeModal')
             this.clearData()
           }
         },
         openModal (newValue, oldValue) {
           this.isShow = newValue
         }
       },
       data () {
            return {
              isShow: this.openModal,
              modal_loading: false,
              title: '加入活动内容',
              checked: false,
              form: this.$form.createForm(this, { name: 'serverToHd' }),
              formValidate: {
                  itemSrcPrice: 0,
                  itemNum: 1
              },
              serverData: {},
            }
        },
        methods: {
            // 设置数据
            setServerData (item, checked){
              console.log(item,'000')
              this.checked = checked
              this.title = item.itemName
              this.serverData = item
              this.formValidate.itemSrcPrice = item.itemSrcPrice
              this.formValidate.itemNum = item.itemNum
            },
            // 清空数据
            clearData (){
              this.title = ''
              this.checked = false
              this.serverData = {}
              this.form.resetFields()
            },
            // 关闭弹窗触发
            cancle (){
              this.isShow = false
            },
            // 加入套餐,type 1新增，0编辑
            handleSubmit () {
                this.form.validateFields((valid,vaules) => {
                    if (!valid) {
                      console.log(vaules.formValidate)
                      vaules.formValidate.itemSrcPrice = Number(vaules.formValidate.itemSrcPrice)
                      if (!vaules.formValidate.itemNum){
                        this.$message.info('请输入数量')
                        return
                      }
                      if (!vaules.formValidate.itemSrcPrice){
                        this.$message.info('请输入原价')
                        return
                      }
                      
                      this.serverData = Object.assign({}, this.serverData, vaules.formValidate)
                      this.$emit('addServer', this.serverData, this.checked)
                      this.cancle()
                    }
                })
            },
            // 取消工单
            del (){
              this.$emit('delServer', this.serverData, this.index)
              this.cancle()
            }
        },
        mounted (){
        }
    }
</script>
<style lang="less" scoped>
    .ant-btn-error{
     background: red;
     color: #fff;
     border: none;
     &:hover{
       background: firebrick;
     }
    }
</style>
