<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
    <el-row :gutter="20" v-show="'add'==statusFlag">
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
                <input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload"/>
               
                <!-- <el-upload
                style="width:100%;"
                class="avatar-uploader"
                drag
                action="http://192.168.1.108:5000/api/upload"
                 :show-file-list="false"
                :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="'edit'==statusFlag">
        <el-col :xs="24" :sm="12" >
            <div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
                <input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="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="selectInfo.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="selectInfo.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 v-model="selectInfo.testtime"  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 @click="editConfirm" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">确定</div>
                    <div @click="editCancel" 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="'show'==statusFlag">
        <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;">{{selectInfo.length}}</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;">{{selectInfo.width}}</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;">{{selectInfo.testtime}}</div>
                </div>
                <div style="display:flex;align-items:center;margin-top:70px;" >
                    <div @click="toRinse('dynamic')" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
                    <div @click="toRinse('static')" 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="'add'==statusFlag">
                        <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:v.id==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v,i)">
                            {{v.name}}
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10" v-show="'show'==statusFlag">
            <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 ="editProduct" 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'
import { Message } from 'element-ui';
export default {
  name: 'Kanban',
  data() {
    return {
        imageUrl: '',
        statusFlag:'show',
        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:'',
            testtime:'',
            id:'',
            area:''
        },
       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:'',
        files:''
    }
  },
  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;
        this.items.map(element =>{
            if(element.id == this.selectIndex){
                this.imgUrl= process.env.VUE_APP_IONICURL+element._links.frame;
                return this.imgUrl
            }
        })
        console.log('this.imgUrl=='+this.imgUrl);
        return this.imgUrl
       
      },
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{
    getSelectInfo(){
        this.items.forEach(element =>{

        })
    },
    toRinse(type){
        localStorage.setItem('testType',type);
        this.$router.push('/IonicRinse');

    },
    // handleAvatarSuccess(res, file) {
    //     this.files = file[0].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!');
    }
    this.files = file;
    // return isJPG && isLt2M;
    return isLt2M;
    },
    confirm(){

        let formData = new FormData();
        formData.append('area', 1.1);
        formData.append('ipc', '1');
        formData.append('width', 1);
        formData.append('length', 1.1);
        formData.append('name', this.value);
        formData.append('note', 1);
        formData.append('file', this.files);
        
        let config = {
        headers: {
            'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
            } 
        }
        this.$axios.post(this.$api.addProduct,formData,config).then(res =>{
              console.log("addProduct=="+res)
            if(res.status== 200){
                this.items.unshift(res.data);
                this.selectIndex = res.data.id;
                this.selectInfo = res.data;
                this.files="";
            }else{
                let msg = res.message.name;
                Message({
                    message: msg || '网络错误',
                    type: 'warning',
                    duration:2000
                });
            }
            console.log('getProducts');
            
        })
       this.statusFlag='show'; 
    },
    cancel(){
        
        this.statusFlag='show';
    },
    editConfirm(){
        let formData = new FormData();
        if(this.selectInfo.width&&this.selectInfo.length){
            this.selectInfo.area = this.selectInfo.width*this.selectInfo.length;
        }else{
            this.selectInfo.area="";
        } 
        formData.append('area', this.selectInfo.area);
        formData.append('ipc', this.selectInfo.ipc);
        formData.append('width', this.selectInfo.width);
        formData.append('length', this.selectInfo.length);
        formData.append('note', this.selectInfo.note);
        if(!this.files){
            formData.append('file', this.files);
        }
        let config = {
        headers: {
            'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
            } 
        }
        this.$axios.put(this.$api.editProduct+'/'+this.selectIndex,formData,config).then(res =>{
              console.log("addProduct=="+res)
            if(res.status== 200){
                this.items.forEach(element =>{
                    if(element.id == this.selectIndex){
                        this.selectInfo = element;
                    }
                })
            }else{
                let msg = res.message.name;
                Message({
                    message: msg || '网络错误',
                    type: 'warning',
                    duration:2000
                });
            }
            console.log('getProducts');
            
        })
       this.statusFlag='show'; 
    },
    editCancel(){
        this.statusFlag='show';
    },
    addProduct(){
        this.statusFlag='add';
        console.log(this.statusFlag);
    },
    editProduct(){
        this.statusFlag='edit';
    },
    delProduct(){
        this.$axios.delete(this.$api.delProduct+'/'+this.selectIndex).then(res =>{
            console.log("delProduct=="+res)
            if(res.status== 200){
               this.getProduct();
            }
            console.log('getProducts');
            
        })
    },
    upload(e){
      let file = e.target.files[0]
      this.files = file;
    },
    toNext(){
        
    },
    selectItem(v,i){
        this.selectIndex = v.id;
        this.selectInfo = v;
        console.log('selectIndex=='+this.selectIndex);
    },
    getProduct(){
        this.$axios.get(this.$api.getProducts).then(res =>{
            if(res.status== 200){
                this.items= res.data.items;
                if(this.items.length!=0){
                    this.selectIndex = this.items[0].id;  
                    this. selectInfo = this.items[0];
                }
            }
            console.log('getProducts');
            
        }).catch(err =>{
            console.log('接口或处理逻辑出错');
        })
    }
  },
  mounted() {
    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>