<template>
    <div class="textmaterial" style="padding: 0;margin: 0;">

        <div class="page-content">
            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table no-bottom-table" :wrap-cells='true'
                separator="none" title="" :data="dataList" :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <div class="col-2 q-table__title"></div>
                    <q-space />
                    <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add"
                        label="添加文本" @click="goadd()"></q-btn>
                </template>
                <template v-slot:body-cell-title="props">
                    <q-td :props="props" style="max-width: 200px;white-space:	normal;word-break:break-all">
                       <span>{{props.row.TextModel && props.row.TextModel.Title?props.row.TextModel.Title:''}}</span>
                    </q-td>
                </template>
                <template v-slot:body-cell-Content="props">
                    <q-td :props="props" style="max-width: 500px;white-space:	normal;word-break:break-all">
                        <span>{{props.row.TextModel && props.row.TextModel.Content?props.row.TextModel.Content:''}}</span>
                    </q-td>
                </template>
                <template v-slot:bottom>
                    <!-- <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary"
                        :max="msg.PageCount" :input="true" @input="changePage" /> -->
                </template>
              

                <template v-slot:body-cell-optioned="props">
                    <q-td :props="props">

                        <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                            label="编辑" @click="goedits(props.row)" />
                        <q-btn flat size="xs" icon="iconfont icon-yidongdao" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                            label="移动" @click="plmove(props)" />
                        <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs"
                            label="删除" @click="goDetailed(props.row)" />
                    </q-td>
                </template>
             
            </q-table>
        </div>
        <div v-if="Isadd==true">
            <alladdsc :allclassifyList="allclassifyList" type='1' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
        </div>
       
    </div>
</template>

<script>
    import {
        delWecharMediumInfo,//删除素材
    } from '../../../api/system/wechat';
    import alladdsc from './allAddSC'
    export default {
        name: "textmaterial",
        components: {
            alladdsc,
        },
        props: {
            dataList: {
                type: Array,
                default: [],
            },
            allclassifyList:{
                type: Array,
                default: [],
            }
        },
        data() {
            return {
                loading: false,
                Isadd: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    rowsPerPage: 10,
                },
                //公告column
                columns: [{
                    name: 'title',
                    field: 'title',
                    label: '标题',
                    align: 'left'
                },
                {
                    name: 'Content',
                    field: 'Content',
                    label: '内容',
                    align: 'left',
                },
                {
                    name: 'UpdateByName',
                    field: 'UpdateByName',
                    label: '上传者',
                    align: 'left'
                },
                {
                    name: 'MediumGroupName',
                    field: 'MediumGroupName',
                    label: '分组',
                    align: 'left'
                },
                {
                    name: 'TypeName',
                    field: 'TypeName',
                    label: '类型',
                    align: 'left'
                },
                {
                    name: 'UpdateTime',
                    field: 'UpdateTime',
                    label: '添加时间',
                    align: 'left'
                },
                {
                    name: 'optioned',
                    label: '操作',
                    field: 'DeptId'
                }
                ],
              
                editobj: null

            }
        },
        created() {
            
        },
        methods: {
            changePage(e) {

            },
            goadd() {
                this.Isadd = true
                this.editobj=null
            },
            getchildren(){
                this.$emit('editsuccess')
                this.Isadd = false
            },
            goedits(row){
                this.editobj= {}
                this.editobj.Id = row.Id;
                this.editobj.MediaGroupId = row.MediaGroupId;
                this.editobj.Type = row.Type;
                this.editobj.TextModel = JSON.parse(JSON.stringify(row.TextModel)) ;
                this.Isadd = true
            },
            goDetailed(row){//删除
                let delMsg = {
                    MediumIds: row.Id,
                };
                this.$q.dialog({
                    title: '提示信息',
                    message: '是否确定删除该素材？',
                    cancel: true,
                    persistent: true,
                    ok: "确定",
                    cancel: "取消",
                }).onOk(() => {
                    delWecharMediumInfo(delMsg).then(res => {
                        if (res.Code == 1) {
                            this.$q.notify({
                                icon: 'iconfont icon-chenggong',
                                color: 'accent',
                                timeout: 2000,
                                message: '删除成功！',
                                position: 'top'
                            })
                            this.$emit('editsuccess')
                        }
                    })
                }).onCancel(() => {

                });
            },
            plmove(row){
                this.dataList[row.rowIndex].check = !this.dataList[row.rowIndex].check
                this.$emit('getmove')
            }
        }
    }

</script>

<style>
    .textmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
        background-color: red;
        border: 0;
    }

    .textmaterial .state-item {
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        font-size: 10px;
    }

    .textmaterial .frIdlist {
        padding: 3px 10px;
        border-radius: 3px;
        background: #EEEEEF;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .class-popover .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .textmaterial .el-date-editor.el-input {
        width: 100%;
    }

    .textmaterial .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .textmaterial .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .textmaterial .el-drawer.rtl {
        overflow: inherit;
    }
</style>