<template>
  <div class="app-container home">
      <el-row :gutter="20" style="padding:10px;">
        <el-col :span="6">
          <div class="grid-content bg-fff">
            <div class="gird-header assets-all">记录设备</div>
            <div class="gird-num">{{countAssetData.allAsset}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-fff">
            <div class="gird-header assets-borrow">借出设备</div>
            <div class="gird-num">{{ countAssetData.borrowAsset }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-fff">
            <div class="gird-header assets-fault">故障设备</div>
            <div class="gird-num">{{ countAssetData.faultAsset }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-fff">
            <div class="gird-header assets-scrap">报废设备</div>
            <div class="gird-num">{{ countAssetData.scrapAsset }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding:10px;">
        <el-col :span="12" style="height:500px;">
          <div style="font-size: 20px;text-align: center; line-height: 70px; background-color: #fff;">常用设备数据分析图</div>
          <div style="width: 100%;height: 430px;" >
            <div ref="chartp" style="width: 100%;height: 100%;background-color: #fff;"></div>
          </div>
        </el-col>
        <el-col :span="12"  style="height:500px;" class="col-data">
          
          <el-row style="height:100%;background-color: #fff;padding: 0 10px;">
            <div style="font-size: 20px;text-align: center; line-height: 70px;">最新借出记录</div>
            <el-table
              :data="tableData"
              height="420"
              style="width: 100%">
              <el-table-column
                prop="assetBarCode"
                label="设备编码"
                width="170">
              </el-table-column>
              <el-table-column
                prop="username"
                label="借用人"
                width="80">
              </el-table-column>
              <el-table-column
                prop="borrowDate"
                label="借用时间">
              </el-table-column>
              <el-table-column
                prop="isreturn"
                label="是否归还"
                width="80">
              </el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
      
    <!-- <div class="showImg">
      <img
        @mouseover="changeInterval(true)"
        @mouseleave="changeInterval(false)"
        v-for="item in imgArr"
        :key="item.id"
        :src="item.url"
        v-show="item.id === currentIndex"
      />
      
      <div class="banner-circle">
        <ul>
          <li
            @click="changeImg(item.id)"
            v-for="item in imgArr"
            :key="item.id"
            :class="item.id === currentIndex ? 'active' : ''"
          ></li>
        </ul>
      </div>
    </div> -->
    <!-- <div @click="clickIcon('up')" class="iconDiv icon-left">
        <i class="el-icon-caret-left"></i>
      </div>
      <div @click="clickIcon('down')" class="iconDiv icon-right">
        <i class="el-icon-caret-right"></i>
      </div> -->
    
  </div>
</template>

<script>
import { countNumber,listBorrow } from "@/api/asset/borrow";
import { countAssets } from "@/api/asset/asset";
export default {
  data() {
    return {
      currentIndex: 0, //当前所在图片下标
      timer: null, //定时轮询
      imgArr: [
        { id: 0, url: require("../assets/images/st02.jpg") },
        { id: 1, url: require("../assets/images/xzl02.jpg") }
      ],
      countData: [
        {countNum: '', typeName: ''}
      ],
      tableData: [],
      countAssetData:{
        allAsset:0,
        borrowAsset:0,
        faultAsset:0,
        scrapAsset:0
      }
    };
  },
  mounted() {
    // this.startInterval();
    this.getEchartPicture();
    this.getNewBorrowList();
    this.getCountAsset();
  },
  methods: {
    //开启定时器
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.imgArr.length - 1) {
          this.currentIndex = 0;
        }
      }, 3000);
    },
    // 点击左右箭头
    clickIcon(val) {
      if (val === "down") {
        this.currentIndex++;
        if (this.currentIndex === this.imgArr.length) {
          this.currentIndex = 0;
        }
      } else {
        /* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
        // 第二种写法
        if (this.currentIndex === 0) {
          this.currentIndex = this.imgArr.length;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index;
    },
    //鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer);
      } else {
        this.startInterval();
      }
    },
    async getEchartPicture() {
      const chartp = this.$refs.chartp;
      if (chartp) {
        const myChart = this.$echarts.init(chartp);
        await countNumber().then(response => {
        this.countData = response.data;
      })
        let arr = []
        this.countData.forEach(item=>{
          arr.push({name:item.typeName,value:item.countNum})
        })
        let option = {
          // title: {
          //   text: "常用设备数据分析图",
          //   left: "center",
          //   margin: [0, 0, 0, 0],
          // },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: arr,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    getNewBorrowList(){
      listBorrow({
        pageNum:1,
        pageSize:10
      }).then(res=>{
        console.log(res)
        if(res.rows){
          this.tableData = res.rows
        }else{
          this.tableData = []
        }
        
      })
    },
    getCountAsset(){
      countAssets().then(res=>{
        console.log(res)
        if(res.data){
          this.countAssetData = res.data
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.home{
  min-height: calc(100vh - 84px);
  background-color: rgb(240,242,245);
  overflow-y: scroll;
  overflow-x: hidden;
}
/* 清除li前面的圆点 */
li {
  list-style-type: none;
}
.showImg {
  position: relative;
  width: 80%;
  // height: 250px;
  margin: 30px auto;
  overflow: auto;
}
/* 轮播图片 */
.showImg img {
  // width: 100%;
  height: 100%; 
}

/* 箭头图标 */
.iconDiv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125, 125, 125, 0.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover {
  background-color: white;
}
.icon-left {
  left: 10px;
}
.icon-right {
  right: 10px;
}

/* 控制圆点 */
.banner-circle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul {
  margin: 0 50px;
  height: 100%;
  text-align: right;
}
.banner-circle ul li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(125, 125, 125, 0.8);
  cursor: pointer;
}
.active {
  background-color: black !important;
}




  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .bg-fff{
    background-color: #fff;
  }
  .el-col {
    border-radius: 4px;
  }
  .col-data{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .data-borrow,.data-fault{
      height: 240px;
      width: 100%;
      background-color: #fff;
      -webkit-box-flex: 1;
      /* flex: 1; */
      overflow-y: scroll;
    }
  }
  
  .grid-content {
    min-height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .gird-header{
    height: 100%;
    display: inline-block;
    /* height: 100%; */
    min-height: 100px;
    width: 35%;
    font-size: 26px;
    padding: 16px;
    flex: 1;
  }
  .gird-num{
    width: 65%;
    color: #666;
    font-size: 45px;
  }
  .assets-all{
    background-color:#148ac6; 
    // background-color:rgb(52, 103, 107);
  }
  .assets-borrow{
    background-color: #c95734;
    // background-color: rgb(162, 49, 15);
  }
  .assets-fault{
    background-color: rgb(196, 166, 78);
    // background-color: rgb(196, 166, 78);
  }
  .assets-scrap{
    background-color: rgb(133, 142, 81);
    // background-color: rgb(133, 142, 81);
  }
</style>

