<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="20" class="algin-items-stretch d-flex height-400">
        <el-col :span="6" :offset="6">
          <el-card shadow="always" class="height-percentage-100">
            <div class="color-333 font-size-14 mb-3">短信余额</div>
            <div class="text-center mb-3">
              <span class="color-e94848 font-size-32 font-weight-600">{{infoData.balance?(infoData.balance/10):0}}</span>
              <span class="color-666 font-size-16 font-weight-600">条</span>
            </div>
            <div class="text-center">
              <el-button type="primary" size="small" class="width-percentage-50" round block @click="rechargeMethods">充值
              </el-button>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :span="6">
          <el-card shadow="always" class="height-percentage-100">
            <Echart :options="cdata" id="centreLeft1Chart" height="9vw" width="90%"></Echart>
          </el-card>
        </el-col> -->
      </el-row>
      <el-row :gutter="20" class="mt-5">
        <el-table :data="tableData" style="width: 100%;" :header-row-style="{textAlign:'center'}" height="500" align="center" >
          <el-table-column prop="createTime" label="日期">
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号">
          </el-table-column>
          <el-table-column prop="totalFee" label="金额">
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{scope.row.orderType==0?'短信充值':scope.row.orderType==1?'交租':scope.row.orderType==2?'语音电话费用充值':scope.row.orderType==3?'系统续费':'未知'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付方式">
            <template slot-scope="scope">
              <span>{{scope.row.payType==0?'微信支付':scope.row.payType==1?'支付宝支付':scope.row.payType==2?'现金支付':scope.row.payType==3?'银联支付':scope.row.payType==4?'积分支付':'未知'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderStatus" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.orderStatus==0?'支付成功':scope.row.orderStatus==1?'转入退款':scope.row.orderStatus==2?'未支付':scope.row.orderStatus==3?'已关闭':scope.row.orderStatus==4?'已撤销（付款码支付）':scope.row.orderStatus==5?'用户支付中（付款码支付）':scope.row.orderStatus==6?'支付失败(其他原因，如银行返回失败)':'支付失败'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="describe" label="备注">
          </el-table-column>
          <el-table-column label="操作" v-if="info.type === 0">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="drawback(scope.row.orderNo)" v-if="scope.row.orderStatus==0">退款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-center mt-2">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[20,100, 200, 300, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
          </el-pagination>
        </div>
      </el-row>
    </el-card>
    <!-- 微信支付二维码 -->
    <el-dialog :visible.sync="codeDialogVisible" :show-close="false" @close="closeDialog" width="40%" center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="短信数量">
          <el-input size="small" class="mb-2" v-model="form.payValue" type="number" placeholder="请输入充值短信条数">
            <el-button slot="append"  @click.stop="getRadioLable">确认</el-button>
          </el-input>
        </el-form-item>
<!--        <el-button size="small" type="primary" @click="getRadioLable">确认</el-button>-->
      </el-form>
      <div class="text-center" v-if="qrcodeStatus">
        <qriously :value="codeUrl" :size="150" />
        <div class="remark text-center">使用微信扫码支付</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    httpPost,
    httpGet
  } from "../../api/index.js";
  import Echart from "@/common/echart";
  import moment from 'moment'
  export default {
    name: "contrast",
    data() {
      return {
        form:{
          payValue:1
        },
        qrcodeStatus:false,
        pageNum: 1,
        pageSize: 20,
        radio3: '1',
        tableData: [],
        pageTotal:0,
        payValue: 0,
        codeDialogVisible: false, //微信支付二维码弹窗
        codeUrl: '', // 二维码
        cdata: {
          title: {
            text: '交易统计',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [{
            name: '交易统计',
            type: 'pie',
            radius: '70%',
            data: [{
                value: 1048,
                name: '消费'
              },
              {
                value: 735,
                name: '充值'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        info: {
          balance: 0
        },
        infoData: {
          balance: 0
        }
      }
    },
    components: {
      Echart
    },
    created() {
      this.info = JSON.parse(localStorage.getItem('info'))
      this.getOrderList()
    },
    mounted() {
      this.getUserlist()
    },
    methods: {
      // 退款
      drawback(no){
        let url = `/v1/pay/refunds/${no}/退款`
        httpGet('',url).then(res=>{
          if(res.data.success){
            this.$message.success('退款成功')
            this.getUserlist()
            this.getOrderList()
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getOrderList()
      },
      getUserlist() {
        httpGet('', this.$api.getBalance).then(res => {
          if (res.code == 200) {
            this.infoData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      },
      getOrderList() {
        let data = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          orderBy: "create_time desc"
        }
        httpGet(data, this.$api.getOrderList).then(res => {
          if (res.code == 200) {
            res.data.list.map(li => {
              li.totalFee = (li.totalFee / 100).toFixed(2)
            })
            this.tableData = res.data.list
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
      },
      getRadioLable() {
        this.goPay()
      },
      closeDialog() {
        this.codeDialogVisible = false
        this.getOrderList()
        this.getUserlist()
      },
      goPay() {
        let info = JSON.parse(localStorage.getItem('info'))
        let data = {
          description: "充值短信服务",
          productName: "短信服务",
          total: parseInt(this.form.payValue)*10,
          userId: info.id,
          cardId:info.id,
          orderType:0,
          payType:0,
          expand:JSON.stringify({
            phone:info.phone,
            nickname:info.username
          })
        }
        console.log(data)
        httpPost(data, this.$api.createOrder).then(res => {
          if (res.success) {
            this.codeUrl = res.data.data.code_url
            this.qrcodeStatus = true
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      rechargeMethods() {
        this.codeDialogVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
