<template>
  <section class="recharge dm-wrap" v-loading="loading">
    <div class="pb22">
      <el-date-picker v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onSearch"></el-date-picker>
      <el-select style="width:180px" clearable v-model="listParams.feeType" placeholder="全部记录类型" @change="onChangeFeeType">
        <el-option label="充值" :value="1"></el-option>
        <el-option label="扣款" :value="2"></el-option>
      </el-select>
      <el-select v-if="listParams.feeType == 2" style="width:180px" clearable v-model="listParams.deductType" placeholder="全部扣款类型" @change="onSearch">
        <el-option v-for="(value, key) in deductTypeList" :key="key" :label="value" :value="key"></el-option>
      </el-select>
    </div>
    <el-table tooltipEffect="dark" :data="tableList" style="width: 100%">
      <el-table-column align="left" prop="timeEnd" label="充值时间">
        <template slot-scope="scope">
          <p style="color:#606266;">{{ formatDateTimeByType(scope.row.timeEnd, 'yyyy-MM-dd-HH-mm-ss', true).y }}</p>
          <p style="color:#606266;">{{ formatDateTimeByType(scope.row.timeEnd, 'yyyy-MM-dd-HH-mm-ss', true).h }}</p>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="transactionId" label="充值流水号"></el-table-column>
      <el-table-column label="记录类型">
        <template slot-scope="scope">
          {{ scope.row.feeType == 1 ? '充值' : '扣款' }}
        </template>
      </el-table-column>
      <el-table-column label="扣款类型">
        <template slot-scope="scope">
          {{ deductTypeList[scope.row.deductType] }}
        </template>
      </el-table-column>
      <el-table-column align="left" prop="payType" label="充值方式">
        <template slot-scope="scope">
          {{ scope.row.payType | filterPayType }}
        </template>
      </el-table-column>
      <el-table-column label="金额" align="left" prop="totalFee">
        <template slot-scope="scope"> {{ (scope.row.totalFee / 100).toFixed(2) }}元 </template>
      </el-table-column>
      <el-table-column align="left" prop="reason" label="充值原因" show-overflow-tooltip></el-table-column>
      <el-table-column label="图片凭证">
        <template slot-scope="scope">
          <!-- <el-image v-for="(item, index) in getUrls(scope).slice(0, 3)" :key="`${currentPage}-${item}`" style="width: 36px; height: 36px" :src="item" :preview-src-list="getUrls(scope, index)" lazy>
            <div slot="placeholder" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image> -->
          <viewer :options="options" :images="getUrls(scope)" class="viewer" ref="viewer">
            <template #default="scope2">
              <img style="width: 36px; height: 36px;margin-left:5px;cursor:pointer" v-for="src in scope2.images" :src="src" :key="src" />
            </template>
          </viewer>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
  </section>
</template>
<script>
import { rechargeRecord } from '@/service/api/rechargeApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import 'viewerjs/dist/viewer.css';
import { component as Viewer } from 'v-viewer';

export default {
  name: 'recharge-record',
  components: { Viewer },
  data() {
    return {
      formatDateTimeByType,
      dateTime: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
      loading: false,
      tableList: [],
      listParams: {
        currentPage: 1,
        pageSize: 20,
        beginTime: '',
        endTime: '',
        deductType: '',
        feeType: ''
      },
      total: 0,
      deductTypeList: {}
    };
  },
  created() {
    this.rechargeRecord();
    this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '计费中心', path: '/recharge' }, { name: '充值记录', path: '' }]); // eslint-disable-line
  },
  methods: {
    getUrls(scope) {
      let urls = scope.row.imageUrls ? scope.row.imageUrls.split(',') : [];
      urls = urls.filter(el => el);
      return urls;
    },
    onChangeFeeType() {
      this.listParams.deductType = '';
      this.onSearch();
    },
    onSearch() {
      this.listParams.currentPage = 1;
      this.rechargeRecord();
    },
    handleSizeChange(val) {
      this.listParams.currentPage = 1;
      this.listParams.pageSize = val;
      this.rechargeRecord();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.rechargeRecord();
    },

    async rechargeRecord() {
      this.loading = true;
      if (this.dateTime) {
        this.listParams.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
        this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
      } else {
        this.listParams.beginTime = '';
        this.listParams.endTime = '';
      }
      try {
        let res = await rechargeRecord(this.listParams);
        if (res.errorCode === 0 && res.result.result) {
          this.tableList = res.result.result;
          this.total = res.result.totalCount;
          this.deductTypeList = JSON.parse(res.result.params.deductTypeList || '{}');
        } else {
          this.tableList = [];
        }
      } catch (err) {
        console.log(err);
      }
      this.loading = false;
    }
  },
  filters: {
    filterPayType(val) {
      let result = '';
      switch (val) {
        case 1:
          result = '微信';
          break;
        case 2:
          result = '支付宝';
          break;
        case 3:
          result = '线下充值';
          break;
        default:
          result = '未知';
          break;
      }
      return result;
    }
  }
};
</script>
