<template>
    <div class="page-body">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name"
                        v-model="msg.Type" ref="Id" :options="TypeList" label="类型" :dense="false" emit-value
                        map-options />
                </div>
                <div class="col-3">
                    <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name"
                        v-model="msg.AuditState" ref="Id" :options="StateList" label="状态" :dense="false" emit-value
                        map-options />
                </div>
                <div class="col-3">
                    <q-input @keyup.enter.native="changePage(1)" @clear="changePage(1)" clearable
                        filled v-model="msg.Title" label="输入标题内容" maxlength="20" />
                </div>
            </div>
        </div>
        <div class="page-content">
            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
                separator="none" title="" :data="data" :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <div class="col-2 q-table__title">图文素材</div>
                    <q-space />
                    <q-btn-dropdown color="accent" size="sm" class="q-mr-md" style="float:right;margin-right:0;"
                        label="新增创作">
                        <q-list>
                            <q-item clickable v-close-popup @click="goadd(x.Id)" v-for="(x,y) in  TypeList2" :key="y" v-if='x.Id!=3'>
                                <q-item-section>
                                    <q-item-label>{{x.Name}}</q-item-label>
                                </q-item-section>
                            </q-item>
                        </q-list>
                    </q-btn-dropdown>

                </template>
                <template v-slot:body-cell-CoverImagePath="props">
                    <q-td :props="props">
                        <el-image v-if="props.row.Type==1 || props.row.Type==5" style="width: 200px;height: 100px;padding: 10px 0 ;" :src="props.row.CoverImagePath" fit="cover"></el-image>
                        <div v-if="props.row.Type==4" style="width: 200px;height: 80px;display: flex;align-items: center;justify-content: center;background: #f6f7f8;">
                            <img src="../../../assets/images/Noticen.png" alt="" style="width: 41px;height: 39px;">
                        </div>
                        <!-- <div style="width: 200px;min-height: 80px;padding: 5px;background: #f6f7f8;display: inline-block;white-space:pre-wrap" v-if="props.row.Type==2" v-html="props.row.Description"></div> -->
                    </q-td>
                </template>
                <template v-slot:body-cell-Title="props">
                    <q-td :props="props">
                        <span>{{props.row.Title}}</span>
                        <div style="width: 200px;overflow: hidden ;max-height: 78px;display: inline-block;white-space:pre-wrap" v-if="props.row.Type==2" v-html="props.row.Description"></div>
                        <div v-if="props.row.Type==5" style="width: 200px;overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical; white-space:pre-wrap">{{props.row.Description}}</div>
                    </q-td>
                </template>
                <template v-slot:body-cell-IsSendCommission="props">
                    <q-td :props="props">
                        <div v-if="props.row.IsSendCommission==1 && props.row.CommissionMoney>0" style="color: red;">{{props.row.CommissionMoney}}</div>
                        <div v-else>-</div>
                    </q-td>
                </template>

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

                        <q-btn flat size="xs" icon="iconfont icon-view" style="font-weight:400;color: #3FC4FF" v-if="props.row.AuditState!=0"
                            class="q-mr-xs" label="查看流程" @click="goliucheng(props.row)" />
                        <q-btn v-if="props.row.AuditState==0 || props.row.AuditState==3" flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                            label="编辑" @click="goedit(props.row)" />
                       

                            <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px" v-if="props.row.AuditState==0 || props.row.AuditState==3">
                                <q-list>
                                  <q-item  clickable v-close-popup @click="tijiaosh(props.row)">
                                    <q-item-section >
                                      <q-item-label>提交审核</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                  <q-item clickable v-close-popup @click="goDetailed(props.row)">
                                    <q-item-section>
                                      <q-item-label>删除</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                 
                                </q-list>
                              </q-btn-dropdown>
                    </q-td>
                </template>
                <template v-slot:bottom>
                    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary"
                        :max="pageCount" :input="true" @input="changePage" />
                </template>
            </q-table>
        </div>
    </div>
</template>

<script>
    import {
        getContributeInfoTypeEnumList,
        getContributeInfoStateEnumList,
        getMyContributeInfoPageList,
        setContributeInfoState
    } from '../../../api/teacher/contribution';
    export default {
        meta: {
            title: "图文管理"
        },

        data() {
            return {
                loading: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    rowsPerPage: 15,
                    AuditState: "-1", //审核状态
                    Type: '-1',//类型
                    Title: '',//标题
                },
                TypeList: [],//类型
                TypeList2: [],//类型
                StateList: [],//状态
                data: [],
                pageCount: 0,
                columns: [{
                    name: 'Id',
                    label: 'Id',
                    field: 'Id',
                    align: 'left'
                },
                {
                    name: 'TypeName',
                    field: 'TypeName',
                    label: '类型',
                    align: 'left',
                },
                {
                    name: 'CoverImagePath',
                    field: 'CoverImagePath',
                    label: '封面图',
                    align: 'left'
                },
                {
                    name: 'Title',
                    field: 'Title',
                    label: '标题',
                    align: 'left'
                },
                {
                    name: 'AuditStateName',
                    field: 'AuditStateName',
                    label: '审核状态',
                    align: 'left'
                },
                {
                    name: 'UpdateByName',
                    field: 'UpdateByName',
                    label: '创建者',
                    align: 'left'
                },
                {
                    name: 'IsSendCommission',
                    field: 'IsSendCommission',
                    label: '稿酬',
                    align: 'left'
                },
                {
                    name: 'UpdateTime',
                    field: 'UpdateTime',
                    label: '创建时间',
                    align: 'left'
                },
                {
                    name: 'optioned',
                    label: '操作',
                    field: 'DeptId'
                }
                ],
            }
        },

        mounted() {
            this.getTypeList()
            this.getStateList()
            this.getList()
        },
        methods: {
            getTypeList() {
                getContributeInfoTypeEnumList({}).then(res => {
                    if (res.Code == 1) {
                        this.TypeList2 = JSON.parse(JSON.stringify(res.Data));
                        this.TypeList = res.Data;
                        let obj = {
                            Name: '不限',
                            Id: '-1',
                        }
                        this.TypeList.unshift(obj)
                    }
                }).catch(() => {

                })
            },
            getStateList() {
                getContributeInfoStateEnumList({}).then(res => {
                    if (res.Code == 1) {
                        this.StateList = res.Data;
                        let obj = {
                            Name: '不限',
                            Id: '-1',
                        }
                        this.StateList.unshift(obj)
                    }
                }).catch(() => {

                })
            },
            changePage(e) {
                this.msg.pageIndex = e
                this.getList()
            },
            getList() {
                this.loading = true
                getMyContributeInfoPageList(this.msg).then(res => {
                    if (res.Code == 1) {
                        this.loading = false
                        this.data = res.Data.PageData;
                        this.pageCount = res.Data.PageCount
                    }
                }).catch(() => {

                })
            },
            goDetailed(row) {//删除
                this.$q.dialog({
                    title: '提示信息',
                    message: '是否确定删除此内容？',
                    cancel: true,
                    persistent: true,
                    ok: "确定",
                    cancel: "取消",
                }).onOk(() => {
                    setContributeInfoState({ ContributeId: row.Id, Type: 2 }).then(res => {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.Message,
                            position: 'top'
                        })
                        this.getList()

                    })
                }).onCancel(() => {

                });
            },
            tijiaosh(row){//提交审核
                this.$q.dialog({
                    title: '提示信息',
                    message: '是否将素材提交审核？',
                    cancel: true,
                    persistent: true,
                    ok: "确定",
                    cancel: "取消",
                }).onOk(() => {
                    setContributeInfoState({ ContributeId: row.Id, Type: 1 }).then(res => {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.Message,
                            position: 'top'
                        })
                        this.getList()
                    })
                }).onCancel(() => {

                });
            },
            goedit(row){//编辑
                this.OpenNewUrl("/teacher/contribution/addimageText", {
                    type: row.Type,
                    Id:row.Id
                });
            },
            goadd(type) {//新增

                this.OpenNewUrl("/teacher/contribution/addimageText", {
                    type: type
                });
            },
            goliucheng(item){//查看流程
                this.OpenNewUrl("/teacher/change-class-manager", {
                    ReceiptType: 10,
                    RelationId:item.Id

                });
            },
            
        }
    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>