<template>
  <div class="app-container">
    <el-card >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="交易单号" prop="giftName">
          <el-input
            v-model="queryParams.orderNumber"
            placeholder="请输入交易单号"
            clearable
            style="width: 220px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="兑换状态">
          <el-select v-model="queryParams.status" style="width: 150px" placeholder="兑换状态" clearable>
            <el-option  label="未支付" value="unpaid">未支付</el-option>
            <el-option  label="付款成功" value="paid">付款成功</el-option>
            <el-option  label="付款失败" value="payFail">付款失败</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="giftName">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入用户手机号"
            clearable
            style="width: 160px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            size="medium"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            clearable
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px;" >
      <div style="margin-bottom : 10px">
        <span class="font-number">统计</span>
      </div>
      <el-row :gutter="10" class="mb8" >
        <el-col :span="2.5">
          <div class="box">
            <span class="font-chinese">笔数</span>
            <span class="font-number">{{statisticsForm.num}}</span>
          </div>
        </el-col>
        <el-col :span="2.5">
          <div class="box">
            <span class="font-chinese">商品数量</span>
            <span class="font-number">{{statisticsForm.exchangeQuantity}}</span>
          </div>
        </el-col>
        <el-col :span="2.5">
          <div class="box">
            <span class="font-chinese">积分</span>
            <span class="font-number">{{statisticsForm.integral}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="box">
              <span class="font-chinese">支付总额
                <el-tooltip class="item" effect="dark" content="实际支付订单详细信息请在增值订单页面查看
" placement="top-start">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </span>
            <span class="font-number">{{statisticsForm.amount}}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px" >
      <el-table ref="tables"
                v-loading="loading"
                :data="dataList"
                :default-sort="defaultSort">
        <el-table-column label="用户手机号" align="center" prop="mobile"/>
        <el-table-column label="订单号" align="center" prop="orderNumber"/>
<!--        <el-table-column label="商品信息" align="center" prop="" >-->
<!--          <el-table-column label="简述" align="center" prop="categoryName" />-->
<!--          <el-table-column label="商品名称" align="center" prop="giftName" />-->
<!--        </el-table-column>-->
        <el-table-column label="商品名称" align="center" prop="giftName" />
        <el-table-column label="实付信息" align="center"  >
          <el-table-column label="积分" align="center" prop="integral" width=""/>
          <el-table-column label="支付金额" align="center" prop="amount" width="">
            <template slot-scope="scope">
              {{ scope.row.amount?scope.row.amount:"--" }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="支付状态" align="center" prop="status" width="">
          <template slot-scope="scope">
            <el-tag  effect="plain" v-if="scope.row.status =='unpaid'"> 待支付</el-tag>
            <el-tag type="success" effect="plain" v-else-if="scope.row.status =='paid'">支付成功</el-tag>
            <el-tag type="warning" effect="plain" v-else>支付失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" prop="createTime" width=""/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
            >订单详情</el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="订单详情" :visible.sync="openDetail" width="500px" append-to-body :close-on-click-modal="false">
      <detail :dataForm = "dataForm"></detail>
    </el-dialog>

  </div>
</template>

<script>
import {getOrderApi,getStatisticsApi } from "@/api/cashier/integralOrder/order";
import Detail  from '@/views/cashier/NewComponents/integralOrder/detail'
import {getDicts} from "@/api/dict/data";

export default {
  name: "pointsCashier",
  components: { Detail },

  // dicts: ['zhzt'],

  data() {
    return {
      openDetail:false,
      dataForm:{},
      dataList:[],
      zhztList:'',
      queryParams: {
        orderType:1,

        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page:null,
        pageSize:null
      },
      loading: false,
      dateRange: [],
      defaultSort: {prop: 'createTime', order: 'descending'},

      total: 0,

      statisticsForm: {
        num:0,
        exchangeQuantity:0,
        integral:0,
        amount:0
      }
    }
  },
  created() {
    this.getList();
    this.getStatistics();

  },
  methods: {
    getList(){
      getOrderApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
        this.dataList = res.data.records
        this.total = res.data.total

      })
    },
    getStatistics() {
      getStatisticsApi().then(res=>{
        this.statisticsForm = res.data
      })
      console.log("123123123",this.statisticsForm)
    },

    // 获取支付方式
    getZhzt() {
      getDicts("zhzt").then(response => {
        this.zhztList = response.data;
      })
    },

    handleUpdate(){},
    handleQuery(){
      this.getList();

    },
    resetQuery(){
      this.queryParams = {
        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page:1,
        pageSize:10
      },
      this.dateRange = []
    },
    handleDetail(data){
      this.openDetail = true
      this.dataForm = data;
    },
  }
}
</script>

<style scoped>
.app-container {
    width: 100%;
    height: 100%;
    background: #f6f8f9;
    padding-top: 0px;
    padding: 0px
}
 .box {
    padding: 10px;
    height: 80px;
    width: 150px;
    margin-right: 0px;
    background-color: rgba(204, 204, 204, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: left;
  }

.font-chinese {
  font-size: 15px;
  font-family:Microsoft YaHei;
  font-weight: bold;
  line-height:1.5
}
.font-number {
  font-size: 20px;
  font-family: PingFang SC,sans-serif;
  font-weight: bold;
  line-height:1.3
  }
</style>
