<template>
  <div class="app-container">
    <div v-if="isShowUpdate" class="container">
      <addModal ref="addModel" @success="modalSuccess" @back="back" />
    </div>
    <div class="uav-container" v-if="!isShowUpdate">
      <div class="uav-container-left">
        <div class="uav-left-top">
          <div class="uav-right-top-tit uav-left-top-text">无人机分布</div>
          <div class="uav-right-top-icon">
            <span class="top-icon-text">无人机数量：</span>
            <span class="top-icon-num">125</span>
          </div>
        </div>
        <div class="uav-left-echarts">
          <LineEcharts></LineEcharts>
        </div>
        <div class="uav-left-echarts">
          <KeyBoard :options="options"></KeyBoard>
        </div>
      </div>
      <div class="uav-container-right">
        <div class="uav-right-top">
          <div class="uav-right-top-tit">今日数据与历史数据</div>
          <div class="uav-right-top-data">
            <div class="uav-right-top-data-1">
              <div class="top-data-item">
                <div class="top-data-item-text">今日黑飞数</div>
                <div class="top-data-item-num">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">今日反制成功数</div>
                <div class="top-data-item-num">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">今日反制失败数</div>
                <div class="top-data-item-num">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">今日反制成功率</div>
                <div
                  class="top-data-item-num"
                  style="color: rgba(76, 215, 246, 1)"
                >
                  65
                </div>
              </div>
            </div>
            <div class="uav-right-top-data-1">
              <div class="top-data-item">
                <div class="top-data-item-text">历史黑飞数</div>
                <div class="top-data-item-num" style="color: #007eff">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">历史反制成功数</div>
                <div class="top-data-item-num" style="color: #007eff">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">历史反制失败数</div>
                <div class="top-data-item-num" style="color: #007eff">65</div>
              </div>
              <div class="top-data-item">
                <div class="top-data-item-text">历史反制成功率</div>
                <div
                  class="top-data-item-num"
                  style="color: rgba(76, 215, 246, 1)"
                >
                  65
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="uav-right-tab">
          <div class="uav-right-tab-top">
            <div class="uav-right-top-tit">反制记录</div>
            <div class="tab-top-more" @click="getMoreData">
              更多<i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div>
            <!-- 主体表格 -->
            <el-table
              :data="tableData"
              v-loading="listLoading"
              border
              fit
              highlight-current-row
              class="table"
            >
              <el-table-column align="center" width="80" label="序号">
                <template slot-scope="scope">
                  {{ indexMethod(scope.$index) }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="carNumber" label="地点">
              </el-table-column>
              <el-table-column
                align="center"
                prop="warningTime"
                label="发现时间"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="warningTime"
                label="反制时间"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="warningHitType"
                label="状态"
              >
                <template v-slot="{ row }">
                  <el-tag v-if="row.warningHitType == 2">成功</el-tag>
                  <el-tag type="danger" v-else>失败</el-tag>
                </template>
              </el-table-column>

              <!--分页栏-->
            </el-table>
            <pagination
              :total="total"
              :page.sync="page.pageNum"
              :limit.sync="page.pageSize"
              @pagination="fetchData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getwarningCarLogPageList } from "@/api/carWarning";
import Pagination from "@/components/Pagination";
import AddModal from "./modal/AddModal.vue";
import LineEcharts from "./components/LineEcharts.vue";
import KeyBoard from "./components/Keyboard.vue";
export default {
  components: { Pagination, AddModal, LineEcharts, KeyBoard },
  data() {
    return {
      listLoading: false,
      tableData: [],
      total: 0,
      isShowUpdate: false,
      // 页面
      page: {
        // 搜索表单
        data: {
          warningGrade: "",
          carNumber: "",
          carType: "",
          warningAddress: "",
          warningHitType: "",
          controlAdminId: "",
          startTime: "",
          endTime: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      options: {
        title: {
          text: "黑飞数量时间段分布",
        },
        grid: {
          top: 70,
          bottom: 70,
          left: 60,
          right: 30,
        },
        xAxis: [
          {
            type: "category",
            data: ["地点1", "地点2", "地点3", "地点4", "地点5"],
            axisLabel: {
              fontSize: 18,
              color: "#35445FCC",
            },
            // x轴最下面的线
            axisLine: {
              show: true, // X轴 网格线 颜色类型的修改
              lineStyle: {
                type: "dashed",
                color: "#35445FCC",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          //y轴名字
          axisLabel: {
            show: true,
            textStyle: {
              color: "#35445FCC",
              fontSize: 16,
            },
          },
          // x轴线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#606C8026",
            },
          },
          interval: 50, // 设置刻度间隔为 50
        },
        series: [
          {
            // name: this.legend[0],
            // data: this.yAxisData,
            data: [30, 90, 80, 130, 120],
            // showSymbol: false, //去掉折线上的小圆点
            type: "line",
            //设置折线颜色和粗细
            lineStyle: {
              width: 3,
              color: "#6881FF",
            },
            barWidth: 20,
            itemStyle: {
              color: "#6881FF",
            },
            symbolSize: 10, // 设置折线上的小圆点大小为 10px
          },
        ],
      },
    };
  },
  created() {
    // this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getwarningCarLogPageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    getMoreData() {
      this.isShowUpdate = true;
    },
    modalSuccess() {
      // this.fetchData();
    },
    back() {
      this.isShowUpdate = false;
      // this.fetchData();
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.uav-container {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.uav-container-left {
  width: 68%;
  .uav-left-top {
    position: relative;
    height: 500px;
    border-radius: 12px;
    box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
    .uav-left-top-text {
      padding: 10px;
    }
    .uav-right-top-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 186px;
      height: 50px;
      border-radius: 16px;
      border: 2px solid #007eff;
      text-align: center;
      line-height: 50px;
      font-weight: 700;
      .top-icon-text {
        font-size: 17px;
        line-height: 25.5px;
        color: #007eff;
      }
      .top-icon-num {
        font-size: 22px;
        line-height: 33px;
        color: #35445f;
      }
    }
  }

  .uav-left-echarts {
    height: 294px;
    margin: 20px 0;
    border-radius: 12px;
    padding: 20px 0 0 20px;
    box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
  }
}
.uav-container-right {
  width: 30%;
  .uav-right-top {
    height: 241px;
    border-radius: 12px;
    box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
    padding: 10px;
    .uav-right-top-data {
      margin: 30px 20px 20px 0;

      .uav-right-top-data-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
        .top-data-item {
          width: calc(100%-60px) / 4;
          margin-left: 20px;
          .top-data-item-text {
            font-size: 14px;
            font-weight: 500;
            line-height: 21px;
            text-align: center;
          }
          .top-data-item-num {
            font-size: 20px;
            font-weight: 700;
            line-height: 40px;
            text-align: center;
            color: #ff7b00;
          }
        }
      }
    }
  }
  .uav-right-tab {
    height: 863px;
    margin: 20px 0;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
    .uav-right-tab-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tab-top-more {
        width: 75px;
        text-align: right;
        font-size: 15px;
        font-weight: 400;
        line-height: 22.5px;
        color: rgba(53, 68, 95, 0.7);
      }
    }
  }
}
.uav-right-top-tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
}
</style>
