@extends('layouts.base')
@section('title', "图文审核")
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/wechat/src/common/static/index.css')}}">
<style>
    .top-title {
        background: #fff;
        margin: 10px;
        padding: 20px 0;
        border-radius: 10px;
    }

    .vue-main-title {
        padding: 0 20px 20px 20px;
    }

    .top-title .vue-main-title .el-button {
        border: 1px solid #25cbae;
        color: #25cbae;
        background: #f1fcfa;
    }

    .bottom-content {
        display: flex;
        flex-wrap: wrap;
        margin: 0 20px;
    }

    .context {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .member-img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
    }

    .member_nickname {
        color: #52c2e0;
        font-weight: bold;
        text-align: left;
    }

    .bottom-content div {
        margin-bottom: 10px;
    }

    .el-button {
        height: 40px;
    }

    .bottom-content .el-input {
        width: 200px;
        margin-right: 10px;
    }

    .bottom-content .block {
        margin-right: 10px;
    }

    .vue-main {
        border-radius: 10px;
        padding-left: 0;
    }

    /* .el-table__row .el-table_1_column_3 .cell {
        color: #13c7a7;
    } */

    .el-button:focus,
    .el-button:hover {
        color: #fff;
        border-color: #13c7a7;
        background-color: #13c7a7;
    }

    .reviewed {
        color: #e59133;
        font-weight: 500;
    }

    .publish {
        color: #13c7a7;
        font-weight: 500;
    }

    .upload-cover {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .upload-cover .el-input__inner {
        padding:0 !important;
    }

    .upload-cover .upload-box {
        width: 100px;
        height: 50px;
        display: flex;
        flex-direction: column;
    }

    .upload-cover .el-icon-plus {
        font-size: 18px;
    }

    .upload-cover .el-icon-link {
        font-size: 18px;
        margin: 0 10px;
    }

    .upload-cover .el-icon-delete-solid{
        font-size: 18px;
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <link rel="stylesheet" href="//at.alicdn.com/t/font_432132_zbfevy1oy.css">
        <div class="top-title">
            <div class="vue-main-title">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">发布审核</div>
                <el-button type="primary" style="background:#13c7a7;color:#fff" @click="syncPublic">同步公众号发表记录</el-button>
            </div>
            <div class="bottom-content">
                <el-input v-model="form.title" placeholder="请输入标题/关键词"></el-input>
                <el-select v-model="form.status" placeholder="发布状态" clearable>
                    <el-option :label="item.name" :value="item.value" v-for="(item,index) in send_state" :key="index"></el-option>
                </el-select>
                <div class="block">
                    <el-date-picker v-model="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-button @click="search(1)" style="background:#13c7a7;color:#fff" class="btn-style">搜索</el-button>
            </div>
        </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>
            <el-table :data="list_data" style="width: 100%">
                <el-table-column label="时间" align="center" prop="created_at"></el-table-column>
                <el-table-column label="发布内容" align="center">
                    <template slot-scope="scope">
                        <div v-for="(item,index) in scope.row.has_many_article" :key="index" class="context">
                            <el-image class="member-img" :src="item.thumb_url" fit="contain"></el-image>
                            <span class="member_nickname">[[item.title]]</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="发布状态" align="center">
                    <template slot-scope="scope">
                    <!-- 0待审核 -1已驳回 1已发布 -->
                        <span :class="scope.row.status === 0 ? 'reviewed' : scope.row.status === -1 ? '已驳回' : 'publish'">[[scope.row.status === 0 ? '待审核' : scope.row.status === -1 ? '已驳回' : '已发布']]</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div class="upload-cover" v-for="(item,index) in scope.row.has_many_article" :key="index" v-if="scope.row.has_many_article.length >= 0 && scope.row.status !== 0">
                            <div class="upload-box" @click="uploadImgCover(item.id)" v-if="!item.thumb_url && scope.row.status !== -1">
                                <i class="el-icon-plus"></i>
                                <span>上传封面</span>
                            </div>
                            <div @click="copy(`textUrl_${item.id}_${scope.row.id}`)">
                                <el-input v-model="item.url" :ref="`textUrl_${item.id}_${scope.row.id}`" style="width: 12px;height:1px;opacity: 0;"></el-input>
                                <i class="el-icon-link"></i>
                            </div>
                            <i class="el-icon-delete-solid" @click="delExamineRecord(item.examine_id,scope.row.article_id)"></i>
                        </div>
                        <div class="upload-cover" v-if="scope.row.has_many_article.length === 0 && scope.row.status !== 0">
                            <div class="upload-box" @click="uploadImgCover('')" v-if="scope.row.status !== -1">
                                <i class="el-icon-plus"></i>
                                <span>上传封面</span>
                            </div>
                            <div @click="copy('textNull')" v-if="scope.row.status !== -1">
                                <el-input ref="textNull" style="width: 1px;height:12px;opacity: 0;"></el-input>
                                <i class="el-icon-link"></i>
                            </div>
                            <i class="el-icon-delete-solid" @click="delExamineRecord('',scope.row.article_id)"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </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>
        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
    </div>
</div>
@include('public.admin.uploadImg')
<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                form: {
                    title: '',
                    status: ''
                },
                date: '',
                send_state: [{
                    value: 0,
                    name: '待审核'
                }, {
                    value: 1,
                    name: '已发布'
                }, {
                    value: -1,
                    name: '已驳回'
                }],
                list_data: [],
                current_page: 1,
                total: 1,
                per_page: 1,
                chooseImgName:'',
                uploadIndex:0,
                uploadShow:false,
            }
        },
        mounted() {
            this.getRecordData(1);
        },
        methods: {
            getRecordData(page) {
                this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.index') !!}", {
                    page,
                    ...this.form,
                    time_arr:[this.date !== null ? this.date[0] : '',this.date !== null ? this.date[1] : '']
                }).then(res => {
                    return res.json();
                }).then(response => {
                    if (response.result) {
                        // console.log(response,'response');
                        this.list_data = response.data.data
                        this.current_page = response.data.current_page;
                        this.total = response.data.total;
                        this.per_page = response.data.per_page;
                    } else {
                        console.log(123);
                        this.$message.error(response.msg);
                    }
                });
            },
            search(val) {
                this.getRecordData(val);
            },
            changeProp(val) {
                this.uploadShow = !val;
            },
            sureImg(name,image,image_url) {
                // console.log(this.uploadIndex,image_url,'image');
                this.uploadCover(this.uploadIndex,image_url)
            },
            uploadImgCover(index){
                this.uploadShow = true;
                this.uploadIndex = index;
            },
            // 同步公众号发表记录
            syncPublic(){
                this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.refresh') !!}", {examine_id:''}).then(res => {
                    return res.json();
                }).then(response => {
                    if (response.result) {
                        this.$message.success(response.msg);
                        location.reload();
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            },
            // 复制链接
            copy(indexUrl){
                let url = this.$refs[indexUrl];
                // console.log( this.$refs[indexUrl],indexUrl) // 改变了的值
                if(indexUrl == 'textNull') {
                    url.select(); // 选择对象
                }else {
                   url[0].select(); // 选择对象
                }
                document.execCommand("Copy",false);
                this.$message({message:"复制成功！",type:"success"});
            },
            // 上传封面
            uploadCover(id,thumb_url){
                this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.changeArticleImage') !!}", {id,thumb_url}).then(res => {
                    return res.json();
                }).then(response => {
                    if (response.result) {
                        this.$message.success(response.msg);
                        this.getRecordData(1);
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            },
            // 删除审核记录
            delExamineRecord(examine_id,article_id){
                this.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.material.controller.article.deleteArticle') !!}", {examine_id,article_id}).then(res => {
                    return res.json();
                }).then(response => {
                    if (response.result) {
                        this.$message.success(response.msg);
                        this.getRecordData(1);
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            }
        },
    })
</script>
@endsection