<!--
 * @Date: 2021-07-08 11:02:40
 * @LastEditTime: 2022-07-27 10:48:43
 * @Description: 列表查询demo
-->
<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="标题" class="filter-item"
                    @keyup.enter.native="crud.toQuery" />
                    <el-select v-model="query.tag" clearable placeholder="类型"  class="filter-item">
                        <el-option label="XR" value="XR"></el-option>
                        <el-option label="Web3" value="Web3"></el-option>
                        <el-option label="AI" value="AI"></el-option>
                    </el-select>

                <el-date-picker  v-model="query.sendDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date-item" style="width:300px !important; margin: 0 3px 10px 0;"></el-date-picker>

                <rrOperation />
            </div>
            <div>
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
                    @click="openSave()">新增</el-button>
            </div>
        </div>

        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
            <el-table-column :show-overflow-tooltip="true" align="center" prop="title" label="标题" />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="subTitle" label="副标题" />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="detail" label="详情" />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.image" width="50px" />
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" prop="image" label="视频地址" />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="tag" label="类型" />
            <el-table-column :show-overflow-tooltip="true" align="center" prop="sendDate" label="发布时间">
                <template slot-scope="scope">
                    {{ $moment(scope.row.sendDate).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="发布状态">
                <template slot-scope="scope">
                    {{  scope.row.status === 1 ? '未发布' : '已发布' }}
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" align="center" prop="status" label="是否置顶">
                <template slot-scope="scope">
                    {{  scope.row.first === 1 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="230" align="center" fixed="right">
                <template slot-scope="scope" class="btn">
                    <el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>

                    <el-popover placement="top" width="200" :ref="`first-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 0 ">
                        <p>是否确认置顶该数据？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini"
                                @click="scope._self.$refs[`first-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="first(scope)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini" style="margin-left:10px">置顶</el-button>
                    </el-popover>
                    <el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 2 && scope.row.first === 1 ">
                        <p>是否确认取消置顶该数据？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini"
                                @click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="cancelfirst(scope)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini" style="margin-left:10px">取消置顶</el-button>
                    </el-popover>
                    <el-popover placement="top" width="200" :ref="`status-${scope.$index}`" v-if="scope.row.status === 1">
                        <p>是否确认发布该数据？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini"
                                @click="scope._self.$refs[`status-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="statusFn(scope)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini" style="margin-left:10px">发布</el-button>
                    </el-popover>
                    <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
                        <p>是否确认删除该数据？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini"
                                @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />

        <!-- 新增修改弹窗 -->
        <el-dialog v-if="dialogVisible" title="元宇宙" :visible.sync="dialogVisible" append-to-body width="60%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="副标题" prop="subTitle">
                    <el-input v-model="ruleForm.subTitle"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="tag">
                    <el-select v-model="ruleForm.tag" clearable placeholder="类型">
                        <el-option label="XR" value="XR"></el-option>
                        <el-option label="Web3" value="Web3"></el-option>
                        <el-option label="AI" value="AI"></el-option>
                    </el-select>
                </el-form-item>
               
                <el-form-item label="详情" prop="detail">
                    <ueditor :come-content="ruleForm.detail" @editorChange="editorChange($event)"></ueditor>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <uploadFile :url.sync="ruleForm.image" type="image" width="400" height="300"/>
                    <el-button type="danger" @click="ruleForm.image = ''">删除</el-button>
                    <p style="color: #909399;">*请上传400*300的图片</p>
                </el-form-item>
                <el-form-item label="视频" prop="video">
                    <uploadFile :url.sync="ruleForm.video" type="video"  tip="横屏视频"/>
                    <el-button type="danger" @click="ruleForm.video = ''">删除</el-button>
                </el-form-item>
                <el-form-item label="视频封面" prop="videoImage">
                    <uploadFile :url.sync="ruleForm.videoImage" type="image" width="1300" height="940"/>
                    <el-button type="danger" @click="ruleForm.videoImage = ''">删除</el-button>
                    <p style="color: #909399;">*请上传1300*940的图片</p>
                </el-form-item>
                <el-form-item label="发布时间" prop="sendDate">
                    <el-date-picker
                    v-model="ruleForm.sendDate"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择发布时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { save, del, first, cancelfirst } from '@/api/news'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
import rrOperation from '@crud/RR.operation'
import ueditor from '@/components/ueditor'

export default {
    components: { rrOperation, pagination, uploadFile, ueditor },
    mixins: [presenter(), header(), crud()],
    data() {
        return {
            dialogVisible: false,
            ruleForm: {
                type: 3,
                subType: 32,
                title: '',
                subTitle: '',
                detail: '',
                image: '',
                video: '',
                sendDate: '',
                status: '',
                tag: 'XR',
                videoImage: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ]
            },
            loadingBtn: false
        }
    },
    cruds() {
        return CRUD({ title: '列表', url: '/news/list', query: {}})
    },
    methods: {
        /* 刷新前操作 */
        [CRUD.HOOK.beforeRefresh]() {
            this.query.sendDateBegin = this.query.sendDate ? this.query.sendDate[0] : ''
            this.query.sendDateEnd = this.query.sendDate ? this.query.sendDate[1] : ''
            this.query.type = 3
            this.query.subType = '32'
        },
        openSave(item) {
            this.ruleForm.id = item?.id || ''
            this.ruleForm.image = item?.image || ''
            this.ruleForm.title = item?.title || ''
            this.ruleForm.subTitle = item?.subTitle || ''
            this.ruleForm.detail = item?.detail || ''
            this.ruleForm.video = item?.video || ''
            this.ruleForm.detail = item?.detail || ''
            this.ruleForm.tag = item?.tag || 'XR'
            this.ruleForm.videoImage = item?.videoImage || ''
            this.ruleForm.sendDate = item?.sendDate ? this.$moment(item.sendDate).format('YYYY-MM-DD HH:mm:ss') : ''
            this.dialogVisible = true
        },
        close(tag) {
            if (tag) this.crud.toQuery()
            this.dialogVisible = false
        },
        /* 删除 */
        del(scope) {
            del(scope.row.id).then(res => {
                this.$message({
                    message: '删除成功！',
                    type: 'success'
                })
                this.crud.toQuery()
                scope._self.$refs[`del-${scope.$index}`].doClose()
            })
        },
        first(scope) {
            first(scope.row.id).then(res => {
                this.$message({
                    message: '操作成功！',
                    type: 'success'
                })
                this.crud.toQuery()
                scope._self.$refs[`first-${scope.$index}`].doClose()
            })
        },
        cancelfirst(scope) {
            cancelfirst(scope.row.id).then(res => {
                this.$message({
                    message: '操作成功！',
                    type: 'success'
                })
                this.crud.toQuery()
                scope._self.$refs[`cancelfirst-${scope.$index}`].doClose()
            })
        },
        statusFn(scope) {
            let data = {
                id: scope.row.id,
                status: 2
            }
            save(data).then(res => {
                this.$message({
                    message: '发布成功！',
                    type: 'success'
                })
                this.crud.toQuery()
                scope._self.$refs[`status-${scope.$index}`].doClose()
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true
                    save(this.ruleForm).then(res => {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        })
                        this.loadingBtn = false
                        this.dialogVisible = false
                        this.$refs[formName].resetFields()
                        this.crud.toQuery()
                    }).catch(() => {
                        this.loadingBtn = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        editorChange(e) {
             this.$set(this.ruleForm, 'detail', e)
        }
    }
}
</script>
