<template>
    <div style="text-align: center;">数据之眼可视化大屏</div>
    <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
        <el-option v-for="item in townOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
    <button @click="sendFn('refresh'), townCode = ''">刷新</button>
    <button @click="sendFn('choseLand', { landName: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
    <button @click="sendFn('backHome', { name: '泸县' }), townCode = ''">返回首页</button>
    <button @click="sendFn('detail', { name: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>

    <p>地块</p>
</template>
<script setup scoped>
import { ref, reactive } from "vue"
import { sendMsg } from "@/api.js"
import axios from "axios"
import { landListApi } from "@/api.js"


// 镇列表
const options = [
    {
        value: '510502',
        label: '江阳区',
    },
    {
        value: '510503',
        label: '纳溪区',
    },
    {
        value: '510504',
        label: '龙马潭区',
    },
    {
        value: '510521',
        label: '泸县',
    },
    {
        value: '510522',
        label: '合江县 ',
    },
    {
        value: '510524',
        label: '叙永县 ',
    }, {
        value: '510525',
        label: '古蔺县 ',
    },
]
// 区列表
const townOptions = []

const areaCode = ref('510521')

const townCode = ref("")

const changeArea = (e) => {
    townCode.value = ''
    getTownList()
    options.forEach(item => {
        if (item.value == e) {
            sendFn('choserArea', { name: item.label, code: item.value })
        }
    })
}

const changeTown = (e) => {
    townOptions.forEach(item => {
        if (item.value == e) {
            sendFn('choseTown', { name: item.label })
        }
    })

    getLandList()
}

const getTownList = () => {
    townOptions.splice(0, 99999999)
    axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
        .then(function (res) {
            res.data.data.forEach(item => {
                townOptions.push({
                    value: item.code,
                    label: item.name
                })
            })

        })
}

const landList=ref([])
const getLandList = async () => {
    let res = await landListApi({
        areaCode: areaCode.value,
        streetCode: townCode.value
    })
    landList.value=res.data.list



}

getTownList()
// 发送消息
const page = ref(1)
const sendFn = (event, data = '') => {
    if (data.page) page.value = data.page;
    sendMsg({ channel: 'user-3', event, data })
}
</script>
<style lang="scss" scoped>
button {
    padding: 10px;
    margin: 10px;
}
</style>