@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/album.css?time='.time())}}">
<div id="app">
  <div class="all">
    <div class="vue-head">
      <div class="top-title">
        <span :class="topId == item.id ? 'album-name active-album-name' : 'album-name'" v-for="(item,index) in albumTopTitle" :key="index" @click="checkTopTitle(item.id)">[[item.name]]</span>
      </div>
    </div>
    <div class="vue-head">
      <div class="vue-main-title">
        <div class="vue-main-title-left"></div>
        <div class="vue-main-title-content">[[topId == 1 ? '共享选品专辑' : topId == 2 ? '我的选品专辑' : '已导入专辑']]</div>
      </div>
      <el-form ref="form" :inline="true">
        <el-form-item v-if="topId !== 3">
          <el-select v-model="middleground_configuration_id" clearable placeholder="中台配置项">
            <el-option v-for="(item,index) in middleground_configuration" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="专辑名称" v-model="form.album_name"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker value-format="timestamp"  type="datetimerange" v-model="date" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getList(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="select-name" v-if="topId !== 3">
      <div class="type-box" v-for="(item,index) in typeName" :index="index">
        <span class="type-name" @click="getSortData(item.id,'')">[[item.name]]</span>
        <i :class="item.sort == 1 ? 'el-icon-caret-top active-color' : 'el-icon-caret-top'" @click="getSortData(item.id,'')"></i>
        <i :class="item.sort == 2 ?  'el-icon-caret-bottom active-color' : 'el-icon-caret-bottom'" @click="getSortData(item.id,'')"></i>
      </div>
    </div>
    <div class="bottom-album">
      <div class="album-box" v-for="(item,index) in albumData" :key="index">
        <div class="inside-box">
        <div class="cover">
        <!-- <div class="top-cover-img" v-if="topId == 3 && info && item.covers && item.covers[0]"><el-image :src="item.covers !== null && item.covers.length ? item.covers[0] : ''"></div> -->
        <div class="top-cover-img" v-if="info && item.covers && item.covers[0].src"><el-image style="height: 200px;" :src="item.covers !== null && item.covers.length ? item.covers[0].src : ''" ></div>
        <div class="top-cover-img" v-else ><el-image style="height: 200px;" src='' ></div>  
        </div >
        <div class="album-name-box">
              <div style="font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;color: #202020;">[[item.name]]</div>
              <div style="margin-top:12px;
                         font-size: 12px;
                         font-weight: 400;
                         color: #999999;">
                         [[item.time_name]]</div>
          </div>   
          <div class="describe-box">
            <div :class="item.showStatus">描述:[[item.describe]]</div>
            <div style="display:flex;justify-content: center;align-items: center;margin-top:10px;color:#29BA9C;font-size:12px" @click="showNot(item)">
            <div v-if="item.describe.length>24"><span v-if="item.show" style="cursor:pointer">展开</span><span v-else style="cursor:pointer">收起</span>
             <svg t="1668129518574" :class="item.icon" style="cursor:pointer;transition: all .8s;margin-left:7px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2945" width="12" height="12"><path d="M513.44 663.5l367.2-396.4c13.4-14.9 35-14.9 48.4 0 6.4 7.1 10 16.8 10 26.9s-3.6 19.8-10 26.9l-391.3 434.7c-13.4 14.9-35 14.9-48.4 0L97.84 320.9c-6.4-7.1-10-16.8-10-26.9 0-10.1 3.6-19.8 10-26.9 13.4-14.9 35-14.9 48.4 0l367.2 396.4z" fill="#29BA9C" p-id="2946"></path></svg></div>
             </div>
            </div>
          <div class="item-data-box" >
             <div>
               <span class="top-word">[[item.product_count]]</span>
               <span class="bottom-word">商品数量</span>
             </div>
             <div>
               <span class="top-word" v-if ="topId == 1">[[item?item.sales_total:'']]</span>
               <span class="top-word" v-else>[[item?item.sales:'']]</span>
               <span class="bottom-word">累计数量</span>
             </div>             <div>
               <span class="top-word">[[item?item.browse_count:'']]</span>
               <span class="bottom-word">累计访问</span>
             </div>             
          </div>
            <div class="goods-show">
              <div v-for="(cItem,index) in item.relation_product" :key="index" v-if="index < 2 && cItem.product.id != 0" style="background-color: #fff;border: 1px solid #DDDDDD;">
              <img :src="cItem.product?.image_url??''" alt="" >
               <div style="padding: 5px">
                   <div style="width: 152px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#333333;font-weight: 400;">[[cItem.product.title]]</div>
                   <div style="color:#ADADAD;text-decoration:line-through;font-size: 10px;font-weight: 400;">原价:[[computedPrice(cItem.product.origin_price/100)]]</div>
                   <div style="color:#DF0F0F;font-size: 12px;">￥[[computedPrice(cItem.product.price/100)]]</div>
              </div>
              </div>
            </div>
            <div class="goods-show">
              <div v-for="(cItem,index) in item.has_many_relation_product" :key="index" v-if="topId == 3 && index < 2 && cItem" style="background-color: #fff;border: 1px solid #DDDDDD;">
              <img :src="cItem?cItem.has_one_product.thumb:''" alt="" >
               <div style="padding: 5px">
                   <div style="width: 152px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#333333;font-weight: 400;">[[cItem.has_one_product.title]]</div>
                   <div style="color:#ADADAD;text-decoration:line-through;font-size: 10px;font-weight: 400;">原价:[[cItem.has_one_product.market_price]]</div>
                   <div style="color:#DF0F0F;font-size: 12px;">￥[[cItem.has_one_product.price]]</div>
              </div>
              </div>
            </div>            
        </div>
        <div class="bottom-box" v-if="topId == 1">
              <div style="margin-right: 18px;"><button class="btn-goods" @click="checkGoodsDetail(item.id)" >查看商品</button></div>
              <div><button class="btn" @click="importAlbum(item)" >导入专题</button></div>
        </div>
        <div class="bottom-box-top3"  v-if="topId == 3">
              <div style=""><button class="btn-goods" @click="checkGoodsDetail(item.id)" >查看商品</button></div>
              <div style="display: flex;width: 45%;justify-content: space-evenly;">
                <div style="cursor:pointer" @click="clickTabLine(item.id)"><svg t="1668565644758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2172" width="20" height="20"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z" p-id="2173" fill="#0F64E4"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z" p-id="2174" fill="#0F64E4"></path></svg></div>
                <div  style="cursor:pointer" @click="openDeleteDialog(item.id)"><svg t="1668565703518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3166" width="20" height="20"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" p-id="3167" fill="#DF0F0F"></path></svg></div>
                <div style="cursor:pointer" @click="editShopAlbum(item.id)"><svg t="1668565775782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4167" width="20" height="20"><path d="M259.882667 650.666667a41.301333 41.301333 0 0 1 1.237333-2.901334 13.525333 13.525333 0 0 1 1.237333-1.792l310.144-536.064a128 128 0 1 1 221.696 128l-309.76 535.552a49.578667 49.578667 0 0 1-28.842666 25.429334l-146.602667 81.92a39.466667 39.466667 0 0 1-52.224-30.165334v-166.954666a65.408 65.408 0 0 1 3.114667-33.024z m306.901333-445.525334L311.381333 647.722667l147.2 86.186666 256-443.434666-147.797333-85.333334z m21.333333-36.949333l147.797334 85.333333 21.333333-36.949333-147.797333-85.333333-21.333334 36.949333z m21.333334-36.949333l147.797333 85.333333a85.333333 85.333333 0 0 0-147.797333-85.333333zM301.098667 692.224L298.666667 839.424l125.696-76.032-123.306667-71.168zM64 938.666667h896a21.333333 21.333333 0 1 1 0 42.666666h-896a21.333333 21.333333 0 1 1 0-42.666666z" p-id="4168" fill="#29BA9C"></path></svg></div>              
              </div>
        </div>
        <!-- <div class="top-pane"> -->
          <!-- <div class="top-pane-img" v-if="info && item.covers && item.covers[0].src"><el-image :src="item.covers !== null && item.covers.length ? item.covers[0].src : ''" ></div> -->
          <!-- <div class="top-pane-img" v-if="topId == 3 && info && item.covers && item.covers[0]"><el-image :src="item.covers !== null && item.covers.length ? item.covers[0] : ''"></div> -->
          <!-- <div class="right-box">
            <span class="goods-album-name">[[item.name]]</span>
            <div class="tag-box">
              <span class="tag-name" v-for="(citem,cindex) in item.relations" :key="cindex" v-if="topId !== 3">[[citem.tag.name]]</span>
              <span class="tag-name" v-for="(citem,cindex) in item.has_many_relation_tag" :key="cindex" v-if="topId == 3">[[citem.has_one_tag.name]]</span>
            </div>
          </div>
        </div> -->
        <!-- <div :class="item.relation_product && item.relation_product.length > 0 ? 'middle-pane' : 'active-middle-pane'" v-if="topId !== 3">
          <el-image :src="cItem.product?.image_url ?? ''" alt="" v-for="(cItem,index) in item.relation_product" :key="index" v-if="index < 3 && cItem.product.id != 0">
        </div> -->
        <!-- <div :class="item.has_many_relation_product && item.has_many_relation_product.length > 0 ? 'middle-pane' : 'active-middle-pane'" v-if="topId == 3">
          <el-image :src="cItem.has_one_product?.thumb ?? ''" alt="" v-for="(cItem,index) in item.has_many_relation_product" :key="index" v-if="index < 3">
        </div> -->
        <!-- <div class="date">
          <span class="date-name"> [[item.time_name]]</span>
          <div v-if="topId == 3" class="shop-icon">
            <i class="el-icon-paperclip icon" @click="clickTabLine(item.id)"></i>
            <i class="el-icon-delete-solid icon" @click="delShopAlbum(item.id)"></i>
            <i class="el-icon-edit icon" @click="editShopAlbum(item.id)"></i>
          </div>
          <el-checkbox v-model="item.checked" :true-label="1" :false-label="0" @change="oneChecked($event,index)" v-if="topId !== 3"></el-checkbox>
        </div> -->
        <!-- <div class="bottom-pane">
          <div class="left-box" @click="checkGoodsDetail(item.id)">查看详情<span style="font-size: 13px;">(商品[[item.product_count]])</span> </div>
          <div class="line"></div>
          <div class="right-num"> 
            <span>[[sortCheckName]]  </span>  
            <span v-if="sortCheckName == '已售' || sortCheckName == '热卖' ">[[item.sales_total]]</span>
            <span v-if="sortCheckName == '导入'">[[item.import_count]]</span>
            <span v-if="sortCheckName == '访问'">[[item.browse_count]]</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <div class="vue-page">
    <div class="vue-page-bottom">
      <!-- <span class="tip">已开启自动匹配分类, 如不选择导入分类则自动匹配或创建分类！(阿里商品不支持)</span> -->
      <el-pagination v-if="topId !== 3" layout="sizes,prev, pager, next,jumper" @current-change="search" :total="total_page" :page-size="per_size" :current-page="current_page" :page-sizes="goods_page_size" @size-change="handleSizeChange"></el-pagination>
      <el-pagination v-if="topId == 3" @current-change="search" :total="total_page" :page-size="per_size" :current-page="current_page"></el-pagination>
    </div>
    <!-- <el-form ref="form" :inline="true" class="form-pane"> -->
      <!-- <el-form-item label="选择导入分类">
        <el-select v-model="one_Classify_value" clearable filterable placeholder="请选择一级分类" @change="getShopCategory(one_Classify_value,'two')">
          <el-option v-for="item in oneClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="two_Classify_value" clearable filterable placeholder="请选择二级分类" @change="getShopCategory(two_Classify_value,'three')">
          <el-option v-for="item in twoClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="three_Classify_value" clearable filterable placeholder="请选择三级分类">
          <el-option v-for="item in threeClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="选择导入商品标签">
        <el-select v-model="tag_group_value" clearable filterable placeholder="请选择标签组" @change="getFilteringList(tag_group_value,'two')">
          <el-option v-for="item in tagGroup" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="tag_value" clearable filterable placeholder="请选择标签值">
          <el-option v-for="item in tagValue" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="" v-if="topId !== 3">
        <el-button type="primary" @click="importAlbum">一键导入</el-button>
        <span>已选 [[getAlbumLength]]</span>
      </el-form-item> -->
    <!-- </el-form> -->

    <el-dialog title="推广" :visible.sync="dialogVisible" width="28%" :modal-append-to-body='false'>
      <div class="context">
        <div class="img-box">
          <div class="msg-line">
            <el-image :src="line.qr_code"></el-image>
            <a class="upload-line" :href="line.qr_code" download="qro.png">下载二维码图片</a>
          </div>
          <div class="msg-line">
            <el-image :src="line.micro_qr_code"></el-image>
            <a class="upload-line" :href="line.micro_qr_code" download="qro.png">下载小程序码图片</a>
          </div>
        </div>
        <div class="space-input">
          <span>h5页面链接</span>
          <el-input v-model="line.link"></el-input>
          <el-button @click="copyLine(line.link)">复制</el-button>
        </div>
        <div class="space-input">
          <span>小程序页面链接</span>
          <el-input v-model="line.micro_link"></el-input>
          <el-button @click="copyLine(line.micro_link)">复制</el-button>
        </div>
      </div>
      <div class="bottom">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
  <el-dialog :visible.sync="importShow">
    <span slot="title">导入专辑</span>
    <div style="background-color:black;height:1px;margin-bottom:10px"></div>
       <div style="padding:20px 40px;">
         <div style="margin-bottom:10px;">专辑名称:[[current_album.name]]</div>
         <div style="margin-bottom:10px;">商品数量:[[current_album.product_count]]</div>
         <div style="margin-bottom:10px;">
         导入方式:         
         <el-radio v-model="radio" :label= 1 style="margin-left: 20px;">直接导入</el-radio>
         <el-radio v-model="radio" :label= 2>指定商品分类导入</el-radio>
        </div>
        <div class="tips">
        <div>直接导入:将根据中台商品分类导入对应的本地分类，如果分类不存在将自动创建商品分类</div>
        <div>指定商品分类导入：指定一个商品分类，将专题中所有商品导入同一个分类中。</div>
        </div>
        <div v-if="radio == '2'">
          <el-form ref="form" :inline="true" class="form-pane">
          <el-form-item label="选择导入分类">
          <el-select v-model="one_Classify_value" clearable filterable placeholder="请选择一级分类" @change="getShopCategory(one_Classify_value,'two')">
          <el-option v-for="item in oneClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="">
        <el-select v-model="two_Classify_value" clearable filterable placeholder="请选择二级分类" @change="getShopCategory(two_Classify_value,'three')">
          <el-option v-for="item in twoClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="three_Classify_value" clearable filterable placeholder="请选择三级分类">
          <el-option v-for="item in threeClassifyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
          </el-form>
       </div>
       </div>
       <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 10px;">
            <el-button type="primary"  @click="confirmImport">导入</el-button>
            <el-button type="info" @click="importShow = false">取 消</el-button>
       </div>
    </el-dialog >
  <el-dialog :visible.sync="deleteDialog"  top="2vh" :show-close="false">
      <template slot="title" style="padding: 5px 0px 20px 0 ;">
      <div style="border-bottom: 1px solid;padding-bottom: 5px;">删除提示</div>
      </template>
      <div style="padding: 0 60px;font-size: 17px;color: #222222;">
      <div>专辑删除后将无法恢复，原专辑链接如果已经用于装修、分享等将无法打开！！！</div>
      <div>请确认后再进行删除！！</div>
      </div>
      <template slot="footer">
           <div style="display:flex;justify-content: center;margin-top:25px">
            <el-button  type="danger" @click="delShopAlbum">确认删除</el-button>
            <el-button type="info" @click="deleteDialog =false">取消</el-button>
           </div>
      </template>
    </el-dialog>
  <el-dialog :visible.sync="editDialog" width="50%" top="3vh">
    <div slot="title" style="border-bottom: 1px solid;padding-bottom: 5px;font-size: 18px;">编辑专辑信息</div>
    <div style="padding: 20px 50px;">
    <el-form  >
        <el-form-item label="专辑名称" label-width="100px">
          <el-input style="width: 60%;" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="专辑描述" label-width="100px">
          <el-input type="textarea" v-model="editForm.describe" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item label="专辑封面" label-width="100px">
          <div class="cover-pane">
            <div class="upload-boxed" v-if="editForm.covers.length" @click="openUploadImage">
              <img :src="editForm.covers[0].src" alt="" style="width:150px;height:150px">
              <div class="upload-boxed-text">点击重新上传</div>
            </div>
            <div class="upload-box" @click="openUploadImage" v-if="!editForm.covers.length">
              <div class="upload-box-member">
                <i class="el-icon-plus notcie_icon"></i><br>
              </div>
            </div>
            <div class="tip">建议尺寸: 正方形</div>
          </div>
        </el-form-item>
      </div>
    </el-form>
       <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 10px;">
            <el-button type="primary" style="margin-right: 35px;" @click="saveData">保存</el-button>
            <el-button type="info" @click="editDialog = false">取 消</el-button>
       </div>
    </el-dialog >
    <upload-multimedia-img :upload-show="coverImgShow" :type="type" sel-num="one" select="open" @replace="coverImgShow = !coverImgShow" @sure="selectedMaterial"></upload-multimedia-img>
</div>
@include('public.admin.uploadMultimediaImg')
<script>
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        albumTopTitle: [{
          id: 1,
          name: "共享选品专辑"
        }, {
          id: 2,
          name: "我的选品专辑"
        }, {
          id: 3,
          name: "已导入专辑"
        }],
        form: {
          album_name: ""
        },
        middleground_configuration_id:"", //中台配置项
        middleground_configuration:[],
        date: [],
        typeName: [{
          id: 1,
          value: "is_hot",
          sort: '',
          name: "热卖",
        }, {
          id: 2,
          value: "is_new",
          sort: '',
          name: "最新",
        }, {
          id: 3,
          value: "hot_import",
          sort: '',
          name: "热门导入",
        }, {
          id: 4,
          value: "hot_browse",
          sort: '',
          name: "热门访问",
        }],
        activeTypeId: "", //激活类型id
        total: 0, //全部商品数量
        total_page: 0, //分页限制最多100页
        per_size: 0,
        current_page: 0,
        page_number:12,
        goods_page_size: [10,20,30,40,50],
        one_Classify_value: "", //一级分类值
        two_Classify_value: "", //二级分类值
        three_Classify_value: "", //三级分类值
        oneClassifyList: [], //一级分类
        twoClassifyList: [], //二级分类
        threeClassifyList: [], //三级分类
        // tag_group_value: "",
        // tag_value: "",
        // tagGroup: [], //标签组
        // tagValue: [], //标签组值
        albumData: [],
        topId: 1,
        sortCheckName:"已售",
        dialogVisible: false, //复制链接弹窗
        importShow:false,//导入专辑弹窗
        current_album:{},//当前选中专辑
        line: {
          qr_code: "",
          micro_qr_code: "",
          link: "",
          micro_link: ""
        },
        info:false,
        radio:1,
        deleteDialog:false,
        editDialog:false,
        currentDeleteID:'',//当前选择删除id
        currentEdit:'',
        editForm: {   //
          name: "",
          describe: "",
          covers: [{src:''}]
        },
        type: "",//上传文件类型
        coverImgShow: false,//上传图片开关
        currentEditId:''
      }
    },
    computed: {
      getAlbumLength() {
        let arr = this.albumData.filter(item => item.checked);
        return arr.length
      },
    },
    mounted() {
      this.getShopCategory('', '');
      this.getMiddleground();
    },
    methods: {
      //补0
      computedPrice(num){
         let num1 = parseFloat(num)
         if(num == isNaN){
          return ''
         }
         let f = Math.round(num*100)/100
         let s = f.toString()
         let rs = s.indexOf('.')
           if(rs<0){
            rs = s.length
            s +='.'
          }
          while(s.length <= rs +2 ){
            s += '0'
          }
          return s
      },
      //保存编辑数据
      saveData() {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.updateShopAlbum') !!}", {
          album_id: this.currentEditId,
          data: this.editForm
        }).then(({
          data
        }) => {
          if (data.result) {
            this.$message.success(data.msg);
            this.editDialog = false
            this.getList()
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      //获取编辑专辑的数据
      getData() {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getAlbumDetailByShop') !!}", {
          album_id: this.currentEditId
        }).then(({
          data
        }) => {
          if (data.result) {
            this.editForm.name = data.data.album.name == null ? "" : data.data.album.name;
            this.editForm.describe = data.data.album.describe == null ? "" : data.data.album.describe;
            this.editForm.covers[0].src = data.data.album.covers[0].src == null ? '' : data.data.album.covers[0].src;
            // this.info = true;
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      // 上传图片
      selectedMaterial(name, image, imageUrl) {
        this.editForm.covers[0].src = imageUrl[0].url
      },
      //打开上传图片弹窗
      openUploadImage() {
        this.type = "1";
        this.coverImgShow = true;
      },
      //打开删除专辑弹窗
      openDeleteDialog(id){
        this.deleteDialog = true
        this.currentDeleteID = id
      },
      //确认导入
      confirmImport(){
       this.importShow = false
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.importAlbum') !!}", {
          middleground_configuration_id:this.middleground_configuration_id,
          import_type:this.radio,
          search: {
            // ids: this.albumData.filter(item => item.checked).map(citem => citem.id)
            ids : this.current_album.id
          },
          category: {
            parentid: [this.one_Classify_value],
            childid: [this.two_Classify_value],
            thirdid: [this.three_Classify_value]
          }
        }).then(({
          data
        }) => {
          if (data.result) {
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      //获取列表数据
      getList(page) {
        let newArr = new Object();
        for (let item of this.typeName) {
          newArr[item['value']] = item['sort']
        }
        let url = this.topId == 1 ? "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getList') !!}" : this.topId == 2 ? "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getListByUid') !!}" :
          "{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getListByShop') !!}";
        let newObj = new Object();
        if(this.topId == 3) {
          newObj = {
            search :
              {
                pageSize : this.page_number,
                name: this.form.album_name,
                time: {
                  start: this.date !== null ? this.date[0] / 1000 : '',
                  end: this.date !== null ? this.date[1] / 1000 : '',
                }
              },
            page
            }
        }else {
          newObj = {
            middleground_configuration_id:this.middleground_configuration_id,
            search: {
              ...newArr,
              pageSize : this.page_number,
              album_name: this.form.album_name,
              time : {
                start_at: this.date !== null ? this.date[0] / 1000 : '',
                end_at: this.date !== null ? this.date[1] / 1000 : '',
              },
              page,
            }
          }
        }
        this.info = false;
        this.$http.post(url, {...newObj}).then(({data}) => {
          if(data.result) {
            if(this.topId == 3){
              this.albumData = data.data.data
            }else{
              this.albumData = data.data.list
            }
            this.albumData.forEach(item => {
                this.$set(item,'show',true)
                this.$set(item,'icon','')
                this.$set(item,'showStatus','hides')
              });
            if(this.topId !== 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.total;
              this.per_size = data.data.per_page;
              this.current_page = data.data.current_page;
            }
            for (let item of this.albumData) {
              this.$set(item, 'checked', 0);
            }
            this.info = true;
          }else {
            this.$message.error(data.msg);
          }
        })
      },
      // 获取分类 数据
      getShopCategory(parent_id, type) {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getShopCategory') !!}", {
          parent_id
        }).then(({
          data
        }) => {
          if (data.result) {
            switch (type) {
              case '':
                this.oneClassifyList = data.data;
                this.twoClassifyList = [];
                this.threeClassifyList = [];
                this.two_Classify_value = "";
                this.three_Classify_value = "";
                break;
              case 'two':
                this.twoClassifyList = this.one_Classify_value ? data.data : [];
                this.three_Classify_value = "";
                this.two_Classify_value = "";
                this.threeClassifyList = [];
                break;
              case 'three':
                this.threeClassifyList = this.two_Classify_value ? data.data : [];
                this.three_Classify_value = "";
                break;
              default:
                break;
            }
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      // 获取中台采购端列表
      getMiddleground() {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}", {}).then(({data}) => {
          if (data.result) {
            this.middleground_configuration = data.data;
            this.middleground_configuration_id = this.middleground_configuration.length ? this.middleground_configuration[0].id : 0;
            this.getList(1);
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      // 导入专辑弹窗
      importAlbum(item) {
        this.current_album = item
        this.importShow = true
      },
      getSortData(id, type) {
        for (let item of this.typeName) {
          if (item.id == id) {
            item.sort = item.sort == 1 ? 2 : item.sort == 2 ? 1 : 2;
            let newName = item.name == '热门导入' ? '导入' : item.name == '热门访问' ? '访问' : item.name
            this.sortCheckName = newName;
          }else {
            item.sort = ''
          }
        }
        this.getList(1);
      },
      //搜索
      search(page) {
        this.getList(page);
      },
      handleSizeChange(num) {
        this.page_number = num;
        this.getList(1);
      },
      // 删除专辑
      delShopAlbum() {
        this.deleteDialog = false
          this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.delShopAlbum') !!}", {
            album_id : this.currentDeleteID
          }).then(({
            data
          }) => {
            if (data.result) {
              this.$message.success(data.msg);
              this.getList(1);
            } else {
              this.$message.error(data.msg);
            }
          })
      },
      // 查看详情
      checkGoodsDetail(id) {
        // window.location.href = `{!! yzWebFullUrl('plugin.yz-supply.admin.album.detail.index') !!}&id=${id}&type=${this.topId}&middleground_configuration_id=${this.middleground_configuration_id}`;
        window.open(`{!! yzWebFullUrl('plugin.yz-supply.admin.album.detail.index') !!}&id=${id}&type=${this.topId}&middleground_configuration_id=${this.middleground_configuration_id}`)
      },
      // 编辑商品
      editShopAlbum(id) {
        // window.location.href = `{!! yzWebFullUrl('plugin.yz-supply.admin.album.detail.update') !!}&album_id=${id}`;
        this.editDialog =true
        this.currentEditId = id
        this.getData()
      },
      // 切换 - 头部
      checkTopTitle(id) {
        this.topId = id;
        console.log(this.topId);
        this.getList(1);
      },
      // 单选
      oneChecked(ev, data) {
        for (let item of this.albumData) {
          if (!item.checked) {
            this.all_checked = 0;
            break
          } else {
            this.all_checked = 1;
          }
        }
      },
      // 打开弹窗
      clickTabLine(album_id) {
        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.productAlbum.getLink') !!}", {album_id:album_id}).then(({data}) => {
          if (data.result) {
            this.line.link = data.data.link;
            this.line.qr_code = data.data.qr_code;
            this.line.micro_link = data.data.micro_link;
            this.line.micro_qr_code = data.data.micro_qr_code;
            // this.$message.success(data.msg);
            this.dialogVisible = true;
          } else {
            this.$message.error(data.msg);
            this.dialogVisible = true;
          }
        })
      },
      // 复制链接
      copyLine(val) {
        const cInput = document.createElement("input");
        cInput.value = val;
        document.body.appendChild(cInput);
        cInput.select(); // 选取文本框内容
        document.execCommand("copy");
        this.$message({
          type: "success",
          message: "复制成功",
        });
        document.body.removeChild(cInput);
      },
      // 展开收起描述详情
      showNot(item){
        item.show = !item.show
        if(!item.icon){
          item.icon = 'rotate'
        }else{
           item.icon = ''
        }
        if(item.showStatus){
          item.showStatus=''
        }else{
          item.showStatus = 'hides'
        }
      }
    },
  })
</script>
@endsection