<template>
  <div class="mv-focus-car-container" :class="className">
    <!-- 重点车辆 两客一危 选择框 -->
    <div class="select-car-box">
      <div class="top-box">
        <p>两客一危</p>
      </div>
      <div class="cont-box">
        <div class="mv-radio-group">
          <div class="mv-radio" v-for="item in options" :key="item.value">
            <input
              type="radio"
              :id="'car-type-radio' + item.value"
              :value="item.value"
              v-model="carType"
            />
            <label :for="'car-type-radio' + item.value">{{ item.label }}</label>
          </div>
        </div>
      </div>
    </div>
    <!-- 车辆列表 -->
    <div class="car-list-box">
      <div class="top-box">
        <p>{{ title || '车辆列表' }}</p>
        <span class="close" @click="close">X</span>
      </div>
      <!-- list -->
      <div class="cont-box">
        <li class="list-top list-item">
          <p>时间</p>
          <p>车牌</p>
          <p>车牌颜色</p>
          <p>操作</p>
        </li>
        <div class="no-data" v-show="!carList.length">暂无数据</div>
        <ul class="list-cont" v-show="carList.length">
          <li
            class="list-item"
            v-for="(item, index) in carList"
            :key="index"
            :class="{ on: currentCarIndex === index }"
            @click="handleCar(index)"
          >
            <p>{{ item.passtime }}</p>
            <p>{{ item.plateno }}</p>
            <p>{{ item.platecolor | platecolor }}</p>
            <p @click.stop="carPath(item)">轨迹</p>
          </li>
        </ul>
        <!-- img -->
        <img class="car-img" v-if="imgUrl" :src="imgUrl" alt="" />
      </div>
    </div>

    <!-- 对话框 -->
    <mv-map-dialog
      ref="mapDialog"
      v-show="dialogShow"
      :title="currentData.name"
    >
      <!-- 弹框详情 -->
      <mv-dialog-detail
        :detailConfig="[iconType]"
        ref="dialogDetail"
        :currentType="iconType"
        :currentData="currentData"
        @detailClick="detailClick"
      />
    </mv-map-dialog>
  </div>
</template>

<script>
import { getThemeConfig } from '../lib/theme'
import businessApi from '../api/business-api'

const ICON_TYPE = 'zdcl'
/**
* 重点车辆 模块
* @author 朱琦（zhuq@microvideo.cn）
* @date   时间：2022/3/28
*/
export default {
  name: 'MvFocusCar',
  props: {
    // 图例配置
    iconConfig: {
      type: Object,
      default: () => {
        return {
          name: '重点车辆',
          offset: ['-50%', '-50%']
        }
      }
    },
    // 热力图配置
    heatConfig: {
      type: Object,
      default: () => {
        return {
          zooms: [8, 18],
          max: 2,
          gradient: {
            0.3: "blue",
            0.5: "rgb(117,211,248)",
            0.7: "rgb(0, 255, 0)",
            0.9: "#ffea00",
            1.0: "red",
          },
        }
      }
    },
    // 当前详情类型
    currentType: {
      type: String,
      default: null
    },
  },
  components: {

  },
  data () {
    return {
      map: null,
      mapId: null,
      iconType: ICON_TYPE,
      styleConfig: {},
      className: 'dark',
      options: [
        // { label: "全部", value: 0 },
        { label: "危化品车", value: 2 },
        { label: "客车", value: 1 },
      ],
      carType: null,
      heatmapLayer: null, // 热力图 图层
      pointLayer: null, // 站点 图层
      currentData: {},
      dialogShow: false,

      carList: [], // 重点车辆 列表
      currentCarIndex: 0,
      title: "车辆列表",

    }
  },
  watch: {
    carType () {
      if (!this.carType) return
      this.getLayerData()
    },
    currentType () {
      if (this.currentType !== 'zdcl') {
        this.dialogShow = false
      }
    }
  },
  computed: {
    imgUrl () {
      return (
        this.carList[this.currentCarIndex] &&
        this.carList[this.currentCarIndex].image
      )
    },
  },
  created () {

  },
  mounted () {

  },
  filters: {
    platecolor: (type) => {
      let text = "其他"
      switch (type) {
        case "0":
          text = "蓝牌"
          break
        case "1":
          text = "黄牌"
          break
        case "11":
          text = "绿牌"
          break
        default:
          break
      }
      return text
    },
  },
  methods: {
    init ({ map, mapId, mapConfig }) {
      this.map = map
      this.mapId = mapId

      this.setThemeConfig(mapConfig.theme)
    },
    /**
     * 修改主题
     */
    setTheme (theme) {
      this.setThemeConfig(theme)
    },
    /**
     * 获取主题配置
     */
    setThemeConfig (theme) {
      this.theme = theme
      this.className = theme
      this.styleConfig = getThemeConfig(theme).styleConfig
    },
    /**
     * 获取图层数据
     */
    getLayerData () {
      businessApi.getZDCLMapLayerList({ carType: this.carType }).then(res => {

        this.heatLayer && this.heatLayer.hide()
        this.pointLayer && this.pointLayer.setData([])

        if (res.status != 0 || !res.data) {
          return
        }

        // 海量点
        const data = res.data.stations.map((item) => {
          return {
            ...item,
            name: item.f_vc_stationname,
            id: item.uuid,
            path: [item.lng, item.lat],
            icon: "circle",
            lnglat: [item.lng, item.lat],
            position: [item.lng, item.lat],
            zooms: [10, 18],
          }
        })
        const config = {
          ...this.iconConfig,
          type: ICON_TYPE
        }
        this.$mapSdk(this.mapId).createMvMapMassPoint(data, config, (event, point) => this.pointClick(event, point)).then((res) => {
          this.heatPointLayer = res
        })

        // 热力图
        this.heatLayer = this.$mapSdk(this.mapId).createMvMapHeatMap(
          res.data.result,
          this.heatConfig
        )
      })
    },
    /**
     * 海量点点击事件
     */
    pointClick (event, data) {
      this.dialogShow = true
      this.currentData = { ...data.data }
      this.$refs.mapDialog.openDialog(['20vw', '20vh'], data.data.path)
    },
    close () {
      this.carList = []
      this.title = "车辆列表"
    },
    /**
     * 详情点击事件
     */
    detailClick (data) {
      const num = data.isCumulativeData === 0 ? data.inval : data.out
      this.getCarList(num, data)
    },
    /**
     * 获取车辆列表
     */
    getCarList (num, data) {
      this.carList = []
      if (!num) return

      businessApi.getZDCLCarList({
        carType: this.carType,
        station: data.uuid,
        isCumulativeData: data.isCumulativeData
      }).then(res => {
        if (res.data) {
          this.carList = res.data
        }
      })
    },
    handleCar (index) {
      this.currentCarIndex = index
    },
    /**
     * 绘制车辆轨迹
     */
    carPath (data) {
      this.dialogShow = false
      businessApi.getZDCLCarPath({
        plateNo: data.plateno,
        plateColor: data.platecolor
      }).then(res => {
        if (!res.data || !res.data.length) return
        const data = res.data.reverse()

        // 驾车规划
        // const path = data.map(item => {
        //   return [item.longtitude, item.latitude]
        // });
        // this.$mapSdk(this.mapId).createMvMapDriving(path,{
        //   isMap:true,
        //   hideMarkers:false
        // }).then(res => {
        //   debugger
        // })

        // 轨迹纠偏
        const path = data.map(item => {
          return {
            x: item.longtitude,
            y: item.latitude,
            sp: 40,
            ag: 0,
            tm: new Date(item.passTime).getTime()
          }
        })
        this.$mapSdk(this.mapId).createMvMapGraspRoad(path).then(res => {
          // debugger
        })
      })
    }
  }
}
</script>

<style scoped>
@import url('../static/css/index.css');
.mv-focus-car-container {
  position: absolute;
  /* padding: 0 15px; */
  width: 20vw;
  right: 1vh;
  top: 1vh;
  background: #fff;
  border-radius: 1px;
  z-index: 150;
}
.mv-focus-car-container.dark {
  background: #5489c0ed;
  color: #fff;
  box-shadow: 0 0 15px #00000047;
}

.top-box {
  color: #ffffff;
  padding: 8px 15px;
  background: #0a4785;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-box p {
  margin: 0;
}
.cont-box {
  padding: 0px 10px 0;
  background: #0a47858c;
}
.select-car-box {
}
.car-list-box {
  /* background: rgba(13, 29, 46, 0.9); */
  border-top: 1px solid rgba(255, 255, 255, 0.212);
}
.car-list-box .list-cont {
  height: 20vh;
  overflow-y: auto;
  padding: 0;
}
.car-list-box .list-cont .list-item {
  cursor: pointer;
}
.car-list-box .list-cont .list-item.on {
  background: #1e5a97;
}
.car-img {
  width: 100%;
  margin-bottom: 1em;
}

.list-item {
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 30px;
  margin-bottom: 3px;
}
.list-item p {
  margin-bottom: 0;
  padding: 0 2px;
}
.list-item p:nth-child(1) {
  flex: 1;
}
.list-item p:nth-child(2) {
  width: 6em;
}
.list-item p:nth-child(3) {
  width: 5em;
}
.list-item p:nth-child(4) {
  width: 4em;
  cursor: pointer;
}

.list-top {
  /* background: rgba(45, 56, 77, 0.9); */
}
</style>
