<template>
  <el-main :style="{ height: mianHeight + 'px' }">
    <div style="display: flex;">
      <el-card style="flex: 1;">
        <template #header>
          <div class="card-header">
            <span style="font-weight: 600;">今日汇率</span>
          </div>
        </template>
        <!-- 图表一 -->
        <!-- <div ref="myChart" :style="{ width: '400px', height: '300px' }"></div> -->
        <!-- <CommonEcharts :optios="option1" :height="heights"></CommonEcharts> -->
        <BaseTable @register="registerTable"></BaseTable>
      </el-card>
      <el-card style="margin-left: 20px;flex: 1;">
        <template #header>
          <div class="card-header">
            <span style="font-weight: 600;">订单统计</span>
          </div>
        </template>
        <!-- <div ref="myChart1" :style="{ width: '400px', height: '300px' }"></div> -->
        <CommonEcharts :optios="option3" :height="heights"></CommonEcharts>
      </el-card>
      <el-card style="margin-left: 20px;flex: 1;">
        <template #header>
          <div class="card-header">
            <span style="font-weight: 600;color: #FF7670;">待发送</span>
          </div>
        </template>
        <!-- <div ref="myChart2" :style="{ width: '400px', height: '300px' }"></div> -->
        <CommonEcharts :optios="option2" :height="heights"></CommonEcharts>
      </el-card>
    </div>
    <!-- 导航菜单 -->
    <!-- <NavigationBar :nav-list="navList" /> -->
    <el-card style="flex: 1;margin-top: 20px;height: 300px;">
    </el-card>
  </el-main>
</template>
<script setup lang='ts'>
import CommonEcharts from '@/components/echarts/CommonEcharts.vue';
import { ref, nextTick, onMounted, reactive } from 'vue'
// import NavigationBar from '@/components/NavigationBar/NavigationBar.vue';
import { BaseTable, useTable } from '@/components/Table';
import { api_home_CentralBankRateList } from '@/api/home/home';
import { TableProps } from '@/components/Table/src/types';
import { NavBar } from '@/components/NavigationBar/hooks/useNavigationBar';

// 模拟数据
// const navList = ref<NavBar[]>(
//   [
//     { name: '首页', url: '/', show: false, children: [] },
//     {
//       name: '订单管理',
//       url: '/',
//       show: false,
//       children: [
//         {
//           name: '订单搜索',
//           url: '/',
//           children: [
//             { name: '订单搜索1', url: '/' },
//             { name: '客户费用1', url: '/' },
//             { name: '订单搜索3', url: '/' },
//             { name: '订单搜索4', url: '/' },
//             { name: '订单搜索5', url: '/' },
//             { name: '客户费用设置', url: '/customerfeeset' },
//             { name: '客户费用设置', url: '/customerfeeset' },
//             { name: '客户费用设置', url: '/customerfeeset' },
//           ]
//         },
//         {
//           name: '客户订单',
//           url: '/',
//           children: [
//             { name: '客户订单1', url: '/' },
//             { name: '客户订单1', url: '/' },
//             { name: '客户订单3', url: '/' },
//             { name: '客户订单4', url: '/' },
//           ]
//         },
//         {
//           name: '收件',
//           url: '/',
//           children: []
//         },
//       ],
//     },
//     {
//       name: '财务管理',
//       url: '/',
//       show: false,
//       children: [
//         { name: '客户费用设置', url: '/customerfeeset' },
//         { name: '政务平台', url: '/' },
//         { name: '公告', url: '/' },
//         { name: '专题报道', url: '/' },
//       ],
//     },
//     {
//       name: '财务管理1',
//       url: '/',
//       show: false,
//       children: [
//         { name: '一级文物', url: '/' },
//         { name: '二级文物', url: '/' },
//         { name: '三级文物', url: '/' },
//       ],
//     },
//     {
//       name: '财务管理2',
//       url: '/',
//       show: false,
//       children: [
//         { name: '历史研究', url: '/' },
//         { name: '艺术创作', url: '/' },
//         { name: '影音在线', url: '/' },
//         { name: '文创产品', url: '/' },
//       ],
//     },
//     {
//       name: '财务管理3',
//       url: '/',
//       show: false,
//       children: [
//         { name: '党性教育', url: '/' },
//         { name: '爱国主义教育', url: '/' },
//         { name: '研学实践教育', url: '/' },
//         { name: '科普教育', url: '/' },
//       ],
//     },
//     {
//       name: '财务管理4',
//       url: '/',
//       show: false,
//       children: [
//         { name: '党性教育', url: '/' },
//         { name: '爱国主义教育', url: '/' },
//         { name: '研学实践教育', url: '/' },
//         { name: '科普教育', url: '/' },
//       ],
//     },
//     {
//       name: '参观服务',
//       url: '/',
//       show: false,
//       children: [
//         { name: '景点介绍', url: '/' },
//         { name: '服务内容', url: '/' },
//         { name: '网上预约', url: '/' },
//         { name: '志愿服务', url: '/' },
//       ],
//     },
//     {
//       name: '参观服务2',
//       url: '/',
//       show: false,
//       children: [
//         { name: '景点介绍', url: '/' },
//         { name: '服务内容', url: '/' },
//         { name: '网上预约', url: '/' },
//         { name: '志愿服务', url: '/' },
//       ],
//     },
//   ]
// )

//打开窗口
const open = (url: string) => {
  window.open(url)
}

const mianHeight = ref(0)

//定义echarts的高度
const heights = ref('280px')
const height1 = ref('290px')
const widths = ref('390px')
//柱状图
let option1 = reactive({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});
//饼图
let option2 = reactive({
  title: {
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
//环图
let option3 = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
});

// 今日汇率列表
const dataCentralBankRate: TableProps = reactive({
  border: true,
  height: 320,
  scrollbarAlwaysOn: true,
  columns: [
    {
      prop: 'currencyCode',
      label: '币种',
    },
    {
      prop: 'currencyRate',
      label: '汇率',
    },
    {
      prop: 'releaseTime',
      label: '发布日期',
      width: 170
    }
  ],
  dataSource: []
})
const [registerTable] = useTable(dataCentralBankRate)
// 初始化列表
const initList = async () => {
  const res = await api_home_CentralBankRateList()
  if (res.code === 200) {
    dataCentralBankRate.dataSource = res.data
  }
}

onMounted(() => {
  initList()
  nextTick(() => {
    mianHeight.value = window.innerHeight - 100
  })
})
</script>