<template>
  <div>
    <div class="option">
      <div>
        <span v-for="_type in types" :key="_type.val" @click="changeType(_type.val)" :class="{active: _type.val === type}">{{_type.text}}</span>
      </div>
      <div class="export_btn">
        <el-button type="primary" @click="_exportExcelForService" color='red'>导出</el-button>
      </div>
    </div>
    <div class="data-show">
      <el-table :data="users" v-if="type === 1" style="width: 100%" show-summary :summary-method="getSummaries" v-loading="loading" class="table info1">
        <el-table-column label="时间">
          <template slot-scope="scope">
            <span>
              {{$base.dateFormat('yyyy-MM-dd hh:mm:ss', new Date(scope.row.createTime.time))}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="充值金额">
        </el-table-column>
        <el-table-column prop="points" label="兑换成点数">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>
              {{scope.row.payStatus === 1 ? '成功': '失败'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="订单编号" width="220">
        </el-table-column>
        <el-table-column width="60">
        </el-table-column>
      </el-table>
      <el-table :data="users" v-if="type === -1" style="width: 100%" show-summary :summary-method="getSummaries" v-loading="loading" class="table info2">
        <el-table-column prop="create_time" label="时间">
          <template slot-scope="scope">
            <span>
              {{$base.dateFormat('yyyy-MM-dd hh:mm:ss', new Date(scope.row.createTime.time))}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="消费点数">
        </el-table-column>
        <el-table-column prop="orderNum" label="订单编号">
        </el-table-column>
        <el-table-column label=" " width="60">
          <template slot-scope="scope">
            <span></span>
          </template>
        </el-table-column>
      </el-table>
      <!-- @size-change="handleSizeChange"
          :current-page="currentPage4" -->
      <div class="pag-layout" v-if="pag.total">
        <el-pagination :total="pag.total" :current-page="pag.current" :page-size="10" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" class="pag">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { request, serverName } from 'api/server'

export default {
  props: ['screen'],
  data () {
    return {
      users: [],
      pag: { current: 1 },
      statistics: {},
      loading: false,
      type: 1,
      types: [
        { val: 1, text: '充值记录' },
        { val: -1, text: '消费记录' }
      ]
    }
  },
  methods: {
    getSummaries () {
      if (~this.type) {
        return [
          '',
          this.statistics.result || 0,
          this.statistics.result || 0,
          '', '',
          '总计'
        ]
      } else {
        return [
          '',
          this.statistics.result || 0,
          '',
          '总计'
        ]
      }
    },
    changeType (type) {
      this.type = type
    },
    _exportExcelForService () {
      // let page = this.currentPage;
      let date1, date2
      date1 = this.screen.date1 || null
      date2 = this.screen.date2 || null

      // let key = this.key_input = this.$refs.searchKey.currentValue || "";
      // let agentName = this.companyKey_input = this.$refs.companyKey.currentValue || null;
      let cameraId = this.$route.params.id || null

      let fixUrl = ''
      let type
      if (~this.type) {
        type = 1
        fixUrl = '/excel/manageAgentRecharge.xlsx'
      } else {
        type = -1
        fixUrl = '/excel/manageAgentConsume.xlsx'
      }
      this.$confirm('确定当前标签下的记录?', '导出记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true
        this.$message({
          type: 'info',
          message: '正在下载,请稍等'
        })
        // let status = this.selectValue;
        request['exportExcel2']({
          // key：搜索关键词
          date1,
          date2,
          // agentName,
          type,
          cameraId
        }, 'get').then(res => {
          if (res === 1) {
            // window.location.href = "/excel/order.xlsx"
            // console.log(res)
            // this.$alert('请选择充值类型', '提示', {
            //   confirmButtonText: '确定',
            //   callback: action => {

            //   }
            // });

            window.open(serverName + fixUrl + '?rnd=' + Math.random())
            console.log(serverName + fixUrl + '?rnd=' + Math.random())
            // this.fullscreenLoading = false;
          } else {
            this.$alert('导出失败', '提示', {
              confirmButtonText: '确定'

            })
          }
        })
        this.fullscreenLoading = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
        this.fullscreenLoading = false
      })
    },
    async getData () {
      let params = Object.assign({ page: this.pag.current - 1, cameraId: this.$route.params.id, type: this.type },
        this.screen
      )
      let result = []
      await request['showCameraDetail'](params, 'post').then(res => {
        if (res === -101) {
          return this.$error('系统异常，请重试~')
        } else if (res === -102) {
          return this.$error('当前相机不存在！')
        } else {
          result = res
          console.log(result)
        }
      })
      this.users = result.content
      this.pag = {
        current: this.pag.current,
        total: result.sub || this.pag.total
      }
    },
    async refresh () {
      this.loading = true
      await this.getData()
      this.loading = false
    },
    handleCurrentChange (page) {
      this.pag.current = page
      this.refresh()
    },
    async loadData () {
      this.loading = true
      this.getData()

      // let result = await Promise.all([
      //   this.$http.post('/showSubForCamera', {
      //     type: this.type,
      //     cameraId: this.$route.params.id
      //   }),
      //   this.getData()
      // ])
      // this.statistics = result[0]
      this.loading = false
    },
    async getStatistics () {
      let date1, date2
      let cameraId = this.$route.params.id
      let status = this.type
      date1 = this.screen.date1 || null
      date2 = this.screen.date2 || null

      await request['showCameraStatistics2']({cameraId, status, date1, date2}, 'post').then(res => {
        // result = res;
        this.statistics = res

        console.log('result', this.statistics)
      })
    },
    deleteTool () {
      let tool
      while ((tool = this.tools.pop())) {
        this.$emit('rmTool', tool)
      }
    }
    // async addTool() {
    //   this.tools.push({
    //     key: '设备ID',
    //     value: this.$route.params.id
    //   })
    //   let result = await this.$http.post('/showSurplusPoint', { cameraId: this.$route.params.id })
    //   if (result === -2 || result === -1) {
    //     return this.$error('当前相机不存在！')
    //   }
    //   this.tools.push({
    //     key: '当前剩余点数',
    //     value: result,
    //     class: 'strong'
    //   })
    //   for (let i = 0; i < this.tools.length; i++) {
    //     this.$root.Bus.$emit('addTool', this.tools[i])
    //   }
    // }
  },
  watch: {
    screen () {
      this.refresh()
    },
    type () {
      this.loadData()
      this.getStatistics()
    },
    '$route.params.id': function (newVal) {
      // this.deleteTool()
      // if (newVal) {
      //   this.addTool()
      // }
    }
  },
  async created () {
    // console.log(this.$route);

    this.tools = []
    // this.deleteTool()
    // this.addTool()
  },
  beforeDestroy () {
    // this.deleteTool()
  },
  async mounted () {
    this.getStatistics()
    this.getData()
  }
}

</script>
<style scoped>
/*@import url('./style.css');*/

.link {
  color: #09e1c0;
}

.pag-layout {
  overflow: hidden;
  padding: 20px 0 10px;
}

.pag-layout .pag {
  float: right;
}

.data-show {
  padding-top: 35px;
}

.option {
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.option span {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  cursor: pointer;
}

.option span.active {
  color: #333333;
  font-weight: bold;
}

.option span::after {
  content: '/';
  display: inline-block;
  font-size: 14px;
  color: #999999;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
}

.option span:last-child::after {
  display: none;
}

</style>
<style>
.info1 .el-table__footer td:nth-child(6),
.info2 .el-table__footer td:nth-child(4) {
  color: #999999;
  text-align: right !important;
}

</style>
