<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="accountNo">
              <a-input disabled="disabled" v-model="agreementModel.accountNo" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerName">
              <a-input disabled="disabled" v-model="agreementModel.customerName" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="应收金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shouldMoney">
              <a-input disabled="disabled" v-model="model.shouldMoney"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="实收金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realMoney">
              <a-input disabled="disabled" v-model="model.realMoney"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapperCol="wrapperCol1" prop="livingOrderNo">
              <div id="payTypeContainer">
                <div v-for="(item, index) in payTypes" :key="index">
                  <div>
                    <a-select v-model="payTypes[index].payType" placeholder="收款方式" >
                      <a-select-option
                              :value="item.id"
                              v-for="item in payTypeList"
                              :key="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </div>
                  <div>
                    <a-input v-model="payTypes[index].payMoney" placeholder="￥ 0.00" ></a-input>
                    <a-button type="link" @click="addPayType" v-if="index == 0">
                      添加收款
                    </a-button>
                    <a-button type="link" @click="e=>deletePayType(e,index)" v-else>
                      删除
                    </a-button>
                  </div>
                </div>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'BusMarketAgreementUnreturnedCommissionForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          shouldMoney:0,
          realMoney:0,
         },
        agreementModel:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        wrapperCol1:{
          xs: { span: 24 },
          sm: { span: 16, offset: 5 },
        },
        confirmLoading: false,
        validatorRules: {
           tenantId: [
              { required: true, message: '请输入关联租户!'},
           ],
           hotelId: [
              { required: true, message: '请输入关联酒店!'},
           ],
           agreementId: [
              { required: true, message: '请输入关联协议!'},
           ],
           customerId: [
              { required: true, message: '请输入关联客户协议!'},
           ],
        },
        url: {
          add: "/business/busMarketAgreementUnreturnedCommission/add",
          edit: "/business/busMarketAgreementUnreturnedCommission/edit",
          queryById: "/business/busMarketAgreementUnreturnedCommission/queryById",
          query_payType: "/business/busRoomPayType/queryList",
        },
        payTypeList: [],
        payTypes: [],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.agreementModel));
      getAction(this.url.query_payType,{}).then((res)=>{
        if(res.success){
          this.payTypeList = res.result
        }else{

        }
      })
      this.payTypes.push({
        payType:'',
        payMoney:''
      })
      console.log(this.payTypes)
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        console.log(record)
        this.agreementModel = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      addPayType(){
        //添加收款
        this.payTypes.push({
          payType:'',
          payMoney:''
        })
      },
      deletePayType(e,index){
        console.log(e,index)
        this.payTypes.splice(index, 1)
      }
    }
  }
</script>
