<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="getList">
                <el-option
                        v-for="item in buildingList"
                        :key="item.buildingId"
                        :label="item.buildingName"
                        :value="item.buildingId">
                </el-option>
            </el-select>
        </div>
        <div class="body">
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="类型图"
                        align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.newsTypeImg" width="50" height="50"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="newsTypeName"
                        label="名称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="newsTypeId"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <router-link :to="{ name:'news-type-edi', query: { id: scope.row.newsTypeId } }">编辑</router-link>
                        <a href="javascript:void(0);" @click="deleteNews(scope.row.newsTypeId)" class="delClass">删除</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>
    export default {
        name: "newsTypeIndex",
        data() {
            return {
                buildingList: [],
                form: {
                    buildingId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                buildingForm: {
                    pageNum: 1,
                    pageSize: 100
                },
                total: 0,
                list: []
            }
        },
        created() {
          this.getList()
          this.getBuildList()
        },
        methods: {
            deleteNews(id) {
                // 删除操作
                const data = { newsTypeId: id }
                this.$store.dispatch('news/deleteType', data).then((res) => {
                    this.getList()
                }).catch(() => {
                    console.log('news/deleteType err');
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.pageNum = 1
                this.getList()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.getList()
            },
            getList() {
              this.$store.dispatch('news/getTypeList', 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/getTypeList 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-type-edi' })
            }
        }
    }
</script>

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