<template>
    <div class="page">
        <headNav title="新增乡镇检查"></headNav>

        <div class="content">
            <van-search
                v-model="searchValue"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
            />
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div v-for="item in list" :key="item.id" class="row" @click.stop="confirmCompany(item)">
                    <div class="left">
                        <div class="name">{{item.enforce_obj_name}}</div>
                        <div>
                            {{item.enforce_obj_address}}
                            <van-icon name="location-o" color="#1989fa" size="20" @click.stop="showCompanyMap(item)" />
                        </div>
                    </div>
                    <div class="right" @click.stop="showCompanyInfo(item.id)">
                        <span>更多</span>
                    </div>
                </div>
            </van-list>
        </div>

        <van-popup
            v-model="showMap"
            position="bottom"
            @click-overlay="showMap=false"
            :style="{ height: '450px' }"
            >
            <div v-if="showMap">
                <baiduMap :coor="companyLocation"></baiduMap>
            </div>
        </van-popup>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"
import { get } from '@/utils/http.js';
import { isEmpty } from '@/utils/tool';
import baiduMap from "@/components/baiduMap.vue";
import BUS from '@/bus';
import { Notify } from 'vant';

export default {
    components: {
        headNav,
        baiduMap
    },
    data () {
        return {
            list: [],
            searchValue: '',
            query: {
                page: 0,
                size: 10,
            },
            finished: false,
            loading: false,
            showMap: false,
            companyLocation: {
                lat: 0,
                lng: 0
            }
        }
    },
    methods: {
        onCancel() {
            this.$router.back()
        },
        onSearch() {
            if (isEmpty(this.searchValue)) {
                this.$toast.fail('请输入搜索关键词');
                return
            }
            this.query.page = 0;
            this.onLoad();
        },
        onLoad() {
            this.query.page++;
            this.loadData();
        },
        loadData() {
            this.loading = true;
            if (this.searchValue) {
                this.query.query = `enforce_obj_name==*${this.searchValue}*`;
            }
            get(`/v2/api/enforce-obj`, this.query).then(res => {
                if (res) {
                    let arr = res.data || [];
                    if (res.page < 2) {
                        this.list = arr;
                    }
                    else {
                        arr = this.list.concat(arr);
                        this.list = arr;
                    }
                    this.finished = res.total < res.page * res.size;
                }
                else {
                    this.finished = true;
                }
                this.loading = false;
            })
        },
        showCompanyMap(data) {
            if (data.latitude && data.longitude) {
                this.companyLocation.lat = parseFloat(data.latitude);
                this.companyLocation.lng = parseFloat(data.longitude);
                this.showMap = true;
            }
            else {
                Notify({ type: 'warning', message: '该单位没有坐标信息' });
            }
        },
        confirmCompany(data) {
            BUS.$emit('choose', {
                id: data.id,
                name: data.enforce_obj_name
            });
            this.onCancel();
        },
        showCompanyInfo(id) {
            this.$router.push(`/companyInfo/${id}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    margin-top: 47px;
    background-color: #FFFFFF;
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding-bottom: 8px;
    font-size: 14px;
    color: #565656;
    border-bottom: 1px solid #F0F0F0;
    .left {
        margin-left: 16px;
        .name {
            color: #343434;
            font-weight: bolder;
        }
    }
    .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        min-width: 80px;
        &>span {
            color: #1989fa;
            padding: 6px 10px;
            border: 1px solid #1989fa;
            border-radius: 10px;
        }
    }
}
</style>