<template>
  <div class="root" :class="{'frontPlat':currentPlat}">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span class="item-one">销售指数
          <p class="item-one-header">活动实时交易情况</p>
        </span>

      </div>
      <div class="text item">
        <div>
          <span style="font-size:16px">今日交易总额</span>
          <p class="item-num">¥
            <span class="item-num">
              <countTo :startVal='0' :endVal='123455678' :duration='3000' class='item-num'></countTo>
            </span>
          </p>
          <span class="item-bottom">+
             <countTo :startVal='0' :endVal='7' :duration='3000'></countTo>%</span>
        </div>
        <div>
          <p style="font-size:16px">销售目标完成率</p>
          <p class="item-num">
            <span class="item-num"> <countTo :startVal='0' :endVal='678' :duration='3000' class='item-num'></countTo></span>
            %
          </p>
          <span
            class="item-bottom"
            style="color: #b40808;"
          >- <countTo :startVal='0' :endVal='2' :duration='3000'></countTo>%</span>
        </div>
        <div>
          <p style="font-size:16px">活动剩余时间</p>
          <p class="item-num">
            <span class="item-num"> <countTo :startVal='0' :endVal='23' :duration='3000' class='item-num'></countTo>: <countTo :startVal='0' :endVal='26' :duration='3000' class='item-num'></countTo>: <countTo :startVal='0' :endVal='59' :duration='3000' class='item-num'></countTo></span>
          </p>
          <span
            class="item-bottom"
            style="color: #999;opacity: 0.6;"
          >-0.34%</span>
        </div>
        <div>
          <p style="font-size:16px">每秒交易总额</p>
          <p class="item-num">¥
            <span class="item-num"> <countTo :startVal='0' :endVal='4563' :duration='3000' class='item-num'></countTo></span>
          </p>
          <span class="item-bottom">+ <countTo :startVal='0' :endVal='6.9' :duration='3000'></countTo>%</span>
        </div>
        <div>
          <p style="font-size:16px">在售商品总数</p>
          <p
            class="item-num"
            style="color: #000"
          >
            <span
              class="item-num"
              style="color: #000"
            > <countTo :startVal='0' :endVal='678' :duration='3000' class='item-num'></countTo></span>
            件
          </p>
        </div>
      </div>
    </el-card>
    <div class="item-two">
      <div class="item-two-container">
        <div
          class="item-img"
          style="background:#f2ebfb"
        >
          <img src="../../assets/img/one.png" />
        </div>
        <div class="item-two-right">
          <span class="item-two-num"> <countTo :startVal='0' :endVal='55678' :duration='3000' class='item-num'></countTo></span>
          <p>总销售额</p>
        </div>
      </div>
      <div class="item-two-container">
        <div
          class="item-img"
          style="background:#edf8fe"
        >
          <img src="../../assets/img/two.png" />
        </div>
        <div class="item-two-right">
          <span class="item-two-num"> <countTo :startVal='0' :endVal='5678' :duration='3000' class='item-num'></countTo></span>
          <p>访问量</p>
        </div>
      </div>
      <div class="item-two-container">
        <div
          class="item-img"
          style="background:#fef3ef"
        >
          <img src="../../assets/img/three.png" />
        </div>
        <div class="item-two-right">
          <span class="item-two-num"> <countTo :startVal='0' :endVal='5684' :duration='3000' class='item-num'></countTo></span>
          <p>支付笔数</p>
        </div>
      </div>
      <div class="item-two-container">
        <div
          class="item-img"
          style="background:#ffeff2"
        >
          <img src="../../assets/img/four.png" />
        </div>
        <div class="item-two-right">
          <span class="item-two-num"> <countTo :startVal='0' :endVal='1234' :duration='3000' class='item-num'></countTo></span>
          <p>线上购物转化率</p>
        </div>
      </div>
    </div>
    <el-card class="item-three">
      <div
        slot="header"
        class="clearfix"
      >
        <span class="item-one">实时数据</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >事件日期</el-button>
      </div>
      <div class="item item">
        <div
          id="main"
          :style="{width: '400px', height: '400px'}"
        ></div>
      </div>
    </el-card>
    <div style="display:flex">
      <el-card class="item-four">
        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column>
              <template
                slot="header"
                slot-scope="scope"
              >
                <span
                  class="item-one"
                  style="color:#000;padding:10px"
                >公告通知</span>
              </template>
              <template slot-scope="scope">
                {{scope.row.address}}
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template
                slot="header"
                slot-scope="scope"
              >
                <el-button
                  style="padding: 3px 0"
                  type="text"
                >查看更多</el-button>
              </template>
              <template slot-scope="scope">
                {{scope.row.date}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="item-five">
        <div
          slot="header"
          class="clearfix"
        >
          <span class="item-one">进行中的项目</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
          >查看更多</el-button>
        </div>
        <div class="item">
          <ul>
            <li>
              <span class="top">销售管理信息项目</span>
              <p class="center">销售管理信息项目是为全面提升企业市场占有率和竞争力，越来越多企业已经意识到上销...</p>
              <div class="footer">
                <span>项目组名：</span>
                <span>超越超越卓尔不凡</span>
                <span>5 小时前</span>
              </div>
            </li>
            <li>
              <span class="top">销售管理信息项目</span>
              <p class="center">销售管理信息项目是为全面提升企业市场占有率和竞争力，越来越多企业已经意识到上销...</p>
              <div class="footer">
                <span>项目组名：</span>
                <span>超越超越卓尔不凡</span>
                <span>5 小时前</span>
              </div>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import countTo from 'vue-count-to';
export default {
  components: { countTo },
  data() {
    return {
      startVal: 0,
      endVal: 123456789,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      currentPlat: "front"
    }
  },
  watch:{
      "$route.path":(newVal)=>{
        if(newVal.indexOf("frontPlat")==-1){
            this.currentPlat = ""
        }else{
            this.currentPlat = "front"
        }
      }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.root {
  overflow-y: auto;
  height: 100%;
  width: 100%;
  background: #ebeef5;
  box-sizing: border-box;
}
.root.frontPlat{
  // padding: 10px;
  
}
// .main-container[data-v-f3e19b62] {
//   padding: 0;
// }
.app-box__card[data-v-f3e19b62] > .el-card__body {
  padding: 0;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
  display: flex;
  padding-top: 10px;;
  div {
    flex: 1;
    text-align: center;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  // top: 10px;
}
.item-one {
  font-weight: 600;
  font-size: 16px;
}
.item-one-header {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 67px;
  margin-top: -17px;
}
.item-num {
  font-size: 26px !important;
  padding-top: 13px;
  padding-bottom: 9px;
  color: #1890ff;
  font-weight: 600;
}
.item-bottom {
  color: #08b41f;
  font-size: 12px;
}
.item-two {
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
  .item-two-container {
    border-radius: 4px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    flex: 1;
    padding: 34px 25px;
    background-size: cover;
    background-position: 50%;
    margin-left: 5px;
    margin-right: 5px;
    width: 25%;
    background-image: url('../../assets/img/bg.ee8baecb.png'); //ebeef5
  }
}
.item-img {
  width: 75px;
  height: 75px;
  text-align: center;
  line-height: 89px;
  border-radius: 50%;
  margin-right: 32px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #fff;
  display: inline-block;
  img {
    margin-bottom: 20px;
  }
}
.item-two-right {
  display: inline-block;
  margin-top: 20px;
  .item-two-num {
    font-weight: 600;
    font-size: 18px;
  }
}
.item-three {
  margin-top: 10px;
  margin-bottom: 10px;
}
.item-four {
  flex: 1;
  margin-right: 10px;
  th {
    padding: 16px;
  }
}
.item-five {
  flex: 1;
  ul {
    display: block;
    width: 100%;
    li {
      display: inline-block;
      width: 50%;
      border: 1px solid #ebeef5;
      padding: 10px;
      border-top: none;
      border-left: none;
      box-sizing: border-box;
      .top {
        font-size: 16px;
      }
      .center {
        font-size: 14px;
        line-height: 22px;
        padding: 20px 0;
        color: #999;
      }
      .footer {
        display: flex;
        span {
          flex: 1;
          display: block;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
.el-card__body {
  padding: 0;
}
.el-card {
  border: none !important;
}
.copy {
  font-size: 14px;
  text-align: center;
  color: #999;
  padding-bottom: 10px;
  margin-top: 30px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
  display: none;
  background-color: #fff;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #eee;
}
</style>