<template>
    <div id="root">
        <div class="operation-class">
           <el-button type="primary" @click="ediNewsType">新增</el-button>
            &nbsp;
            <el-select v-model="form.buildingId" placeholder="项目" @change="getChangeList">
                <el-option
                        v-for="item in buildingList"
                        :key="item.buildingId"
                        :label="item.buildingName"
                        :value="item.buildingId">
                </el-option>
            </el-select>
            &nbsp;
            <el-select v-model="form.newsTypeId" placeholder="资讯类型" @change="getList">
                <el-option
                        v-for="item in typeList"
                        :key="item.newsTypeId"
                        :label="item.newsTypeName"
                        :value="item.newsTypeId">
                </el-option>
            </el-select>
            &nbsp;
            <el-select v-model="form.newsStatus" placeholder="状态" @change="getList">
                 <el-option
                            v-for="item in optionNewsStatus"
                            :key="item.newsStatus"
                            :label="item.name"
                            :value="item.newsStatus">
                 </el-option>
            </el-select>
        </div>
        <div class="body">
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="newsImg"
                        label="资讯主图"
                        align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.newsImg" width="50" height="50"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="newsName"
                        label="标题"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="newsType.newsTypeName"
                        label="资讯类型"
                        align="center">

                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="发布时间"
                        align="center">
                    <template slot-scope="scope">{{ formateDate(scope.row.createDate) }}</template>
                </el-table-column>
                <el-table-column
                        prop="pvNum"
                        label="阅读量"
                        align="center">
                    <template slot-scope="scope">{{ scope.row.pvNum || 0 }}</template>
                </el-table-column>
                <el-table-column
                        prop="shareNum"
                        label="转发数"
                        align="center">
                    <template slot-scope="scope">{{ scope.row.shareNum || 0 }}</template>
                </el-table-column>
                <el-table-column
                        prop="favorNum"
                        label="点赞数"
                        align="center">
                    <template slot-scope="scope">{{ scope.row.favorNum || 0 }}</template>
                </el-table-column>
                <el-table-column
                        prop="saveNum"
                        label="收藏数"
                        align="center">
                    <template slot-scope="scope">{{ scope.row.saveNum || 0 }}</template>
                </el-table-column>
                <el-table-column
                        prop="newsStatus"
                        label="状态"
                        align="center">
                    <template slot-scope="scope">{{ scope.row.newsStatus === 0 ? '已发布' : '未发布' }}</template>
                </el-table-column>
                <el-table-column
                        prop="newsTypeId"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <router-link :to="{ name:'news-edi', query: { id: scope.row.newsId } }">编辑</router-link>
                        <a href="javascript:void(0);" @click="deleteNews(scope.row.newsId)" class="delClass">删除</a>
                        <a href="javascript:void(0);" @click="releaseNews(scope.row)" class="delClass">{{ scope.row.newsStatus === 0 ? '取消发布' : '发布' }}</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-sizes="[1, 10, 20, 30, 40]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    export default {
        name: "newsIndex",
        data() {
            return {
                buildingList: [],
                form: {
                    buildingId: '',
                    pageNum: 1,
                    pageSize: 10,
                    newsTypeId: '',
                    newsStatus: ''
                },
                buildingForm: {
                    pageNum: 1,
                    pageSize: 100
                },
                total: 0,
                list: [],
                typeList: [],
                typeForm: {
                    buildingId: '',
                    pageNum: 1,
                    pageSize: 100
                },
                optionNewsStatus: [
                    {
                        name: '已发布',
                        newsStatus: 0
                    },
                    {
                        name: '未发布',
                        newsStatus: 1
                    }
                ],
            }
        },
        created() {
          this.getList()
          this.getBuildList()
          this.getTypeList()
        },
        methods: {
            formateDate(dt) {
                return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
            },
            deleteNews(id) {
                // 删除操作
                const data = { newsId: id }
                this.$store.dispatch('news/delete', data).then((res) => {
                    this.getList()
                }).catch(() => {
                    console.log('news/delete err');
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.form.pageSize = val
                this.form.pageNum = 1
                this.getList()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.form.pageNum = val
                this.getList()
            },
            getChangeList() { // 项目change事件
                this.getList()
                this.getTypeList()
            },
            getList() {
              this.$store.dispatch('news/getList', this.form).then((res) => {
                this.list = res.records
                this.form.pageNum = res.current
                this.form.pageSize = res.size
                this.total = res.total
              }).catch(() => {
                  console.log('news/getList err')
              })
            },
            getBuildList() {
                this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
                    this.buildingList = res.records
                }).catch(() => {
                    console.log('building/getBuildings err')
                })
            },
            ediNewsType() {
                this.$router.push({ name: 'news-edi' })
            },
            releaseNews(news) {
                news.newsStatus = news.newsStatus === 0 ? 1 : 0
                // 修改
                this.$store.dispatch('news/update', news).then((res) => {
                    this.$message.success('操作成功！')
                    this.getList()
                    // console.log(res)
                }).catch(() => {
                    console.log('news/updateType err')
                })
            },
            getTypeList() {
                this.typeForm.buildingId = this.form.buildingId
                this.$store.dispatch('news/getTypeList', this.typeForm).then((res) => {
                    this.typeList = res.records
                }).catch((err) => {
                    this.$notify.error(err.msg || err.message);
                    console.log('news/getTypeList err')
                })
            },
        }
    }
</script>

<style scoped>
.operation-class {
    margin-left: 20px;
}
.body {
    margin-top: 10px;
}
.block {
    display: flex;
    justify-content: flex-end;
}
.delClass {
    padding-left: 10px;
}
</style>