<template>
    <div class="epidemic">
        <el-card class="searchList">
            <el-tree class="name" :data="txmList" :props="defaultProps" :highlight-current="true" :accordion="true"
                :expand-on-click-node="true" @node-click="checkClick" ref="tree">
                <span class="custom-tree-node" slot-scope="{ node }">
                    <span :title="node.label" :v-text="node.label">{{ node.label }}</span>
                </span>
            </el-tree>
        </el-card>
        <el-card class="dataList" v-if="this.placeCode">
            <el-card class="searchForm">
                <div>{{placeName}}</div>
                <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
                    <el-form-item label="姓名">
                        <el-input style="width:100px;" v-model="searchForm.name" placeholder="请输入姓名"
                            @keyup.enter.native="onSubmit">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input style="width:150px;" v-model="searchForm.mobile" placeholder="请输入电话号码"
                            @keyup.enter.native="onSubmit">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input style="width:180px;" v-model="searchForm.idCard" placeholder="请输入身份证号"
                            @keyup.enter.native="onSubmit">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="上报类型">
                        <el-select v-model="searchForm.type" placeholder="请选择上报类型" style="width: 150px;"
                            @change="onSubmit">
                            <el-option v-for="item in typeList" :key="item.type" :label="item.name" :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <div class="table">
                <table-template :indexShow="true" :tableData="tableData" :tableColumns="tableColumns" :loading="loading"
                    :pagination="pagination" @Jump="jumpPage">
                    <el-table-column slot="userType" label="上报来源" width="150" align="center">
                        <template slot-scope="scope">
                            <el-tag>{{scope.row.userType == 0 ? '镇合意' : scope.row.userType == 1 ? '微信' : '支付宝'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                </table-template>
            </div>
            <div class="tips" style="color: #F56C6C;">* 仅保留最近14天的数据</div>
        </el-card>
        <el-card class="empty" v-else>
            <el-empty :image-size="250" description=" "></el-empty>
            <div class="description">请选择左侧场所通行码~</div>
        </el-card>
    </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { changeList } from "@/utils";
import { queryUserAuthCode, authQueryListUploadUser } from '@/api/epidemic.js'
export default {
    components: { TableTemplate },

    data() {
        return {
            txmList: [],
            defaultProps: {
                children: "data",
                label: "areaName",
            },
            placeCode: '',
            placeName: '',
            searchForm: {
                name: '',
                mobile: '',
                idCard: '',
                type: 1
            },
            typeList: [
                {
                    type: 0,
                    name: '镇合意'
                }, {
                    type: 1,
                    name: '小程序'
                }
            ],
            tableData: [],
            tableColumns: [
                {
                    key: "name",
                    label: "用户姓名",
                    width: 100,
                }, {
                    key: "mobile",
                    label: "电话号码",
                    width: 120,
                }, {
                    key: "idCard",
                    label: "身份证号",
                    width: 180,
                }, {
                    key: "areaName",
                    label: "辖市区",
                    width: 100,
                }, {
                    key: "detailAddress",
                    label: "详细地址",
                    width: 200,
                }, {
                    key: "placeName",
                    label: "场所名称",
                    width: 200,
                }, {
                    key: "placeType",
                    label: "场所类型",
                    width: 150,
                }, {
                    key: "userType",
                    label: "上报来源",
                    type: "slot"
                }, {
                    key: "createTime",
                    label: "上报时间",
                    width: 180,
                },
            ],
            loading: false,
            pagination: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            },
        }
    },
    methods: {
        init() {
            queryUserAuthCode({ name: localStorage.getItem('userName') }).then((res) => {
                if (res.success) {
                    this.txmList = this.groupArr(res.data).map(item => {
                        if (item.data && item.data.length > 0) {
                            item.data.map((el) => {
                                el.areaName = el.address + el.placeName
                                return el
                            })
                        }
                        return item
                    })
                }
            })
        },
        // 根据市区分组
        groupArr(arr) {
            var map = {},
                dest = [];
            for (var i = 0; i < arr.length; i++) {
                var ai = arr[i];
                if (!map[ai.areaName]) {
                    dest.push({
                        areaName: ai.areaName,
                        data: [ai]
                    });
                    map[ai.areaName] = ai;
                } else {
                    for (var j = 0; j < dest.length; j++) {
                        var dj = dest[j];
                        if (dj.areaName == ai.areaName) {
                            dj.data.push(ai);
                            break;
                        }
                    }
                }
            }
            return dest
        },
        checkClick(obj) {
            if (obj.code) {
                this.placeCode = obj.code
                this.placeName = obj.areaName
                this.initData()
            }
        },
        initData() {
            let params = {
                name: this.searchForm.name,
                mobile: this.searchForm.mobile,
                idCard: this.searchForm.idCard,
                type: this.searchForm.type,
                permitCode: this.placeCode,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                authUser: localStorage.getItem('userName')
            }
            authQueryListUploadUser(params).then((res) => {
                if (res.success) {
                    this.pagination.total = JSON.parse(res.data).data.total;
                    this.tableData = JSON.parse(res.data).data.list
                    if (localStorage.getItem('userName') == 'admin') {
                        this.tableData = changeList(this.tableData)
                    }
                }
            })
        },
        onSubmit() {
            this.pagination.currentPage = 1;
            this.initData()
        },
        jumpPage() {
            this.initData()
        }
    },
    created() {
        this.placeCode = ''
        this.init()
    },
}
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
<style lang="stylus" scoped>
.epidemic{
    height: calc(100vh - 100px);
    display: flex;
    justify-content: space-between;
    .searchList{
        width 20%;
        height: 100%;
        overflow: auto;
        .name{
            overflow: auto;

        }
    }
    .dataList{
        width 79%;
        overflow: auto;
        .table{
            // max-height: calc(100vh - 350px);
            margin-top: 20px;
            // overflow: auto;
        }
    }
    .empty{
        width 79%;
        display: flex;
        align-items: center;
        justify-content: center;
        .description{
            margin-bottom: 80px;
            font-size: 24px;
        }
    }
}
    
    
</style>