@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.yz-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.image_url" 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.id]]-[[optionIds]]</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/yz-supply/assent/image/sale.png')}}">
                                <span style="color: #202020;font-size:16px;">已售出</span>
                            </div>
                            <div>[[detail.sales]]</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/yz-supply/assent/image/evaluate.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/yz-supply/assent/image/fontclass-kucun.png')}}">
                                <span style="color: #202020;font-size:16px;">库存</span>
                            </div>
                            <div>[[stock]]</div>
                        </div>
                    </div>
                    <el-form ref="form"  label-width="80px">
                        <el-form-item label="商品分类">
                            <div style="width:700px;display:flex;margin-left:10px;">
                                [[detail.category_1.name]]--[[detail.category_2.name]]--[[detail.category_3.name]]
                            </div>
                        </el-form-item>
                        <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;">[[stock>0?"有货":"无货"]]</span>
                                <span>[[detail.source=="1"?'云仓':detail.source=="2"?"京东":detail.source=="6"?"阿里巴巴":detail.source=="7"?"天猫":detail.source=="8"?"苏宁":detail.source=="0"?"中台":"其他"]]
                                    /[[detail.freight_type==3?"包邮":"不包邮"]]</span></div>
                            </div>
                        </el-form-item>
                        <template v-if="detail.skus">
                            <el-form-item label="商品规格" >
                                <div class="select" v-for="(items,i) in  detail.skus"
                                    :class="{change:items.id==optionIds}"
                                    @click="clickOptionIds(items,i)">
                                    <span>[[items.title]]</span>
                                </div>
                            </el-form-item>
                        </template>
                    </el-form>
                    <div v-if="detail.third_id">
                       <el-button type="danger" v-if="detail.source==2 || detail.source==7 || detail.source==8" @click="toThirdParty">查看第三方详情</el-button>
                    </div>
                </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.id]]-[[optionIds]]</div>
                    <div style="margin-right: 60px;" v-if="detail.brand.name">品牌：[[detail.brand.name]]</div>
                    <div v-if="detail.supplier.name">商家名称：[[detail.supplier.name]]</div>
                </div>
                <div class="description"  v-html="detail.detail_images">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                stock:"",
                sku_id:"",
                area:[],
                status:1,
                selectImg:0,
                rate: 5,
                value:null,
                value1:[],
                detail:{
                    category_1:{
                        name:"",
                    },
                    category_2:{
                        name:"",
                    },
                    category_3:{
                        name:"",
                    },
                    brand:{
                        name:"",
                    },
                    supplier:{
                        name:"",
                    },
                },
                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.optionIds = item.id;
                this.stock = item.stock;
                this.detail.agreement_price = item.price;
                this.detail.market_price = item.origin_price;
                this.detail.activity_price = item.activity_price;

                //
                // "title": "测试1-1+测试2-1",
                //     "price": 0,
                //     "cost_price": 0,
                //     "origin_price": 0,
                //     "guide_price": 0,
                //     "activity_price": 0,
                //     "stock": 0,
                // 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;
                //     }
                // })
                
            },
            toThirdParty(){
                if(this.detail.third_id == "" || this.detail.third_id == undefined){
                    this.$message.error("来源暂无第三方ID,无法跳转第三方详情页面");
                    return
                }
                switch (this.detail.source) {
                    case 2:
                        window.open('https://item.jd.com/'+this.detail.third_id+'.html');
                        break
                    case 7:
                        window.open('https://item.taobao.com/item.htm?ft=t&id='+this.detail.third_id);
                        break
                    case 8:
                        window.open('https://product.suning.com/0000000000/'+this.detail.third_id+'.html');
                        break
                    default:
                        this.$message.error("商品来源暂无第三方地址");
                        break;

                }
            },
            getstatus(){
                console.log(this.value);
                this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.before-check') !!}",{
                    goods_id:"{{ request()-> id }}",
                    option_id:this.optionIds,
                    province:this.value[0],
                    city:this.value[1],
                    district:this.value[2],
                    middleground_configuration_id:"{{ request()-> middleground_configuration_id }}"
                }).then(res=>{
                    if (res.data.result==1){
                        this.$message.success(res.data.msg);
                    } else this.$message.error(res.data.msg);
                })
            },
            getdata(){
                let id = "{{ request()-> id }}";
                let middleground_configuration_id = "{{ request()-> middleground_configuration_id }}";
                this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.goods-import.detail-data') !!}",{id:id,middleground_configuration_id:middleground_configuration_id}).then(res=>{
                    if (res.data.result==1) {
                        this.detail = res.data.data;
                        this.clickOptionIds(this.detail.skus[0]);
                    }
                    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.image_url = 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')