@extends('layouts.base')
@section('content')
@section('title', trans('短视频中心'))
<style>
    [v-cloak] {
        display: none;
    }
    .right-titpos{


        position: relative;
        height: 38px;

    }
    .video-sty .el-dialog {
        background: rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .vue-page {
        border-radius: 5px;
        width: calc(100% - 266px);
        float: right;
        margin-right: 10px;
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 6px 5% 6px 20px;
        background: #fff;
        /* height: 60px; */
        z-index: 999;
        margin-top: 0;
        box-shadow: 0 2px 9px rgba(51, 51, 51, 0.1);
    }
    .table-list {
        background: #fff;
        border-radius: 10px;
        margin-top: 20px;
        margin-left: 10px;
        width: calc(100% - 20px);
    }
    .rightlist {
        background: #f5f5f5;
        margin-top: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .panel-footer{
        background: #eff3f6;
    }
    .panel-header{
        background: #eff3f6;
    }
    .video-sty .el-icon-close:before{
        font-size: 50px;
        color: #fff;
    }
    .caret-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        height: 25px;
        width: 11px;
        vertical-align: middle;
        cursor: pointer;
        overflow: initial;
        position: relative;
    }

    .caret-top {
        border: 5px solid transparent;
        border-bottom-color: #333;
        margin: 1px 0;
    }

    .caret-bottom {
        border: 5px solid transparent;
        border-top-color: #333;
        margin: 1px 0;
    }


</style>
<style>
    /* .flex{display:flex;width:100%;flex-wrap: wrap;justify-content: space-between; text-align: justify;} */
    .flex {
        display: grid;
        grid-template-columns: repeat(auto-fit, 240px);
        grid-column-gap: 20px;
        min-height: 100vh;
        margin-bottom: 60px;
    }

    /* .flex{display:flex;margin:10px;} */
    .box-lis {
        min-width: 240px;
        width: 240px
    }

    .box-li {
        width: 240px;
        border: 1px solid #ccc;
        transition: all .3s;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        height: 354px;
    }

    .box-li:hover {
        border-color: #df0f0f;
        margin-bottom: 0px;
        height: 374px;
    }

    .box-li:hover .box-li-detail, .box-li:hover .isshow-item {
        display: flex;
    }

    .box-li-img {
        width: 240px;
        height: 240px;
        position: relative;
    }

    .box-li-img img {
        width: 238px;
        height: 100%;
        border: 0px solid #333;
    }

    .box-li-detail {
        display: none;
        width: 100%;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        line-height: 30px;
        z-index: 2;
        background: #e1564c;
        color: #fff;
        font-weight: 600;
        text-align: center;
    }

    .box-li-detail .is_selected {
        flex: 1;
    }

    .box-li-detail .watch-detail {
        width: 66.6%;
        text-align: center;
        border-right: 2px solid #ccc;
        cursor: pointer;
    }

    .isshow-item {
        display: none;
        text-align: center;
        font-size: 12px;
        width: 100%;
    }

    .text-vertical {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }

    .box-li-title {
        height: 40px;
        color: #333;
        font-weight: 500;
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        -webkit-box-orient: vertical;
    }

    .box-li-title > span {
        cursor: pointer;
    }

    .box-li-price {
        display: flex;
        flex-wrap: wrap;
        color: #333;
        font-weight: 500;
        margin: 0 8px;
    }

    .box-li-price-one {
        width: 50%;
        text-align: center;
        font-size: 12px;
    }

    .box-li-sel {
        position: absolute;
        top: 0;
        right: 7px;
    }

    .el-checkbox__inner {
        border-color: #29ba9b
    }

    .table-responsive {
        padding: 6px 15px;
    }
</style>
<style>
    @font-face {
        font-family: ‘iconfont’; /* Project id 432132 */
        src: url(‘//at.alicdn.com/t/font_432132_078f875xdhok.woff2?t=1636442453208’) format(‘woff2’),
        url(‘//at.alicdn.com/t/font_432132_078f875xdhok.woff?t=1636442453208’) format(‘woff’),
        url(‘//at.alicdn.com/t/font_432132_078f875xdhok.ttf?t=1636442453208’) format(‘truetype’);

    }

    .panel-info {
        line-height: 40px;
        margin-bottom: 6px;
        border-radius: 8px;
        padding: 6px;
    }

    .panel-info-lable {
        font-size: 12px;
        color: #2d2d2d;
        white-space: nowrap;
        margin-right: 10px;
    }

    .panel-info-content {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        min-width: 1000px;
    }

    .panel-info-content > div:nth-child(n+1) {
        margin-right: 20px;
        height: 40px;
        margin-bottom: 10px
    }

    .Marketing-item-box {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .el-radio-button__inner {
        height: 40px;
        width: 120px;
    }

    .import-class {
        display: flex;
        flex-wrap: nowrap;
        line-height: 32px;
    }

    .import-class > div {
        padding: 10px;
        white-space: nowrap;
    }

    .import-class .el-input {
        width: 160px;
    }

    .panel-item {
        display: flex;
        margin: 6px 0;
        line-height: 40px;
    }

    .panel-item .iconfont {
        margin-right: 6px;
        font-size: 16px;
    }

    .tips {
        color: red;
        width: 560px;
        line-height: 30px;
        padding-left: 20px;
        white-space: nowrap;
    }

    .vue-head {
        margin-bottom: 10px;
    }

    .el-buttons {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #666;
        -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: 0;
        font-size: 14px;
        border-radius: 4px;
    }

    .el-collapse-item__header {

        background-color: #f5f7fa;
    }

    .el-collapse-item__content {
        padding: 10px 5px;
    }
</style>


<div class="w1200 ">
    <link rel="stylesheet" type="text/css" href="{{static_url('css/font-awesome.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/goods.css')}}"/>

    <div id="goods-index" class="rightlist ">
        <div class="right-addbox" >
            <div id="app" v-cloak>
                <div class='panel-header' style="background: #eff3f6;">
                    &nbsp
                </div>
                <div class="vue-head table-list">

                    <div class="panel panel-info">
                        <div class="vue-main-form">
                            <div class="vue-main-title" style="margin-top:-10px">
                                <div class="title"><span
                                            style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>短视频中心</b>
                                </div>
                            </div>
                        </div>
                        <div class="panel-item">
                            <div class="panel-info-content">
                                <div class="panel-item">
                                    <div class="panel-info-lable">
                                        <span>短视频来源</span>
                                    </div>
                                    <el-select v-model="middleground_configuration_id" placeholder="中台配置项"
                                               @change="changeMiddlegroundConfiguration">
                                        <el-option v-for="(item,index) in middleground_configuration"
                                                   :key="index"
                                                   :label="item.title"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="panel-item">
                                    <div class="panel-info-lable">
                                        <span>短视频ID</span>
                                    </div>
                                    <el-input v-model="search_form.id"></el-input>
                                </div>
                                <div class="panel-item">
                                    <div class="panel-info-lable">
                                        <span>短视频标题</span>
                                    </div>
                                    <el-input v-model="search_form.title"></el-input>
                                </div>
                                <div class="panel-item">
                                    <div class="panel-info-lable">
                                        <span>关联商品</span>
                                    </div>

                                    <el-input v-model="search_form.product_title"></el-input>
                                </div>


                                <div class="panel-item">
                                    <div class="panel-info-lable">
                                        <span>导入状态</span>
                                    </div>
                                    <el-select v-model="search_form.goods_import" clearable placeholder="是否已导入"
                                               clearable>
                                        <el-option v-for="(item,index) in statusList"
                                                   :key="index" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="panel-item">
                                    <el-button icon="el-icon-search" type="primary" style="width: 100px;"
                                               @click="search()">
                                        搜索
                                    </el-button>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="vue-main table-list" >
                    <div class="panel panel-default" style="border-radius:8px">
                        <div class="vue-main-form">
                            <div class="vue-main-title" style="margin-top:-10px">
                                <div class="title"><span
                                            style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>短视频列表</b>
                                </div>
                            </div>
                        </div>
                        <div class=" table-responsive">
                            <div v-loading="loading">

                                <el-table
                                        :data="list"
                                        style="padding:0 10px;margin-bottom: 30px;"
                                        v-loading="loading"
                                        element-loading-text="加载中"
                                        @selection-change="allChoose"
                                        ref="yzGoodsTable"
                                >
                                    <el-table-column
                                            prop="name"
                                            align="center"
                                            label="选择"
                                            type="selection"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            align="center"
                                            label="id"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="cover_url"
                                            align="center"
                                            label="短视频"
                                    >
                                        <template slot-scope="scope">
                                            <el-image @click="showVideo(scope.row.video_url)" style="height:50px;width:50px;" :src="scope.row.cover_url"></el-image>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="title"
                                            align="center"
                                            label="标题"
                                            width="200"
                                    >
                                        <template slot-scope="scope">
                                            <div v-for="item in scope.row.title">[[item]]</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="product.title"
                                            align="center"
                                            label="关联商品"
                                    >
                                        <template slot-scope="scope">
                                            <div v-for="item in scope.row.product.title">[[item]]</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="status"
                                            align="center"
                                            label="状态"
                                    >
                                        <template slot-scope="scope">
                                            [[scope.row.is_import == 1?'已导入':'未导入']]
                                        </template>
                                    </el-table-column>

                                </el-table>


                                <div class="vue-page">
                                    <div style="display:flex;">

                                        <div style="text-align: right;flex:1;">
                                            <el-pagination layout="sizes,prev, pager, next,jumper"
                                                           @current-change="search"
                                                           :total="total"
                                                           :page-size="per_size" :current-page="current_page" background
                                                           :page-sizes="goods_page_size"
                                                           @size-change="handleSizeChange" v-loading="loading">
                                            </el-pagination>
                                            {{--                                        <el-pagination layout="sizes,prev, pager, next,jumper" @current-change="search" v-if="total/per_size <50" :total="total"--}}
                                            {{--                                                       :page-size="per_size" :current-page="current_page" background :page-sizes="goods_page_size"--}}
                                            {{--                                                       @size-change="handleSizeChange" v-loading="loading">--}}
                                            {{--                                        </el-pagination>--}}
                                        </div>
                                    </div>
                                    <div class="import-class">
                                        <div>选择导入短视频分类</div>
                                        <el-select size="small" v-model="category_form.video_id" placeholder="请选择短视频分类"
                                                   clearable>
                                            <el-option v-for="item in video_category_list" :key="item.id" :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>

                                        <div>选择导入商品分类</div>
                                        <el-select size="small" v-model="category_form.id_v1" placeholder="请选择一级分类"
                                                   clearable @change="changeV1()">
                                            <el-option v-for="item in category_list" :key="item.id" :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                        <el-select size="small" v-model="category_form.id_v2" placeholder="请选择二级分类"
                                                   clearable @change="changeV2()">
                                            <el-option v-for="item in category_list_v2" :key="item.id"
                                                       :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                        <el-select size="small" v-model="category_form.id_v3" placeholder="请选择三级分类"
                                                   clearable v-if="category_level == 3">
                                            <el-option v-for="item in category_list_v3" :key="item.id"
                                                       :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                        <div>选择关联会员</div>


                                        <div>
                                            <el-tag closable  @close="handleCloseTag()" @click="openMember()" style="margin-right: 10px;">[[current_member]]</el-tag>
                                            <!-- 选择会员 -->

                                            <el-button size="small" type="primary" @click="confirm"
                                                       :disabled="is_import_disabled">
                                                导入短视频[[changeTotal==0?"":"（"+changeTotal+"）"]]
                                            </el-button>
                                            <el-button size="small" type="primary" @click="show_all_import"
                                                       :disabled="is_import_disabled">
                                                导入全部短视频（[[total>=2000?total_str:total]]）
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='panel-footer'>

                        </div>
                    </div>
                </div>
                <el-dialog title="选择会员" :visible.sync="member_show" width="60%">
                    <div>
                        <el-input v-model="member_keyword" style="width:60%;" placeholder="会员信息"></el-input>
                        <el-button @click="getMember" >搜索</el-button>
                    </div>
                    <el-table :data="member_list" style="width: 100%;height:500px;overflow:auto" v-loading="loading">
                        <el-table-column label="ID" prop="uid" align="center" width="100px"></el-table-column>
                        <el-table-column label="会员信息">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center;">
                                    <div v-if="scope.row.avatar_image" style="width:40px;">
                                        <el-image :src="scope.row.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%"></el-image>
                                    </div>
                                    <div style="flex:1;">【id:[[scope.row.uid]]】[[scope.row.nickname]]</div>
                                </div>

                            </template>
                        </el-table-column>

                        <el-table-column prop="refund_time" label="操作" align="center" width="320">
                            <template slot-scope="scope">
                                <el-button @click="chooseMember(scope.row)">
                                    选择
                                </el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="member_show = false">取 消</el-button>
                </span>

                </el-dialog>
                <el-dialog :visible.sync="all_import_show" width="750px" title="导入全部短视频">

                    <el-col v-if="all_import.import_status == 0" style="color: red">
                        共计短视频数为[[total_str]]个，因条件限制该操作只能导入前2000款短视频
                    </el-col>
                    <el-col v-if="all_import.import_status == 1" style="color: red">导入短视频总数：[[all_import.import_total]]
                    </el-col>
                    <el-col v-if="all_import.import_status == 1" style="color: red">已导入短视频数：[[all_import.import_exits]]
                    </el-col>
                    <el-col v-if="all_import.import_status == 1" style="color: red">F
                        总进度约：[[all_import.import_process]]%
                    </el-col>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="all_import_show = false">取 消</el-button>
                        <el-button type="primary" :disabled="all_import_disabled" @click="all_confirm">确认导入</el-button>
                    </span>
                </el-dialog>
                <el-dialog   :visible.sync="is_open" class="video-sty">
                    <div style="text-align: center">
                        <video :src="show_video"  controls="controls" style="max-width:600px;max-height: 800px;"></video>
                    </div>
                </el-dialog>

            </div>
        </div>
    </div>
</div>
</div>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
@include('public.admin.tinymceee')
<script>
    let item = {
        props: ["text", "list", "unit", "keys"],
        delimiters: ['[[', ']]'],
        template: `<div style="margin-right: 10px">
                    <span>[[text]]</span>
                    <template v-if="value!='自定义区间'">
                        <el-select v-model="value" placeholder="请选择" @change="change">
                            <el-option v-for="(item,i) in list" :label="item" :value="item" :key="i"> </el-option>
                        </el-select>
                    </template>
                    <template v-else>
                    <el-input  type="number" placeholder="区间开始" v-model="search.from" style="width: 170px;" @blur="blur">
                    </el-input>
                    <div class="line" style="border:0;font-size:25px;">-</div>
                    <el-input type="number" placeholder="区间结束" v-model="search.to" style="width: 190px;" @blur="blur">
                        <el-button slot="append">[[unit]]</el-button>
                    </el-input>
                    </template>
                </div>`,
        data() {
            return {
                value: "",
                search: {from: null, to: null}
            }
        },
        methods: {
            change() {
                if (this.value == "全部") return this.$emit("change", {key: this.keys, isdel: true});
                if (this.value == "自定义区间") return;
                let val = this.value.split("-");
                val[1] = val[1] ? parseInt(val[1]) : 99999;
                this.$emit("change", {search: {from: parseInt(val[0]), to: val[1]}, key: this.keys});
            },
            blur() {
                let search = {};
                search.from = this.search.from ? parseInt(this.search.from) : 0,
                    search.to = this.search.to ? parseInt(this.search.to) : 99999,
                    this.$emit("change", {search, key: this.keys});
            },
            Reset() {
                this.value = "",
                    this.search = {from: "", to: ""};
            }
        }
    }
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        components: {item},
        directives: {
            'el-select-loadmore': {
                bind(el, binding) {
                    // 获取element-ui定义好的scroll盒子
                    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                    SELECTWRAP_DOM.addEventListener('scroll', function () {
                        /**
                         * scrollHeight 获取元素内容高度(只读)
                         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                         * clientHeight 读取元素的可见高度(只读)
                         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                         */

                        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;

                        if (   this.scrollTop + this.clientHeight + 1 >=this.scrollHeight && this.scrollHeight>this.scrollTop) {
                            console.log('in')
                            binding.value();
                        }
                    });
                }
            }
        },
        data() {
            let category_level = {!! $category_level !!};
            let create_category = {!! $create_category !!};
            let category_list = {!! $category_list?:'{}' !!};
            let video_category_list = {!! $video_category_list?:'{}' !!};
            let search_cate_v1 = '{}';
            let all_import = {!! $import?:'{}' !!};
            let topic_id = {!! $topic_id !!};
            return {
                show_tech_fee: 1,//是否显示技术服务费
                middleground_configuration: {},//中台配置数组
                middleground_configuration_id: 0,
                changeTotal: 0,
                is_all_choose: 0,
                loading: false,
                is_open:false,
                show_video:'',
                all_loading: false,
                page_number: 20, //每页显示条数
                all_import_show: false,
                list: [],
                detail_show: false,
                all_import: all_import,
                sever_ratio: 0,//中台技术服务费
                search_form: {
                    is_display: 1,
                    goods_source: "",
                    cate_v1: '',
                    cate_v2: '',
                    cate_v3: '',
                    source: 'all',
                    commission_agent: 'all',
                    goods_import: "",
                    topic_id: topic_id,
                    id:'',
                    product_id:'',
                    title:'',
                },
                is_display: [
                    {
                        value: 1,
                        label: '上架',
                    },
                    {
                        value: 2,
                        label: '下架',
                    }
                ],
                marketing_attributes_array: [
                    {
                        value: '',
                        label: '默认',
                    },
                    {
                        value: 'is_new',
                        label: '新品',
                    },
                    // {
                    //     value: 'is_recommend',
                    //     label: '推荐',
                    // },
                    {
                        value: 'is_hot',
                        label: '热卖',
                    },
                    {
                        value: 'is_promotion',
                        label: '促销',
                    },
                ],
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                category_form: {
                    id_v1: "",
                    id_v2: "",
                    id_v3: "",
                    fid_v1: "",
                    fid_v2: "",
                    video_id:"",
                    member_id:" "
                },
                //默认的来源
                default_goods_source: [
                    {value: "all", label: '全部',},
                    {value: "zt", label: '中台自营'}
                ],
                //显示使用的来源
                goods_source: [
                    {value: "all", label: '全部',},
                    {value: "zt", label: '中台自营'}
                ],
                pageIndex:1,
                gross_profit_rate: ["全部", "0-35%", "35%-50%", "50%-75%", "75%及以上"],//毛利率
                promote_rate: ["全部", "0-50%", "50%-150%", "150%-300%", "300%及以上", "自定义区间"],//利润率
                discount: ["全部", "0-3折", "3-5折", "5-8折", "8折及以上", "自定义区间"],//折扣
                agreement_price: ["全部", "0-200元", "200-500元", "500-1000元", "1000元以上", "自定义区间"],//协议价
                guide_price: ["全部", "0-200元", "200-500元", "500-1000元", "1000元以上"],//指导价、营销价
                goods_shipping: [{
                    value: '',
                    label: '全部',
                }, {
                    value: '2',
                    label: '不包邮'
                }, {
                    value: '1',
                    label: '包邮'
                }],
                goods_page_size: [10,20, 50],
                goods_import: [{
                    value: '',
                    label: '全部'
                }, {
                    value: '1',
                    label: '未导入'
                }, {
                    value: '2',
                    label: '已导入'
                }],
                goods_agent: [
                    {
                        value: 'all',
                        label: '全部',
                    },
                    {
                        value: 'zt', //中台传0
                        label: '中台',
                    }
                ],
                current_member:'选择',
                is_import_disabled: false,
                all_import_disabled: false,
                member_list:[],
                category_level: category_level,//分类等级
                create_category: create_category,//分类等级
                video_category_list:video_category_list,
                category_list: category_list,
                category_list_v2: [],
                category_list_v3: [],
                selectionGoodsIds: [],
                // goods_group: group_list,
                // app_goods_group: app_group_list,
                search_cate_v1: search_cate_v1,
                search_cate_v2: [],
                search_cate_v3: [],

                //分页
                total_str: 0,//显示的短视频总数 会出现总数后面多个+号的情况
                total: 0, //全部短视频数量
                total_page: 0,//分页限制最多100页
                per_size: 0,
                current_page: 0,
                expandActive: [],
                current_record: null,
                chapter_list: [],
                expand_icon: 'el-icon-arrow-down',
                expand_str: '查看全部',
                expand_status: false,
                active_tab: 'first',
                lecturer_list: [],
                member_show:false,
                choose_member_type:'',
                member_keyword:'',
                statusList:[
                    {
                        "label":"全部",
                        "value":"0"
                    },
                    {
                        "label":"未导入",
                        "value":"1"
                    },
                    {
                        "label":"已导入",
                        "value":"2"
                    },
                ]
            }

        },
        created() {
            this.getMiddlegroundConfiguration();
            // this.getGoodsList({search:{topic_id:this.search_form.topic_id}});
            // this.changeSource()

        },
        methods: {
            handleCloseTag(){
                this.category_form.member_id = 0;
                this.current_member='选择'
            },
            getMember() {
                this.$http.post("{!! yzWebUrl('plugin.video-share.admin.center.getMemberList') !!}", {keyword: this.member_keyword}).then(response => {
                    if (response.data.result) {
                        this.member_list = response.data.data.data
                    } else {
                        this.$message({type: 'error', message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error', message: response.data.msg});

                });
            },
            openMember(type) {
                console.log(132)

                this.member_show = true;
                this.choose_member_type = type;

            },
            chooseMember(row) {
                let that = this;
                this.category_form.member_id = row.uid;
                this.current_member='【id:'+row.uid+'】 会员昵称'+row.nickname
                // if (this.choose_member_type != "salers") {
                //     if (this.choose_member_type == "member_id") {
                //         this.form.default_member_id = row.uid;
                //         this.choosed_store = row;
                //     }
                //     this.form[this.choose_member_type] = row.uid
                //     this.member_show = false;
                //
                // }
                // // 多选
                // else {
                //     for (let i in this.form.salers) {
                //         if (row.uid == i) {
                //             this.$message.error("该会员已选择，请勿重复选择！");
                //             return;
                //         }
                //     }
                //     that.form.salers[row.uid] = row;
                //
                // }

            },

            clearMember(type) {
                if (this.choose_member_type == "uid") {
                    this.choosed_store = {};
                }
                // this.form[type] = "";
                this.$forceUpdate();
            },
            getMemberList(query){
                this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.center.get-member-list') !!}'+'&page='+this.pageIndex+'&keyword='+query).then(function (response) {
                    if (response.data.result) {
                        this.member_list=response.data.data
                        console.log(this.member_list)
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            showVideo(url){
              this.is_open=true
              this.show_video=url
            },
            handleCollapseChange(val) {
                if (val.length > 0) {
                    this.expand_str = '收回'
                    this.expand_icon = 'el-icon-arrow-up'
                    this.expand_status = true
                } else {
                    this.expand_str = '查看全部'
                    this.expand_icon = 'el-icon-arrow-down'
                    this.expand_status = false
                }
            },
            expandAll() {
                if (this.expand_status) {
                    this.expand_str = '查看全部'
                    this.expand_icon = 'el-icon-arrow-down'
                    this.expandActive = []
                    this.expand_status = false
                } else {
                    this.expand_str = '收回'
                    this.expand_icon = 'el-icon-arrow-up'
                    this.expandActive = this.chapter_list
                    this.expand_status = true
                }
            },
            handleLink(val) {
                console.log(val)
                val.chapter.forEach((item, index) => {
                    this.chapter_list.push(item.id)
                })
                this.current_record = val
                this.detail_show = true
            },
            changeMiddlegroundConfiguration() {
                // let loading = this.$loading({
                //     lock: true,
                //     text: "数据加载中",
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                this.selectionGoodsIds = [];
                //配置改变时默认使用全部
                this.search_form.source = this.default_goods_source[0].value;
                this.search()
                {{--this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.goods-import.get-supply-source') !!}', {middleground_configuration_id: this.middleground_configuration_id}).then(function (response) {--}}
                {{--    if (response.data.result) {--}}
                {{--        console.log(response.data.data);--}}
                {{--        this.goods_source = response.data.data;--}}
                {{--        // this.middleground_configuration = response.data.data;--}}
                {{--        // this.middleground_configuration_id = this.middleground_configuration[0].id;--}}
                {{--        this.search();--}}
                {{--        this.changeSource();--}}
                {{--        this.getLecturer()--}}
                {{--    } else {--}}
                {{--        this.list = [];--}}
                {{--        this.current_page = 1;--}}
                {{--        this.total = 0;--}}
                {{--        this.all_loading = false;--}}
                {{--        loading.close();--}}
                {{--        this.$message({message: response.data.msg, type: 'error'});--}}
                {{--    }--}}
                {{--}, function (response) {--}}
                {{--    this.list = [];--}}
                {{--    this.current_page = 1;--}}
                {{--    this.total = 0;--}}
                {{--    this.all_loading = false;--}}
                {{--    loading.close();--}}
                {{--    this.$message({message: response.data.msg, type: 'error'});--}}
                {{--})--}}

            },
            //营销活动切换
            changeMarketing(id) {
                this.$set(this.search_form, 'goods_group', id);
                this.getGoodsList({search: this.search_form});
            },
            //每页多少条数据
            handleSizeChange(page_number) {
                this.is_all_choose = 0;
                this.changeTotal = 0;
                this.page_number = page_number;
                this.search();
            },
            Reset() {
                //重置
                this.search_form = {
                    is_display: 1,
                    commission_agent: 'all',
                    source: "all",
                };
                for (let i = 0; i < 5; i++) {
                    this.$refs["item" + i].Reset();
                }

            },
            changeItem(obj) {
                // if (obj.isdel) delete this.search_form[obj.key];
                this.search_form[obj.key] = obj.search;
            },
            //图片地址
            goods_source_url(url) {
                url = `{{resource_get('plugins/video-share/assent/image/${url}.png')}}`
                return url
            },

            getMiddlegroundConfiguration(){
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}').then(function (response) {
                    if (response.data.result) {
                        this.middleground_configuration = response.data.data;
                        this.middleground_configuration_id = this.middleground_configuration[0].id;
                        this.getGoodsList({search: {topic_id: this.search_form.topic_id}});
                        this.changeSource();
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            // 获得短视频列表
            getGoodsList(json = {}) {
                json.search.goods_page_size = this.page_number;
                json['middleground_configuration_id'] = this.middleground_configuration_id;
                let loading = this.$loading({
                    lock: true,
                    text: "数据加载中",
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.all_loading = true;
                this.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.center.goods-list') !!}", json).then(response => {
                    if (response.data.result == 1) {
                        this.list = response.data.data.list;
                        this.list.forEach((item, index) => {
                            item.is_choose = 0;
                        })
                        this.synIsAllchoose();
                        this.current_page = response.data.data.page;
                        this.per_size = response.data.data.pageSize;
                        this.total = response.data.data.total;
                        this.total_page = response.data.data.total_page;
                        this.total_str = response.data.data.total;
                        this.sever_ratio = response.data.data.sever_ratio;

                        this.all_loading = false;
                    } else {
                        this.list = [];
                        this.current_page = 1;
                        this.total = 0;
                        this.$message.error(response.data.msg);
                        this.all_loading = false;
                    }
                    loading.close();
                }), (res) => {
                    loading.close();
                    this.all_loading = false;
                };
            },

            show_all_import() {
                if (this.all_import.import_status == 1) {
                    this.all_import_disabled = true
                }
                this.all_import_show = true;
            },

            search(page) {
                this.getGoodsList({page: page, search: this.search_form});
            },

            // 上一页
            prev() {
                let page = parseInt(this.current_page) - 1;
                if (page < 1) {
                    return false;
                }

                this.getGoodsList({page: page, search: this.search_form});
            },
            //下一页
            next() {
                let page = parseInt(this.current_page) + 1;
                if (this.per_size < this.page_number) {
                    return false;
                }

                this.getGoodsList({page: page, search: this.search_form});
            },
            //跳页
            jumpPage() {
                if (this.current_page <= 1) {
                    this.current_page = 1;
                }

                this.getGoodsList({page: this.current_page, search: this.search_form});
            },

            //选择短视频
            handleSelectionChange(val) {
                var arr = [];
                for (var j = 0, len = val.length; j < len; j++) {
                    arr.push(val[j].id);
                }
                this.selectionGoodsIds = arr;
            },

            // 一级分类改变
            changeV1() {
                this.category_form.id_v2 = "";
                this.category_form.id_v3 = "";
                this.category_list_v2 = [];
                this.category_list_v3 = [];
                this.category_list.find(item => {
                    if (item.id == this.category_form.id_v1) {
                        this.category_list_v2 = item.childrens;
                    }
                });
            },
            // 二级分类改变
            changeV2() {
                this.category_form.id_v3 = "";
                this.category_list_v3 = [];

                if (this.category_level == 3) {
                    this.category_list_v2.find(item => {
                        if (item.id == this.category_form.id_v2) {
                            this.category_list_v3 = item.childrens;
                        }
                    })
                }
            },
            // 一级分类改变
            searchCateV2() {
                this.search_form.cate_v2 = "";
                this.search_form.cate_v3 = "";
                this.search_cate_v2 = [];
                this.search_cate_v3 = [];
                //搜索二级分类
                var source = this.search_form.source;
                var parent_id = this.search_form.cate_v1;

            },
            // 二级分类改变
            searchCateV3() {
                this.search_form.cate_v3 = "";
                this.search_cate_v3 = [];
                //搜索三级分类
                var source = this.search_form.source;
                var parent_id = this.search_form.cate_v2;
                // 这里是接口请求数据, 带分页条件

            },
            changeSource() {
                var that = this;
                that.search_form.cate_v1 = "";
                that.search_form.cate_v2 = "";
                that.search_form.cate_v3 = "";
                that.search_cate_v1 = [];
                that.search_cate_v2 = [];
                that.search_cate_v3 = [];

            },
            changeWarehouse() {
                if (this.search_form.commission_agent == 0) {
                    this.search_form.goods_source = "";
                    this.goods_source = [
                        {value: '', label: '全部'},
                        {value: 0, label: '未分组'}
                    ];
                    this.app_goods_group.forEach(item => {
                        this.goods_source.push({
                            value: item.id,
                            label: item.name
                        });
                    });
                } else this.goods_source = goods_source;

                console.log(this.goods_source);
            },
            changeNav() {
                this.getGoodsList({search: this.search_form});
                // this.changeSource();
            },

            // 一级标签改变
            filteringV1() {
                this.category_form.fid_v2 = "";
                this.filtering_list_v2 = [];
                this.filtering_list.find(item => {
                    if (item.id == this.category_form.fid_v1) {
                        this.filtering_list_v2 = item.value;
                    }
                });
            },

            //导入短视频
            confirm() {
                var that = this;

                var arr = {
                    'parentid': [],
                    'childid': [],
                    'thirdid': [],
                    'video_id':'',
                    'member_id':'',
                };

                if (this.category_form.fid_v1) {
                    if (!this.category_form.fid_v2) {
                        this.$message.error("短视频标签值不能为空");
                        return false;
                    }
                }
                arr.video_id=this.category_form.video_id
                arr.member_id=this.category_form.member_id
                let loading = this.$loading({
                    lock: true,
                    text: `正在导入${this.changeTotal}个短视频中`,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                arr.parentid.push(this.category_form.id_v1);

                arr.childid.push(this.category_form.id_v2);

                if (this.category_form.id_v3) {
                    arr.thirdid.push(this.category_form.id_v3);
                }
                console.log(arr)
                // let json = {category:arr,goods_ids:this.selectionGoodsIds,f_value_id:this.category_form.fid_v2,commission_agent:this.search_form.commission_agent};
                let json = {
                    category: arr,
                    f_value_id: this.category_form.fid_v2,
                    commission_agent: this.search_form.commission_agent,
                    middleground_configuration_id: this.middleground_configuration_id,
                    goods_ids: this.selectionGoodsIds
                };
                // console.log(json)
                // return false;
                // this.list.forEach(item => {
                //     if(item.is_choose) json.goods_ids.push(item.id);
                // })
                that.is_import_disabled = true;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.center.select') !!}", json).then(response => {
                    // that.is_import_disabled = true;
                    that.all_loading = false;
                    if (response.data.result == 1) {
                        that.$message.success(response.data.msg);
                        that.is_import_disabled = false;
                        this.getGoodsList({page: this.current_page, search: this.search_form});
                        this.changeTotal = 0;
                        this.selectionGoodsIds = [];
                        this.$refs.yzGoodsTable.clearSelection();
                        this.$forceUpdate();
                    } else {
                        console.log(121)
                        that.$message.error(response.data.msg);
                        that.is_import_disabled = false;
                        this.selectionGoodsIds = [];
                        this.$refs.yzGoodsTable.clearSelection();
                        this.$forceUpdate();
                    }
                    loading.close();
                }), function (res) {
                    console.log(res);
                    loading.close();
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            },
            all_confirm() {
                var that = this;

                var arr = {
                    'parentid': [],
                    'childid': [],
                    'thirdid': [],
                    'video_id':'',
                    'member_id':'',
                };
                if (this.category_form.fid_v1) {
                    if (!this.category_form.fid_v2) {
                        this.$message.error("短视频标签值不能为空");
                        return false;
                    }
                }
                // let loading = this.$loading({
                //     lock: true,
                //     text:`正在导入${this.changeTotal}个短视频中`,
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                arr.parentid.push(this.category_form.id_v1);
                arr.childid.push(this.category_form.id_v2);
                arr.video_id=this.category_form.video_id
                arr.member_id=this.category_form.member_id
                if (this.category_form.id_v3) {
                    arr.thirdid.push(this.category_form.id_v3);
                }
                let json = {
                    category: arr,
                    f_value_id: this.category_form.fid_v2,
                    search: this.search_form,
                    middleground_configuration_id: this.middleground_configuration_id
                };
                // that.is_import_disabled = true;
                that.all_loading = true;
                // this.all_import_disabled = true
                that.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.center.all-select') !!}", json).then(response => {
                    this.selectionGoodsIds = [];
                    that.is_import_disabled = true;
                    that.all_loading = false;
                    if (response.data.result == 1) {
                        that.$message.success(response.data.msg);
                        location.reload()
                    } else {
                        that.$message.error(response.data.msg);
                    }
                }), function (res) {
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            },
            /**
             * 是否默认全选
             * @param item item
             */
            synIsAllchoose() {
                is_all = 3;
                this.list.some((item, index) => {
                    if (this.selectionGoodsIds.indexOf(item.id) != -1) {
                        this.list[index].is_choose = 1;
                        if (is_all != 0) is_all = 1;
                    } else {
                        is_all = 0;
                    }
                })
                this.is_all_choose = is_all;
                this.changeTotal = this.selectionGoodsIds.length;
            },
            /**
             * 添加/删除GOOGids中的值
             * @param item item
             */
            changeGoodsIds() {
                this.list.some((item, index) => {
                    if (item.is_choose == 1 && this.selectionGoodsIds.indexOf(item.id) == -1) {
                        this.selectionGoodsIds.push({'good_id': item.product.id, 'course_id': item.id})
                    } else if (item.is_choose != 1 && this.selectionGoodsIds.indexOf(item.id) != -1) {
                        this.selectionGoodsIds.splice(this.selectionGoodsIds.indexOf(item.id));
                    }
                })
                console.log(this.selectionGoodsIds)
                this.changeTotal = this.selectionGoodsIds.length;
            },
            oneChange(item) {
                this.changeGoodsIds(item);
                let that = this;
                this.$forceUpdate();
                let is_all = 0;
                // this.changeTotal = item.is_choose == 1?this.changeTotal+1:this.changeTotal-1;
                that.list.some((item, index) => {
                    if (item.is_choose == 1) {
                        is_all = 1;
                    } else {
                        is_all = 0;
                        return true;
                    }
                })
                that.is_all_choose = is_all;
            },
            // 全选
            allChoose(val) {
                this.selectionGoodsIds = val
                this.changeTotal = val.length
            },
            changeOrderBy(type) {
                var sort = type + '_sort';
                var current_sort = this.search_form['goods_type'] + '_sort';
                this.search_form[current_sort] = '';
                if (type == this.search_form['goods_type']) {
                    if (this.search_form['goods_sort'] == 'asc') {
                        this.search_form[sort] = 'desc';
                    } else {
                        this.search_form[sort] = 'asc';
                    }
                } else {
                    this.search_form[sort] = 'desc';
                }
                this.search_form['goods_sort'] = this.search_form[sort];
                this.search_form['goods_type'] = type;
                if (type == 'created_time' || type == 'real_month_sale') {
                    this.search_form['goods_sort'] = 'desc';
                }
                this.$forceUpdate();
                this.getGoodsList({page: 1, search: this.search_form});
            },
        },
    })

</script>

@endsection('content')