<template>
  <div>
    <Search :search="moreSearch" :reset="moreReset">
      <template v-slot:body>
        <el-form-item label="短剧名称" prop="video_name">
          <el-input v-model="query.video_name" 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="statistic/video/list" sheet_name="短剧统计" :title_obj="titleObj"
          :extro_params="{ is_export: true, ...query }">
        </exportExcel>
      </template>
    </Search>
    <div style="margin:8px 0;" v-action="'statistic.VideoStat.stats'">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <div class="stat-wrapper">
          <div>所选时间段内累计充值金额: <span class="ml-2 mr-4 stat">{{ statisticalData.amount || '暂无数据' }}</span>
          </div>
          <div>累计充值次数: <span class="ml-2 mr-4 stat">{{ statisticalData.charge_count || '暂无数据' }}</span>
          </div>
          <div>累计充值人数: <span class="ml-2 mr-4 stat">{{ statisticalData.charge_user_num || '暂无数据' }}</span></div>
        </div>
      </el-card>
    </div>
    <div class="table-default" v-action="'statistic.VideoStat.index'">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="day" label="时间" />
        <el-table-column prop="video_name" label="短剧名称" min-width="160px" />
        <el-table-column prop="video_id" label="短剧ID" />
        <el-table-column label="充值金额" sortable prop="amount">
          <template #header>
            <span>充值金额</span>
            <el-tooltip placement="top">
              <template #content>
                当日短剧充值总额；基于推广公司的小程序统计；<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.amount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="充值次数" sortable prop="charge_count">
          <template #header>
            <span>充值次数</span>
            <el-tooltip placement="top">
              <template #content>
                当日短剧充值总次数；基于推广公司的小程序统计；<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.charge_count }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="充值人数" sortable prop="charge_user_num">
          <template #header>
            <span>充值人数</span>
            <el-tooltip placement="top">
              <template #content>
                当日累计充值人数；基于推广公司的小程序统计；<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.charge_user_num }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="播放次数" sortable prop="play_count">
          <template #header>
            <span>播放次数</span>
            <el-tooltip placement="top">
              <template #content>
                当日短剧累计播放次数：指当日绑定此短剧的所有推广链接，累计被点击次数<br />
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="wrapper">
              <div>{{ scope.row.play_count }}</div>
            </div>
          </template>
        </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 { statisticVideoStats } from '@/api/dataStatistics/shortStatistical/index';
import { titleObj } from "./excelTitle";
import moment from 'moment';
const start_date = moment().subtract(7, 'days').format('YYYY-MM-DD');
const end_date = moment().format('YYYY-MM-DD');
const statisticalData = ref({});
const api = 'statistic/video/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.start_date = timeArr[0]
    query.value.end_date = timeArr[1]
  } else {
    delete query.value.start_date
    delete query.value.end_date
  }
}

const moreSearch = () => {
  search();
  statisticVideoStats({ ...query.value }).then(res => {
    statisticalData.value = res.data
  })
}

const moreReset = () => {
  reset()
  statisticVideoStats({ ...query.value }).then(res => {
    statisticalData.value = res.data
  })
}

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

onMounted(() => {
  query.value.time = [start_date, end_date];
  query.value.start_date = start_date;
  query.value.end_date = end_date;
  moreSearch();
});
</script>

<style scoped lang="scss">
.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 {
  .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>
