<template>
  <msg-card class="item-cross" 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)"
            :style="`border-left: 4px solid ${item.color};background-color: ${item.bg}`"
            :class="{ active: kipActive.type === item.type }"
          >
            <div>{{ item.name }}：{{ item.value }}</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>-->
        <!--          &lt;!&ndash;-->
        <!--          <el-radio-group v-model="radio" @change="initData">-->
        <!--            <el-radio :label="1">常发性</el-radio>-->
        <!--            <el-radio :label="2">偶发性</el-radio>-->
        <!--          </el-radio-group> &ndash;&gt;-->
        <!--        </div>-->
        <div class="list_control">
          <el-input
            class="homepage-search"
            suffix-icon="el-icon-search"
            placeholder="请输入关键字搜索"
            v-model="filterText"
            @input="initData"
          >
          </el-input>

          <el-select @change="typeChange" v-model="typeVal" class="sort_btn">
            <el-option
              v-for="item in [
                { value: '1', label: '常发性' },
                { value: '0', label: '偶发性' },
                { value: '-', label: '全部' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="alarm-list-box">
          <el-table
            @row-click="rowClick"
            :data="listDataCopy"
            :row-class-name="getRowClassName"
            style="width: 100%"
            cell-class-name="custom-table-cell"
            header-row-class-name="custom-table-header"
            header-cell-class-name="custom-table-header-cell"
            height="100%"
          >
            <el-table-column
              width="50"
              align="center"
              prop="index"
              show-overflow-tooltip
              label="排名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              show-overflow-tooltip
              label="路口名称"
            >
            </el-table-column>
            <el-table-column
              prop="congestionIndex"
              align="center"
              width="80"
              label="拥堵指数"
            >
            </el-table-column>
            <el-table-column
              align="center"
              width="70"
              show-overflow-tooltip
              label="同比"
            >
              <template slot-scope="scope">
                <!--                {{ Math.abs(scope.row.lastPeriodIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastPeriodIndex)" alt=""/>-->
                <span :style="getDownUpColor(scope.row.lastPeriodIndex)"
                  >{{ Math.abs(scope.row.lastPeriodIndex) }}%</span
                >
                <i :class="getDownUpIcon(scope.row.lastPeriodIndex)" />
              </template>
            </el-table-column>
            <el-table-column
              label="环比"
              width="70"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <!--                {{ Math.abs(scope.row.lastWeekIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastWeekIndex)" alt=""/>-->
                <span :style="getDownUpColor(scope.row.lastWeekIndex)"
                  >{{ Math.abs(scope.row.lastWeekIndex) }}%</span
                >
                <i :class="getDownUpIcon(scope.row.lastWeekIndex)" />
              </template>
            </el-table-column>
          </el-table>
          <!--          <div-->
          <!--              class="alarm-list"-->
          <!--              v-for="(item, index) in listData"-->
          <!--              :key="index"-->
          <!--              @click="listClick(item)"-->
          <!--          >-->
          <!--            <div class="list-item">-->
          <!--              <div class="title">-->
          <!--                <img-->
          <!--                    src="../../../../assets/images/homepage/localtion-icon.svg"-->
          <!--                    alt-->
          <!--                    @click="flyTo(item, true)"-->
          <!--                />-->
          <!--                <span class="title-txt" :title="item.name">{{ item.name }}</span>-->
          <!--                &lt;!&ndash; <el-button @click.stop="opDialogClick(item)">优化</el-button> &ndash;&gt;-->
          <!--              </div>-->
          <!--              <div class="content" v-if="item.realtimeStatus">-->
          <!--                <template v-if="item.isCongestion">-->
          <!--                  <span>拥堵方向：</span>-->
          <!--                  <span class="value" :title="item.congestionDirs">{{-->
          <!--                      dirObj[item.congestionDirs]-->
          <!--                    }}</span>-->
          <!--                </template>-->
          <!--                <template v-else-if="item.isSpillover">-->
          <!--                  <span>溢出方向：</span>-->
          <!--                  <span class="value" :title="item.spilloverDirs">{{-->
          <!--                      dirObj[item.spilloverDirs]-->
          <!--                    }}</span>-->
          <!--                </template>-->
          <!--                <template v-else-if="item.isUnbalance">-->
          <!--                  <span>失衡方向：</span>-->
          <!--                  <span class="value" :title="item.unbalanceDirs">{{-->
          <!--                      dirObj[item.unbalanceDirs]-->
          <!--                    }}</span>-->
          <!--                </template>-->
          <!--                <span>开始时间：</span>-->
          <!--                <span class="value" :title="item.startTime">{{-->
          <!--                    item.startTime-->
          <!--                  }}</span>-->
          <!--                <span>持续时间：</span>-->
          <!--                <span class="value" :title="item.duration + 'min'">{{-->
          <!--                    item.duration + "min"-->
          <!--                  }}</span>-->
          <!--              </div>-->
          <!--              <div class="content" v-else style="margin-left: 26px;">-->
          <!--                路口状态：正常-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </msg-card>
</template>

<script>
import msgCard from "../../../../components/Standard/msg-card.vue";
import { getAbnormalList } from "@/dao/optApi";

export default {
  name: "cross",
  components: {
    msgCard,
  },
  data() {
    return {
      typeVal: "-",
      dirObj: {
        0: "无",
        1: "北",
        2: "东北",
        3: "东",
        4: "东南",
        5: "南",
        6: "西南",
        7: "西",
        8: "西北",
      },
      filterText: "",
      sourceValue: {
        1: "事故",
        2: "施工",
        3: "拥堵",
        4: "管制",
      },
      sourceClass: {
        事故: "#D43030",
        施工: "#FF8D1A",
        拥堵: "#FFBF00",
        管制: "#FFBF00",
      },
      //列表数据
      listData: [],
      listDataCopy: [],
      kipData: [
        {
          name: "溢出",
          type: 3,
          value: 0,
          color: "#9a0807",
          bg: "rgba(154, 8, 7,0.3)",
        },
        {
          name: "拥堵",
          type: 2,
          value: 0,
          color: "#c56504",
          bg: "rgba(197, 101, 4,0.3)",
        },
        {
          name: "失衡",
          type: 1,
          value: 0,
          color: "#e1b102",
          bg: "rgba(225, 177, 2,0.3)",
        },
        {
          name: "空放",
          type: 5,
          value: 0,
          color: "#87898c",
          bg: "rgba(135, 137, 140,0.3)",
        },
        {
          name: "畅通",
          type: 0,
          value: 0,
          color: "#007b33",
          bg: "rgba(0, 123, 51,0.3)",
        },
      ],
      infoStatusObj: {
        0: "未开启",
        1: "相位差优化",
        2: "选择方案",
      },
      kipActive: { name: "", type: null },
      radio: "",
      loading: true,
    };
  },
  methods: {
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
        return "row-even";
      } else {
        return "row-odd";
      }
    },
    getDownUpIcon(number) {
      if (number > 0) {
        return "el-icon-top";
      }
      if (number < 0) {
        return "el-icon-bottom";
      }
    },
    getDownUpColor(number) {
      if (number > 0) {
        return "color: #c00000";
      }
      if (number < 0) {
        return "color: #0f9900";
      }
    },
    getDownUpImg(number) {
      if (number > 0) {
        return require("@/assets/images/smartCityMain/up.png");
      }
      if (number < 0) {
        return require("@/assets/images/smartCityMain/down.png");
      }
    },
    typeChange(targetType) {
      if (targetType === "-") {
        this.listDataCopy = this.listData.sort((a, b) => {
          return Number(b.congestionIndex) - Number(a.congestionIndex);
        });
      } else {
        this.listDataCopy = this.listData
          .sort((a, b) => {
            return Number(b.congestionIndex) - Number(a.congestionIndex);
          })
          .filter((item) => {
            return item.frequent == targetType;
          });
      }
    },
    rowClick(data) {
      this.$emit("openCrossIndexDetail", data);
    },
    initData() {
      this.typeVal = "-";
      getAbnormalList({
        name: this.filterText,
        status: this.kipActive.type,
        type: null,
      }).then((res) => {
        this.loading = false
        console.log("res right", res);
        if (res && res.code === 200) {
          const data = res.content;
          this.kipData = [
            // {
            //   name: "拥堵",
            //   type: 2,
            //   value: data.abnormalCrossStats.congestion,
            // },
            // {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
            // {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
            // {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
            {
              name: "溢出",
              type: 3,
              value: data.abnormalCrossStats.spillover,
              color: "#9a0807",
              bg: "rgba(154, 8, 7,0.3)",
            },
            {
              name: "拥堵",
              type: 2,
              value: data.abnormalCrossStats.congestion,
              color: "#c56504",
              bg: "rgba(197, 101, 4,0.3)",
            },
            {
              name: "失衡",
              type: 1,
              value: data.abnormalCrossStats.unbalance,
              color: "#e1b102",
              bg: "rgba(225, 177, 2,0.3)",
            },
            {
              name: "空放",
              type: 5,
              value: data.abnormalCrossStats.phaseEmpty,
              color: "#87898c",
              bg: "rgba(135, 137, 140,0.3)",
            },
            {
              name: "畅通",
              type: 0,
              value: data.abnormalCrossStats.normal,
              color: "#007b33",
              bg: "rgba(0, 123, 51,0.3)",
            },
          ];
          this.listData = data.abnormalCrossList
            .sort((a, b) => {
              return Number(b.congestionIndex) - Number(a.congestionIndex);
            })
            .map((item, index) => {
              return { index: index + 1, ...item };
            })
            .sort((a, b) => {
              return Number(b.congestionIndex) - Number(a.congestionIndex);
            });
          this.listDataCopy = JSON.parse(JSON.stringify(this.listData));
        }
      });
    },
    kipClick(item) {
      if (item.type === this.kipActive.type) {
        this.kipActive = { name: "", type: null };
        this.listDataCopy = JSON.parse(JSON.stringify(this.listData));
      } else {
        this.kipActive = { name: item.name, type: item.type };
        this.listDataCopy = this.listData.filter((row) => {
          return row.realtimeStatus == item.type;
        });
      }
    },
    getAll() {
      this.typeVal = "-";
      getAbnormalList({
        name: "",
        status: null,
        type: null,
      }).then((res) => {
        this.loading = false
        if (res && res.code === 200) {
          const data = res.content;
          this.kipData = [
            // {
            //   name: "拥堵",
            //   type: 2,
            //   value: data.abnormalCrossStats.congestion,
            // },
            // {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
            // {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
            // {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
            {
              name: "溢出",
              type: 3,
              value: data.abnormalCrossStats.spillover,
              color: "#9a0807",
              bg: "rgba(154, 8, 7,0.3)",
            },
            {
              name: "拥堵",
              type: 2,
              value: data.abnormalCrossStats.congestion,
              color: "#c56504",
              bg: "rgba(197, 101, 4,0.3)",
            },
            {
              name: "失衡",
              type: 1,
              value: data.abnormalCrossStats.unbalance,
              color: "#e1b102",
              bg: "rgba(225, 177, 2,0.3)",
            },
            {
              name: "空放",
              type: 5,
              value: data.abnormalCrossStats.phaseEmpty,
              color: "#87898c",
              bg: "rgba(135, 137, 140,0.3)",
            },
            {
              name: "畅通",
              type: 0,
              value: data.abnormalCrossStats.normal,
              color: "#007b33",
              bg: "rgba(0, 123, 51,0.3)",
            },
          ];
          this.listData = data.abnormalCrossList
            .sort((a, b) => {
              return Number(b.congestionIndex) - Number(a.congestionIndex);
            })
            .map((item, index) => {
              return { index: index + 1, ...item };
            });
          this.$emit("showCrossStatus", this.listData);
          console.log("listData", this.listData);
          this.listDataCopy = JSON.parse(JSON.stringify(this.listData)).sort(
            (a, b) => {
              return Number(b.congestionIndex) - Number(a.congestionIndex);
            }
          );
        }
      });
    },
  },
  mounted() {
    this.getAll();
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../assets/less/elementTable.less");
.el-icon-top {
  color: #c00000;
}
.el-icon-bottom {
  color: #0f9900;
}
//::v-deep .el-table {
//  background-color: transparent;
//}
//
//::v-deep .el-table th {
//  background-color: #030b19;
//}
//
//::v-deep .el-table tr {
//  background-color: #030b19;
//}
//
//::v-deep .el-table td, .building-top .el-table th.is-leaf {
//  border-bottom: 0 solid #030b19;
//}
//
//::v-deep .el-table::before {
//  border-bottom: 0 solid #030b19;
//  height: 0;
//}
//
//::v-deep .el-table th.el-table__cell {
//  border-bottom: 0 solid #030b19;
//  font-size: 14px;
//}
//
//::v-deep .el-table__body tr:hover > td {
//  background-color: #03274c !important;
//}
//
//::v-deep .el-table__body tr > td {
//  cursor: pointer;
//}
//
//::v-deep .el-table__cell {
//  color: white;
//  font-size: 14px;
//}
//
//// 修改表格无数据背景，字体颜色
//::v-deep .el-table__empty-block {
//  background: #030b19;
//}
//
//::v-deep .el-table__empty-text {
//  color: #ccc;
//}

::v-deep .el-input__inner {
  color: white;
}

.item-cross {
  .list_control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .homepage-search {
      width: 70%;
    }

    .sort_btn {
      width: 25%;

      ::v-deep .el-input__inner {
        background-color: #233b6b;
      }
    }
  }

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

    .kip-box {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-bottom: 5px;

      .kip-item {
        cursor: pointer;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: calc(20% - 4px);
        height: 30px;

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

        &.active {
          border: 1px solid #389fff;
          box-shadow: 0px 4px 10px 0px 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 {
      padding-top: 8px;
      flex: 1;
      overflow: auto;
    }

    .alarm-list {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 12px 15px;
      color: #383838;
      background: rgba(227, 227, 227, 0.35);

      &: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: 1;
        width: 360px;
        font-size: 14px;
        color: #666;
        line-height: 25px;
      }
    }
  }
}
</style>
