<template>
  <div>
    <div class="export_btn">
      <el-button type="primary" @click="_exportExcelForService" color='red'>导出</el-button>
    </div>
    <el-table :data="users" style="width: 100%" class="creamtable table" show-summary :highlight-current-row="false"  :summary-method="getSummaries" v-loading="loading" :header-cell-class-name="tableHeaderClassName">
      <el-table-column label="">
        <el-table-column prop="childName" label="设备ID" class="test">
        </el-table-column>
      </el-table-column>
      <el-table-column label="免费点数使用情况">
        <!-- <el-table-column prop="initPoint" label="期初点数">
        </el-table-column> -->
        <el-table-column prop="giftpoint" label="赠送点数">
        </el-table-column>
        <el-table-column prop="usedPoint" label="已用点数">
        </el-table-column>
        <el-table-column prop="surplusPoint" label="剩余点数">
        </el-table-column>
      </el-table-column>
      <el-table-column label="收费点数使用情况">
        <el-table-column prop="charge" label="充值金额/￥">
        </el-table-column>
        <el-table-column prop="exchangePoint" label="兑换为点数">
        </el-table-column>
        <el-table-column prop="lessPoint" label="消耗点数">
        </el-table-column>
        <el-table-column prop="extract" label="提成金额/￥">
        </el-table-column>
      </el-table-column>
      <el-table-column label="">
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <span @click="goToDetail(scope.row.id, scope.row.childName)" class="link">详细</span>
            <!-- <router-link :to="" class="link">详细</router-link> -->
          </template>
        </el-table-column>
        <el-table-column label="" width="60">
        </el-table-column>
      </el-table-column>
    </el-table>
    <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>
</template>
<script>
// import { request, serverName } from 'api/server'

export default {
  props: ['screen'],
  data () {
    return {
      users: [],
      pag: { current: 1 },
      statistics: {},
      loading: true
    }
  },
  watch: {
    statistics () {
    }
  },
  methods: {
    tableHeaderClassName ({ columnIndex, row }) {
      if (row.length === 4) {
        if (columnIndex === 1) {
          return 'warning-col head-top-col tab-col'
        } else if (columnIndex === 2) {
          return 'success-col head-top-col tab-col'
        } else {
          return 'head-top-col tab-col'
        }
      } else if (columnIndex >= 1 && columnIndex <= 3) {
        return 'warning-col head-col tab-col'
      } else if (columnIndex >= 4 && columnIndex <= 7) {
        return 'success-col head-col tab-col'
      } else {
        return 'head-col tab-col'
      }
    },
    _exportExcelForService () {
      // let page = this.currentPage;
      let date1, date2
      date1 = this.screen.date1 || null
      date2 = this.screen.date2 || null

      let cameraId = this.screen.cameraId || null

      let fixUrl = '/excel/manageAgentCamera.xlsx'
      let type = 4

      this.$confirm('确定当前标签下的记录?', '导出记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true
        this.$message({
          type: 'info',
          message: '正在下载,请稍等'
        })
        // let status = this.selectValue;
        request['exportExcel']({
          // 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
      })
    },
    goToDetail (name, childName) {
      this.$router.push({ name: 'user-detail', params: {id: name, rid: childName}})
    },
    getSummaries () {
      let {subCharge, subPoint, subSubStract, subSubStractPoint} = this.statistics
      console.log({...this.statistics})
      let tmp = [
        '', '', '', '',
        subCharge,
        subPoint,
        subSubStract,
        subSubStractPoint,
        '',
        '总计'
      ]
      return tmp
    },
    async getData () {
      let params = Object.assign(this.screen || {}, { page: this.pag.current - 1 })
      this.fullscreenLoading = true
      let data = (await this.$http.post('/manager/camera/search', {
        pageNum: params.page,
        pageSize: 10,
        startDate: params.date1,
        endDate: params.date2,
        childName: params.childName
      })).data.data

      this.isChild = false
      this.total = data.total

      this.users = data.list
      this.pag.current = params.page + 1
      this.pag.total = data.total
    },
    async getStatistics () {
      let params = Object.assign(
        this.screen, {}
      )
      let data = (await this.$http.post('/manager/camera/searchStatistics', {
        startDate: params.date1,
        endDate: params.date2,
        childName: params.childName
      })).data

      Object.keys(data).forEach(k => {
        this.statistics[k] = data[k]
      })
    },
    async refresh () {
      this.loading = true
      await this.getData()
      await this.getStatistics()

      this.loading = false
    },
    handleCurrentChange (page) {
      this.pag.current = page
      this.refresh()
    }
  },
  watch: {
    screen () {
      this.pag.current = 1

      this.refresh()
    }
  },
  async mounted () {
    this.loading = true

    this.getData()
    this.getStatistics()
    // this.loading = true
    // let result = await Promise.all([
    //   this.$http.post('/showSub'),
    //   this.getData()
    // ])
    // this.statistics = result[0]
    this.loading = false
  }
}

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

.export_btn {
  float: right;
  position: relative;
  top: 40px;
  z-index: 999;
}

.link {
  color: #09e1c0;
  cursor: pointer;
}

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

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

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

.option {
  padding-top: 10px;
}

.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>
.head-top-col {
  color: #333 !important;
  font-style: italic;
  border: none !important;
}

.warning-col {
  background-color: #fdf5e6 !important
}

.success-col {
  background-color: #f0f9eb !important
}

.creamtable td:nth-child(2),
.creamtable td:nth-child(3),
.creamtable td:nth-child(4)
 {
  background-color: #fdf5e6 !important
}

.creamtable td:nth-child(5),
.creamtable td:nth-child(6),
.creamtable td:nth-child(7),
.creamtable td:nth-child(8),
 {
  background-color: #f0f9eb !important
}

.creamtable .el-table__footer td:nth-child(9) {
  color: #999999;
  text-align: right !important;
}

.normal_btn span {
  color: #09e1c0
}

.order-management-pagination {
  padding: 20px 20px 0;
  position: relative;
  text-align: right;
}

</style>
