<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="55%"
    height="300px"
    append-to-body
  >
    <div class="table">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="170px" class="demo-ruleForm">
        <el-row :gutter="28">
          <el-col :span="9">
            <el-form-item label="可用预算金额" prop="validBudgetAmount">
              <el-input v-model="ruleForm.validBudgetAmount" style="width: 200px">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="showType === 0" :span="9" :push="2">
            <el-form-item label="本次开票金额（含税）" prop="taxAmount">
              <el-input v-model="ruleForm.taxAmount" style="width: 200px">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display:flex;justify-content: center">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { validBudgetAmountBatchSave, validBudgetAmountSave } from '@/api/utils'

const rules = {
  taxAmount: [
    { required: true, message: '请输入本次开票金额（含税）', trigger: 'blur' }
  ],
  validBudgetAmount: [
    { required: true, message: '请输入可用预算金额', trigger: 'blur' }
  ]
}
export default {
  data() {
    return {
      title: '填写可用预算金额',
      dialogVisible: false,
      showType: 0,
      rules,
      businessId:'',
      ruleForm: {
        id: '',
        taxAmount: '',  // 本次开票金额
        validBudgetAmount: '' // 可用预算金额
      }
    }
  },
  created() {
  },
  methods: {
    handle(id, taxAmount, validBudgetAmount) {
      console.log('id--->' + id)
      console.log('taxAmount--->' + taxAmount)
      console.log('validBudgetAmount--->' + validBudgetAmount)
      this.dialogVisible = true
      this.showType = 0;
      this.ruleForm = {
        id: '',
        taxAmount: '',
        validBudgetAmount: ''
      }
      this.ruleForm.id = id
      this.ruleForm.taxAmount = taxAmount
      this.ruleForm.validBudgetAmount = validBudgetAmount
      this.$refs['ruleForm'].resetFields()
    },
    batchHandle(businessId) {
      console.log('businessId--->' + businessId)
      this.dialogVisible = true
      this.showType = 1;
      this.businessId = businessId;
      this.$refs['ruleForm'].resetFields()
    },
    submitForm(formName) {
      if (this.showType === 0) {
        this.commitShow0(formName);
      } else {
        this.commitShow1(formName);
      }
    },
    commitShow0(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          console.log('保存')
          console.log(this.ruleForm.taxAmount)
          console.log(this.ruleForm.validBudgetAmount)
          const a = parseFloat(this.ruleForm.taxAmount)
          const b = parseFloat(this.ruleForm.validBudgetAmount)
          // 本次开票金额 > 可用预算金额不允许进行提交
          if (a > b) {
            console.log('超预算')
            this.$confirm('本次开票金额大于可用预算金额, 是否确认?', '预警', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async() => {
              console.log('点击了确定')
              let res = await validBudgetAmountSave(this.ruleForm)
              if (res.code == 200) {
                this.$message.success('提交成功')
                this.dialogVisible = false
                this.$emit('handelData')
                this.$emit('closAmountBtn')
              } else {
                this.$message.error('提交失败')
              }
            }).catch(() => {
              console.log('点击了取消')
            })
          } else {
            let res = await validBudgetAmountSave(this.ruleForm)
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.dialogVisible = false
              this.$emit('handelData')
              this.$emit('closAmountBtn')
            } else {
              this.$message.error('保存失败')
            }
          }
        } else {
          return false
        }
      })
    },
    commitShow1(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          console.log('保存')
          console.log(this.ruleForm.taxAmount)
          console.log(this.ruleForm.validBudgetAmount)
          let data = {
            businessId: this.businessId,
            validBudgetAmount: this.ruleForm.validBudgetAmount
          }
          let res = await validBudgetAmountBatchSave(data)
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.dialogVisible = false
            this.$emit('handelData')
            this.$emit('closAmountBtn')
          } else {
            this.$message.error('保存失败')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  position: relative;
}

</style>
