<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="分利规则名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleName">
              <a-input v-model="model.ruleName" placeholder="请输入分利规则名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="总平台分利" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="saasBenefits">
              <a-input-number
                v-model="model.saasBenefits"
                :min="0"
                :max="99"
                :precision="2"
                :formatter="value => value ? `${value}%` : ''"
                :parser="value => value.replace('%', '')"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="物业小区分利" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityBenefits">
              <a-input-number
                v-model="model.communityBenefits"
                :min="0"
                :max="99"
                :precision="2"
                :formatter="value => value ? `${value}%` : ''"
                :parser="value => value.replace('%', '')"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="商铺收益" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number
                v-model="shopBenefits"
                :min="0"
                :max="99"
                :precision="2"
                :formatter="value => value ? `${value}%` : ''"
                :parser="value => value.replace('%', '')"
                style="width:100%"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { editShareRuleDetailApi } from '@/api/api'

  export default {
    name: 'PropertyChargruleForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          ruleName: '',
          saasBenefits: '',
          communityBenefits: ''
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          ruleName: [{ required: true, message: '请输入收费名称', trigger: 'blur' }],
          saasBenefits: [{ required: true, message: '请输入授权日期', trigger: 'blur' }],
          communityBenefits: [{ required: true, message: '请输入授权小区数量', trigger: 'blur' }]
        },
        url: {
          add: "/property-central/property/propertyChargrule/add",
          edit: "/property-central/property/propertyChargrule/edit",
          queryById: "/property-central/property/propertyChargrule/queryById"
        },
        dictOptions: []
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      shopBenefits() {
        return 100 - (this.model.saasBenefits || 0) - (this.model.communityBenefits || 0)
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      edit (record) {
        console.log(record)
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            editShareRuleDetailApi({...this.model}).then(res=> {
              this.$message.success(res.message);
              this.$emit('ok');
            }).finally(err=> {
              this.confirmLoading = false
            })
          }
        })
      }
    }
  }
</script>