<template>
  <msg-card class="item-trunkLine" title="干线监测">
    <div class="full-w-h" v-loading="loading"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(3, 11, 25, 0.8)">
      <div class="questionArea">
        <div class="kip-box">
<!--          @click="kipClick(item)"-->
          <div
              class="kip-item"
              v-for="(item, index) in kipData"
              :key="index"
              @click="kipClick(item)"
              :class="{ active: kipActive.type === item.type }"
          >
            <div class="value-circle">
              <el-progress style="z-index: 102" define-back-color="#224b5c" :color="item.color" class="e-progress" :stroke-width="8" :show-text="false" type="circle" :percentage="getPercentage(item)"></el-progress>
              <div class="value-val" style="z-index: 102">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-value" :style="`color:${item.color}`">{{ item.value }}</div>
              </div>
              <div class="liner-border">
                <div class="border-inner"></div>
              </div>
              <div class="liner-border1">
                <div class="border-inner1"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="alarm-title-box">
          <div class="alarm-title">
            <img src="../../../../assets/images/homepage/second-title-icon.svg" alt=""/>
            干线列表{{ kipActive.name ? " - " : "" }}{{ kipActive.name }}
          </div>
        </div>
        <div class="list_control">
          <el-input
              class="homepage-search"
              suffix-icon="el-icon-search"
              placeholder="请输入关键字搜索"
              v-model="filterText"
              @input="filterData"
          >
          </el-input>
          <div @click="sortChange" class="sort_btn">拥堵指数 <i :class="sortDown?'el-icon-sort-up':'el-icon-sort-down'"></i></div>
        </div>


        <div class="alarm-list-box">
          <div
              class="alarm-list"
              v-for="(item, index) in listCopyData"
              :key="index"
              @click="showPolygon(item, index)"
          >
            <div class="list-item" :class="{ active: activeIndex === index }">
              <div class="i_index">{{index+1}}</div>
              <div class="i_content">
                <div class="top_name" :title="item.name">{{item.name}}</div>
                <div class="bot_detail" :title="`协调方向行程时间：${timeFormat(item.travelTime)} 平均速度：${item.speed}km/h`">
                  协调方向行程时间：<span>{{timeFormat(item.travelTime)}}</span>
                  平均速度：<span>{{item.speed}}km/h</span>
                </div>
              </div>
              <div class="i_indexVal" :style="`color:${getColorByIndex(item.trafficIndex)}`">
                <div>{{item.trafficIndex}}</div>
                <img @click="listClick(item, index)" alt="" src="../../../../assets/images/n_signal/dArrowRight.png"/>
              </div>
<!--              <div class="i_arrow" @click="listClick(item, index)"><i class="el-icon-arrow-right"></i></div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </msg-card>
</template>

<script>
import msgCard from "../../../../components/Standard/msg-card.vue";
import {getGreenwaveList} from "@/dao/optApi";
import { mapMutations } from "vuex";
export default {

  name: "trunkLine",
  components: {
    msgCard,
  },
  props: {
    areaId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      sortDown: false,
      loading: false,
      activeIndex: 0,
      filterText: "",
      sourceValue: {
        "1": "事故",
        "2": "施工",
        "3": "拥堵",
        "4": "管制",
      },
      sourceClass: {
        事故: "#D43030",
        施工: "#FF8D1A",
        拥堵: "#FFBF00",
        管制: "#FFBF00",
      },
      //列表数据
      listData: [],
      listCopyData:[],
      kipData: [
        {name: "拥堵", type: 3, value: 0,color:'#ff6f26'},
        {name: "缓行", type: 2, value: 0,color:'#ffd145'},
        {name: "畅通", type: 1, value: 0,color:'#4fd27d'},
      ],
      kipDataInited: false,
      infoStatusObj: {
        "0": "未开启",
        "1": "相位差优化",
        "2": "选择方案",
      },
      kipActive: {name: "", type: null},
      radio: "",
      polygonsToMapList: [],
    };
  },
  mounted() {
    this.initData()
  },
  methods: {
    getPercentage(item){
      if(this.listData.length){
        return item.value/this.listData.length*100
      }
      return 0
    },
    getColorByIndex(index){
      if(index > 3.5){
        return '#ff0000'
      }
      if(index > 2.5){
        return '#ff9500'
      }
      return '#51e507'
    },
    sortChange(){
      this.sortDown = !this.sortDown
      this.listCopyData.reverse()
    },
    showPolygon(item, index){
      this.activeIndex = index;
      this.$emit('showPolygon',item)
      console.log( item, index )
    },
    timeFormat(second){
      let min = Math.floor(second/60)
      let sec = second % 60
      return `${min}min${sec}s`
    },
    kipClick(item){
      if (item.type === this.kipActive.type) {
        this.kipActive = { name: "", type: null };
        this.listCopyData = JSON.parse(JSON.stringify(this.listData))
      } else {
        this.kipActive = { name: item.name, type: item.type };
        this.listCopyData = this.listData.filter(row => {
          return row.realtimeStatus == item.type
        })
      }
    },
    filterData(){
      this.listCopyData = this.listData.filter(item => {
        return item.name.includes(this.filterText)
      })
    },
    initData(){
      getGreenwaveList({
        name: this.filterText,
        status: this.kipActive.type,
        type: null,
      }).then(res => {
        console.log('left list...',res)
        if (res && res.code === 200) {
          const data = res.content;
          if (!this.kipDataInited) {
            this.kipDataInited = true;
            this.kipData = [
              { name: "拥堵", type: 3, value: data.greenwaveStats.congestion ,color:'#ff6f26'},
              { name: "缓行", type: 2, value: data.greenwaveStats.slow ,color:'#ffd145'},
              { name: "畅通", type: 1, value: data.greenwaveStats.smooth ,color:'#4fd27d'},
            ];
          }

          this.listData = data.greenwaveList.sort((a,b)=>{
            return Number(b.trafficIndex) - Number(a.trafficIndex)
          });
          this.listCopyData = JSON.parse(JSON.stringify(this.listData))
        }
      })
    },
    listClick(data, index){

      // this.$emit("update:areaId", data.id);
      // if (data.wkt) {
      //   const lngLat = data.wkt.split(";")[0];
      //   const lngLatWS84 = [
      //     Number(lngLat.split(",")[0]),
      //     Number(lngLat.split(",")[1]),
      //   ];
        // window.mapBox.flyTo({
        //   center: lngLatWS84,
        //   zoom: 15,
        // });
      // }
      this.openDialog(data);
    },
    openDialog(data) {
      console.log('line data', data)
      this.$emit('openGreenWaveDialog', data)
    },
  },

};
</script>

<style lang="less" scoped>
*{
  box-sizing: border-box;
}
.item-trunkLine {
  .list_control{
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 10px;
    padding: 10px 0;
    width: 100%;
    .homepage-search{
      width: 70%;
    }
    .sort_btn{
      height: 100%;
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #233b6b;
      cursor: pointer;
      font-size: 14px;
      .el-icon-sort{
        color: #ffffff;
      }
    }
  }

  .list-item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    width: 100%;

    background-color: #0b1d2e;
    .i_index{
      font-size: 20px;
      font-weight: bold;
      margin-right: 10px;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: #223f66;
    }
    .i_content{
      width: 70%;
      overflow: hidden;

      height:100%;
      margin-right: 10px;
      .top_name{
        white-space: nowrap;
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 8px;
      }
      .bot_detail{
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        span{
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
    .i_indexVal{
      font-size: 20px;
      font-weight: bold;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 55px;
      align-items: flex-end;
      margin-right: 10px;
      justify-content: center;
      padding-bottom: 5px;
      //font-family: YouSheBiaoTiHei,serif;
    }
    .el-icon-arrow-right{
      font-size: 16px;
    }
  }

  .questionArea {
    height: 100%;
    display: flex;
    flex-direction: column;

    .kip-box {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .kip-item {
        cursor: pointer;
        margin-bottom: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        //height: 65px;
        border-radius: 3px;
        border: 1px solid transparent;
        height: 160px;
        background-color: #0a1d2e;
        width: 32%;
        .value-circle{
          width: 100%;
          position: relative;
          margin-bottom: 5px;
          display: flex;
          justify-content: center;
          padding:14.5px 0 15px 0;

          ::v-deep .el-progress-circle__path{
            stroke-linecap: butt;
          }
          ::v-deep .el-progress-circle{
            width: 100px !important;
            height: 100px!important;
          }
          .value-val{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: flex;
            z-index: 5;
            flex-direction: column;
            justify-content: center;

            align-items: center;
            .item-name{
              font-size: 18px;
              margin-bottom: -5px;
            }
            .item-value{
              font-size: 34px;
              font-family: fantasy;
            }
          }
          .liner-border{
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 3;
            transform: translateX(-50%) translateY(-50%);
            aspect-ratio: 1;
            height: 95%;
            padding: 3px;
            background-color: #2e4353;
            border-radius: 50%;
            //background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20));
            .border-inner{
              width:100%;
              height:100%;
              border-radius:50%;
              background:#0a1d2e;
            }
          }
          .liner-border1{
            position: absolute;
            z-index: 4;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            aspect-ratio: 1;
            height: 82%;
            padding: 1px;
            border-radius: 50%;
            //background-color: #2e4353;
            background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 0.8), rgba(94, 187, 206, 0.20));
            .border-inner1{
              width:100%;
              height:100%;
              border-radius:50%;
              background:#0a1d2e;
            }
          }
        }

        img {
          width: 42px;
          height: 42px;
        }

        &.active {
          border: 1px solid #389fff;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
        }

        .name {
          margin-bottom: 4px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
        }

        .value {
          font-size: 14px;
          color: white;
        }
      }
    }

    .alarm-title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 28px;
    }

    .alarm-title {
      display: flex;
      align-items: center;
      margin-left: 15px;
      margin-bottom: 10px;

      img {
        margin-right: 10px;
      }
    }

    .alarm-list-box {
      flex: 1;
      overflow: auto;
      margin-bottom: 10px;
    }

    .alarm-list {
      //margin: 0 5px;
      margin-bottom: 6px;

      cursor: pointer;
      display: flex;
      align-items: center;
      color: #e5e5e5;
      //background: rgba(227, 227, 227, 0.35);

      &.active {
        //border-radius: 6px;
        border: 1px solid #1a68af;
      }

      //&:nth-child(2n) {
      //  background: #fff;
      //}

      img {
        cursor: pointer;
      }

      .value {
        margin-right: 10px;
      }

      .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-bottom: 8px;
        color: #383838;

        img {
          margin-right: 8px;
        }

        .title-txt {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 350px;
          display: inline-block;
          font-weight: 500;
        }

        .type {
          margin-left: 8px;
          font-size: 12px;
          padding: 1px 8px;
          border-radius: 3px;
        }
      }

      .content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: 370px;
        font-size: 14px;
        color: #666;
        line-height: 25px;
      }
    }
    .alarm-list:last-child{
      margin-bottom: 0;
    }

    //.homepage-search {
    //  margin: 0 15px 15px;
    //  width: calc(100% - 30px);
    //}
  }
}
</style>
