<template>
  <div class="inline-16">
    <el-button v-if="data.status === '新建'" size="mini" type="primary" @click="onShow" >审核</el-button>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="500px"
        append-to-body
        @close="dialogVisible = false">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item
              prop="amount"
              label="确认金额">
              <el-input v-model="form.amount" size="small" placeholder="请输入确认金额"></el-input>
          </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width:120px" @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" size="small" style="width:120px"  @click="examineRow">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "examine",
  props:["data"],
  data(){
    var checkAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('确认金额不能为空'));
      }
      setTimeout(() => {
        if (Number(value) !== this.data.amount) {
          callback(new Error('确认金额与单据金额不一致'));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      dialogVisible:false,
      form:{
        amount:''
      },
      rules:{
        amount: [
          { validator: checkAmount, trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    onShow(){
      this.dialogVisible = true
    },
    examineRow(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$api.requested({
          "id": "20230216190002",
          "content": {
            "sa_cashbillid":this.$route.query.id
          }
        })
        this.tool.showMessage(res,()=>{
          this.dialogVisible = false
          this.$emit("examineSuccess")
        })
      })
    },
  }
}
</script>

<style scoped>

</style>