<template>
  <div class="el-scrollbar__wrap wrap-white padding-20">

    <el-form size="small" :inline="true"  class="query-form" ref="searchForm" :model="searchForm"  @keyup.enter.native="refreshList()" @submit.native.prevent>

      <el-form-item label="报销部门" prop="searchForm.officeType">
        <el-select v-model="searchForm.officeType" placeholder="请选择" clearable>
          <el-option
            v-for="item in this.$dictUtils.getDictList('reimbursement_office_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="实发类型" prop="searchForm.reimbursementFsalary">
        <el-select v-model="searchForm.reimbursementFsalary" placeholder="请选择" clearable>
          <el-option
            v-for="item in this.$dictUtils.getDictList('reimbursement_fsalary')"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="报销来源" prop="searchForm.reimbursementAddress">
        <el-select v-model="searchForm.reimbursementAddress" placeholder="请选择" clearable>
          <el-option
            v-for="item in this.$dictUtils.getDictList('reimbursement_address')"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="报销额度"
        class="priceFormItem"
        prop="income"
      >
        <el-input
          v-model="searchForm.beginReimbursementQuota"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          class="priceInput"
          placeholder="起始金额"
          style="width: 130px; margin-right: 10px"
        />-<el-input
        v-model="searchForm.endReimbursementQuota"
        class="priceInput"
        placeholder="结束金额"
        onkeyup="value=value.replace(/[^\d]/g,'')"
        style="width: 130px; margin-left: 10px"
      />
      </el-form-item>
      <el-form-item label="报销时间" prop="makeTime">
        <el-date-picker
          v-model="searchDates"
          type="daterange"
          size="small"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
        <el-button @click="exportExcel()" size="small" icon="el-icon-printer">导出</el-button>
        <el-button type="info" size="small" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>


    <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-table
            id="out-table"
            :data="columnForm.columnList"
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="报销人"
            >
            </el-table-column>
            <el-table-column
              prop="businessCode"
              label="报销批次"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementBatch"
              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="reimbursementFsalary"
              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-column
              prop="officeType"
              label="报销部门"
              width="200px"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementAddress"
              label="报销来源"
              width="200px"
              :formatter="addressType"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import ReimbursementUser from '@/api/reimbursementSys/user/reimbursementUserService'
  import FileSaver from 'file-saver'
  import * as XLSX from 'xlsx'

  export default {
    data () {
      return {
        searchDates: '',
        searchForm: {
          year: '',
          beginDate: '',
          endDate: '',
          beginReimbursementQuota: '',
          endReimbursementQuota: '',
          reimbursementAddress: '',  // 报销来源
          reimbursementFsalary: '',  // 实发类型
          officeType: '',  // 实发类型
          userId: ''
        },
        title: '',
        method: '',
        count: '10',
        loading: false,
        previewVisible: false,
        isIndeterminate: false,
        inputForm: {
          id: '',
          name: '',
          userId: ''
        },
        columnForm: {
          reimbursementQuotaDay: '',  // 日报销额度
          reimbursementDay: '',  // 报销天数
          alreadyReimbursementDay: '',  // 已报销天数
          surplusReimbursementDay: '',  // 剩余报销天数
          reimbursementQuota: '',  // 报销额度
          alreadyReimbursementAmount: '',  // 已报销额度
          surplusReimbursementAmount: '',  // 剩余报销额度
          reimbursementAddress: '',  // 报销来源
          officeType: '',  // 报销来源
          reimbursementFsalary: '',  // 实发类型
          userName: '',  // 报销人名称
          year: '',  // 年份
          columnList: []
        },

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    watch: {
      searchDates () {
        if (this.searchDates) {
          this.searchForm.beginDate = this.searchDates[0]
          this.searchForm.endDate = this.searchDates[1]
        } else {
          this.searchForm.beginDate = ''
          this.searchForm.endDate = ''
        }
      }
    },
    reimbursementUser: null,
    created () {
      this.reimbursementUser = new ReimbursementUser()
    },
    activated () {
      this.$refs['inputForm'].resetFields()
      this.columnForm.columnList = []
      this.searchForm.userId = this.$route.query.userId
      if (this.searchForm.userId) {
        this.reimbursementUser.findListByUserId(this.searchForm).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
          this.columnForm.userName = data.userName
          this.columnForm.year = data.year
        })
      }
    },
    components: {
      editor: require('vue2-ace-editor')
    },
    methods: {
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.reimbursementUser.findListByUserId({
          ...this.searchForm
        }).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
          this.columnForm.userName = data.userName
          this.columnForm.year = data.year
          this.loading = false
        })
      },
      resetSearch () {
        this.$refs.inputForm.resetFields()
        // eslint-disable-next-line no-unused-expressions
        this.searchForm.reimbursementAddress = ''
        this.searchForm.reimbursementFsalary = ''
        this.searchForm.officeType = ''
        this.searchForm.beginReimbursementQuota = ''
        this.searchForm.endReimbursementQuota = ''
        this.searchDates = ''
        this.$nextTick(() => {
          this.refreshList()
        })
      },
      goBack () {
        this.$store.dispatch('tagsView/delView', {fullPath: this.$route.fullPath})
        this.$router.push('/reimbursementSys/user/reimbursementUserList')
      },
      addressType (row, column) {
        // eslint-disable-next-line eqeqeq
        if (row.reimbursementAddress == 0) {
          return '分所报销'
          // eslint-disable-next-line eqeqeq
        } else if (row.reimbursementAddress == 1) {
          return '总所报销'
        } else {
          return '——'
        }
      },
      // 定义导出Excel表格事件
      exportExcel () {
        var xlsxParam = { raw: true }
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(
          document.querySelector('#out-table'),
          xlsxParam
        )
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            // Blob 对象表示一个不可变、原始数据的类文件对象。
            // Blob 表示的不一定是JavaScript原生格式的数据。
            // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            // 设置导出文件名称
            this.columnForm.userName + this.columnForm.year + '报销详情.xlsx'
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      }
    }
  }
</script>
