<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
      <el-form-item label="付款人" prop="F_PayUser">
        <el-input v-model="ruleForm.F_PayUser" placeholder="请输入付款人"/>
      </el-form-item>
      <el-form-item label="支付方式" prop="F_PayType" >
        <el-select v-model="ruleForm.F_PayType" placeholder="请选择支付方式" class="form_select" clearable>
          <el-option v-for="item in payTypeList" :key="item.F_Value" :label="item.F_Value" :value="item.F_Value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付时间" prop="F_PayTime" >
        <el-date-picker
          v-model="ruleForm.F_PayTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          class="form_date"
          placeholder="请选择支付时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="付款金额" prop="F_Money">
        <el-input v-model.number="ruleForm.F_Money" placeholder="请输入付款金额"/>
      </el-form-item>
      <el-form-item label="备注" prop="F_RemarkXS">
        <el-input :autosize="{ minRows: 4}" v-model="ruleForm.F_RemarkXS" type="textarea" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDictionaryValueList } from '@/api/commonAPI'
import { orderPayMoney } from '@/api/orderManagement/orderList'

export default {
  name: "PayMoney",
  props: {
    rowid: {
      type: String,
      default: ""
    },
    layerid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      payTypeList: [], //支付方式
      ruleForm: {
        F_OrderId: '', //订单编号
        F_PayUser: '', //付款人
        F_PayType: '', //支付方式
        F_PayTime: '', //支付时间
        F_Money: '', //付款金额
        F_RemarkXS: '', //备注
      },
      rules: {
        F_PayUser: [{
          required: true,
          trigger: 'blur',
          message: '请输入付款人',
        }],
        F_PayType: [{
          required: true,
          trigger: 'change',
          message: '请选择支付方式',
        }],
        F_PayTime: [{
          required: true,
          trigger: 'blur',
          message: '请选择支付时间',
        }],
        F_Money: [{
          required: true,
          trigger: 'blur',
          message: '请输入付款金额'
        },{
          type: 'number',
          message: '付款金额必须为数字'
        }],
      },
      loading: false
    };
  },
  created() {
    this.getPayType()
    Promise.all([
    ]).then(() => {
      if (this.rowid) {
        this.ruleForm.F_OrderId = this.rowid
      }
    });
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.ruleForm.F_Money = this.ruleForm.F_Money == '' ? 0 : this.ruleForm.F_Money
          orderPayMoney(this.ruleForm).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList() // 重新加载父级数据
              this.$message.success('恭喜你，添加成功!')
            }
          }).catch(() => {
            this.loading = false
          })
          return
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
    // 获取支付方式
    getPayType() {
      return new Promise(resolve=>{
        const params={
          isleaf:true,
          code:'PayType'
        }
        getDictionaryValueList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.payTypeList = response.data.Rows
          }
        })
      })
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_form {
  .form_select {
    width: 100%;
  }
  .form_date {
    width: 100%;
  }
}
</style>
