const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rbg(255,255,255)',
    textAlign: 'center'
}

// 请求接口，获取房源数据
let res = await axios.get(`http://localhost:8080/area/map?id=${value}`)
// 遍历房源信息，创建对应的覆盖物
res.data.body.map(item => {
    // 给每一条数据添加覆盖物
    // 得到返回的经纬度信息
    let { coord: { longitude, latitude }, label: areaName, count, value } = item
    // 创建覆盖物
    let label = new window.BMap.Label('', {
        position: new window.BMap.Point(longitude, latitude),
        offset: new window.BMap.Size(-35, -35)
    })
    // 设置覆盖物内容
    label.setContent(`<div class="${styles.bubble}">
    <p class="${styles.name}">${areaName}</p>
    <p>${count}套</p>
  </div>`)
    // 设置样式
    label.setStyle(labelStyle)
    // 添加点击事件
    label.addEventListener('click', function () {
        // 当点击了覆盖物，要以当前点击的覆盖物为中心来放大地图
        map.centerAndZoom(this.K.position, 13);
        // 解决清除覆盖物的时候，百度地图js报错问题
        setTimeout(function () {
            map.clearOverlays()
        }, 0)
    })
    // 给label添加唯一标识
    label.id = value
    // 添加到地图上
    map.addOverlay(label)
})

/**
* 根据id获取对应的房源信息
*/
async renderOverlays(id) {
    // 请求，拿到对应房源数据
    let res = await axios.get(`http://localhost:8080/area/map?id=${id}`)
    let data = res.data.body

    let {type,nextZoom} = this.getTypeAndZoom()

    // 遍历，调用createOverlays,创建覆盖物
    data.map(item => {
        this.createOverlays(item,type,nextZoom)
    })
}
/**
 * 获取对应要绘制的类型和缩放的比例
 */
getTypeAndZoom() {
    // 获取当前地图缩放级别
    let zoom = this.map.getZoom()
    let nextZoom, type;
    if (zoom >= 10 && zoom < 12) {
        nextZoom = 13;
        // circle 表示绘制圆形的覆盖物，区
        type = "circle"
    } else if (zoom >= 12 && zoom < 14) {
        nextZoom = 15
        // circle 表示绘制圆形的覆盖物，镇
        type = "circle"
    } else if (zoom >= 14 && zoom < 16) {
        // circle 表示绘制矩形的覆盖物，小区
        type = "rect"
    }
    return { nextZoom, type }
}

/**
 * 绘制覆盖物的方法，根据type来判断绘制的是圆形还是矩形
 */
createOverlays(item, type, nextZoom) {
    let { coord: { longitude, latitude }, label: areaName, count, value } = item
    let point = new window.BMap.Point(longitude, latitude)
    // 判断需要渲染的是哪种类型
    if (type === 'circle') {
        // 区 或者 镇
        this.createCircle(point, areaName, count, value, nextZoom)
    } else if (type === 'rect') {
        // 小区
        this.createRect(point, areaName, count, value)
    }
}

// createRect逻辑代码
/**
 * 绘制矩形
 * @param {*} point 当前房源坐标
 * @param {*} areaName  名称
 * @param {*} count  数量
 * @param {*} value  id
 */
createRect(point, areaName, count, value) {
    // 创建覆盖物
    let label = new window.BMap.Label('', {
        position: point,
        offset: new window.BMap.Size(-50, -28)
    })
    // 设置内容
    label.setContent(`
    <div class="${styles.rect}">
       <span class="${styles.housename}">${areaName}</span>
       <span class="${styles.housenum}">${count}套</span>
       <i class="${styles.arrow}"></i>
    </div>
    `)
    // 设置样式
    label.setStyle(labelStyle)
    label.id = value
    label.addEventListener('click', () => {
        this.getHouseList(value)
    })
    // 添加到地图中
    this.map.addOverlay(label)
}
async getHouseList(id) {
    let res = await axios.get('http://localhost:8080/houses?cityId=' + id)
    this.setState({
        housesList: res.data.body.list,
        isShowList: true
    })
}
//结构
{/* 房源列表 */}
{/* 添加 styles.show 展示房屋列表 */}
    <div
        className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ''
        ].join(' ')}
    >
        <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <Link className={styles.titleMore} to="/home/list">
                更多房源</Link>
        </div>
        <div className={styles.houseItems}>
            {/* 房屋结构 */}
            {this.renderHousesList()}
        </div>
    </div>
</div>
// 渲染房屋列表的item方法
/**
 * 渲染房源列表
 */
renderHousesList() {
    return this.state.housesList.map(item => (
        <div className={styles.house}>
            <div className={styles.imgWrap}>
                <img className={styles.img} src={`http://localhost:8080${item.houseImg}`} alt="" />
            </div>
            <div className={styles.content}>
                <h3 className={styles.title}>{item.title}</h3>
                <div className={styles.desc}>{item.desc}</div>
                <div>
                    {/* ['近地铁', '随时看房'] */}
                    {item.tags.map((tag, index) => {
                        const tagClass = 'tag' + (index + 1)
                        return (
                            <span
                                className={[styles.tag, styles[tagClass]].join(' ')}
                                key={tag}
                            >
                                {tag}
                            </span>
                        )
                    })}
                </div>
                <div className={styles.price}>
                    <span className={styles.priceNum}>{item.price}</span> 元/月
    </div>
            </div>
        </div>
    )
    )
}