<style lang="less" >
    .slide-fade-enter-active {
		transition: opacity .5s ease;
	}

	.slide-fade-leave-active {
		transition: opacity .5s ease;
	}

	.slide-fade-enter, .slide-fade-leave-active {
		opacity: 0;
	}
	h1, h2 {
		margin: 0;
		padding: 0;
	}
	img {
		display: block;
		max-width: 100%;
	}
    #imageView .imageBox li img{
        height:auto !important;
    }
    #imageView .imageBox li{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #specimen{
        height:100%;
        background: white;
        h3{
            height:40px;
            line-height:40px;
            text-align: center;
            background:white;
        }
        .header{
            .hdrImg{
                width:100%;
                height:200px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #eef4fe;
                // position: relative;
            }
            img{
                height:200px;
                width:100%;
            }
            // img:after {
            //     content: "";
            //     display: inline-block;
            //     position: absolute;
            //     z-index: 2;
            //     top: 0;
            //     left: calc(50% - 100px);
            //     width: 200px;
            //     height: 200px;
            //     background: url("../../assets/imgErr.png") no-repeat;
            //     background-position: center;
            //     background-size: contain;
            //     background-color: #fff;
            // }
        }
        .info{
            .content{
                display:flex;
                background:white;
                padding:16px;
                >div{
                    flex:1
                }
            }
        }
        .detail{
            background: white;
            border-top:1px solid #eef4fe;
            .img{
                // position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 100%;
                    max-height:50px;
                }
            }
            // img:after {
            //     content: "";
            //     display: inline-block;
            //     position: absolute;
            //     z-index: 2;
            //     top: 0;
            //     left: 0;
            //     width: 100%;
            //     height: 50px;
            //     background: url("../../assets/imgErr.png") no-repeat;
            //     background-position: center;
            //     background-size: contain;
            //     background-color: #fff;
            // }
        }
    }
</style>

<template>
  <div id="specimen">
    <div class="header">
        <transition name="slide-fade" class="fadeView">
            <div v-if="showHdr">
                <image-view :imgArr="hdr_src" 
                    :showImageView="true"
                    :imageIndex="imageHdrIndex"
                    v-on:hideImage="hideImageView('hdr')"></image-view>
            </div>
            <div v-if="showDtl">
                <image-view :imgArr="dtl_src" 
                    :showImageView="true"
                    :imageIndex="imageDtlIndex"
                    v-on:hideImage="hideImageView('dtl')"></image-view>
            </div>
        </transition>
        <div class="hdrImg">
            <img v-for="(item, index) in hdr_src" v-if="!hdr.isErr" @error="error(item,index,'hdr')" :src="item" @click="selectImg('hdr',index)" :key="index"/>
            <img v-else src="../../assets/imgErr.png"/>
        </div>
        <div class="info">
            <h3>参数</h3>
            <div class="content">
                <div class="left">
                    <p>产品编号：{{hdr.sMaterialNo}}</p>
                    <p>产品名称：{{hdr.sMaterialName}}</p>
                    <p>规格：{{hdr.sSpecification}}</p>
                    <p>成分：{{hdr.sComponent}}</p>
                </div>
                <div class="right">
                    <p>幅宽：{{hdr.sWidth}}</p>
                    <p>克重：{{hdr.sGMWT}}</p>
                </div>  
            </div>
        </div>
    </div>

    <div class="detail">
        <h3>颜色明细</h3>
        <div class="detailImg">
            <v-container grid-list-md text-xs-center>
                <v-layout row wrap>
                    <v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
                        <div class="img">
                            <img :src="item" @error="error(item,index,'dtl')" v-if="!dtl[index].isErr" @click="selectImg('dtl',index)" />
                            <img v-else  src="../../assets/imgErr.png"/>
                        </div>
                        <div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
                            {{dtl[index].sColorNo}}
                        </div>
                    </v-flex>
                </v-layout>
            </v-container>
        </div>
    </div>
  </div>
</template>

<script>
import imageView from 'vue-imageview'
import Util from '@/libs/util.js'

export default {
  name: 'specimen',
  data () {
    return {
        showHdr:false,
        showDtl:false,
        imageHdrIndex:0,
        imageDtlIndex:0,
        hdr_src:[],
        dtl_src:[],
        iProjectId:'',
        sMaterialNo:'',
        hdr:{},
        dtl:[]
    }
  },
  async mounted(){
        this.iProjectId = this.$route.params.iProjectId;
        this.$route.params.sMaterialNo.split('.').map((x,y) => {
            this.sMaterialNo += String.fromCharCode(x)
        })
        await this.getSpeciminHdr();
        await this.getSpeciminDtl();
  },
  components:{
    'image-view': imageView
  },
  
  methods:{
    error(item,index,type){
        if(type == 'hdr'){
            this.$set(this.hdr,'isErr',true)
        }else{
            this.$set(this.dtl[index],'isErr',true)
        }
    },
    async getSpeciminHdr(){
        let result = await this.request('getSpeciminHdr',{
            data:[
                {key: "url", value: "sMaterialName"},
                {key: "searchname", value: this.sMaterialNo}
            ]
        },true,{iProjectId:this.iProjectId,sUserName:'huansi'});
        if(this.hdr.length <= 0) return false;
        this.hdr = result[0];
        this.hdr.isErr = false;
        this.hdr_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`)
    },
    async getSpeciminDtl(){
        let result = await this.request('getSpeciminDtl',{
            data:[
                {key: "url", value: "getDetail"},
                {key: "iIden", value: this.hdr.iIden}
            ]
        },true,{iProjectId:this.iProjectId});
        result.map(x=>{
            x.tCreateTime = x.tCreateTime.replace(/-/g,'/').split('.')[0];
        })
        let data = result.sort((x,y)=>{
            return new Date(x.tCreateTime).getTime() - new Date(y.tCreateTime).getTime();
        })
        data.map(x=>{
            x.isErr = false;
            this.dtl_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`)
        })
        this.dtl = data;
    },
    showImgView (type) {
        if(type == 'hdr'){
            this.showHdr = true;
        }else{
            this.showDtl = true;
        }
    },
    hideImageView (type) {
        if(type == 'hdr'){
            this.showHdr = false;
        }else{
            this.showDtl = false;
        }
    },
    selectImg (type,index) {
        if(type == 'hdr'){
            this.showHdr = true;
            this.imageHdrIndex = index;
        }else{
            this.showDtl = true;
            this.imageDtlIndex = index;
        }
    },
  }
}
</script>