<template>
  <div class="main_box">
    <!-- 地图 -->
    <div class="map-box">
      <div class="echart-box" ref="echart" v-show="!showList"></div>
      <div class="right-icon-box back" v-if="!showList" @click="handleShowList">
        <van-image :src="list_img" class="img_back" />查看列表
      </div>
      <div class="right-icon-box back" v-if="showList" @click="handleShowMap">
        <van-image :src="back_img" class="img_back" />
        返回地图
      </div>
      <div class="componey-box">
        <div class="total-box">
          共找到<span class="total">{{ componeyTotal }}</span
          >家企业
        </div>
        <div v-for="(item, index) in componeyList" :key="index" class="item">
          <span class="index">{{ index + 1 }}</span>
          <span class="city">{{ item.name }}</span>
          <span class="progress"></span>
          <span class="num">{{ item.value }} <van-icon name="arrow" /></span>
        </div>
      </div>
      <div
        v-if="showList"
        class="qiye-list"
        :class="showList ? 'qiye-list-more' : ''"
      >
        <div class="total-box">
          <span
            >为您找到<span class="total">{{ total }}</span
            >家企业</span
          >
          <span @click="togglePX" class="icon-box"
            >按成立日期排序
            <span class="icon-arrow">
              <i
                class="my-arrow1"
                :class="isActive && isAsc ? 'icon-active1' : ''"
              ></i>
              <i
                class="my-arrow2"
                :class="isActive && !isAsc ? 'icon-active2' : ''"
              ></i>
            </span>
          </span>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
          >
            <div class="grid_item" v-for="(item, index) in list" :key="index">
              <div class="qiye-title">
                <div
                  class="title-left"
                  @click="
                    handleViewDetail(item)
                  "
                >
                  <span
                    class="title-j"
                    :class="item.special ? 'spec-title' : ''"
                    >{{ item.custName.slice(0, 2) }}</span
                  >
                  <span class="title-det">{{ item.custName }}</span>
                </div>
                <van-icon
                  name="star"
                  color="#fcad0e"
                  @click="updateFavorite(item.id)"
                />
              </div>
              <div class="qiye-register">
                <span>{{ item.lpName }} | </span>
                <span>{{ item.registCapiShow }} | </span>
                <span>{{ item.startDate }} | </span>
                <span>{{ item.city }}</span>
              </div>
              <div class="qiye-address">
                <span class="dist-box">
                  <van-icon name="location-o" class="dist-icon" />距您{{
                    item.distance.toFixed(0)
                  }}m
                </span>
                <span class="address">{{ item.addressDetail }}</span>
                <span class="goto" @click="goToAddress(item)">导航 <van-icon name="arrow" /></span>
              </div>
              <div class="phone-box">
                <van-icon name="phone" v-if="item.phoneNumber" class="phone-icon"/>
                <a :href="'tel:'+ item.phoneNumber">{{ item.phoneNumber }}</a>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import WKT from "terraformer-wkt-parser";
import navbar from "../../components/navbar/navbar.vue";
import {
  searchFavoriteList,
  searchFavoriteMap,
  updateFavoriteList,
} from "@/service/api/myGrid.js";
import {
  Tab,
  Tabs,
  Icon,
  Button,
  Search,
  RadioGroup,
  Radio,
  List,
  PullRefresh,
  Dialog,
  Toast,
  DropdownMenu,
  DropdownItem,
} from "vant";
export default {
  data() {
    return {
      back_img: require("@/images/map/back-map@3x.png"),
      list_img: require("@/images/map/show-list@3x.png"),
      activeTab: 0,
      pageNum: 1,
      pageSize: 5,
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      currentPage: 1,
      list: [],
      showDialog: false,
      gridName: "",
      dist: "1",
      mapLoading: false,
      total: 0,
      showList: false,
      location: {
        lat: 30.248307,
        lng: 120.25551,
      },
      mapData: {
        type: "FeatureCollection",
        features: [],
      },
      componeyList: [],
      componeyTotal: 0,
      isAsc: false,
      min: 0,
      max: 100,
      perData: [],
      isActive:false,
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    VanButton: Button,
    VanSearch: Search,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanList: List,
    VanPullRefresh: PullRefresh,
    VanToast: Toast,
    [Dialog.Component.name]: Dialog.Component,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
  },

  created() {
    console.log("返回1111");
    this.queryList();
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echart);
    this.getPerEchartsData();
  },
  methods: {
     // 导航
    goToAddress(item){
      if(!window.wx) return;
      wx.openLocation({
        latitude:item.latitude,
        longitude:item.longitude,
        name:item.custName,
        address:item.addressDetail,
        scale:15,
        success:()=>{

        }
      })
    },
    handleShowList(){
      this.showList=true;
      this.onRefresh();
    },
    handleShowMap(){
      this.showList=false;
      this.getPerEchartsData();
    },
    // 取消搜藏
    async updateFavorite(id) {
      const res = await updateFavoriteList(id);
      if (res.code == 200) {
        const index = this.list.findIndex((item) => item.id == id);
        if (index > -1) {
          this.list.splice(index, 1);
        }
        Toast("取消收藏成功");
        this.getPerEchartsData();
        // this.onRefresh();
      }
    },
    // 查询地图数据
    async getPerEchartsData() {
      this.myChart.showLoading();
      const res = await searchFavoriteMap();
      if (res.code == 200) {
        this.componeyList=[];
        this.mapData.features=[];
        const arr = res.data.favoriteList || [];
        this.componeyTotal = res.data.favoriteTotal;
        this.total =  res.data.favoriteTotal;
        arr.map((item, index) => {
          let value = item.countFavorite || 0;
          this.perData.push({
            name: item.city || "",
            value: Number(value),
          });
          if (value != 0) {
            this.componeyList.push({
              name: item.city || "",
              value: value,
            });
          }
          this.mapData.features.push({
            type: "Feature",
            properties: {
              name: item.city || "",
            },
            geometry: {
              type: WKT.parse(item.wkt).type,
              coordinates: WKT.parse(item.wkt).coordinates,
            },
          });
        });
        let values = this.perData.map((item) => item.value);
        let minValue = Math.min(...values);
        let maxValue = Math.max(...values);
        this.min = Math.floor(minValue);
        this.max = Math.ceil(maxValue);
        this.renderMap();
      }
      this.myChart.hideLoading();
    },
    renderMap() {
      echarts.registerMap("hotMap", this.mapData);
      const option = {
        // title:{
        //     text:'热力图'
        // },
        // 地图偏移位置
        layoutCenter: ["50%", "50%"],
        layoutSize: "90%",
        visualMap: {
          show: true,
          min: this.min,
          max: this.max,
          text: ["高", "低"],
          realtime: false,
          calculable: true,
          inRange: {
            color: [
              "#caf0f8",
              "#ade8f4",
              "#90e0ef",
              "#48cae4",
              "#00b4d8",
              "#0096c7",
              "#0077b6",
              "#023e8a",
              "#03045e",
            ],
          },
          bottom: 0,
        },
        series: [
          {
            name: "图层名称",
            type: "map",
            map: "hotMap",
            selectedMode: false,
            roam: true,
            // 高亮
            emphasis: {
              disabled: true,
            },
            label: {
              show: false,
              textStyle: {
                // fontSize:14,
                // color:'#526b63',
              },
              formatter: function (params) {
                return (
                  "{num|" +
                  params.name +
                  "}" +
                  "\r\n" +
                  "{num|" +
                  params.value +
                  "}"
                );
              },
              rich: {
                num: {
                  color: "#fff",
                  fontSize: 14,
                  // fontWeight:'bold',
                  padding: [5, 2, 0, 0],
                },
              },
            },
            data: this.perData,
          },
        ],
      };
      this.myChart.setOption(option, true);
    },
    togglePX() {
      this.isActive=true;
      this.isAsc = !this.isAsc;
      this.onRefresh();
    },
    clearSearch() {
      this.list = [];
      this.finished = false; //解除上拉加载之后数据不能再次上拉
      this.currentPage = 1;
      this.isAsc = false;
      this.isActive=false;
      this.showList=false;
      this.pageNum = this.currentPage;
      this.getPerEchartsData();
    },
    //下拉刷新
    onRefresh() {
      this.list = [];
      this.finished = false; //解除上拉加载之后数据不能再次上拉
      this.currentPage = 1;
      this.pageNum = this.currentPage;
      this.queryList();
    },
    //上拉加载
    onLoad() {
      console.log("上拉加载");
      this.pageNum = this.currentPage;
      this.queryList();
    },
    // 查询列表
    async queryList() {
      if (this.currentPage === 1) {
        this.list = [];
      }
      this.loading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        latitude: this.location.lat,
        longitude: this.location.lng,
        isAsc: this.isAsc,
      };
      const res = await searchFavoriteList(params);
      // console.log(res, "res");
      if (res.code == 200) {
        if (this.refreshing) {
          this.refreshing = false;
        }
        this.loading = false;
        this.total = res.total;
        if (res.rows) {
          this.list =
            params.pageNum == "1" ? res.rows : [...this.list, ...res.rows];
          if (res.rows.length < params.pageSize) {
            this.finished = true;
          }
           if(this.list.length == res.total){
            this.finished = true;
          }
          this.currentPage++;
        } else {
          this.finished = true;
        }
      }
    },
    // 跳转客户视图
    handleViewDetail(item) {
      const custId = '202' + item.socialCreditCode;
      if (!item.custType || (!item.id && !custId)) {
        Toast("客户类型或客户内码不存在");
        return;
      }
      const path =
        item.custType == "0"
          ? "/customePersonDetail"
          : item.custType == "1"
          ? "/customeCommercialDetail"
          : item.custType == "2"
          ? "/customerFirmDetails"
          : "";
      this.$router.push({
        path,
      });
      sessionStorage.setItem("custId", custId);
      sessionStorage.setItem("id", item.id);
      sessionStorage.setItem("newCompanyFlag", item.newCompanyFlag);
      sessionStorage.setItem("fromMap",'1');
      sessionStorage.setItem("activeMap", 1);
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.wrapper_top {
  background-color: #fff;
  padding: 15px 20px;
}

.search-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.search_btn {
  background-color: rgb(24, 144, 255);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 20px;
}

/deep/ .van-search {
  width: 100%;
  padding: 5px 8px;
}

.radio_box {
  display: flex;
  align-items: center;
  margin: 15px 0 15px 15px;
}

.btn_box {
  padding: 8px 16px;
  background-color: #fff;
}

.isChecked {
  background-color: rgb(35, 114, 235);
  color: #fff;
  border-radius: 4px;
}
.grid_item_top {
  display: flex;
  align-items: center;
}
.icon_box {
  background-color: rgb(35, 114, 235);
  border-radius: 4px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle_num {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
}
.middle_title {
  font-size: 12px;
}
.line {
  width: 1px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(218, 220, 224);
}
.bottom_item_left {
  color: rgb(140, 140, 140);
}
.myDialog {
  .content {
    padding: 5px 15px;
    .my-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }
    .item {
      margin: 8px 0;
      .index {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: rgba(22, 132, 252, 1);
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        line-height: 16px;
      }
      .branch-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        margin-left: 5px;
      }
    }
  }
  ::v-deep .van-button__content {
    color: #666;
  }
}
.search-box {
  .item-one {
    padding: 17px 17px 1px 17px;
  }
  .dist-box {
    display: flex;
    justify-content: space-between;
    span {
      width: 171px;
      height: 32px;
      background: rgba(244, 245, 251, 1);
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 32px;
      border-radius: 4px;
      text-align: center;
      margin-bottom: 16px;
    }
    .active {
      background: rgba(231, 237, 252, 1);
      color: rgba(70, 130, 255, 1);
    }
  }
  ::v-deep .title-dist {
    color: #4682ff !important;
    &::after {
      border-color: transparent transparent #4682ff #4682ff !important;
    }
  }
}
.map-box {
  position: relative;
  .map {
    width: 100%;
    height: 400px;
  }
  .right-icon-box {
    position: fixed;
    right: 0px;
    bottom: 106px;
    z-index: 600;
    // div{
    width: 113px;
    height: 48px;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    // &:last-child{
    //   margin-top: 10px;
    // }
    // }
  }
  .back {
    top: 85vh;
    right: 0px;
    z-index: 999;
    width: 113px;
    height: 48px;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-around;
    .img_back {
      width: 25px;
      height: 25px;
      margin-top: 0 !important;
    }
  }
  .echart-box {
    height: 400px;
  }
}
.qiye-list {
  background: #f7f7f7;
  position: absolute;
  width: 100%;
  padding: 16px;
  top: 333px;
  z-index: 500;
  .total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #595959;
    .total {
      color: #1fba5c;
    }
  }
  .grid_item {
    margin-top: 8px;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 4px;
    .qiye-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-j {
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #f4f5fb;
        border-radius: 4px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        margin-right: 8px;
      }
      .spec-title {
        background: #e94033;
        color: #fff;
      }
      .title-det {
        font-size: 14px;
        color: #262626;
        font-weight: 600;
      }
    }
    .qiye-register {
      color: rgba(0, 0, 0, 0.85);
      font-size: 10px;
      margin: 6px 0;
    }
    .qiye-address {
      margin-bottom: 6px;
      font-size: 12px;
      display: flex;
      align-items: center;
      .dist-box {
        color: rgba(0, 0, 0, 0.45);
        .dist-icon {
          width: 16px;
          height: 16px;
          line-height: 16px;
          text-align: center;
        }
      }
      .address {
        display: inline-block;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 10px;
        color: #4682ff;
      }
      .goto {
        margin-left: 10px;
        color: #4682ff;
      }
    }
    .phone-box {
      font-size: 12px;
      color: #4682ff;
      .phone-icon{
        margin-right: 3px;
      }
    }
  }
}
.qiye-list-more {
  top: 0;
}
.componey-box {
  background: #fff;
  border-radius: 4px;
  margin: 16px;
  padding: 16px;
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .total-box {
    color: #595959;
    font-size: 12px;
    margin-bottom: 10px;
    .total {
      color: #1fba5c;
    }
  }
  .index {
    color: #e94003;
    font-size: 14px;
    margin-right: 30px;
  }
  .city {
    font-size: 14px;
    color: #595959;
    margin-right: 10px;
  }
  .progress {
    display: inline-block;
    width: 150px;
    height: 8px;
    border-radius: 100px;
    background: #4682ff;
  }
  .num {
    font-size: 14px;
    color: #595959;
    margin-left: 10px;
  }
}
.icon-box{
  display: flex;
}
.icon-arrow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .my-arrow1 {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #595959;
    margin-bottom: 3px;
  }
  .my-arrow2 {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #595959;
  }
  .icon-active1 {
    border-bottom-color: #4682ff;
  }
  .icon-active2 {
    border-top-color: #4682ff;
  }
}
</style>