@extends('layouts.base')

@section('content')
@section('title', trans('选品详情'))
<style>
    
    @font-face {
  font-family: 'iconfont';  /* Project id 2964543 */
  src: url('//at.alicdn.com/t/font_2964543_dkjt7f4ser.woff2?t=1637810602268') format('woff2'),
       url('//at.alicdn.com/t/font_2964543_dkjt7f4ser.woff?t=1637810602268') format('woff'),
       url('//at.alicdn.com/t/font_2964543_dkjt7f4ser.ttf?t=1637810602268') format('truetype');
}


    
    
    [v-cloak]{
        display:none;
    }
    .content{background-color: #eff3f6;}
    .detail-box{background-color: #fff;margin:0 20px;padding:20px;border-radius: 8px;}
    .detail-title{border: solid 1px #dbdbdb;padding:10px;display: flex;}
    .goods-img{width:370px;height: 370px;border: 1px solid #c9c9c9;}
    .goods-img-item{width:370px;margin-top:20px;position: relative;height:70px;overflow: hidden;}
    .img:nth-child(n+1){margin-right:5px;}
    /* .img:nth-child(5n){margin-right:0;} */
    .control-img{opacity:0;transition: all .6s;height:100%;color:#fff;font-weight:600;background:#000;position: absolute;width:20px;z-index:2;line-height:70px;text-align:center;border: 1px solid #c9c9c9;}
    .img-left{left:0;}
    .img-right{right:0;}
    .small-img{position: absolute;width:100%;height:100%;transition: all 1s;}
    .goods-img-item:hover .control-img{opacity:.4;}
    .Price-box{width:700px;line-height: 50px;background-color: #cc472e;display:flex;color:#fff;font-weight:600;margin:20px 0;border-radius: 4px;}

    .select{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #cbcbcb;
    color: #949393;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    position: relative;
    margin:0 0 10px 10px;
    }
    .change{
        color: #44be95;
        border-color: #44be95;
    }
    .el-carousel__container{height: 70px;}
    .description{width: 100%;margin-top: 20px;}
    .description img{
        width: 100%;
    }
</style>

<div class="all">
    <div id="app" v-cloak>
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="{!! yzWebUrl('plugin.jd-supply.admin.goods-import.index') !!}">选品中心</a></li>
                <li class="active">[[detail.title]]</li>
            </ul>
        </div>
        <div class="detail-box">
            <div class="detail-title">
                <div class="goods-img-box">
                    <img v-if="detail.covers" :src="detail.cover" class="goods-img">
                    <div class="goods-img-item">
                        <div v-if="detail.covers&&detail.covers.length" style="left:0;" class="control-img  el-icon-arrow-left" @click="controlImg(selectImg+5)"></div>
                        <div class="small-img" style="left:0px;white-space:nowrap;" v-if="detail.covers">
                            <img class="img" @click="controlImg(i)" v-for="(item,i) in detail.covers" :src="item" width="70px" height="70px" :style="{border:selectImg==i?'1px solid red':''}">
                        </div>
                        <div v-if="detail.covers&&detail.covers.length" style="right:0;" class="control-img el-icon-arrow-right" @click="controlImg(selectImg-5)"></div>
                    </div>
                    <div style="width: 100%;display:flex;margin:20px 0;font-size:16px;color: #6b6b6b;">
                        <div style="width: 50%;border-right:1px solid #ccc;">编号：[[detail.third_id]]</div>
                        <div style="width: 50%;;text-align: center;">sku：[[detail.id]]</div>
                    </div>
                </div>
                <div style="margin-left:40px;">
                    <div style="color: #333;font-size: 22px;margin:20px 0;">[[detail.title||'商品名']]</div>
                    <div class="Price-box">
                        <div style="margin:0 60px 0 20px;">
                        协议价<span style="margin:0 10px 0 20px;font-size:20px;">￥[[(detail.agreement_price/100).toFixed(2)]]</span>
                        <span style="text-decoration:line-through;">￥[[(detail.market_price/100).toFixed(2)]]</span></div>
                        <div>营销价 ：￥[[(detail.activity_price/100).toFixed(2)]]</div>
                    </div>
                    <div style="display:flex;text-align:center;margin:20px 0;font-size:16px;">
                        <div style="width:140px;">
                            <div>
                                <img style="margin-bottom: 12px;" width="23px" height="27px" src="{{resource_get('plugins/jd-supply/assent/image/已售出@2x.png')}}">
                                <span style="color: #202020;font-size:16px;">已售出</span>
                            </div>
                            <div>[[detail.sale]]</div>
                        </div>
                        <div style="width:140px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;">
                            <div>
                                <img style="margin-bottom: 12px;" width="28px" height="28px" src="{{resource_get('plugins/jd-supply/assent/image/评价@2x.png')}}">
                                <span style="font-size:16px;">评价</span>
                            </div>
                            <div>
                                <el-rate v-model="rate" disabled  text-color="#ccc" disabled-void-color="#ccc" ></el-rate>
                            </div>
                        </div>
                        <div style="width:140px;">
                            <div>
                                <img style="margin-bottom: 12px;" width="27px" height="27px" src="{{resource_get('plugins/jd-supply/assent/image/fontclass-kucun.png')}}">
                                <span style="color: #202020;font-size:16px;">库存</span>
                            </div>
                            <div>[[stock>100?"100+":stock]]</div>
                        </div>
                    </div>
                    <el-form ref="form"  label-width="80px">
                        <el-form-item label="配送至：">
                            <div style="width:700px;display:flex;margin-left:10px;">
                                <el-cascader @change="getstatus" v-model="value" :options="area" :props="props" ></el-cascader>
                                <div style="margin-left:80px"><span style="margin-right:20px;">[[status==1?"有货":"无货"]]</span>
                                <span>[[detail.source=="1"?'云仓':detail.source=="2"?"京东":detail.source=="6"?"阿里巴巴":detail.source=="7"?"天猫":"未知"]]
                                    /[[freight]]</span></div>
                            </div>
                        </el-form-item>
                        <template v-if="detail.specs">
                            <el-form-item v-for="(item,i) in detail.specs.spec" :label="item.name+'：'" :key="i">
                                <div class="select" v-for="(items) in item.data" 
                                    :class="{change:items.id==optionIds[i]}"
                                    @click="clickOptionIds(items,i)">
                                    <span>[[items.name]]</span>
                                </div>
                            </el-form-item>
                        </template>
                    </el-form>   
                    <el-button type="danger" v-if="detail.source==2" @click="toJD">查看第三方详情</el-button>
                </div>
            </div>
            <div style="margin:20px 0;border-bottom:1px solid  #f11111;line-height:40px;">
                <div style="width:120px;text-align:center;background-color: #f11111;color:#fff;font-weight: 600;">商品详情</div>
            </div>
            <div>
                <div style="display:flex;font-size: 16px;color: #6b6b6b;">
                    <div style="margin-right: 60px;">商家货号：[[detail.third_id]]</div>
                    <div style="margin-right: 60px;">品牌：[[detail.third_brand_name]]</div>
                    <div>商家名称：[[detail.shop_name]]</div>
                </div>
                <div class="description"  v-html="detail.description">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                stock:"",
                area:[],
                status:1,
                selectImg:0,
                rate: 5,
                value:null,
                value1:[],
                freight:'包邮',
                detail:{},
                optionIds:[],
                props:{
                    label:"areaname",
                    value:"areaname",
                    lazy:true,
                    lazyLoad:(node,resolve)=>{
                        let parent_id = node.data?node.data.id:"";
                        this.$http.post("{!! yzWebFullUrl('area.list') !!}",{parent_id}).then(res=>{
                            if (res.data.result==1) {
                                res.data.data.forEach(item=>item.leaf = node.level>1);
                                resolve(res.data.data)
                            }
                            else this.$message.error(res.data.msg);
                        })
                        
                    }
                }
            }
        },
        
        created(){
            this.getdata();
        },
        methods:{
            clickOptionIds(item,i){
                this.$set(this.optionIds,i,item.id);
                let a = this.optionIds.join("_");
                this.detail.specs.options.forEach(item=>{
                    if(item.spec_value_ids==a){
                        this.detail.cover = item.image||this.detail.cover;
                        this.stock = item.stock;
                        this.detail.agreement_price = item.agreement_price;
                        this.detail.market_price = item.market_price;
                        this.detail.activity_price = item.activity_price;
                        this.detail.id = item.id;
                        this.detail.third_id = item.third_id;
                    }
                })
                if (this.value[2]) {
                    this.getstatus();
                }
                
            },
            toJD(){
                window.open(`https://item.jd.com/${this.detail.third_id}.html`);
            },
            getstatus(){
                console.log(this.value);
                this.$http.post("{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.goods-stock') !!}",{
                    goods_id:"{{ request()-> id }}",
                    option_id:this.detail.id,
                    province:this.value[0],
                    city:this.value[1],
                    district:this.value[2]
                }).then(res=>{
                    if (res.data.result==1) {
                        this.status = res.data.data.status;
                        console.log(res.data.data.freight);
                        if (res.data.data.freight > 0) {
                            this.freight = '邮费:'+res.data.data.freight + '元'
                            console.log(this.detail)
                        }
                    }
                    else this.$message.error(res.data.msg);
                })
            },
            getdata(){
                let id = "{{ request()-> id }}";
                this.$http.post("{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.detail-data') !!}",{id}).then(res=>{
                    if (res.data.result==1) {
                        this.detail = res.data.data;
                        console.log(this.detail);
                        this.stock = this.detail.specs.options[0].stock;
                        this.optionIds = this.detail.specs.options[0].spec_value_ids.split('_');
                        this.detail.id = this.detail.specs.options[0].id;
                        this.detail.third_id = this.detail.specs.options[0].third_id;
                    }
                    else this.$message.error(res.data.msg);
                })
            },
            controlImg(i){
                if (i<=0) i = 0; 
                let len = this.detail.covers.length;
                if (i>=len-1) i = len-1;
                this.detail.cover = this.detail.covers[i];
                this.selectImg = i;
                let el = document.querySelector(".small-img");
                if (i<3||len<=5) el.style.left = "0px";
                else if(i>=len-3) el.style.left = (len-5)*-75+"px";
                else el.style.left = -i*75+150 + "px";
            }
        }
    })

</script>
@endsection('content')