@extends('layouts.base')
@section('title', '基础设置')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/fight-group-statistics-award/views/admin/index.css')}}">
    <style>
        .main-panel > .content {
            padding: 0;
        }
        .main-panel {
            margin-top: 42px;
        }
        #app {
            padding-bottom: 40px;
        }
        .rightlist #app .rightlist-head {
            line-height: 50px;
            padding: 0 0 15px 0;
        }
        .rightlist {
            background: #eff3f6;
            margin-top: 10px;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }

        .form-list {
            padding-top: 30px;
            background: #fff;
            border-radius: 10px;
            position: relative;
            top: 10px;
            margin-left: 10px;
            width: calc(100% - 20px);
        }
        .table-list {
            padding-top: 30px;
            background: #fff;
            border-radius: 10px;
            margin-top: 20px;
            margin-left: 10px;
            width: calc(100% - 20px);
        }
        .table-option a {
            font-size: 12px;
            font-weight: 600;
            color: #29ba9c;
            padding: 10px 0;
        }
        /* .el-form-item__label{padding-right:30px;} */
        .tip {
            font-size: 12px;
            color: #999;
            font-weight: 500;
            line-height: 24px;
        }
        .rightlist-head-con {
            padding-right: 20px;
            font-size: 16px;
            color: #888;
        }
        .el-tag {
            /* font-weight: 700;
              font-size: 15px;
              margin-bottom: 30px; */
        }
        /* 单选框边框颜色 */
        .el-radio__inner {
            border: 1px solid #c8cede;
        }
        /* 多选框边框颜色 */
        .el-checkbox__inner{
            border: 1px solid #c8cede;
        }
        .el-icon-edit {
            font-size: 16px;
            padding: 0 15px;
            color: #409eff;
            cursor: pointer;
        }
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {
            left: 100%;
            margin-left: -17px;
        }
        .el-switch__core::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all 0.3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

        .el-checkbox__label {
            display: inline-block;
            padding-left: 3px;
        }
        .el-checkbox.is-bordered + .el-checkbox.is-bordered {
            margin-left: 0px;
        }

        .vue-page {
            border-radius: 5px;
            width: calc(100% - 266px);
            float: right;
            margin-right: 10px;
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 15px 5% 15px 0;
            background: #fff;
            height: 60px;
            z-index: 999;
            margin-top: 0;
            box-shadow: 0 2px 9px rgba(51, 51, 51, 0.1);
        }
        .vue-center {
            text-align: center;
        }
        .loading-height {
            height: 500px;
        }
        .el-checkbox.is-bordered.el-checkbox--mini {
            margin: 0 0;
        }
        [v-cloak] {
            display: none;
        }

        .all {
            background: #eff3f6;
            min-height: 100vh;
            padding-top: 20px;
        }
        .vue-main {
            background: #fff;
            border-radius: 5px;
            margin: 0 10px;
            padding: 10px;
            min-height: calc(100vh - 90px);
        }
        .vue-nav {
            background: #fff;
            border-radius: 5px;
            margin: 0 10px;
            padding: 10px;
        }
        .vue-head {
            background: #fff;
            border-radius: 5px;
            margin: 0 10px;
            padding: 10px;
            margin-bottom: 15px;
        }
        .vue-crumbs {
            margin: 0 20px;
            font-size: 14px;
            color: #333;
            font-weight: 400;
            padding-bottom: 10px;
            line-height: 32px;
        }
        .vue-crumbs a {
            color: #333;
        }
        .vue-crumbs a:hover {
            color: #29ba9c;
        }

        .vue-main-title {
            display: flex;
            margin: 5px 0;
            line-height: 28px;
            font-size: 14px;
            color: #333;
            font-weight: 700;
        }
        .vue-main-title-left {
            width: 4px;
            height: 14px;
            margin-top: 6px;
            background: #29ba9c;
            display: inline-block;
            margin-right: 10px;
        }
        .vue-main-title-content {
            font-size: 14px;
            flex: 1;
        }
        .vue-main-title-button {
            text-align: right;
            flex:1;
        }
        .vue-main-form {
            margin-top: 20px;
            margin-left: 150px;
        }
        .vue-category-title {
            padding: 15px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 15px;
            font-weight: 600;
            font-size: 15px;
        }
        .el-link-edit {
            border-right: 1px solid;
            line-height: 16px;
        }
        .el-link-edit-start {
            border-right: 1px solid;
            padding-right: 20px;
            line-height: 16px;
        }
        .el-link-edit-middle {
            border-right: 1px solid;
            padding: 0 20px;
            line-height: 16px;
        }
        .el-link-edit-end {
            border-right: 0px;
            padding-left: 20px;
            line-height: 16px;
        }

        /* 上传图片 */
        .avatar-uploader .el-upload {
            margin-top: 15px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #29ba9c;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar_box {
            width: 80%;
            height: 80%;
            margin: 0 auto;
        }
        .avatar {
            width: 50%;
            height: 50%;
            object-fit: cover;
        }
        .el-upload-tip {
            width: 178px;
            margin: 0;
            padding: 0;
            color: #999;
            text-align: center;
        }
        input[type="file"] {
            display: none;
        }
        .avatar-uploader-box {
            position: relative;
            margin-top: 20px;
            width: 200px;
        }
        .el-icon-circle-close1 {
            position: absolute;
            top: -3px;
            right: -3px;
            color: #fff;
            background-color: #000;
            border-radius: 50%;
        }
        .vue-two{
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /*弹窗上传图片*/
        #upload-img {
        }
        #upload-img .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
        #upload-img .avatar-uploader-box {
            position: relative;
            margin: 20px 0 0 10px;
            width: 110px;
        }
        #upload-img .el-icon-circle-close {
            position: absolute;
            top: -7px;
            right: 1px;
            color: #999;
        }

        .imgList {
            display: flex;
            flex-wrap: wrap;
            margin: 10px auto;
        }
        /* 辅助色 */
        .vue-assist-color,
        .el-link-assist,
        .el-link:hover {
            color: #ff9b19 !important;
        }

        /* 选中及未选图片样式 */
        .upload-box:hover {
            border-color: #29ba9c;
            color: #29ba9c;
        }
        .upload-box {
            width: 150px;
            height: 150px;
            display: flex;
            cursor: pointer;
            border: 1px dashed #dde2ee;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }
        .upload-boxed {
            width: 150px;
            height: 150px;
            position: relative;
            border-radius: 5px;
            display: inline-block;
        }
        .upload-boxed-text {
            position: absolute;
            bottom: 0;
            line-height: 32px;
            color: #fff;
            text-align: center;
            width: 100%;
            background: #000;
            opacity: 0.7;
            border-radius: 0px 0px 5px 5px;
        }
        .upload-boxed-text-clear {
            position: absolute;
            bottom: 0;
            right:-70px;
            cursor: pointer;
            line-height: 32px;
            color: #ee3939;
        }
        .upload-boxed-list {
            display: flex;
            position: relative;
            border-radius: 5px;
            flex-wrap: wrap;
        }
        .upload-boxed-list-a {
            width: 150px;
            height: 170px;
            margin: 0 10px 5px 0;
            position: relative;
        }
        .upload-boxed-list-a .el-icon-close {
            position: absolute;
            top: -5px;
            right: -5px;
            color: #fff;
            background: #333;
            border-radius: 50%;
            cursor: pointer;
        }

        .vue-main-title-content a {
            color: #333;
        }
        .vue-main-title-content a:hover {
            color: #29ba9c;
        }
        .vue-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .black {
            color: #333;
        }
        .upload-box-member {
            text-align: center;
            font-weight: 600;
            font-size: 16px;
        }
        .el-form-item__label{
            margin-right: 30px;
        }
        .el-form-item__error{
            margin-left: 30px;
        }

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" label-width="15%">
                <div class="vue-crumbs">
                    公众号图文数据
                </div>
                <div class="vue-main">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">公众号图文数据</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="图文" prop="is_open">
                            <el-row class="div1">
                                <el-col :span="2">
                                    <el-button @click="selectMsgUrl(1)">
                                        <i class="iconfont icon-haibao" style="line-height:20px;float:left;display:inline-block;font-size:20px;width:100%;text-align:center"></i>
                                        选择
                                    </el-button>
                                </el-col>
                                <el-col :span="2">
                                    <el-button v-show="news.thumb_url" type="text" icon="el-icon-delete" @click="clearImage" size="mini"></el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <div style="padding-left: 17%;" v-if="news.thumb_url && news.thumb_url!=null">
                            <img :src="news.thumb_url"  style="min-width:230px;height:180px;overflow:hidden;" alt="">
                            </br>
                            <div>[[news.title]]</div>
                        </div>
                        </br>
                        <el-form-item label="复制图文链接">
                            <el-row class="div1">
                                <el-col :span="15">
                                    <el-input v-model="news.url" :title="news.url"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="success" @click="copy(news.url)">复制</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="小程序路径">
                            <el-row class="div1">
                                <el-col :span="15">
                                    <el-input v-model="news.min_app" :title="news.min_app"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="success" @click="copy(news.min_app)">复制</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </div>


                </div>

                <el-dialog title="图文" :visible.sync="img_text_url" width="60%" v-loading="dialog_loading">
                    <div>
                        <el-tabs v-model="img_text_url0" @tab-click="handleClickImgText">
                            <el-tab-pane label="微信" name="img_text_url1">
                                <el-row>
                                    <el-col :span="12">
                                        <el-input placeholder="请输入标题" v-model="search_img_text"></el-input>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button @click="currentChangeWechatTextImg(1)">搜索</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="overflow-y: scroll;max-height:400px;">
                                    <el-col :span="6" v-for="(item,index) in img_text_list" :key="index"  style="margin:10px 10px;width:280px;" @click.native="chooseImgTextUrl(index)">
                                        <div class="image_text_head">
                                            <div style="width:100%;">
                                                <div class="image_text_head_time" style="width:90%;margin-left:5%;border-bottom:1px #dadada solid">
                                                    <div style="width:80%;padding:10px 0;">[[item.created_at]]</div>
                                                </div>
                                            </div>
                                            <div style="padding:10px 30px">
                                                <div class="image_text_con" style="min-width:230px;height:180px;overflow:hidden;position:relative;">
                                                    <img :src="item.has_many_wechat_news[0].thumb_url"  style="min-width:230px;height:180px;overflow:hidden;" alt="">
                                                    <div class="image_text_con_title" style="position:absolute;bottom:0;width:100%;line-height:32px;background:#000;opacity:0.5;color:#fff;padding:0 15px;">
                                                        [[item.has_many_wechat_news[0].title]]
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <!-- 分页 -->
                                <el-row>
                                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                                        <el-pagination layout="prev, pager, next" @current-change="currentChangeWechatTextImg" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="img_text_url = false">取 消</el-button>
                        <!-- <el-button type="primary" @click="img_text_url = false">确 定</el-button> -->
            </span>
                </el-dialog>

            </el-form>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
        </div>
    </div>

    <script>

        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    form:{
                        is_open:0,
                    },
                    img_text_url:false,
                    img_text_url0:"img_text_url1",
                    dialog_loading:false,
                    search_img_text:'',
                    loading:false,
                    img_text_list:[],
                    total:0,
                    current_page:0,
                    per_size:0,
                    selectedMenuIndex:'',//当前选中菜单索引
                    news:{
                        'min_app':'/packageI/web-view/h5View'
                    }

                }
            },
            created() {


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

                copy(data) {
                    console.log(data)
                    let url = data
                    let oInput = document.createElement('input')
                    console.log(url)
                    console.log(oInput)
                    oInput.value = url
                    document.body.appendChild(oInput)
                    oInput.select() // 选择对象
                    document.execCommand("Copy") // 执行浏览器复制命令
                    this.$message({
                        message: '复制成功',
                        type: 'success'
                    })
                    oInput.remove()
                },

                clearImage(){
                    this.news={};
                },
                selectMsgUrl(x) {
                    console.log("选择发送消息！！！");
                    var that = this;
                    that.img_text_url = true;
                    that.dialog_loading = true,
                    that.img_text_url0 = "img_text_url1";
                    that.handleClickImgText();
                },


                // 图文弹出框里的tabs
                handleClickImgText() {
                    var that = this;
                    this.search_img_text = '';
                    if(that.img_text_url0 == "img_text_url1"){
                        that.dialog_loading=true,
                            that.$http.post("{!! yzWebFullUrl('plugin.min-app.Backend.Controllers.news.get-news') !!}",{}).then(response => {
                                console.log(response);
                                if(response.data.result==1){
                                    that.img_text_list = response.data.data.data;
                                    that.per_size = response.data.data.per_page;
                                    that.total = response.data.data.total;
                                    that.current_page = response.data.data.current_page;
                                    that.dialog_loading = false;
                                }
                                that.dialog_loading = false;
                            }),function(res){
                            console.log(res);
                            that.dialog_loading = false;
                        };
                    }
                    else if(that.img_text_url0 == "img_text_url2"){
                        that.dialog_loading=true,
                            that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.news.get-local-news') !!}",{}).then(response => {
                                console.log(response);
                                if(response.data.result==1){
                                    that.img_text_list = response.data.data.data;
                                    that.per_size = response.data.data.per_page;
                                    that.total = response.data.data.total;
                                    that.current_page = response.data.data.current_page;
                                    that.dialog_loading = false;
                                }
                                that.dialog_loading = false;
                            }),function(res){
                            console.log(res);
                            that.dialog_loading = false;
                        };
                    }
                },

                // 选择图文
                chooseImgTextUrl(index){
                    var that = this;
                    console.log(index,'选择图文')
                    console.log(that.img_text_list[index].has_many_wechat_news[0].url,'选择图文4444555')
                    that.news = {
                        'url':that.img_text_list[index].has_many_wechat_news[0].url,
                        'id':that.img_text_list[index].id,
                        'media_id':that.img_text_list[index].media_id,
                        'title':that.img_text_list[index].has_many_wechat_news[0].title,
                        'thumb_url':that.img_text_list[index].has_many_wechat_news[0].thumb_url,
                        'min_app':'/packageI/web-view/h5View'
                    }
                    that.img_text_url = false;
                    that.dialog_loading = false
                },

                // 微信图文分页
                currentChangeWechatTextImg(val){
                    var that = this;
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.min-app.Backend.Controllers.news.get-news') !!}',{page:val,search:this.search_img_text}).then(function (response){
                            console.log(response);
                            that.img_text_list = response.data.data.data;
                            that.per_size = response.data.data.per_page;
                            that.total = response.data.data.total;
                            that.current_page = response.data.data.current_page;
                            that.loading = false;
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                // 本地图文分页
                currentChangeLocalTextImg(val){
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.min-app.Backend.Controllers.news.index') !!}',{page:val,filename:this.search_img_text}).then(function (response){
                            console.log(response);
                            this.img_text_list = response.data.data.data;
                            this.per_size = response.data.data.per_page;
                            this.total = response.data.data.total;
                            this.current_page = response.data.data.current_page;
                            this.loading = false;
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },

                submitForm(formName) {
                    console.log(this.form)
                    let that = this;
                    let json = that.news;
                    console.log(json);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post('{!! yzWebFullUrl('plugin.min-app.Backend.Controllers.news.save') !!}',{data:json}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.min-app.Backend.Controllers.news.get-data') !!}",{}).then(function (response) {
                            if (response.data.result){
                                if(response.data.data) {
                                    console.log(response.data.data)
                                    this.news = {
                                        ...response.data.data
                                    }
                                    this.news.min_app = '/packageI/web-view/h5View'
                                }
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                goBack() {
                    history.go(-1)
                },



            },
        })

    </script>
@endsection