<template>
  <div>
    <!-- 统计 -->
    <summaryStatistics></summaryStatistics>
    <Search :search="moreSearch" :reset="moreReset">
      <template v-slot:body>
        <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>
        <el-form-item label="优化师" prop="user_id" v-if="!rolesIdentify.includes('optimizer')">
          <el-select v-model="query.user_id" filterable remote clearable
            :remote-method="(query) => { remoteMethod(query, 'channelPromotionsUsers') }" placeholder="选择优化师">
            <el-option v-for="item in promotionsUsersList" :key="item.user_id" :label="item.name" :value="item.user_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="小程序" prop="miniprogram_id">
          <el-select v-model="query.miniprogram_id" filterable remote
            :remote-method="(query) => { remoteMethod(query, 'channelMiniprogram') }" clearable placeholder="选择小程序">
            <el-option v-for="item in channelMiniprogram" :key="item.miniprogram_id" :label="item.name"
              :value="item.miniprogram_id" />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:extra_button>
        <exportExcel api="statistic/users/list"  v-action="'statistic.UserStatistics.export'" sheet_name="充值统计" :title_obj="titleObj"
          :extro_params="{ is_all: true, ...query }">
        </exportExcel>
      </template>
     
    </Search>
	<div style="margin:8px 6px;">
	          <el-card shadow="hover" :body-style="{ padding: '20px' }">
	            <div class="stat-wrapper">
	              <div>所选时间段内累计充新增用户数:
	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_num || '暂无数据' }}</span>
	              </div>
	              <div>累计新用户充值人数:
	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_recharge_num || '暂无数据' }}</span>
	              </div>
	            </div>
	          </el-card>
	        </div>
	        <div class="table-default" >
	          <el-table :data="tableData" class="mt-3" v-loading="loading">
	            <el-table-column prop="date" min-width="120px" label="时间" />
	            <el-table-column  v-if="!rolesIdentify.includes('optimizer')" prop="username" label="优化师" min-width="160px" />
	            <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
	            <el-table-column label="当日新增用户数" prop="new_user_num" min-width="160px">
	              <template #header>
	                <div class="flex items-center">
						<el-tooltip placement="top">
						  <template #content>
						    当天的新增用户<br />
						  </template>
						  <el-icon>
						    <InfoFilled />
						  </el-icon>
						</el-tooltip>
	                  <span>当日新增用户数</span>
	                </div>
	              </template>
	              <template #default="scope">
	                <div class="wrapper">
	                  <div>{{ scope.row.new_user_num }}</div>
	                </div>
	              </template>
	            </el-table-column>
	            <el-table-column label="当日新增用户充值人数" prop="pay_count" min-width="180px">
	              <template #header>
	                <div class="flex items-center">
						<el-tooltip placement="top">
						  <template #content>
						    当日新增用户充值人数<br />
						  </template>
						  <el-icon>
						    <InfoFilled />
						  </el-icon>
						</el-tooltip>
	                  <span>当日新增用户充值人数</span>
	                  
	                </div>
	              </template>
	              <template #default="scope">
	                <div class="wrapper">
	                  <div>{{ scope.row.new_user_recharge_num }}</div>
	                </div>
	              </template>
	            </el-table-column>
	           <el-table-column label="当日新增用户充率" prop="recharge_rate" min-width="180px">
	             <template #header>
	               <div class="flex items-center">
	           		<el-tooltip placement="top">
	           		  <template #content>
	           		    当日新增用户充率<br />
	           		  </template>
	           		  <el-icon>
	           		    <InfoFilled />
	           		  </el-icon>
	           		</el-tooltip>
	                 <span>当日新增用户充率</span>
	                 
	               </div>
	             </template>
	             <template #default="scope">
	               <div class="wrapper">
	                 <div>{{ scope.row.recharge_rate }}</div>
	               </div>
	             </template>
	           </el-table-column>
	           	<el-table-column label="当日新增用户充总额" prop="new_user_recharge_total" min-width="180px">
	           	  <template #header>
	           	    <div class="flex items-center">
	           			<el-tooltip placement="top">
	           			  <template #content>
	           			    当日新增用户充总额<br />
	           			  </template>
	           			  <el-icon>
	           			    <InfoFilled />
	           			  </el-icon>
	           			</el-tooltip>
	           	      <span>当日新增用户充总额</span>
	           	      
	           	    </div>
	           	  </template>
	           	  <template #default="scope">
	           	    <div class="wrapper">
	           	      <div>{{ scope.row.new_user_recharge_total }}</div>
	           	    </div>
	           	  </template>
	           	</el-table-column>
				<el-table-column label="新增用户人均充值" prop="recharge_mean" min-width="180px">
				  <template #header>
				    <div class="flex items-center">
						<el-tooltip placement="top">
						  <template #content>
						    新增用户人均充值<br />
						  </template>
						  <el-icon>
						    <InfoFilled />
						  </el-icon>
						</el-tooltip>
				      <span>新增用户人均充值</span>
				      
				    </div>
				  </template>
				  <template #default="scope">
				    <div class="wrapper">
				      <div>{{ scope.row.recharge_mean }}</div>
				    </div>
				  </template>
				</el-table-column>		   
	          </el-table>
	          <Paginate />
	        </div>
  </div>
</template>

<script lang="ts" setup>
import summaryStatistics from './summaryStatistics.vue';
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 { statisticUserList } from '@/api/dataStatistics/userStatistics'
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/users/list';
const router = useRouter()
const route = useRoute()
const rolesIdentify = inject('rolesIdentify')
import {
  channelMiniprogramUseList,
  channelPromotionsUsers,
} from '@/api/orders/index'
const channelMiniprogram = ref([])
const promotionsUsersList = ref([])
const { data, query, search, reset, loading } = useGetList(api);
const remoteMethod = (query: string, type: string,) => {
  console.log(query, 'queryquery', type);
  switch (type) {
    case 'channelPromotionsUsers':
      initRemoteOption('channelPromotionsUsers', { name: query })
      break;
    case 'channelMiniprogram':
      initRemoteOption('channelMiniprogram', { name: query })
      break;
  }
}

const initRemoteOption = (type: string, params?: object) => {
  switch (type) {
    case 'channelPromotionsUsers':
      channelPromotionsUsers({ limit: 30, ...params }).then(res => {
        promotionsUsersList.value = res.data
      })
      break;
    case 'channelMiniprogram':
      channelMiniprogramUseList({ limit: 30, ...params }).then(res => {
        channelMiniprogram.value = res.data
      })
      break;
  }
}


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

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

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

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

onMounted(() => {
  initRemoteOption('channelPromotionsUsers')
  initRemoteOption('channelMiniprogram')
  query.value.time = [start_date, end_date];
  query.value.start_at = start_date;
  query.value.end_at = end_date;
  moreSearch();
});
</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>
