@extends('layouts.base')
@section('title', "海报列表")
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/new-poster/views/admin/index.css')}}">
<style>
    .add-selected{color:#fff;background:#29BA9C;border-radius:50px;}
    .add{padding:0 10px;line-height:40px;cursor:pointer;text-align: center;margin:0 5px 10px;}
    .center-show .center-show-edit {
        display: none;
    }
    .center-show .center-show-edited {
        display: inline-block;
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <div class="vue-crumbs">
            海报 > 海报管理
        </div>
        <div class="vue-head">
            <div class="vue-main-title" style="margin-bottom:20px">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">海报管理</div>
                <div class="vue-main-title-button">
                </div>
            </div>
            <div class="vue-search">
                <el-form :inline="true" :model="search_form" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="search_form.title" placeholder="海报名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.keyword" placeholder="关键词"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="search_form.poster_type" clearable placeholder="海报类型">
                            <el-option label="微信公众号关注海报" value="1"></el-option>
                            <el-option label="微信小程序海报" value="2"></el-option>
                            <el-option label="H5商城海报" value="5"></el-option>
                            <el-option label="APP分享海报" value="7"></el-option>
                            <el-option label="商品详情页海报" value="15"></el-option>
                            <el-option label="聚合CPS邀请海报" value="16"></el-option>
                            <el-option label="定金阶梯团海报" value="17"></el-option>
                            <el-option label="群拓客海报" value="19"></el-option>
                            <el-option :label="love_name+'海报'" value="20"></el-option>
                            <el-option :label="coupon_store_name+'商户海报'" value="21"></el-option>
                            <el-option :label="coupon_store_name+'商品海报'" value="22"></el-option>
                            <el-option :label="package_deliver_name+'海报'" value="23"></el-option>
                            <el-option label="企微好友海报" value="30"></el-option>
                            <el-option label="众筹活动" value="31"></el-option>
                            <el-option label="小程序直播" value="32"></el-option>
                            <el-option label="拓客活动海报" value="100"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="search_form.status" clearable placeholder="状态">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="search_form.center_show" clearable placeholder="会员中心显示">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="search(1)">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="vue-main">
            <div>
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content" style="flex:0 0 100px">海报列表</div>
                    <div class="" style="text-align:left;font-size:12px;color:#999">
                        <span>海报总数：[[total]]</span>&nbsp;&nbsp;&nbsp;
                        <span>微信公众号关注海报：[[count.wechat_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>微信小程序海报：[[count.mini_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>H5商城海报：[[count.h5_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>APP分享海报：[[count.app_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>商品详情页海报：[[count.goods_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>聚合CPS邀请海报：[[count.cps_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>定金阶梯团海报：[[count.deposit_ladder_count]]</span>&nbsp;&nbsp;&nbsp;
                        <span>群拓客海报：[[count.chat_group_count]]</span>&nbsp;&nbsp;
                        <span>[[love_name]]海报：[[count.love_count]]</span>&nbsp;
                        <span>[[package_deliver_name]]海报：[[count.package_deliver_count]]</span>&nbsp;
                        <span>企微好友海报：[[count.package_deliver_count]]</span>&nbsp;
                         <span>[[coupon_store_name]]商户海报：[[count.coupon_store_count]]</span>&nbsp;
                        <span>[[coupon_store_name]]商品海报：[[count.coupon_store_goods_count]]</span>&nbsp;
                        <span>众筹活动：[[count.crowdfunding_activity_count]]</span>&nbsp;
                        <span>小程序直播：[[count.applets_live_count]]</span>&nbsp;
                        <span>拓客活动海报：[[count.activity_count]]</span>&nbsp;
                        &nbsp;
                    </div>
                    <div class="vue-main-title-button">
                        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addModal">添加海报</el-button>
                    </div>

                </div>
                <el-table :data="list" style="width: 100%">
                    <!-- <el-table-column label="ID" align="center" prop="id" width="70"></el-table-column> -->
                    <el-table-column label="添加日期" align="center" prop="created_at"></el-table-column>
                    <el-table-column label="海报名称" align="center" prop="title"></el-table-column>
                    <el-table-column label="关键词" align="center" prop="keyword"></el-table-column>
                    <el-table-column label="海报类型" align="center" prop="">
                        <template slot-scope="scope">
                            <div v-if="scope.row.poster_type==1">微信公众号关注海报</div>
                            <div v-if="scope.row.poster_type==2">微信小程序海报</div>
                            <div v-if="scope.row.poster_type==5">H5商城海报</div>
                            <div v-if="scope.row.poster_type==7">APP分享海报</div>
                            <div v-if="scope.row.poster_type==15">商品详情页海报</div>
                            <div v-if="scope.row.poster_type==16">聚合CPS邀请海报</div>
                            <div v-if="scope.row.poster_type==17">定金阶梯团海报</div>
                            <div v-if="scope.row.poster_type==19">群拓客海报</div>
                            <div v-if="scope.row.poster_type==20">[[love_name]]海报</div>
                            <div v-if="scope.row.poster_type==21">[[coupon_store_name]]商户海报</div>
                            <div v-if="scope.row.poster_type==22">[[coupon_store_name]]商品海报</div>
                            <div v-if="scope.row.poster_type==23">[[package_deliver]]海报</div>
                            <div v-if="scope.row.poster_type==30">企微好友海报</div>
                            <div v-if="scope.row.poster_type==31">众筹活动</div>
                            <div v-if="scope.row.poster_type==32">小程序直播</div>
                            <div v-if="scope.row.poster_type==100">拓客活动海报</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="扫描数" align="center" prop="scan_count">
                        <template slot-scope="scope">
                            <div v-if="scope.row.poster_type==1">
                                [[scope.row.scan_count]]
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="引流注册人数" align="center" prop="award_count">
                        <template slot-scope="scope">
                            <div v-if="scope.row.poster_type==1">
                                [[scope.row.award_count]]
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" prop="created_at">
                        <template slot-scope="scope">
                            <div>
                                <el-switch v-if="scope.row.poster_type==1" @change="changeStatus('status',scope.row.id,scope.$index,scope.row.status)" v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                                <el-switch v-if="scope.row.poster_type==15" @change="changeStatus('goods_status',scope.row.id,scope.$index,scope.row.status)" v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                                <el-switch v-if="scope.row.poster_type==17" @change="changeStatus('status',scope.row.id,scope.$index,scope.row.status)" v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                                <el-switch v-if="scope.row.poster_type==20" @change="changeStatus('love_status',scope.row.id,scope.$index,scope.row.status)" v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员中心显示" align="center" prop="created_at" min-width="120">
                        <template slot-scope="scope">
                            <div class="center-show" @mouseover="changeIndex(scope.$index)" v-if="
                            scope.row.poster_type==1||
                            scope.row.poster_type==2||
                            scope.row.poster_type==5||
                            scope.row.poster_type==7||
                            scope.row.poster_type==16
                            ">
                                <span class="type-box">
                                    <i class="iconfont icon-ht_btn_wap" style="color: rgb(95, 32, 254);" title="H5" v-if="scope.row.center_show.includes('5')"></i>
                                    <i class="iconfont icon-ht_btn_app" style="color: rgb(255, 168, 0);" title="APP" v-if="scope.row.center_show.includes('7')"></i>
                                    <i class="iconfont icon-ht_btn_smallprogram" style="color: rgb(0, 223, 185);" title="小程序" v-if="scope.row.center_show.includes('2')"></i>
                                    <i class="iconfont icon-ht_btn_gongzhonghao" style="color: rgb(41, 186, 156);" title="公众号" v-if="scope.row.center_show.includes('1')"></i>
                                    <i class="iconfont icon-ht_btn_otherpage" style="color: rgb(255, 61, 56);" title="其他页面" v-if="scope.row.center_show.includes('0')"></i>
                                    <el-popover placement="top" width="100" trigger="hover">
                                        <div>
                                            <el-checkbox-group v-model="scope.row.center_show">
                                                <el-checkbox label="1" @change="changeCenterShow(scope.row,scope.$index)">微信公众号</el-checkbox>
                                                <el-checkbox label="5" @change="changeCenterShow(scope.row,scope.$index)">H5</el-checkbox>
                                                <el-checkbox label="2" @change="changeCenterShow(scope.row,scope.$index)">微信小程序</el-checkbox>
                                                <el-checkbox label="7" @change="changeCenterShow(scope.row,scope.$index)">商城APP</el-checkbox>
                                                <el-checkbox label="0" @change="changeCenterShow(scope.row,scope.$index,'other')">不显示</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <div slot="reference" style="display:inline-block">
                                            <div class="center-show-edit" title="编辑" :class="{'center-show-edited':change_index==scope.$index}">
                                                <i  class="el-icon-edit-outline" style="color: rgb(41, 186, 156); cursor: pointer; font-size: 18px; margin-top: 3px;"></i>
                                            </div>
                                        </div>
                                    </el-popover>

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

                    <el-table-column prop="refund_time" label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <span v-if="scope.row.poster_type!=15&&scope.row.poster_type!=20">
                                <el-link title="生成记录" :underline="false" @click="gotoMore(scope.row,1)" style="width:50px;">
                                    <i class="iconfont icon-fontclass-shengchengjilu"></i>
                                </el-link>
                            </span>

                            <span v-if="scope.row.poster_type==1">
                                <el-link title="扫码记录" :underline="false" @click="gotoMore(scope.row,2)" style="width:50px;">
                                    <i class="iconfont icon-fontclass-saomajilu"></i>
                                </el-link>
                                <el-link title="奖励记录" :underline="false" @click="gotoMore(scope.row,3)" style="width:50px;">
                                    <i class="iconfont icon-fontclass-jianglijilu"></i>
                                </el-link>
                            </span>

                            <el-link title="编辑" :underline="false" @click="gotoDetail(scope.row)" style="width:50px;">
                                <i class="iconfont icon-ht_operation_edit"></i>
                            </el-link>
                            <el-link title="删除" :underline="false" @click="del(scope.row.id,scope.$index)" style="width:50px;">
                                <i class="iconfont icon-ht_operation_delete"></i>
                            </el-link>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page" v-if="total>0">
            <el-row>
                <el-col align="right">
                    <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                        :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                </el-col>
            </el-row>
        </div>
        <el-dialog :visible.sync="add_show" width="1150px" center title="请选择页面类型">
            <div style="font-weight:500;display:flex;flex-wrap:wrap;justify-content: flex-start;">
                <div style="width:70px;line-height: 40px;color:#999;">页面类型：</div>
                <div class="add" @click="chooseAdd(1)" :class="add_index==1?'add-selected':''" type="text">微信公众号关注海报</div>
                <div class="add" @click="chooseAdd(2)" :class="add_index==2?'add-selected':''" type="text">微信小程序海报</div>
                <div class="add" @click="chooseAdd(5)" :class="add_index==5?'add-selected':''" type="text">H5商城海报</div>
                <div class="add" @click="chooseAdd(7)" :class="add_index==7?'add-selected':''" type="text">APP分享海报</div>
                <div class="add" @click="chooseAdd(15)" :class="add_index==15?'add-selected':''" type="text">商品详情页海报</div>
                <div class="add" @click="chooseAdd(16)" :class="add_index==16?'add-selected':''" type="text">聚合CPS邀请海报</div>
                <div class="add" @click="chooseAdd(17)" :class="add_index==17?'add-selected':''" type="text">定金阶梯团海报</div>
                <div class="add" @click="chooseAdd(19)" :class="add_index==19?'add-selected':''" type="text">群拓客海报</div>
                <div v-if="is_love_open==1" class="add" @click="chooseAdd(20)" :class="add_index==20?'add-selected':''" type="text">[[love_name]]海报</div>
                <div v-if="coupon_store_open==1" class="add" @click="chooseAdd(21)" :class="add_index==21?'add-selected':''" type="text">[[coupon_store_name]]商户海报</div>
                <div v-if="coupon_store_open==1" class="add" @click="chooseAdd(22)" :class="add_index==22?'add-selected':''" type="text">[[coupon_store_name]]商品海报</div>
                <div v-if="package_deliver_open==1" class="add" @click="chooseAdd(23)" :class="add_index==23?'add-selected':''" type="text">[[package_deliver_name]]海报</div>
                <div v-if="customer_increase_open==1" class="add" @click="chooseAdd(30)" :class="add_index==30?'add-selected':''" type="text">企微好友海报</div>
                <div class="add" @click="chooseAdd(31)" :class="add_index==31?'add-selected':''" type="text">众筹活动</div>
                <div class="add" @click="chooseAdd(32)" :class="add_index==32?'add-selected':''" type="text">小程序直播</div>
                <div class="add" @click="chooseAdd(100)" :class="add_index==100?'add-selected':''" type="text">拓客活动海报</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureGotoAdd">确 定</el-button>
                <el-button @click="add_show = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script>
    let is_love_open = {!! $is_love_open !!};
    let customer_increase_open = {!! $customer_increase_open !!};
    let love_name = '{!! $love_name !!}';
    let coupon_store_open = {!! $coupon_store_open !!};
    let coupon_store_name = '{!! $coupon_store_name !!}';
    let package_deliver_name = '{!! $package_deliver_name !!}';
    let package_deliver_open = {!! $package_deliver_open !!};
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                add_show:false,
                add_index:1,
                search_form:{},
                times:[],
                list:[],
                count:{},
                change_index:-1,
                rules: {},
                current_page:1,
                total:1,
                per_page:1,
                is_love_open:is_love_open,
                love_name:love_name,
                customer_increase_open:customer_increase_open,
                coupon_store_open:coupon_store_open,
                coupon_store_name:coupon_store_name,
                package_deliver_name:package_deliver_name,
                package_deliver_open:package_deliver_open,
            }
        },
        created() {

        },
        mounted() {
            this.getData(1);
        },
        methods: {

            getData(page) {
                let json = {
                    page:page,
                    search:{
                        title:this.search_form.title,
                        keyword:this.search_form.keyword,
                        poster_type:this.search_form.poster_type,
                        status:this.search_form.status,
                        center_show:this.search_form.center_show,
                    }

                }
                if(this.times.length>0) {
                    json.search.start_time = this.times[0]/1000;
                    json.search.end_time = this.times[1]/1000;
                }
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.new-poster.admin.poster.getList') !!}',json).then(function(response) {
                    if (response.data.result) {
                        this.list = response.data.data.list.data;
                        this.list.forEach((item,index) => {
                            this.list[index].center_show = this.list[index].center_show&&this.list[index].center_show.length>=0?this.list[index].center_show:[]
                        })
                        this.current_page=response.data.data.list.current_page;
                        this.total=response.data.data.list.total;
                        this.per_page=response.data.data.list.per_page;
                        this.count = response.data.data.count;
                        loading.close();

                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            gotoDetail(item) {
                if(item.poster_type==15 || item.poster_type==22 || item.poster_type==21 || item.poster_type==23) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.editGoods') !!}`+`&id=`+item.id;
                    link += `&poster_type=`+item.poster_type;
                    window.location.href = link;
                }
                else if(item.poster_type==17) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit-deposit-ladder') !!}`+`&id=`+item.id;
                    link += `&poster_type=`+item.poster_type;
                    window.location.href = link;
                }
                else if(item.poster_type==20) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit-love') !!}`+`&id=`+item.id;
                    link += `&poster_type=`+item.poster_type;
                    window.location.href = link;
                }
                else{
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit') !!}`+`&id=`+item.id;
                    link += `&poster_type=`+item.poster_type;
                    window.location.href = link;
                }
            },
            gotoMore(row,type) {
                if(type==1) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster-record.index') !!}`+`&id=`+row.id;
                    window.location.href = link;
                }
                else if(type==2) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster-scan.index') !!}`+`&id=`+row.id;
                    window.location.href = link;
                }
                else if(type==3) {
                    let link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster-award.index') !!}`+`&id=`+row.id;
                    window.location.href = link;
                }
            },

            search(val) {
                this.getData(val);
            },

            addModal() {
                this.add_show = true;

            },
            chooseAdd(index) {
                this.add_index = index;
                this.$forceUpdate()
            },
            sureGotoAdd() {
                let link = "";
                if(this.add_index==15 || this.add_index==21 || this.add_index==22 || this.add_index==23) {
                    link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.addGoods') !!}`;
                }
                else if(this.add_index==17) {
                    link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.add-deposit-ladder') !!}`;
                }
                else if(this.add_index==20) {
                    link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.add-love') !!}`;
                }
                else {
                    link = `{!! yzWebFullUrl('plugin.new-poster.admin.poster.add') !!}`;
                }
                link += `&poster_type=`+this.add_index;
                console.log(this.add_index);
                // 判断add_index跳转不同link
                console.log(link);
                window.location.href = link;
            },
            // 快速修改
            changeStatus(type,id,index,value,row) {
                let that = this;
                let json = {};
                let link = "";
                if(type == 'status') {
                    link = "{!! yzWebFullUrl('plugin.new-poster.admin.poster.changeStatus') !!}";
                    json = {
                        id:id,
                        status:value,
                    }
                }
                else if(type == 'goods_status') {
                    link = "{!! yzWebFullUrl('plugin.new-poster.admin.poster.changeGoodsStatus') !!}";
                    json = {
                        id:id,
                        status:value,
                    }
                }
                else if(type == 'love_status') {
                    link = "{!! yzWebFullUrl('plugin.new-poster.admin.poster.changeLoveStatus') !!}";
                    json = {
                        id:id,
                        status:value,
                    }
                }
                else if(type == 'center_show') {
                    link = "{!! yzWebFullUrl('plugin.new-poster.admin.poster.changeCenterShow') !!}"
                    json = {
                        id:id,
                        center_show:value,
                        poster_type:row.poster_type,
                    }
                }
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                that.$http.post(link, json).then(response => {
                    console.log(response);
                    if (response.data.result == 1) {
                        that.$message.success('操作成功！');
                    } else {
                        that.$message.error(response.data.msg);
                        that.list[index][type] == 1 ? 0 : 1;
                    }
                    that.search(this.current_page);
                    loading.close();
                }), function (res) {
                    console.log(res);
                    loading.close();

                };
            },
            del(id,index) {
                console.log(id,index)
                this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.new-poster.admin.poster.delete') !!}',{id:id}).then(function (response) {
                            if (response.data.result) {
                                this.list.splice(index,1);
                                this.$message({type: 'success',message: '删除成功!'});
                            }
                            else{
                                this.$message({type: 'error',message: response.data.msg});
                            }
                            loading.close();
                            this.search(this.current_page)
                        },function (response) {
                            this.$message({type: 'error',message: response.data.msg});
                            loading.close();
                        }
                    );
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消删除'});
                });
            },
            uploadSuccess(res, file) {
                if (res.result == 1) {
                    // this.form.file = res.data.thumb;
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
                window.location.reload();
                // this.submit_loading = false;
            },
            beforeUpload(file) {
                // this.submit_loading = true;
            },
            changeCenterShow(row,index,type) {
                let that = this;
                if(type=="other"&&this.list[index].center_show.indexOf(0)>=-1) {
                    this.list[index].center_show = []
                    this.list[index].center_show.push(0)
                }
                else {
                    let arr = []
                    for(let i=0;i<this.list[index].center_show.length;i++) {
                        if(this.list[index].center_show[i]!=0) {
                            arr.push(this.list[index].center_show[i])
                        }
                    }
                    this.list[index].center_show = arr;
                }
                let link = "{!! yzWebFullUrl('plugin.new-poster.admin.poster.changeCenterShow') !!}"
                let json = {
                    id:row.id,
                    center_show:row.center_show,
                    // poster_type:row.poster_type,
                }
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                that.$http.post(link, json).then(response => {
                    console.log(response);
                    if (response.data.result == 1) {
                        that.$message.success('操作成功！');
                    } else {
                        that.$message.error(response.data.msg);
                        // that.list[index][type] == 1 ? 0 : 1;
                    }
                    that.search(this.current_page);
                    loading.close();
                }), function (res) {
                    console.log(res);
                    loading.close();

                };

                console.log(json)
                this.$forceUpdate();
            },
            changeIndex(index) {
                this.change_index = index
            }


        },
    })
</script>
@endsection