<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="营业额总览" name="1">
                <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
                    <el-form-item label="时间类型">
                        <el-select v-model="queryParams.dateType" style="width: 240px">
                            <el-option label="按日" :value="2"></el-option>  
                            <el-option label="按月" :value="1"></el-option> 
                        </el-select>
                    </el-form-item>  
                    <el-form-item label="日期范围" v-if="queryParams.dateType==2">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 220px"
                            :picker-options="pickerOptions">
                        </el-date-picker> 
                    </el-form-item>
                    <el-form-item label="日期范围" v-if="queryParams.dateType==1">

                        
                    </el-form-item>
                    <el-form-item label="所属区域" prop="areaIdList">
                        <el-cascader v-model="queryParams.areaIdList"
                        :options="treeAreaOptions" :filterable="true" style="width: 220px" :show-all-levels="false"
                        :props="{ 
                            multiple: true,
                            emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                            checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                            value:'id',label:'treeName'
                        }" clearable collapse-tags @change="getTenantGroupAreaTreeData">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="食堂/超市" prop="canteenStallIds">
                    <el-cascader v-model="queryParams.canteenStallIds"
                        :options="tenantOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
                        :props="{ 
                            multiple:true,
                            emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                            checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                            value:'id',label:'treeName'
                        }" collapse-tags
                        clearable>
                    </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                    </el-form-item>
                </el-form>  
                <div style="width: 100%;display: flex;align-items: center;margin-bottom: 20px;">
                    <div style="width: 24%;">
                        <div class="title">营业额(元)</div>
                        <div class="num">78058.76</div>
                    </div>
                    <div style="width: 24%;">
                        <div class="title">用户数(人)</div>
                        <div class="num">1036</div>
                    </div>
                    <div style="width: 24%;">
                        <div class="title">订单数(个)</div>
                        <div class="num">2215</div>
                    </div>
                    <div style="width: 24%;">
                        <div class="title">均单价(元)</div>
                        <div class="num">8.4</div>
                    </div>
                </div>
                <div style="width: 100%;margin-bottom: 20px;display: flex;justify-content: flex-end;padding-right: 40px;"> 
                    <el-radio-group v-model="lineType" size="mini">
                        <el-radio-button label="按食堂"></el-radio-button>
                        <el-radio-button label="按餐次"></el-radio-button> 
                    </el-radio-group> 
                </div>
                <div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div> 
                <div style="width: 100%;height: auto;margin-bottom: 20px;">
                    <div id="pieChartOne" style="width: 50%;height: 250px;"></div>
                    <div id="pieChartTwo" style="width: 50%;height: 250px;"></div> 
                </div>
                <div style="width: 100%;height: auto;margin-bottom: 20px;">
                    <div id="pieChartThree" style="width: 50%;height: 250px;"></div>
                    <div id="pieChartFour" style="width: 50%;height: 250px;"></div> 
                </div> -->
                <Business />
            </el-tab-pane>
            <el-tab-pane label="餐次营业额" name="2"></el-tab-pane>
            <el-tab-pane label="食堂营业额" name="3"></el-tab-pane>
            <el-tab-pane label="充值分析" name="4"></el-tab-pane>
            <el-tab-pane label="用户满意度" name="5"></el-tab-pane>
        </el-tabs>
        
          
    </div>
  </template>
  
  <script>
//   import * as echarts from 'echarts'
//   import { systemAreaTreeApi,tenantGroupAreaTreeApi } from '@/api/reportCenter/analysis'   
  import Business from './business.vue'
  export default {
    name: "",
    dicts: [],
    components: {
        Business
    },
    data() {
      return { 
        activeName:'1',
        // dateRange:[this.formatDate(new Date()),this.formatDate(new Date())],
        // pickerOptions: {
        //     shortcuts: [{
        //         text: '最近一周',
        //         onClick(picker) {
        //         const start = new Date();
        //         const end = new Date();
        //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
        //         picker.$emit('pick', [start, end]);
        //         }
        //     },{
        //         text: '最近一个月',
        //         onClick(picker) {
        //         const start = new Date();
        //         const end = new Date();
        //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        //         picker.$emit('pick', [start, end]);
        //         }
        //     },{
        //         text: '最近三个月',
        //         onClick(picker) {
        //         const start = new Date();
        //         const end = new Date();
        //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
        //         picker.$emit('pick', [start, end]);
        //         }
        //     }]
        // },
        // treeAreaOptions:[],//区域树
        // tenantOptions:[],//食堂超市树 queryParams.areaIdList
        // queryParams:{
        //     dateType:2,
        //     areaIdList:[],
        //     canteenStallIds:[]
        // },
        // lineType:'按食堂',
        
      };
    },
    created() {   
        // this.getAreaTreeData()
    },
    methods: {
        handleTabClick(tab, event) { 
            console.log(tab.name,tab.label) 
        },
        // //区域树
        // getAreaTreeData() {
        //     systemAreaTreeApi({}).then((response) => {
        //         this.treeAreaOptions = response;
        //     });
        // },
        // //食堂超市树
        // getTenantGroupAreaTreeData() {
        //     tenantGroupAreaTreeApi({
        //         // "dataSelectList": this.queryParams.areaIdList, 
        //         "size": -1,
        //         "current": 1
        //     }).then((response) => {
        //         this.tenantOptions = response; 
        //     });
        // },




        // /** 搜索按钮操作 */
        // handleQuery1() { 
        //     this.getData();
        // },
        // /** 重置按钮操作 */
        // resetQuery1() {
        //     this.dateRange = [this.formatDate(new Date()),this.formatDate(new Date())],
        //     this.queryParams = {
        //         dateType:2,
        //         areaIdList:[],
        //         canteenStallIds:[]
        //     }
        //     this.resetForm("queryForm");
        //     this.handleQuery1();
        // },
        // /** 查询列表 */
        // getData() { 
        //     console.log(this.queryParams)
        //     console.log(this.dateRange)
        //     // let param = {  
        //     //     "startDate": this.queryParams.startDate, 
        //     //     "endDate": this.queryParams.endDate,    
        //     // } 
        //     // accountDataTotalApi(param).then(response => {
        //     //     this.accTotalData = response.data
        //     //     console.log(this.accTotalData)
        //     // });
        //     this.InitECharts()
        // },
        // InitECharts() {
        //     // const chartBox = this.$echarts.init(document.getElementById("lineChartOne")); 
        //     var option =  {
        //         tooltip: {
        //             trigger: 'axis',
        //             axisPointer: {
        //                 type: 'shadow',
        //             },
        //         },
        //         legend: {
        //             bottom: '-2%',
        //             // data: ["Forest", "Steppe", "Desert", "Wetland"],
        //         },
        //         grid: {
        //             left: '0',
        //             right: '0',
        //             bottom: '10%',
        //             containLabel: true,
        //         },
        //         xAxis: [
        //             {
        //                 type: 'category',
        //                 axisTick: { show: false },
        //                 axisLabel: { color: '#b3b5bb' },
        //                 data: ['一级', '二级', '三级'],
        //             },
        //         ],
        //         yAxis: [
        //             {
        //                 type: 'value',
        //                 name: '单位（次）',
        //                 nameTextStyle: {
        //                     color: '#b3b5bb',
        //                     alighn: 'end',
        //                     padding: [0, 0, 0, -15],
        //                 },
        //                 nameGap: 30,
        //                 axisTick: { show: false },
        //                 axisLine: { show: false },
        //                 axisLabel: { color: '#b3b5bb' },
        //                 // 修改y轴分割线
        //                 splitLine: {
        //                     lineStyle: {
        //                         color: '#e6e6e6',
        //                         type: 'dashed',
        //                     },
        //                 },
        //             },
        //         ],
        //         series: [
        //             {
        //                 name: '新增',
        //                 type: 'bar',
        //                 barGap: '10%',
        //                 emphasis: {
        //                     focus: 'series',
        //                 },
        //                 data: [2500, 6000, 4200],
        //                 itemStyle: {
        //                     color: '#0091ff',
        //                 },
        //             },
        //             {
        //                 name: '修改',
        //                 type: 'bar',
        //                 barGap: '10%',
        //                 emphasis: {
        //                     focus: 'series',
        //                 },
        //                 itemStyle: {
        //                     color: '#44d7b6',
        //                 },
        //                 data: [5900, 4100, 7900],
        //             },
        //             {
        //                 name: '删除',
        //                 type: 'bar',
        //                 barGap: '10%',
        //                 emphasis: {
        //                     focus: 'series',
        //                 },
        //                 itemStyle: {
        //                     color: '#f7b500',
        //                 },
        //                 data: [2500, 5800, 4100],
        //             },
        //             {
        //                 name: '导出',
        //                 type: 'bar',
        //                 barGap: '10%',
        //                 emphasis: {
        //                     focus: 'series',
        //                 },
        //                 itemStyle: {
        //                     color: '#fa1f1f',
        //                 },
        //                 data: [1800, 1500, 1900],
        //             },
        //         ],
        //     };
        //     let myCharts = echarts.init(document.querySelector('#lineChartOne'));
        //     myCharts.setOption(option)
        //     // chartBox.setOption(option);
        //     // // 根据页面大小自动响应图表大小
        //     // window.addEventListener("resize", function () {
        //     //     chartBox.resize();
        //     // });
        // },
    






        // //日期
        // formatDate(date) {
        //     // 格式化为 YYYY-MM-DD
        //     const year = date.getFullYear();
        //     const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        //     const day = String(date.getDate()).padStart(2, '0');
        //     return `${year}-${month}-${day}`;
        // }
    }
  };
  </script>
  <style scoped>
  .title{
    color: #00000073;font-size: 14px;margin-bottom: 20px;
  }
  .num{
    font-size: 20px;font-weight: 600;margin-top: 10px;
  }
  </style>
  