<template>
  <div>
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <el-form-item label="短剧名称" prop="trade_no">
          <el-input v-model="query.trade_no" placeholder="请输入短剧名称" clearable />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
      </template>
      <template v-slot:extra_button>
        <exportExcel api="channel/order_list" sheet_name="订单列表" :title_obj="titleObj"
          :extro_params="{ is_export: true, ...query }">
        </exportExcel>
      </template>
    </Search>
    <div style="margin:8px 0;">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <div class="stat-wrapper">
          <div>所选时间段内累计充值金额:
            <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_total_coins || '暂无数据' }}</span>
          </div>
          <div>累计充值笔数:
            <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_available_amount || '暂无数据' }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="day_at" label="时间" />
        <el-table-column prop="username" label="优化师" min-width="160px" />
        <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
        <el-table-column label="充值金额" prop="pay_money">
          <template #header>
            <div class="flex items-center">
              <span>充值金额</span>
              <el-tooltip placement="top">
                <template #content>
                  当日累计充值金额<br />
                </template>
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.pay_money }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="充值笔数" prop="pay_count">
          <template #header>
            <div class="flex items-center">
              <span>充值笔数</span>
              <el-tooltip placement="top">
                <template #content>
                  当日累计充值笔数<br />
                </template>
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.pay_count }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="新增用户充值总额" prop="new_user_pay_money">
          <template #header>
            <div class="flex items-center">
              <span>新增用户充值总额</span>
              <el-tooltip placement="top">
                <template #content>
                  当日新用户充值总额<br />
                </template>
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.new_user_pay_money }}</div>
              <div>普通：{{ scope.row.new_user_common_pay_money }}</div>
              <div>会员：{{ scope.row.new_user_vip_pay_money }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="普通充值" min-width="250">
          <el-table-column prop="common_pay_money" label="金额">
            <template #default="scope">
              <div class="wrapper">
                <div>总额：{{ scope.row.common_pay_money }}</div>
                <div>人均：{{ scope.row.common_pay_money }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="支付订单数" prop="common_pay_count">
            <template #default="scope">
              <div class="wrapper">
                <div class="mb-2">
                  <span class="mr-2">已：{{ scope.row.common_pay_count }}</span>
                  <span>未：{{ scope.row.common_unpay_count }}</span>
                </div>
                <div>支付率：{{ scope.row.common_pay_rate }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="会员充值" min-width="250">
          <el-table-column prop="vip_pay_money" label="金额">
            <template #default="scope">
              <div class="wrapper">
                <div>总额：{{ scope.row.vip_pay_money }}</div>
                <div>人均：{{ scope.row.vip_pay_money_per }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="支付订单数" prop="vip_pay_count">
            <template #default="scope">
              <div class="wrapper">
                <div class="mb-2">
                  <span class="mr-2">已：{{ scope.row.vip_pay_count }}</span>
                  <span>未：{{ scope.row.vip_unpay_count }}</span>
                </div>
                <div>支付率：{{ scope.row.vip_pay_rate }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
import { titleObj } from "./excelTitle";
import moment from 'moment';
const start_date = moment().startOf('month').format('YYYY-MM-DD')
const end_date = moment().endOf('month').format('YYYY-MM-DD')
const statisticalData = ref({})
const api = 'statistic/charge/list';
const router = useRouter()
const route = useRoute()
const { data, query, search, reset, loading } = useGetList(api);
const rolesIdentify = inject('rolesIdentify')

const timeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.time) {
    const timeArr = toRaw(e);
    query.value.created_at_start = timeArr[0]
    query.value.created_at_end = timeArr[1]
  } else {
    delete query.value.created_at_start
    delete query.value.created_at_end
  }
}

const resetQuery = () => {
  reset()
}

const tableData = computed(() => data.value?.data);

onMounted(() => {
  search();
});
</script>

<style scoped lang="scss">
.box-card {
  width: 300px;
  margin: 8px;

  .money-wrapper {
    height: 50px;
    width: 100%;
    color: #ed892c;
    font-size: 26px;
  }
}

.stat-wrapper {
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  .stat {
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 550;
    padding: 0 12px;
  }
}

.table-default {
  padding: 2px 4px 8px 4px;

  .set-warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .wrapper {
    margin: 8px;

    .label {
      margin-right: 6px;
    }

    .content {
      font-size: 15px;
    }
  }
}
</style>
