<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
    <el-row :gutter="20" v-show="addFlag">
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
                <!-- <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__text"><em>点击上传</em></div>
                
                </el-upload> -->
                <el-upload
                style="width:100%;"
                class="avatar-uploader"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                 :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                >
                
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
        </el-col>
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
                <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:50px;line-height:25px;background:#2b2c2c;">长度：</div>
                    <input v-model="length" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
                </div>
                <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:50px;line-height:25px;background:#2b2c2c;">宽度：</div>
                    <input v-model="width" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
                </div>
                <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间：</div>
                    <input  type="text" style="width:170px;height:25px;background:#2b2c2c;outline: none;border: 0;">
                </div>
                <!-- <div style="display:flex;align-items:center;margin-top:70px;">
                    <div style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
                    <div style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
                </div> -->
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20" v-show="!addFlag">
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;">
                <img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width: 100%;height: 220px;">
            </div>
        </el-col>
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
                 <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:50px;line-height:25px;background:#2b2c2c;">长度：</div>
                    <div style="width:200px;height:25px;background:#2b2c2c;"></div>
                </div>
                <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:50px;line-height:25px;background:#2b2c2c;">长度：</div>
                    <div style="width:200px;height:25px;background:#2b2c2c;"></div>
                </div>
                <div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
                    <div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间：</div>
                    <div style="width:170px;height:25px;background:#2b2c2c;"></div>
                </div>
                <div style="display:flex;align-items:center;margin-top:70px;" >
                    <div @click="dynamicTest" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
                    <div @click="staticTest" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
                </div>
            </div>
            
        </el-col>
    </el-row>
    <div style="background:#2B2C2C;margin-top:20px;">
        <el-row :gutter="10">
            <el-col :xs="24">
                <div class=""  style="width:100%;height:280px;" >
                    <div style="padding:10px;color:white;display:flex;" v-show="addFlag">
                        <div style="display:flex;flex:1;margin-right:10px;" >
                            <input v-model="value" type="text" placeholder="输入产品名称" style="font-sieze:14px;width:100%;height:30px;background:#2b2c2c;outline: none;    border: 0;">
                        </div>
                        <div style="display:flex;justify-content: flex-end;align-items:center;">
                            <div @click="confirm" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">确定</div>
                            <div @click="cancel" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">取消</div>
                        </div>
                    </div>
                    <div style="width: 100%;background:#2c2c2c;text-align:left; ">
                        <div style="line-height:30px;padding:0 10px;color:white;"  :class="{curActive:i==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v.id,i)">
                            {{v.name}}
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="24" style="margin:24px 0;" >
                <div class="" style="display:flex;justify-content: flex-end;align-items:center;">
                    <div @click ="addProduct" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">增加</div>
                    <div @click="delProduct" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">删除</div>
                </div>
            </el-col>
        </el-row>
    </div>
    
</div>

</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Kanban',
  data() {
    return {
        imageUrl: '',
        addFlag:false,
        status:'0',
        defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
        // defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
        selectIndex:'0',
        selectId:'',
        selectInfo:{
            length:'',
            width:'',
            time:'',
            id:''
        },
       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
            },
        ],
        value:'product',
        tabs:[{name:''},{}],
        num:0,
        activeIndex: '1',
        timer:'',
        date:new Date(),
        length:'',
        width:'',
        note:'',
    }
  },
  components: {
    
  },
   computed:{
       getArea(){
           return this.width*this.length;
       },
        formData(){
            let date = this.items[this.selectIndex]["testtime"].replace(',','');
            let d =date.toString()
            let t=d.toLocaleString('zh-CN')
            let time= new Date().toLocaleString('zh-CN');
            let a = new Date();
            console.log(a)
            console.log('time=='+time);
             console.log('ttt=='+t);
            return t;
        },
      change(){
        if (this.items.length==0) return;
        let src  = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
          this.imgUrl = src;
          return src
      },
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{
    getSelectInfo(){
        this.items.forEach(element =>{

        })
    },
    dynamicTest(){
        
    },
    staticTest(){

    },
    handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
    },
     beforeAvatarUpload(file) {
  //  const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    // if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    // }
    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
    },
    confirm(){
        let req ={
            area:'1.1',
            ipc:'1',
            length:'1.1',
            width:'1',
            name:this.value, 
            note:'1',
            file:this.imageUrl
        }
         this.$axios.post(this.$api.getProducts,req).then(res =>{
            if(res.status== 200){
                this.items= res.data.items;
            }
            console.log('getProducts');
            
        })



        // let t = (new Date()).getTime();
        // this.items.unshift({
        //     "_links": {
        //         "frame": "/api/photo/20210428142902_32.jpg", 
        //         "self": "/api/products/9"
        //     }, 
        //     "area": 1.0, 
        //     "id": t, 
        //     "img": "20210428142902_32.jpg", 
        //     "ipc": 3.0, 
        //     "length": 99.0, 
        //     "name": this.value, 
        //     "note": "666", 
        //     "testtime": "Wed, 28 Apr 2021 06:29:02 GMT", 
        //     "width": 22.0
        // });
       this.addFlag=false; 
    },
    cancel(){
        
        this.addFlag=false;
    },
    addProduct(){
        this.addFlag=true;
        console.log(this.addFlag);
    },
    delProduct(){
        let req ={
            id:this.selectInfo.id
        }
        this.$axios.put(this.$api.delProduct,req).then(res =>{
            if(res.status== 200){
                this.items= res.data.items;
            }
            console.log('getProducts');
            
        })
    },
    upload(){
        
    },
    toNext(){
        
    },
    selectItem(v,i){
        this.selectIndex = i;
        console.log('selectIndex=='+this.selectIndex);
    },
    getProduct(){
        this.$axios.get(this.$api.getProducts).then(res =>{
            if(res.status== 200){
                this.selectIndex = 0;
                this.items= res.data.items;
            }
            console.log('getProducts');
            
        })
    }
  },
  mounted() {
    //   document.addEventListener('click',() =>{
    //       this.addFlag = false;
    //   })
    this.getProduct();

  }
}
</script>

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

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
 /deep/ .el-upload-dragger{
      width: 100%;
      background: #2b2c2c;
      border: 0;
  }
  .el-upload__tip{
    //   color: white;
  }
  .el-upload__text{
      color: white;
  }
  .avatar-uploader{
      display: flex;
      flex-flow: column;
      color:#FFF;
  }
</style>