<template>
  <div style="position: relative">
    <div style="display: flex">
      <div class="set-car">
        <a-space style="display: flex; flex-wrap: wrap; background: #fff; cursor: pointer">
          <template>
            <a-dropdown :trigger="['click']" :arrow="{ pointAtCenter: true }" v-model="visible">
              <a-input v-model="values"></a-input>
              <template slot="overlay">
                <div
                  style="
                    width: 320px;
                    height: 500px;
                    background: #fff;
                    margin-left: -10px;
                    margin-top: 20px;
                    padding: 15px;
                    overflow-y: scroll;
                  "
                >
                  <div style="margin-bottom: 20px">
                    <a-radio-group v-model="value" @change="onChange">
                      <a-radio :value="1"> 机构 </a-radio>
                      <a-radio :value="2"> 在线车辆</a-radio>
                    </a-radio-group>
                  </div>
                  <div v-if="show == 1">
                    <a-input-search
                      v-model="searchValue"
                      style="margin-bottom: 8px"
                      @change="onChangeSel"
                      placeholder="请输入"
                    />
                    <a-tree
                      v-if="gData.length > 0"
                      :auto-expand-parent="autoExpandParent"
                      :expanded-keys="expandedKeys"
                      @expand="onExpand"
                      :default-expand-all="true"
                      :defaultExpandParent="true"
                      @select="ChangeSelect"
                      :tree-data="carTree"
                    >
                      <template slot="title" slot-scope="{ title }">
                        <span v-if="title.indexOf(searchValue) > -1">
                          {{ title.substr(0, title.indexOf(searchValue)) }}
                          <span style="color: #f50">{{ searchValue }}</span>
                          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                        </span>
                        <span v-else>{{ title }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div v-if="show == 2">
                    <div v-if="list.length > 0">
                      <div
                        v-for="(item, index) in list"
                        :key="index"
                        style="display: flex; justify-content: space-between; margin-top: 8px; cursor: pointer;"
                        @click="OnlineCar(item)"
                      >
                        <div>
                          <span>{{ item.plateNumber }}</span>
                          <span>({{ item.cryName }})</span>
                        </div>
                        <span style="color: rgb(22, 153, 31)">在线</span>
                      </div>
                    </div>
                    <div v-else>
                      <img class="car-img" src="../../../assets/images/pop-null.png" alt="" />
                    </div>
                  </div>
                </div>
              </template>
            </a-dropdown>
          </template>
        </a-space>
      </div>
      <div style="margin-top: 10px; margin-left: 10px; pointer-events: all" v-if="show != 2 && !videoid">
        <a-button type="primary" @click="ChangeBtn"> {{ showBtn ? '收起' : '展开' }} </a-button>
      </div>
    </div>
    <div>
      <!-- 机构详情 -->
      <Statistics v-if="showBtn && (showFlag != true || videoid == '')" :deptIds="deptIds" />
      <!-- 在线车辆视频 -->
      <!-- v-if="this.show==2&&carInfo"  -->
      <!-- <div>show----{{ show }}</div>
      <div>videoid----{{ videoid }}</div>
      <div>showFlag---{{ showFlag }}</div>
      <div>showBtn---{{ showBtn }}</div>
      <div>videoid---------{{ videoid }}</div> -->
      <div v-if="videoid || showFlag != false&&carIds">
        <Video :carInfo="carInfo" :videoid="videoid" />
        <!-- 机构详情 -->
        <FireStationDetails :deptIds="deptIds" />
        <!-- 油箱 -->
        <!-- <QuantityOil /> -->
      </div>
    </div>
    <!-- <div class="gj-img" v-if="videoid"></div> -->
  </div>
</template>

<script>
import { getCarTree, getCarList, getCarLocation } from '@/api/iot'
import Statistics from './Statistics.vue'
import Video from './Video.vue'
import FireStationDetails from './FireStationDetails.vue'
// import QuantityOil from './QuantityOil.vue'
const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
export default {
  components: { Statistics, Video, FireStationDetails },
  props: {
    carId: String,
    showVideos: Boolean,
    idVal: Object,
  },
  watch: {
    carId: {
      handler(val) {
        this.videoid = val
      },
      immediate: true,
      deep: true,
    },
    showVideos: {
      handler(val) {
        this.showFlag = val
      },
      deep: true,
    },
    idVal: {
      handler(newVal) {
        if (newVal) {
          this.deptIds = newVal
          this.values = newVal.plateNumber
        }
      },
    },
  },
  data() {
    return {
      placement: null,
      values: '两江新区消防救援支队',
      gData: [],
      searchValue: '',
      visible: false,
      value: 1,
      show: 1,
      list: [],
      expandedKeys: [],
      dataList: [],
      autoExpandParent: true,
      showBtn: false,
      carInfo: null,
      videoid: '',
      objCarinfo: null,
      deptIds: {},
      showFlag: null,
    }
  },
  methods: {
    FunTree() {
      getCarTree().then((res) => {
        this.gData = res.data
        this.dataList = []
        const generateList = (data) => {
          for (let i = 0; i < data.length; i++) {
            const node = data[i]
            const key = node.key
            this.dataList.push({ key, title: node.title, meta: node.meta })
            if (node.children) {
              generateList(node.children)
            }
          }
        }
        generateList(this.gData)
      })
    },
    onChange(val) {
      this.show = val.target.value
    },
    funcarList() {
      const params = {
        onlineStatus: 1,
        deptId: null,
      }
      getCarList(params).then((res) => {
        this.list = res.data
      })
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onChangeSel(e) {
      const value = e.target.value
      const expandedKeys = this.dataList
        .map((item) => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, this.gData)
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)

      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      })
    },
    ChangeSelect(node) {
      const id = node
      const carID = this.dataList.find((item) => {
        // eslint-disabled
        return id == item.key
      })
      this.deptIds = carID
      this.$emit('changeCar', carID)
      if (this.deptIds.key.indexOf('dept') < 0) {
        this.showBtn = false
      } else if (this.deptIds.key.indexOf('dept') >= 0) {
        this.showFlag = false
      }
      this.values = carID.title
      if (carID.meta.cqVehicleId) {
        this.videoid = carID.meta.cqVehicleId
      } else {
        this.videoid = null
      }
    },
    ChangeBtn() {
      this.showBtn = !this.showBtn
    },
    OnlineCar(val) {
      // this.show = 2
      this.visible = false
      this.carInfo = val
      this.videoid = val.cqVehicleId
    },
    // FunCarLocitin() {
    //   getCarLocation().then((res) => {})
    // },
  },
  created() {
    this.FunTree()
    this.funcarList()
  },

  computed: {
    carTree() {
      return this.gData
    },
    carIds() {
      return this.$route.query.id
    },
  },
}
</script>

<style lang="less" scoped>
.set-car {
  width: 350px;
  height: 50px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  pointer-events: all;

  /deep/.ant-select {
    width: 300px;
  }
  .card {
    width: 350px;
    height: 500px;
    background: #fff;
    z-index: 99;
  }
  /deep/input:not([type='range']) {
    width: 300px;
  }
  .car-img {
    width: 100px;
    height: 100px;
  }
  
}
::-webkit-scrollbar-track-piece {
  background: #ebedf0;
}

::-webkit-scrollbar {
  width: 4px;
}
</style>
