@extends('layouts.base')
@section('title', "选品专辑详情")
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/albumDetaill.css?time='.time())}}">
<div id="app">
  <div class="all">
    <div class="vue-head">
      <div class="top-pane">
        <div class="center-box">
          
          <div v-if="album.covers && album.covers.length && album.covers[0].src !== ''" class="image-space"><el-image :src="album.covers !== null && album.covers.length ? album.covers[0].src : ''" alt="" v-if="info"></div>
          <div class="album-box">
            <span class="album-name">[[album.name]]</span>
            <div class="tag-box">
              <span class="tag-name" v-for="(citem,cindex) in album.relations" :key="cindex" v-if="type !== '3'">[[citem.tag.name]]</span>
              <span class="tag-name" v-for="(citem,cindex) in album.has_many_relation_tag" :key="cindex" v-if="type == '3'">[[citem.has_one_tag.name]]</span>
            </div>
          </div>
        </div>
        <span class="publish-date">[[album.time_name]]发布</span>
      </div>
      <div class="center-pane">
        <div class="num-box">
          <span class="goods-num">[[album.product_count]]</span>
          <span class="goods-name">商品数量</span>
        </div>
        <div class="num-box">
          <span class="goods-num">[[album.sales_total]]</span>
          <span class="goods-name">累计销量</span>
        </div>
        <div class="num-box">
          <span class="goods-num">[[album.browse_count]]</span>
          <span class="goods-name">累计访问</span>
        </div>
      </div>
    </div>
    <div class="vue-head">
      <div>描述: [[album.describe]]</div>
    </div>
    <div class="vue-head">
      <div class="goods-detail-pane">
        <div class="goods-detail-box" v-for="(item,index) in list" :key="index">
          <div class="box-li-img">
            <img :src="type !== '3' ? item.image_url : item.thumb" alt="">
            <div class="center" v-if="type !== '3'">
              <div class="center-detail" @click="watchDetail(item)">查看详情</div>
              <div class="center-import" v-if="item.is_presence">已导入</div>
              <div class="center-import" v-if="!item.is_presence">未导入</div>
            </div>
          </div>
          <div class="title">[[item.title]]</div>
          <div class="bottom-one">
            <div class="bottom-line" v-if="type !== '3'">
              <span>协议价</span>
              <span class="in-price">￥[[item.agreement_price]]</span>
            </div>
            <div class="bottom-line" v-if="type !== '3'">
              <span>利润率</span>
              <span class="in-price">[[item.cost_rate]]%</span>
            </div>
            <div class="bottom-line" v-if="type == '3'">
              <span>原价</span>
              <span class="in-price">[[item.market_price]]元</span>
            </div>
            <div class="bottom-line" v-if="type == '3'">
              <span>现价</span>
              <span class="in-price">[[item.price]]元</span>
            </div>
            <div class="bottom-line" v-if="type == '3'">
              <span>成本价</span>
              <span class="in-price">[[item.cost_price]]元</span>
            </div>
          </div>
          <div class="bottom-two" v-if="type !== '3'">
            <div class="bottom-line">
              <span>指导价</span>
              <span class="in-price">[[item.guide_price]]</span>
            </div>
            <div class="bottom-line">
              <span>销售价</span>
              <span class="in-price">[[item.sale_price]]</span>
            </div>
            <div class="bottom-line">
              <span>营销利润率</span>
              <span class="in-price">[[item.activity_rate]]%</span>
            </div>
            <div class="bottom-line">
              <span>营销价</span>
              <span class="in-price">[[item.activity_price]]</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="vue-page">
      <div class="vue-page-bottom">
        <span class="tip">已开启自动匹配分类, 如不选择导入分类则自动匹配或创建分类！(阿里商品不支持)</span>
        <el-pagination v-if="type !== 3" layout="sizes,prev, pager, next,jumper" @current-change="search" :total="total_page" :page-size="per_size" :current-page="current_page" background :page-sizes="goods_page_size" @size-change="handleSizeChange"></el-pagination>
        <el-pagination v-if="type == 3" @current-change="search" :total="total_page" :page-size="per_size" :current-page="current_page"></el-pagination>
      </div>
    </div>
  </div>
</div>
<script>
  const id = "{{ request()-> id }}"
  const type = "{{ request()-> type }}"
  const middleground_configuration_id =  "{{ request()-> middleground_configuration_id }}"
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        album: {},
        list:[],
        total_page: 0, //分页限制最多100页
        per_size: 0,
        current_page: 0,
        page_number:10,
        goods_page_size: [10,20,30,40,50],
        id:"",
        type:"",
        middleground_configuration_id:"",
        info:false
      }
    },
    mounted() {
      this.id = id;
      this.type = type;
      this.middleground_configuration_id = middleground_configuration_id;
      this.getAlbumDetail(id, 1);
    },
    methods: {
      getAlbumDetail(id, page) {
        this.info = false;
        let url = this.type == '1' ? "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getDetail') !!}" : this.type == '2' ? "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getDetailByUid') !!}" :
          "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getDetailByShop') !!}";

        let newObj = new Object();
        if(this.type !== '3') {
          newObj = { 
            middleground_configuration_id:this.middleground_configuration_id,
            search : {
              id:this.id * 1,
              page,
              pageSize:this.page_number
            }
          }
        }else {
          newObj = { 
            album_id:this.id * 1,
            page
          }
        }
        this.$http.post(url, {
          ...newObj
        }).then(({
          data
        }) => {
          if (data.result) {
            this.album = data.data.album;
            this.list = this.type !== '3' ? data.data.list : data.data.list.data;
            
            if(this.type !== '3') {
              this.total_page = data.data.total;
              this.per_size = data.data.pageSize;
              this.current_page = data.data.page;
            }else {
              this.total_page = data.data.list.total;
              this.current_page = data.data.list.current_page;
            }
            this.info = true;
          } else {
            this.$message.error(data.msg);
            this.info = true;
          }
        })
      },
      search(page) {
        this.getAlbumDetail(this.id,page);
      },
      handleSizeChange(num) {
        this.page_number = num;
        this.getAlbumDetail(this.id,1);
      },
      // 查看详情
      watchDetail(item){
        window.open("{!! yzWebUrl('plugin.yz-supply.admin.goods-import.detail') !!}" + "&middleground_configuration_id="+this.middleground_configuration_id+"&id=" + item.id);
      },
    },
  })
</script>
@endsection