<template>
  <!-- 主页 -->
  <div class="homePage flex-col">
    <div class="homeBox">
      <s-header :name="sys ? sys.title : $t('public.homePage')" :noback="true" :isFixed="false"></s-header>
      <!-- 新闻通知 -->
      <template v-if="noticeContent.title">
        <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
          :text="noticeContent.title" />
      </template>
      <div class="intervalRow"></div>
      <div class="nameDeviceRow flex-col">
        <span class="txt3">{{ userName }}</span>
        <div class="l-flex-RC">

        </div>
      </div>
      <!-- 行情数据 -->
      <div class="titleBox flex-col">
        <div class="layer2 l-flex-RC">
          <div class="section5 flex-col"></div>
          <div class="TextGroup2 flex-col">
            <span class="txt4">行情数据</span>
          </div>
        </div>
      </div>
      <!-- 时间选择 -->
      <!-- <date-select-list @update="update($event)"></date-select-list> -->
      <!-- 类型选择 -->
      <!-- <typeSelectList v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeSelectList> -->

      <!-- <div class="o-plr-8 o-pt-10">
        <div class="outer5 flex-col" @click="pushOrderCenter">
          // 收入总额，销售量，订单数
        </div>
      </div> -->
      <!-- 时间范围 -->
      <div class="c-text-c c-text-18">
        月K线图
      </div>
      <!-- ECharts -->
      <!-- <div v-if="!noData(salesVolume, salesNumber)"> -->
      <div v-if="!noData(stockPrice)">
        <div ref="chartBox" class="Chart1 flex-col"></div>
      </div>
      <kNoData v-else></kNoData>

      <!-- 买卖排行榜 -->
      <div class="outer9 flex-col justify-center">
        <div class="main24 flex-col justify-between">
          <div class="ImageText10 flex-col">
            <div class="wrap2 flex-row justify-between">
              <div class="outer10 flex-col"></div>
              <div class="TextGroup13 flex-col">
                <span class="txt13">买卖排行榜</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="top5-box">
      <div class="buy-box">
        <van-divider>买家Top5排行榜</van-divider>
        <van-row justify="center" class="bold-row">
          <van-col span="8">姓名</van-col>
          <van-col span="8">交易数量</van-col>
          <van-col span="8">单价</van-col>
        </van-row>
        <van-row v-for="(item, index) in top5List" :key="index" justify="center">
          <van-col span="8">买家{{ index + 1 }}</van-col>
          <van-col span="8">{{ item.amount }}</van-col>
          <van-col span="8">{{ item.price }}</van-col>
        </van-row>
      </div>
      <div style="height: 20px;"></div>
      <div class="sell-box">
        <van-divider>卖家Top5排行榜</van-divider>
        <van-row justify="center" class="bold-row">
          <van-col span="8">姓名</van-col>
          <van-col span="8">交易数量</van-col>
          <van-col span="8">单价</van-col>
        </van-row>
        <van-row v-for="(item, index) in top5List" :key="index" justify="center">
          <van-col span="8">卖家{{ index + 1 }}</van-col>
          <van-col span="8">{{ item.amount }}</van-col>
          <van-col span="8">{{ item.price }}</van-col>
        </van-row>
      </div>
    </div>


    <div style="height: 70px;"></div>


    <div>
      <!-- 分割线 -->
      <img class="pic1" src="../../assets/trading/line.png" />
      <br />
    </div>
    <!-- 新闻通知弹窗 -->
    <kDialog :dialogTitle="$t('home.notificationPop.notification')" :cancelBtnTxt="$t('home.notificationPop.nextTime')"
      :confirmBtnTxt="$t('home.notificationPop.roger')" ref="kDialogRef" @confirmclk="confirmClk">
      <template #content>
        <div class="o-w" style="max-height: 50vh; overflow-y: auto" v-html="noticeContent.note"></div>
      </template>
    </kDialog>

  </div>
</template>

<script>
// 导入无数据组件
import kNoData from "../../components/commom/kNoData/index.vue";
import kDialog from "../../components/commom/kDialog/index.vue";
import { onMounted, ref, nextTick } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, Format_time, styleUrl } from "@/common/js/utils";
import {
  getListStockInfoForMonth,
  Api_getNotice,
  Api_getUpdateNotice,
} from "../../service/home";
import { showToast } from "vant";
import RobotIcon from '@/assets/home/robot.png';

export default {
  name: "home",
  components: {
    sHeader,
    kDialog,
    kNoData,
  },
  setup() {

    const noticeContent = ref({});
    // 获取公告
    const getNotice = () => {
      Api_getNotice({ adminId: user.id }).then((res) => {
        noticeContent.value = res.data.data || {};
      });
    };
    // 通知弹窗
    const kDialogRef = ref(null);
    // 点击通知栏
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 点击右侧按钮
    const confirmClk = (e) => {
      console.log(e, 2222);
      Api_getUpdateNotice({
        adminId: user.id,
      }).then((res) => {
        showToast(res.data.message);
        setTimeout(() => {
          getNotice();
        }, 500);
      });
    };
    const firstLogin = ref(true);
    const user = getLoginUser();
    const userName = ref(user.name);
    const sys = ref(null);
    const pic1 = ref([
      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg', isImage: true },
    ]);


    // 图表对象
    const chartBox = ref();
    let chartObj = null;

    const stockPrice = ref(0);
    // 查询图表
    const getListStockInfoForMonthFun = async () => {
      const { data } = await getListStockInfoForMonth();
      if (data.code === '00000' && data.data) {
        stockPrice.value = 0;
        data.data.series[0].data.forEach((item) => {
          stockPrice.value = parseInt(stockPrice.value + item);
        });

        // 解决eacharts与v-if的渲染问题
        await nextTick();
        if (chartBox.value) {
          chartObj = window.echarts.init(chartBox.value, null, {
            renderer: "canvas",
            useDirtyRect: false,
          });
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "10%",
              containLabel: true,
            },
            legend: {
              bottom: 0,
              right: 10,
              itemWidth: 10,
              itemHeight: 10,
              icon: "rect",
              orient: 'vertical',
              top: 20,
            },
            // 固定屏幕显示多少个，其余的滑动
            dataZoom: [
              {
                type: "inside",
                xAxisIndex: 0,
                filterMode: "none",
                startValue: null,
                endValue: null,
                zoomLock: true,
              },
            ],
            xAxis: {
              type: "category",
              axisLabel: {
                rotate: 45,
              },
              data: data.data.categories,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                ...data.data.series[0],
                type: "line", // line折线图，bar柱状图
                smooth: true, // 针对折线图，平滑曲线
                itemStyle: { color: "#39a6fe" },
                name: "股价￥",
                label: {
                  show: true,
                  position: "top",
                },
              },
            ],
          };

          option.dataZoom[0]["startValue"] =
            data.data.categories[data.data.categories.length - 5];
          option.dataZoom[0]["endValue"] =
            data.data.categories[data.data.categories.length - 1];
          chartObj && chartObj.setOption(option);
          //图形宽度随屏幕宽度改变而改变
          window.onresize = chartObj.resize;
        }
      }
    };
    const pushToolList = ref([]);

    // 页面初始化
    onMounted(async () => {
      // 加载样式
      styleUrl('home');
      // if (localStorage.getItem("loginSys")) {
      //   const loginSysString = localStorage.getItem("loginSys");
      //   sys.value = JSON.parse(loginSysString);
      // }
      firstLogin.value = localStorage.getItem('firstLogin');

      // 获取月度曲线
      getListStockInfoForMonthFun();
      // 获取首页公告
      getNotice();

    });

    const confirmAlarm = () => {
      localStorage.setItem('firstLogin', false);
    }

    const showDataDiv = ref(false);

    // 如果是空数据
    const noData = (stockPrice) => {
      if (!stockPrice) {
        return true;
      }
      return false;
    };

    // 显示logo
    const showLogo = (url) => {
      return require(`../../assets/home/${url}.png`);
    };

    return {
      userName,
      chartBox,
      pushToolList,
      stockPrice,
      sys,
      noticeClk,
      confirmClk,
      kDialogRef,
      noData,
      noticeContent,
      showLogo,
      Format_time,
      showDataDiv,
      firstLogin,
      pic1,
      confirmAlarm,
      robotIcon: RobotIcon,

      top5List: [
        { name: '张三', amount: 100, price: 50 },
        { name: '李四', amount: 90, price: 55 },
        { name: '王五', amount: 80, price: 60 },
        { name: '赵六', amount: 70, price: 65 },
        { name: '钱七', amount: 60, price: 70 }
      ]
    };
  },

};
</script>

<style lang="less" scoped>
@import "../../common/style/common";
@import "../../styles/home/homeRank5";
</style>