<template>
    <div class="map-control">
        <div class="content">
            <Select v-model="defaultLayer" @on-change="handleChange">
                <Option v-for="item in list" :key="item.index" :value="item.layerName">{{item.description}}</Option>
            </Select>
            <span>当前版本号：{{layerVersion}}</span>
        </div>
        <div class="content">
            <p class="c-box">
                <Button type="primary" class="check-btn" @click="handleCheck(false)" :loading="isChecking">版本号检查</Button>
                <Button type="primary" v-show="isChecking" @click="handleCheck(true)">取消</Button>
                <span v-if="isShow">{{checkVersion}}</span>
            </p>
            <div class="c-box">
                <div>
                    <Poptip confirm 
                        placement="bottom-start"
                        title="确认是否要对当前地图进行同步？"
                        :disabled="loading"
                        @on-ok="handleSure">
                        <Button type="primary" @click="handleCancleSame">{{btnName}}</Button>
                    </Poptip>
                    <span v-if="isShowSame">{{sameTip}}</span>
                </div>
                <p>注意：图层同步时会删除本地数据库，重新写入，请谨慎操作</p>
            </div>
        </div>
        <!-- <div class="content">
            <Button type="primary" @click="handleUpdate">上传道路不平整度文件</Button>
            <ul class="file-list">
                <li v-for="item in fileList" :key="item">
                    <span>{{item}}</span>
                    <Button type="primary" @click="choosePostFile(item)">选择</Button>
                </li>
            </ul>
        </div> -->
    </div>
</template>

<script setup>
    import { reactive, toRefs, watch, ref } from 'vue';
    import { useMapStore } from '../../store/MapStore';
    import { storeToRefs } from 'pinia';

    const data = reactive({
        list: []
    })
    const { list } = toRefs(data)
    const isChecking = ref(false)
    const defaultLayer = ref('')
    const layerVersion = ref('')
    const isShow = ref(false)
    const isShowSame = ref(false)
    const checkVersion = ref('')
    const btnName = ref('当前图层同步')
    const loading = ref(false)
    const sameTip = ref('')
    const mapStore = useMapStore()
    const mapStoreToRefs = storeToRefs(mapStore)
    const { map, mapControlAck } = mapStoreToRefs

    const emits = defineEmits(['sendMsg'])

    function handleChange(value) {
        let target = list.value.find(item => item.layerName === value)
        layerVersion.value = target.layerVersion
        isShow.value = false
        isShowSame.value = false
    }

    function handleSend(data) {
        emits('sendMsg', {
            type: '/setting/mapControl',
            msg: data
        })
    }

    function handleCheck(isCancel) {
        isChecking.value = !isCancel
        let data = {
            type: 1,
            isCancel,
            layerName: defaultLayer.value
        }
        handleSend(data)
    }

    function handleCancleSame() {
        if (loading.value) return
        let data = {
            type: 2, // 图层同步
            isCancel: true,
            layerName: defaultLayer.value
        }
        handleSend(data)
    }

    function handleSure() {
        btnName.value = '取消'
        loading.value = true
        let data = {
            type: 2, // 图层同步
            isCancel: false,
            layerName: defaultLayer.value
        }
        handleSend(data)
    }

    watch(map, (value) => {
        data.list = value
        let { layerName, layerVersion: mapLayerVersion } = value[0] || {}
        defaultLayer.value = layerName
        layerVersion.value = mapLayerVersion
    }, {
        immediate: true,
        deep: true
    })

    watch(mapControlAck, (data) => {
        const {layerName: layerNameAck, value, type} = data
        if (layerNameAck === defaultLayer.value) {
            if (type === 1) {
                isChecking.value = false
                checkVersion.value = value
                isShow.value = true
            } else {
                btnName.value = '当前图层同步'
                sameTip.value = value
                loading.value = false
                isShowSame.value = true
            }
        }
    }, {
        deep: true
    })
</script>

<style lang="less" scoped>
    .map-control {
        .content {
            padding: 10px 20px;
            background: #111521;
            border-radius: 8px;
            margin-bottom: 10px;
            &:nth-child(1) {
                display: flex;
                align-items: center;
                /deep/.ivu-select {
                    width: 11vw;
                    min-width: 150px;
                    margin-right: 10px;
                    color: #fff;
                    .ivu-select-selection {
                        background: #63A9FB;
                        border: 2px solid #63A9FB;
                        .ivu-select-placeholder, .ivu-select-arrow {
                            color: #fff;
                        }
                    }
                }
                /deep/.ivu-select-dropdown {
                    background: #111521;
                    .ivu-select-item {
                        color: #fff;
                        &:hover {
                            background: #63A9FB;
                        }
                    }
                    .ivu-select-item-selected {
                        color: #2d8cf0;
                    }
                }
            }
            .c-box {
                padding: 10px 0;
                &:nth-child(1) {
                    border-bottom: 2px solid rgba(63,69,86,0.6);
                }
                .check-btn {
                    margin-right: 10px;
                }
                /deep/.ivu-poptip-popper {
                    width: 270px;
                }
                /deep/.ivu-poptip-content {
                    .ivu-poptip-arrow {
                        display: none;
                    }
                    .ivu-poptip-inner {
                        background: #2C3243;
                        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
                        border-radius: 8px 8px 8px 8px;
                        .ivu-icon {
                            color: rgb(255, 99, 99);
                            &::before {
                                content: '\F108';
                            }
                        }
                    }
                    .ivu-poptip-footer {
                        text-align: center;
                        .ivu-btn-text, .ivu-btn-primary {
                            width: 7vw;
                            min-width: 80px;
                        }
                        .ivu-btn-text {
                            background: rgba(99,169,251,0.6);
                            border-radius: 6px 6px 6px 6px;
                            opacity: 1;
                            border: 2px solid #63A9FB;
                            color: #fff;
                        }
                        .ivu-btn-primary {
                            background: rgba(255,73,73,0.6);
                            border-color: #FF4949;
                        }
                    }
                }
            }
            .file-list {
                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 5px 0;
                }
            }
        }
    }
</style>