<template>
    <div class="container">

        <div class="card">

            <searchForm :keys="['type']" ref="searchForm"
                        @on-search="handleSearch">
                <el-button type="primary" icon="el-icon-plus" plain size="small" @click="addNotice" >新增</el-button>
            </searchForm>

            <RxTable
                    ref="rxTable"
                    @sizeChange="changePageSize"
                    @pageChange="changePage"

                    :currentPage="pageInfo.page"
                    :pageSize="pageInfo.pageSize"
                    :page-count="listData.pageQuantity"
                    :data="listData.list"
                    :blank-col="true"
                    :loading="loading"
            >
                <el-table-column
                        :align="item.align || 'left'"
                        :prop="item.prop"

                        :label="item.label"
                        :key="item.id"
                        v-for="(item) in tableHeader"
                        :show-overflow-tooltip="true"
                        :width="item.width"
                        :min-width="item.minWidth"
                >
                    <template slot-scope="scope">
                        <div v-if="item.prop == 'flag'" style="height: 36px;">
                            <el-image fit="fill" :src="scope.row[item.prop]" style="height: 36px;width: 80px;"></el-image>
                        </div>

                        <div v-else-if="item.prop == 'tvCounts'">
                            <el-tag size="small" style="width: 50px;text-align: center;" @click="goTvList(scope.row)">{{scope.row[item.prop]}}</el-tag>
                        </div>
                        <span v-else>{{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-search" @click="handleInfo(scope.row)">查看</el-button>
                        <el-button type="text" class="btn_text_edit" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑 </el-button>
                    </template>
                </el-table-column>
            </RxTable>
        </div>
        <el-dialog
                title="发布内容"
                :visible.sync="dialogVisible"
                width="1200px"
                :lock-scroll="false">
            <noticeForm ref="noticeForm" v-if="dialogVisible"></noticeForm>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit('add')">确 定</el-button>
                </span>
        </el-dialog>
        <el-dialog
                title="编辑内容"
                :visible.sync="dialogVisibleUpdate"
                width="1200px"
                :lock-scroll="false">
            <noticeForm ref="noticeForm" v-if="dialogVisibleUpdate"></noticeForm>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit('edit')">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import searchForm from "@/components/searchForm";
    import RxTable from "@/components/RxTable";
    import noticeForm from "./module/noticeForm";


    export default {
        name: "index",
        components: {
            searchForm,
            RxTable,
            noticeForm
        },
        data() {
            return {

                searchParams: {},
                loading: false,
                dialogVisible: false,
                tableHeader: [
                    {
                        prop: "title",
                        label: "通知标题",
                        width: "200"
                    },
                    {
                        prop: "secondTitle",
                        label: "副标题",
                        width: "200"
                    },
                    {
                        prop: "content",
                        label: "内容",
                        width: "300"
                    },
                    {
                        prop: "publishTime",
                        label: "发布时间",
                        width: "120"
                    },

                ],
                listData: {
                    list: [],
                    pageQuantity:0,
                },
                pageInfo: {
                    pageNum: 1,
                    pageCapacity: 10,
                },
                addVisible: false,
                dialogVisibleUpdate: false,
            }
        },
        methods: {
            addNotice(){
                this.dialogVisible = true;
            },
            handleInfo(row){
                console.log(row)
                this.$router_({
                    name:"noticeInfo",
                    title:"消息详情",
                    canClose:true,
                    params:{
                        id:row.id
                    }
                })

            },
            handleEdit(row) {
                console.log(row)
                this.dialogVisibleUpdate = true;
                this.$nextTick(() => {
                    this.$refs.noticeForm.form = JSON.parse(JSON.stringify(row));
                    // this.$refs.noticeForm.setContext();
                })

            },



            onSubmit(type="add") {

                this.$refs.noticeForm.getContent();

                let form = JSON.parse(JSON.stringify(this.$refs.noticeForm.form));



                console.log(type)


                if(type =="add"){
                    delete form.id;
                    this.$api.addNotice(form).then(res => {
                        this.$message.success("新增成功！");
                        this.dialogVisible = false;
                        this.handleSearch();
                    })
                }else{
                    this.$api.editNotice(form).then(res => {
                        this.$message.success("编辑成功！");
                        this.dialogVisibleUpdate = false;
                        this.handleSearch();
                    })
                }

            },

            goDeleteSelect() {

            },
            //搜索
            handleSearch() {
                this.pageInfo.pageNum = 1

                this.noticeList()
            },

            //国家list
            noticeList() {

                let type = this.$refs.searchForm.form.type;
                this.searchParams = {
                    ...this.pageInfo,
                    type
                }

                this.loading = true;

                this.$api.noticeList(this.searchParams).then(res => {
                    this.loading = false;
                    console.log(res)
                    this.listData.list = res.content.list

                    this.listData.pageQuantity = res.content.pageQuantity;

                })
            },


            changePageSize() {

            },
            changePage(page) {

                this.pageInfo.pageNum = page
                this.noticeList()
            },

        },
        mounted() {
            this.handleSearch()
        }
    }
</script>

<style lang="less" scoped>
    .container {
        /*position: relative;*/

        .btnBox {
            margin-left: 20px;
        }
    }
</style>
