<template>
      <div class="IonicHometop1" style="overflow:auto;padding: 0 45px;">
        <el-row :gutter="30" style="display: flex;flex-wrap: wrap;">
            <el-col :xs="24" :sm="16" :md="16" style="">
                <div style="">
                    <div class="" style="height:350px; background:#2c2c2c; margin-top:15px;" ></div>
                    <el-row :gutter="10" style="display: flex;align-items: center;flex-wrap: wrap;">
                        <el-col :xs="24" :sm="12" >
                            <div class="IonicHomedetail1"  style="display:flex;margin:20px 0;">
                                <img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width:100%;height: 250px;background:#2c2c2c;">
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="12" > 
                            <div class="" style="margin:20px 0;display:flex; flex: 1; flex-flow: column;justify-content:center;align-items:center;">
                                <img class="" style="width:30px;height:30px;" src="../assets/img/print.png" alt="">
                                <div class="IonicHomedetail2_text" style="font-size:14px;padding:5px;" >打印</div>
                            </div> 
                        </el-col>
                    </el-row>
                </div>
               
            </el-col>
            <el-col :xs="24" :sm="8" :md="8" style="display:flex;" >
                <div style="width: 100%;background:#2c2c2c;text-align:left; margin:15px 0;">
                    <div style="line-height:30px;padding:0 10px;"  :class="{curActive:i==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v.id,i)">
                        {{v.name}}
                    </div>
                </div>
                
            </el-col>
        </el-row>
      </div>

</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Kanban',
  data() {
    return {
         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 弄'
          }],
          defaultImg:'',
        //defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
        // defaultImg:'this.src="http://192.168.1.107:5000/api/photo/default.jpg"',
        // defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
        selectIndex:'0',
        items:[
             {
                "_links": {
                    "frame": "/api/photo/20210428142902_32.jpg", 
                    "self": "/api/products/9"
                }, 
                "area": 1.0, 
                "id": 1, 
                "img": "20210428142902_32.jpg", 
                "ipc": 3.0, 
                "length": 99.0, 
                "name": "12399777777888", 
                "note": "666", 
                "testtime": "Wed, 28 Apr 2021 06:29:02 GMT", 
                "width": 22.0
            },
            {
                "_links": {
                    "frame": "/api/photo/20210428142902_32.jpg", 
                    "self": "/api/products/9"
                }, 
                "area": 1.0, 
                "id": 2, 
                "img": "20210428142902_32.jpg", 
                "ipc": 3.0, 
                "length": 99.0, 
                "name": "12399777777888", 
                "note": "666", 
                "testtime": "Wed, 28 Apr 2021 06:29:02 GMT", 
                "width": 22.0
            },
            {
                "_links": {
                    "frame": "/api/photo/20210428142902_32.jpg", 
                    "self": "/api/products/9"
                }, 
                "area": 1.0, 
                "id": 3, 
                "img": "20210428142902_32.jpg", 
                "ipc": 3.0, 
                "length": 99.0, 
                "name": "12399777777888", 
                "note": "666", 
                "testtime": "Wed, 28 Apr 2021 06:29:02 GMT", 
                "width": 22.0
            },
        ],
        tabs:[{name:''},{}],
        num:0,
        activeIndex: '1',
        timer:'',
        date:new Date()
    }
  },
  components: {
    
  },
  computed:{
      change(){
        if (this.items.length==0) return;
        let src  = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
        console.log('src='+src);
          this.imgUrl = src;
          return src
      }
   
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{
    selectItem(v,i){
        this.selectIndex = i;
    },
    getProduct(){
        this.$axios.get(this.$api.getProducts).then(res =>{
            if(res.status== 200){
                this.items= res.data.items;
            }
            console.log('getProducts');
            
        })
    },
      tabChange(i){
          this.num=i;
      },
    handleSelect(key, keyPath) {
    console.log(key, keyPath);
    },
    getChart(){
        let myChart = echarts.init(this.$refs.chart);
        var option = {
            legend: {
                x:'right',
                textStyle:{color:'#FFFF',}
            },
            dataset: {
                source: [
                    ['product', '未开机', '正常', '异常'],
                    ['5', 43.3, 85.8, 93.7],
                    ['10', 43.3, 85.8, 93.7],
                    ['15', 83.1, 73.4, 55.1],
                    ['20', 86.4, 65.2, 82.5],
                    ['25', 72.4, 53.9, 39.1],
                    ['30', 72.4, 53.9, 39.1],
                    ['35', 72.4, 53.9, 39.1],
                    ['40', 72.4, 53.9, 39.1],
                    ['45', 72.4, 53.9, 39.1],
                    ['50', 72.4, 53.9, 39.1],
                    ['55', 72.4, 53.9, 39.1],
                    ['60', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {
                type: 'category',
                axisLine:{
                    lineStyle:{
                        color: '#555556',
                    }
                }
                    
            },
            yAxis: {
                axisLine:{
                    lineStyle:{
                        color: '#555556',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#555556'],
                        width: 1,
                        type: 'solid',
                    },
                }
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#676867',
                    },
                },
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#30ab6f',
                    },
                },
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#cc3d1a',
                    },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        // this.myChart.setOption(option);
        myChart.setOption(option);
        window.onresize = function () {
            console.log('reset')
            myChart.resize();
        }
        window.addEventListener("load", myChart.resize());
        
    }
  },
  mounted() {
     this.getProduct();
      
  //   this.getChart();

  }
}
</script>

<style scoped lang="less">
@import url('../styles/IonicHome.less');
.productList:hover{
   background-color: #323333 !important;
}
  .curActive{
    background-color: #323333 !important;
}

  .el-col {
    border-radius: 4px;
  }
</style>