<template>
    <div class="main">
        <div class="search">
            <el-radio-group v-model="mixins_query.categoryId" @change="mixins_search" class="zz-tab-button">
                <el-radio-button :label="1">水费</el-radio-button>
                <el-radio-button :label="2">电费</el-radio-button>
            </el-radio-group>
            <el-input class="search-input" v-model="mixins_query.name" placeholder="输入设备编号/名称/地址"></el-input>
            <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-select v-model="mixins_query.operationType" placeholder="选择操作类型" clearable>
                <el-option label="关阀" :value="0"></el-option>
                <el-option label="开阀" :value="1"></el-option>
            </el-select>
            <el-date-picker
                v-model="times"
                value-format="yyyyMMdd"
                type="daterange"
                range-separator="至"
                start-placeholder="选择开始日期"
                end-placeholder="选择结束日期"
                @change="effectiveDateToggle"
            ></el-date-picker>
            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
            <template slot-scope="scope" slot="opt">
                <div class="opt">
                    <el-tooltip class="item" effect="light" placement="bottom" content="详情">
                        <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
                    </el-tooltip>
                </div>
            </template>
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';

export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '地址',
                    prop: 'address'
                },
                {
                    label: '设备编号',
                    prop: 'deviceNo'
                },
                {
                    label: '设备名称',
                    prop: 'deviceName'
                },
                {
                    label: '用途',
                    prop: 'useType',
                    format(val, data) {
                        return val == 1 ? '房间表' : '公摊表';
                    }
                },
                {
                    label: '操作类型',
                    prop: 'operationType',
                    format(val, data) {
                        let name = '';
                        if (_this.mixins_query.categoryId === 1) {
                            name = '阀';
                        } else {
                            name = '闸';
                        }

                        switch (val) {
                            case 0:
                                return '关' + name;
                            case 1:
                                return '开' + name;
                            default:
                                return '-';
                        }
                    }
                },
                {
                    label: '操作原因',
                    prop: 'operationCause'
                },
                {
                    label: '操作结果',
                    prop: 'operationResult',
                    format(val, data) {
                        switch (val) {
                            case 0:
                                return '发送';
                            case 1:
                                return '超时';
                            case 2:
                                return '成功';
                            case 3:
                                return '失败';
                            default:
                                return '-';
                        }
                    }
                },
                {
                    label: '操作时间',
                    prop: 'operationDate'
                },
                {
                    label: '执行时间',
                    prop: 'finishDate'
                },
                {
                    label: '操作员',
                    prop: 'createBy'
                }
            ],
            accountType: 2,
            mixins_post: 'get',
            communityArr: [],
            times: []
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-energy/device/command/page';
        this.mixins_query.categoryId = 1;
        this.mixins_search();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startDate = arr[0];
            this.mixins_query.endDate = arr[1];
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
}
</style>