<template>
  <div class="el-scrollbar__wrap wrap-white padding-20">
    <div class="el-scrollbar__view">
      <el-row :gutter="20" v-loading="loading">
        <el-col :span="12">
          <el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading" label-width="150px">
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-col :span="18"><h3>人员报销详情</h3>
            <div style="margin-bottom: 5px;">
              <span class="color: red">日报销额度：{{columnForm.reimbursementQuotaDay}}</span>
              <span class="color: red">；  可报销额度：{{columnForm.reimbursementQuota}}</span>
              <span class="color: red">；  已报销额度：{{columnForm.alreadyReimbursementAmount}}</span>
              <span class="color: red">；  剩余报销额度：{{columnForm.surplusReimbursementAmount}}</span>
            </div>
            <div style="margin-bottom: 5px;">
              <span class="color: red">可报销天数：{{columnForm.reimbursementDay}}</span>
              <span class="color: red">；  已报销天数：{{columnForm.alreadyReimbursementDay}}</span>
              <span class="color: red">；  剩余报销天数：{{columnForm.surplusReimbursementDay}}</span>
            </div>
          </el-col>
          <el-col :span="6" style="text-align:right">
            <el-button type="info" size="small" @click="goBack">返回</el-button>
          </el-col>
          <el-table
            :data="columnForm.columnList"
            style="width: 100%">
            <el-table-column
              prop="businessCode"
              label="业务编号"
            >
            </el-table-column>
            <el-table-column
              prop="year"
              label="报销年份"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementType"
              label="报销类型"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementDay"
              label="报销天数"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementAmount"
              label="报销额度"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="报销时间"
            >
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              width="200px"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import ReimbursementUser from '@/api/reimbursementSys/user/reimbursementUserService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        count: '10',
        loading: false,
        previewVisible: false,
        isIndeterminate: false,
        inputForm: {
          id: '',
          dataSource: {
            id: ''
          },
          name: '',
          sqlCmd: ''
        },
        columnForm: {
          reimbursementQuotaDay: '',  // 日报销额度
          reimbursementDay: '',  // 报销天数
          alreadyReimbursementDay: '',  // 已报销天数
          surplusReimbursementDay: '',  // 剩余报销天数
          reimbursementQuota: '',  // 报销额度
          alreadyReimbursementAmount: '',  // 已报销额度
          surplusReimbursementAmount: '',  // 剩余报销额度
          columnList: []
        }
      }
    },
    reimbursementUser: null,
    created () {
      this.reimbursementUser = new ReimbursementUser()
    },
    activated () {
      this.$refs['inputForm'].resetFields()
      this.columnForm.columnList = []
      this.inputForm.id = this.$route.query.id
      if (this.inputForm.id) {
        this.reimbursementUser.findListByUserId(this.inputForm.id).then(({data}) => {
          this.columnForm.columnList = data.list
          this.columnForm.reimbursementDay = data.reimbursementDay
          this.columnForm.alreadyReimbursementDay = data.alreadyReimbursementDay
          this.columnForm.surplusReimbursementDay = data.surplusReimbursementDay
          this.columnForm.reimbursementQuota = data.reimbursementQuota
          this.columnForm.alreadyReimbursementAmount = data.alreadyReimbursementAmount
          this.columnForm.surplusReimbursementAmount = data.surplusReimbursementAmount
          this.columnForm.reimbursementQuotaDay = data.reimbursementQuotaDay
        })
      }
    },
    components: {
      editor: require('vue2-ace-editor')
    },
    methods: {
      goBack () {
        this.$store.dispatch('tagsView/delView', {fullPath: this.$route.fullPath})
        this.$router.push('/reimbursementSys/user/reimbursementUserList')
      }
    }
  }
</script>
