<template>
  <div id="HomeContainer">
    <br/>
    <el-row v-if="auth" :gutter="30">
      <el-col :span="12">
        <el-card class="box-card" :style="cardStyle">
          <template #header>
            <div class="card-header">
              <span class="cardTitle">
                <el-icon><img :src="platformIcon" ></el-icon>
                <span class="cardTitleText">平台介绍</span>
              </span>
              <span class="cardDesc">PlatForm Introduction</span>
            </div>
          </template>
          <div>
            <el-scrollbar :style="cardBodyStyle">
              平台介绍内容1<br>
              平台介绍内容2<br>
              平台介绍内容3<br>
              平台介绍内容4<br>
              平台介绍内容5<br>
              平台介绍内容6<br>
              平台介绍内容7<br>
              平台介绍内容8<br>
              平台介绍内容9<br>
              平台介绍内容10<br>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" :style="cardStyle">
          <template #header>
            <div class="card-header">
              <span class="cardTitle">
                <el-icon><img :src="introduceIcon" ></el-icon>
                <span class="cardTitleText">专项介绍</span>
              </span>
              <span class="cardDesc">Special Introduction</span>
            </div>
          </template>
          <div>
            <div class="specialIntroduceLeft" style="width: 40%">
              <el-carousel :height="cardBodyStyle.height">
                <el-carousel-item v-for="item in 2" :key="item">
                  <h3 class="small justify-center" text="2xl">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
            <el-scrollbar :style="cardBodyStyle" style="display: inline-block; width: 55%;padding: 0px 2%">
              <div class="specialIntroduceRight">
                <el-link>专项介绍内容1</el-link><br/>
                <el-link>专项介绍内容2</el-link><br/>
                <el-link>专项介绍内容3</el-link><br/>
                <el-link>专项介绍内容4</el-link><br/>
                <el-link>专项介绍内容5</el-link><br/>
                <el-link>专项介绍内容6</el-link><br/>
                <el-link>专项介绍内容7</el-link><br/>
                <el-link>专项介绍内容8</el-link><br/>
                <el-link>专项介绍内容9</el-link><br/>
                <el-link>专项介绍内容10</el-link><br/>
              </div>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24"><br/></el-col>
      <el-col :span="12">
        <el-card class="box-card" :style="cardStyle">
          <template #header>
            <div class="card-header">
              <span class="cardTitle">
                <el-icon><img :src="systemInfoIcon" ></el-icon>
                <span class="cardTitleText">系统概览</span>
              </span>
              <span class="cardDesc">System Overview</span>
            </div>
          </template>
          <div>
            <el-scrollbar :style="cardBodyStyle">
              数据统计
              <!--<el-row>-->
              <!--  <el-col :span="6" >-->
              <!--    <div>数据占比：</div>-->
              <!--    <div id="system-overview-data-percent" style="width: 100%;height: 100px"></div>-->
              <!--  </el-col>-->
              <!--  <el-col :span="6" >123</el-col>-->
              <!--  <el-col :span="6" >123</el-col>-->
              <!--  <el-col :span="6" >123</el-col>-->
              <!--</el-row>-->
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" :style="cardStyle">
          <template #header>
            <div class="card-header">
              <span class="cardTitle">
                <el-icon><img :src="dataDetail" ></el-icon>
                <span class="cardTitleText">数据明细</span>
              </span>
              <span class="cardDesc">Data Details</span>
            </div>
          </template>
          <div>数据明细图表</div>
        </el-card>
      </el-col>
    </el-row>

    <el-empty v-if="!auth" description="暂无权限查看" />

  </div>
</template>

<script>
import platformIcon from "@/assets/img/icons/platform.png"
import introduceIcon from "@/assets/img/icons/introduce.png"
import systemInfoIcon from "@/assets/img/icons/systemInfo.png"
import dataDetail from "@/assets/img/icons/dataDetail.png"

export default {
  name: 'HomeIndex',
  data() {
    return {
      platformIcon,introduceIcon,systemInfoIcon,dataDetail,
      cardStyle: {
        height: 200+'px',
        'padding-bottom': '15px'
      },
      cardBodyStyle: {
        height: ''
      },
      systemOverviewOptions: {
        dataPercent :{
          // title: {
          //   text: 'Referer of a Website',
          //   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)'
                }
              }
            }
          ]
        },
      }
    }
  },
  props: {
    auth: Boolean,
  },
  created() {

  },
  mounted() {
    let container = document.getElementById("HomeContainer")
    let height= 200;
    if (container && container.clientHeight>=500) {
      height = container.clientHeight*0.4;
    }
    this.cardStyle.height = height+'px';
    this.cardBodyStyle.height = height*0.6 + 'px';
    // let mycharts = this.$echarts.init(document.getElementById('system-overview-data-percent'))
    // mycharts.setOption(this.systemOverviewOptions.dataPercent)
  },
  methods: {

  }
}
</script>

<style scoped>
#HomeContainer {
  width: 100%;
  height: 100%;
}

.box-card {
  width: 100%;
  margin: 1%;
  height: 100%;
  display: inline-block;
}

.box-card .cardTitle {
  font-weight: bold;
  font-size: 22px;
  color: #4041fd;
  cursor: default;
}
.box-card .cardTitle img {
  width: 100%;
  vertical-align: top;
}
.box-card .cardTitleText {
  display: inline-block;
  margin-left: 18px;
}
.box-card .cardDesc {
  font-family: AlibabaSans-Regular,serif;
  font-weight: bold;
  float: right;
  padding-top: 12px;
  color: #4041fd;
  font-size: 15px;
  font-style: italic;
  cursor: default;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.specialIntroduceLeft {
  width: 40%;
  display: inline-block;
}
.specialIntroduceRight {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
</style>