<template>
  <div>
    <el-dialog title="支出详情"
               width="600px"
               :visible.sync="payVisible">
      <el-form :model="payForm"
               label-position="right"
               label-width="120px"
               :inline="true"
               class="payForm"
               ref="payForm">
        <el-form-item label="批次号:">
          <div>
            {{payForm.id}}
          </div>
        </el-form-item>
        <br>
        <el-form-item label="流程号:">
          <div>
            {{payForm.financialProcessNo}}
          </div>
        </el-form-item>
        <br>
        <el-form-item label="钉钉流程号:">
          <div>
            {{payForm.dingtalkProcessNo}}
          </div>

        </el-form-item>
        <br>
        <el-form-item label="归属分部:">
          <div>
            {{payForm.organName}}
          </div>
        </el-form-item>
        <el-form-item label="归属学校:">
          <div>
            {{payForm.cooperationName}}
          </div>

        </el-form-item>
        <br>
        <el-form-item label="申请人:">
          <div>
            {{payForm.applyUser}}
          </div>

        </el-form-item>
        <br>
        <el-form-item label="付款金额:">
          <div>
            {{payForm.amount |moneyFormat}}
          </div>

        </el-form-item>
        <el-form-item label="付款时间:">
          <div>
            {{payForm.paymentTime |dayjsFormat}}
          </div>

        </el-form-item>
        <br>
        <el-form-item label="费用类型:">
          <div>
            {{payForm.type | feeType }}
          </div>

        </el-form-item>
        <el-form-item label="费用项目:">
          <div>
            {{payForm.feeProject  | feeProject }}
          </div>
        </el-form-item>
        <br>
        <el-form-item label="事由:">
          <div style="width:370px">
            {{payForm.cause}}
          </div>
        </el-form-item>
        <br>
        <el-form-item label="备注:">
          <div style="width:370px">
            {{payForm.itemDetail}}
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="payVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["show", "item"],
  data () {
    return {
      payForm: {
        id: null,
        financialProcessNo: null,
        dingtalkProcessNo: null,
        organName: null,
        cooperationName: null,
        applyUser: null,
        amount: null,
        paymentTime: null,
        cause: null,
        type: null,
        feeProject: null,
        itemDetail: null,
      },
      payVisible: false
    }
  },
  watch: {
    show (val) {
      this.payVisible = val;
    },
    payVisible (val) {
      if (!val) {
        this.$emit("closeReset");
      }
    },
    item: {
      immediate: true,
      deep: true,
      handler (row, oldValue) {
        if (row) {
          this.payForm = { ...row }
        } else {
          this.payForm = {
            id: null,
            financialProcessNo: null,
            dingtalkProcessNo: null,
            organName: null,
            cooperationName: null,
            applyUser: null,
            amount: null,
            paymentTime: null,
            cause: null,
            type: null,
            feeProject: null,
            itemDetail: null,
          }
        }
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.payForm {
  /deep/.el-form-item {
    min-width: 40%;
  }
}
</style>