<script setup lang="ts">
import * as echarts from 'echarts'
import _request from "~/utils/request";
import bar from './txwxComponents/bar2.vue'
import under from '~/assets/images/under.webp'


const formInline = ref({
  xueke: '',
  nianji: '',
  jigou: '',
  ziyuan: '',
})

const xuekeOptions = ref("");
const nianjiOptions = ref("");
const jigouOptions = ref("");
const ziyuanOptions = [
  {
    value: '1',
    label: '推荐课程',
  },
  {
    value: '2',
    label: '名师在线',
  },
  {
    value: '3',
    label: '直播课程',
  },
  {
    value: '4',
    label: '家庭教育',
  },
  {
    value: '5',
    label: '特色课程',
  },
  {
    value: '6',
    label: '作业辅导',
  },
]


const allInfo = ref("");
const echartsData = ref("");

const timeRefusr = ref('');

onMounted(() => {
  initXueKeOption();
  initNianJiOption();
  initJiGouOption();
  initData();
})


//初始化数据
const initData = () => {
  timeRefusr.value = new Date().getTime();
  let transData = {
    xueke_id: formInline.value.xueke,
    grade_id: formInline.value.nianji,
    dept_id: formInline.value.jigou,
    resourse_id: formInline.value.ziyuan,
  };
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL: window.GLOBAL_CONFIG.api,
    url: "/openapi/chart/tx_detail_data.php",
    data: transData,
  })
    .then(res => {
      if (res.code == "1") {
        allInfo.value = res.data.allInfo;
        echartsData.value = res.data.echartsData;
        initEchartsData();
      }
    })
    .catch(error => { console.log(error) });
}


//初始化图表
const chartRef = ref("");
const initEchartsData = () => {
  echarts.init(chartRef.value).setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '1%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    grid: {
      top: '8%',
      bottom: '20%',
    },
    color: ['#7D7CFC', '#0293FD'],
    dataset: {
      source: echartsData.value.dataset_source,
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: true,

        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar', barWidth: 50 }],
  })
}




//学科列表
const initXueKeOption = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL: window.GLOBAL_CONFIG.api,
    url: "/txwx/jcxxgl_zyflgl_xk/index",
    data: {},
  })
    .then(res => {
      if (res.code == "1") {
        let responseData = res.data.page_data;
        let tempArr = [];
        responseData.forEach(item => {
          tempArr.push({
            value: item.tjzx_id,
            label: item.tjzx_xkmc,
          })
        });
        xuekeOptions.value = tempArr
      }
    })
    .catch(error => { console.log(error) });
}

//年级列表
const initNianJiOption = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL: window.GLOBAL_CONFIG.api,
    url: "/txwx/jcxxgl_zyflgl_nj/index",
    data: {},
  })
    .then(res => {
      if (res.code == "1") {
        let responseData = res.data.page_data;
        let tempArr = [];
        responseData.forEach(item => {
          tempArr.push({
            value: item.tjzn_id,
            label: item.tjzn_njmc,
          })
        });
        nianjiOptions.value = tempArr
      }
    })
    .catch(error => { console.log(error) });
}

//机构列表（学校）
const initJiGouOption = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL: window.GLOBAL_CONFIG.api,
    url: "/school/main/index",
    data: {},
  })
    .then(res => {
      if (res.code == "1") {
        let responseData = res.data.page_data;
        let tempArr = [];
        responseData.forEach(item => {
          tempArr.push({
            value: item.sm_id,
            label: item.sm_name,
          })
        });
        jigouOptions.value = tempArr;
      }
    })
    .catch(error => { console.log(error) });
}

//选择切换
const handleChange = () => {
  initData();
}
//清除选项
const clearBtn = () => {
  formInline.value = {
    xueke: '',
    nianji: '',
    jigou: '',
    ziyuan: '',
  };
  initData();
}


const router = useRouter()
function back() {
  router.replace({ name: 'home' })
}
</script>

<template>
  <div class="w-screen h-screen overflow-hidden bg-hex-00000099 flex flex-col text-white bg_img">
    <header class="w-full bg_img_header h-90px flex_center text-38px">
      桐乡市互联网学校数据可视化大屏
    </header>

    <div
      class="w-full flex-grow px-8 pt-2 pb-2 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-hex-fff6 scrollbar-track-transparent">
      <div class="border border-hex-0A337E bg-block p-3 w-full h-full">
        <div class="flex justify-between">
          <div>
            <div>用户登录趋势</div>
            <div class="mt-2 mb-4">
              <img class="h-7px" :src="under">
            </div>
          </div>
          <el-button color="transparent" @click="back">
            返回
          </el-button>
        </div>
        <el-form :inline="true" :model="formInline" class="vars">
          <el-form-item label="学科筛选：">
            <el-select v-model="formInline.xueke" placeholder="全部" @change="handleChange">
              <el-option v-for="item in xuekeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="年级筛选：">
            <el-select v-model="formInline.nianji" placeholder="全部" @change="handleChange">
              <el-option v-for="item in nianjiOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="机构筛选：">
            <el-select v-model="formInline.jigou" placeholder="全部" @change="handleChange">
              <el-option v-for="item in jigouOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="资源筛选：">
            <el-select v-model="formInline.ziyuan" placeholder="全部" @change="handleChange">
              <el-option v-for="item in ziyuanOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="clearBtn">清空选项</el-button>
          </el-form-item>
        </el-form>



        <div>
          <span class="text-18px">{{ allInfo.textTitle }}</span>
          <span class="text-30px">{{ allInfo.textNumber }}w</span>
        </div>
        <div class="w-full h-full">
          <!-- <bar v-if="echartsData" :echarts-data="echartsData" :key="timeRefusr"  /> -->
          <div ref="chartRef" class="w-full h-full " />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 公共头部 */
.bg_img {
  background-image: url('~/assets/images/bg.webp');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: 100%;
}

.bg_img_header {
  background-image: url('~/assets/images/header.webp');
  background-repeat: no-repeat;
  /* background-position: top center; */
  background-origin: content-box;
  background-size: 100%;
}

.hovered:hover .switched {
  display: block;
  opacity: .8;
}

.active .switched {
  display: block;
}

.vars {
  --el-fill-color-blank: #0A41BF37;

}

.el-select-dropdown__item {
  color: #dde1e3;
}
</style>

<style>
body {
  --el-bg-color-overlay: #062c8ddd;
  --el-fill-color-light: #02133a97;

}
</style>
