<template>
    <div id="root">
        <select-building v-model="buildingId" @change="getBuildingIntentionList"></select-building>

        <div class="intention-box">
            <el-row class="marginTB">
                <el-col :span="6">用户操作</el-col>
                <el-col :span="12">意向值</el-col>
            </el-row>
            <el-row class="marginTB" v-for="(item, index) in  list" :key="item.eventId">
                    <el-col :span="6"><el-checkbox v-model="item.checkbox">{{ item.eventName }}</el-checkbox></el-col>
                    <el-col :span="12"><el-input v-model="list[index].intention" type="number"></el-input></el-col>
            </el-row>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    export default {
        name: "Intention",
        data() {
            return {
                list: [],
                buildingId: ''
            }
        },
        mounted() {
            // 默认选中的第一个项目
            this.buildingId = this.buildings[0].buildingId
            this.getBuildingIntentionList()
        },
        computed: {
            ...mapState({
                buildings: s => s.buildings || [],
            }),
        },
        methods: {
            getBuildingIntentionList() { // 获取意向列表和已经保存到意向值

                this.$store.dispatch('building/getBuildingIntention', { pageNum: 1, pageSize: 9999, buildingId: this.buildingId }).then((res) => {
                    this.list = res.records
                }).catch((err) => {
                    this.$notify.error(err.msg || err.message)
                })
            },
            onSubmit() {
                this.$store.dispatch('building/saveOrUpdateBatchBuildingIntention',{ list: this.list, buildingId: this.buildingId }).then((res) => {
                    this.$notify.message("操作成功！")
                }).catch((err) => {
                    this.$notify.error(err.msg || err.message)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .intention-box {
        width: 60%;
        min-width: 400px;
        margin: 0 auto;
    }

    .marginTB {
        & + .marginTB {
            margin-top: 24px;
        }
    }
</style>