<template>
  <div class="twin-situation">
    <!--  资源列表  -->
    <!--dt-card
      :class="{
        'resource-list': true,
        'resource-list__large': isIconModeLarge
      }"
      icon="ri-send-plane-line"
      title="可用资源"
      :visible.sync="resourceList.visible"
      :scroll="false"
      :showClose="false"
      :showDivider="false"
    >
      <template v-slot:header>
        <span class="remote-header">
          <i class="iconfont icon-left_icon_remote"></i>
          可用资源
        </span>
      </template-->
    <!--      <template v-slot:command>-->
    <!--        <el-tooltip-->
    <!--          effect="dark"-->
    <!--          content="详情"-->
    <!--          placement="bottom"-->
    <!--        >-->
    <!--          <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
    <!--        </el-tooltip>-->
    <!--      </template>-->
    <!--div class="resource-list__content">
        <div v-for="item in resourceList.data" :key="item.id" class="resource-item" @click.stop="resourceClick(item)">
          <span class="device-status" :class="item.status ? 'device-status__online' : ''"></span>
          <span class="icon"><i class="ri-dv-line"></i></span>
          <span class="device-name">{{item.name}}</span>
          <span class="battery" :class="getDeviceBatteryClass(item.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{item.battery}}%</span>
          <span class="fly-height"><i class="ri-expand-vertical-line"></i>{{item.flyHeight}}m</span>
          <span class="device-location"><i class="ri-map-pin-line"></i>{{item.lon}},{{item.lat}}</span>
          <i class="iconfont icon-zhuizong device-lock" @click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"></i>
        </div>
      </div>
    </dt-card-->

    <left-slide class="task-info-wrap">
      <dt-card
        :class="{
          'task-list': true,
          'task-list__large': isIconModeLarge,
        }"
        :visible.sync="taskList.visible"
        :scroll="false"
        :showClose="false"
        :showDivider="false"
      >
        <template v-slot:header>
          <span class="remote-header">
            <i class="ri-task-fill"></i>
            执行中的任务
          </span>
        </template>
        <!--      <template v-slot:command>-->
        <!--        <el-tooltip-->
        <!--          effect="dark"-->
        <!--          content="上传精处理图片"-->
        <!--          placement="top"-->
        <!--        >-->
        <!--          <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
        <!--        </el-tooltip>-->
        <!--      </template>-->
        <div class="task-list__content">
          <template v-if="taskList.data.length">
            <div
              v-for="(item, index) in taskList.data"
              :key="item.id"
              class="task-item"
            >
              <div class="left-part">
                <!--            <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
                <div class="execute-info" @click="openTaskLineDetail(item)">
                  <span
                    class="execute-type-icon"
                    :class="'execute-state-' + item.status"
                    ><i class="ri-playstation-line"></i
                  ></span>
                  <span class="task-execute">{{ item.name }}</span>
                </div>
                <div class="task-info" :style="{color:dealStatusColor(item.statusName)}">
                  {{ item.statusName }}
                </div>
                <div class="task-time">{{ item.beginTime }}</div>
              </div>
              <div class="right-part">
                <el-tooltip
                  effect="dark"
                  :content="item.check ? '隐藏' : '显示'"
                  placement="right"
                >
                  <i
                    :class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'"
                    @click.stop="toggleTaskSceneShow(item, index)"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  v-if="item.status === 0"
                  effect="dark"
                  content="执行"
                  placement="right"
                >
                  <i
                    class="ri-flight-takeoff-line"
                    @click.stop="makeTaskUavFly(item, index)"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="结束任务"
                  placement="right"
                  v-if="item.status === 1"
                >
                  <i
                    class="ri-stop-circle-line"
                    @click.stop="stopTask(item, index)"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="重新执行"
                  placement="right"
                  v-if="item.status === 2"
                >
                  <i
                    class="ri-repeat-line"
                    @click.stop="reRunTask(item, index)"
                  ></i>
                </el-tooltip>
                <!--            <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
                <!--            <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
              </div>
            </div>
          </template>
          <div v-else class="task-empty">
            <img :src="emptyImg" alt="" />
            <p>暂无执行中的任务</p>
          </div>
        </div>
      </dt-card>
    </left-slide>

    <!-- 图片上传   -->
    <pictures-upload
      v-if="uploadPictureInfo.visible"
      :visible.sync="uploadPictureInfo.visible"
    ></pictures-upload>

    <!--  气象预警  -->

    <right-slide v-show="false" class="weather-info-wrap">
      <dt-card
        :class="{
          'weather-info': true,
          'weather-info__shrink': weatherInfo2.shrink,
          'weather-info__large': isIconModeLarge,
        }"
        icon="iconfont icon-target"
        title="气象预警"
        :visible.sync="rightShow"
        :scroll="false"
        :showClose="false"
        :showDivider="false"
      >
        <div class="weather-info__content2">
          <div class="base-info">
            <div>
              <span>温度：</span><span>{{ weatherInfo2.wendu }}</span>
            </div>
            <div>
              <span>湿度：</span><span>{{ weatherInfo2.shidu }}</span>
            </div>
            <div>
              <span>空气质量：</span><span>{{ weatherInfo2.quality }}</span>
            </div>
            <div>
              <span>pm25：</span><span>{{ weatherInfo2.pm25 }}</span>
            </div>
            <div>
              <span>pm10：</span><span>{{ weatherInfo2.pm10 }}</span>
            </div>
          </div>
          <div class="week-info">
            <div
              v-for="item in weatherInfo2.weekData"
              :key="item.ymd"
              class="week-info-item"
            >
              <div>{{ item.week }}</div>
              <div>{{ item.type }}</div>
              <div>
                <span>{{ item.temperatureRange[0] }}</span
                >~<span>{{ item.temperatureRange[0] }}</span>
              </div>
              <div>{{ item.fx }}</div>
              <div>{{ item.fl }}</div>
            </div>
          </div>
          <!--        <div class="visibility-chart">-->
          <!--          <dt-multiple-analysis-->
          <!--            ref="chart"-->
          <!--            :data="weatherInfo2.chart.data"-->
          <!--            :legend="weatherInfo2.chart.legend"-->
          <!--            :tooltip="weatherInfo2.chart.tooltip"-->
          <!--            :title="weatherInfo2.chart.title"-->
          <!--            :grid="weatherInfo2.chart.grid"-->
          <!--            :xAxis="weatherInfo2.chart.xAxis"-->
          <!--            :yAxis="weatherInfo2.chart.yAxis"-->
          <!--          ></dt-multiple-analysis>-->
          <!--        </div>-->
        </div>
      </dt-card>
    </right-slide>

    <!--  雷达图  -->

    <!--right-slide class="radar-info-wrap">
      <dt-card
        :class="{
        'radar-info': true,
        'radar-info__large': isIconModeLarge
      }"
        icon="iconfont icon-target"
        title="缩略图"
        :visible.sync="rightShow"
        :scroll="false"
        :showClose="false"
        :showDivider="false"
      >
        <template v-slot:command>
          <el-tooltip
            effect="dark"
            content="重建"
            placement="bottom"
          >
            <i class="el-icon-refresh" style="cursor: pointer;" @click.stop="refreshRadar"></i>
          </el-tooltip>
        </template>
        <div class="radar-canvas" ref="radarCanvas"></div>
      </dt-card>
    </right-slide-->

    <!--  详情  -->
    <right-slide class="detail-info-wrap" v-if="detailInfo.visible">
      <dt-card
        :class="{
          'detail-info': true,
          'detail-info__large': isIconModeLarge,
        }"
        icon="iconfont icon-target"
        title="详细信息"
        v-if="detailInfo.visible"
        :visible.sync="detailInfo.visible"
        :scroll="false"
        :showClose="true"
        :showDivider="false"
      >
        <div class="detail-info__content">
          <div class="base-info">
            <!--    无人机      -->
            <div class="uav-item">
              <span
                class="device-status"
                :class="getDeviceSignalClass(detailInfo.baseInfo.signal)"
              ></span>
              <span class="icon"><i class="ri-dv-line"></i></span>
              <span class="device-name">{{ detailInfo.baseInfo.name }}</span>
              <span
                class="battery"
                :class="getDeviceBatteryClass(detailInfo.baseInfo.battery)"
                style="opacity: 0"
                ><i class="ri-battery-saver-line"></i
                >{{ detailInfo.baseInfo.battery }}%</span
              >
              <span class="fly-height"
                ><i class="ri-expand-vertical-line"></i
                >{{ detailInfo.baseInfo.flyHeight }}m</span
              >
              <span class="device-location"
                ><i class="ri-map-pin-line"></i>{{ detailInfo.baseInfo.lon }},{{
                  detailInfo.baseInfo.lat
                }}</span
              >
              <i class="el-icon-info device-lock" @click="showUavMore"></i>
            </div>
          </div>
          <!--        <div class="target-task-list">-->
          <!--          <div class="target-task-item" v-for="item in detailInfo.taskList" :key="item.id">-->
          <!--            <div class="execute-info">-->
          <!--              <span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>-->
          <!--              <span class="task-execute">{{ item.name }}</span>-->
          <!--            </div>-->
          <!--            <div class="task-time">{{item.beginTime}}</div>-->
          <!--          </div>-->
          <!--        </div>-->
          <div class="picture-list">
            <div>回传图像：</div>
            <div
              v-for="item in detailInfo.pictureList"
              :key="item.createTime"
              class="picture-list-item"
            >
              <div class="picture-item-image">
                <el-image
                  style="width: 40px; height: 40px"
                  :src="item.url"
                  :preview-src-list="[item.url]"
                >
                </el-image>
              </div>
              <div class="picture-item-info">
                <div>
                  拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
                    item.loaderName
                  }}
                </div>
                <div>拍摄时间：{{ item.createTime }}</div>
              </div>
              <div class="picture-command">
                <i
                  class="iconfont icon-dt-icon-dingwei"
                  @click="lockHistoryPicture(item)"
                ></i>
                <i
                  class="iconfont icon-quanjushijiao-copy"
                  @click="toggleHistoryPicture(item)"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </dt-card>
    </right-slide>

    <!--  详情  -->
    <dt-card
      :class="{
        'detail-uav': true,
        'detail-uav__large': isIconModeLarge,
      }"
      icon="iconfont icon-target"
      title="详细信息"
      v-if="detailUav.visible"
      :visible.sync="detailUav.visible"
      :scroll="true"
      :showClose="true"
      :showDivider="false"
    >
      <div class="detail-uav__content">
        <div class="image-info">
          <img :src="detailUav.baseInfo.url" alt="" />
          <div class="status-info">
            <div>
              <span
                :class="
                  detailUav.baseInfo.status
                    ? 'uav-status-online'
                    : 'uav-status-offline'
                "
              ></span>
              <span>{{ detailUav.baseInfo.status ? '在线' : '离线' }}</span>
              <!--              <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
              <span
                ><i class="ri-expand-vertical-line"></i
                >{{ detailUav.baseInfo.flyHeight }}m</span
              >
              <!--              <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
            </div>
            <div>
              <span>{{ detailUav.baseInfo.longitude }}</span>
              <span>{{ detailUav.baseInfo.latitude }}</span>
              <i
                class="iconfont icon-zhuizong"
                @click.stop="
                  flyToTarget(
                    detailUav.baseInfo.longitude,
                    detailUav.baseInfo.latitude,
                    detailUav.baseInfo.flyHeight
                  )
                "
              ></i>
            </div>
          </div>
        </div>
        <div class="other-info">
          <el-collapse
            v-model="detailUav.activeNames"
            @change="handleUavDetailCollapse"
          >
            <!--            <el-collapse-item title="基本信息" name="1">-->
            <!--              <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
            <!--              <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
            <!--            </el-collapse-item>-->
            <!--            <el-collapse-item title="任务信息" name="2">-->
            <!--              <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
            <!--                <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
            <!--                <div class="task-info">-->
            <!--                  <i :class="item.typeIcon"></i>-->
            <!--                  <span class="task-name">{{ item.taskName }}</span>-->
            <!--                  <span :class="{ 'task-finish': item.isFinish }">{{-->
            <!--                      item.uavCompletionName-->
            <!--                    }}</span>-->
            <!--                </div>-->
            <!--                <div class="task-time">{{item.taskTime}}</div>-->
            <!--              </div>-->
            <!--            </el-collapse-item>-->
            <el-collapse-item title="状态信息" name="3">
              <el-tabs v-model="detailUav.activeTab">
                <el-tab-pane label="DEV" name="DEV">
                  <div
                    class="uav-span-wrap"
                    v-for="item in detailUav.statusInfo.dev"
                    :key="item.name"
                  >
                    <span>{{ item.name }}：</span>
                    <span>{{ item.value }}{{ item.unit }}</span>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="GPS" name="GPS">
                  <div
                    class="uav-span-wrap"
                    v-for="item in detailUav.statusInfo.gps"
                    :key="item.name"
                  >
                    <span>{{ item.name }}：</span>
                    <span>{{ item.value }}{{ item.unit }}</span>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="IMU" name="IMU">
                  <div
                    class="uav-span-wrap"
                    v-for="item in detailUav.statusInfo.imu"
                    :key="item.name"
                  >
                    <span>{{ item.name }}：</span>
                    <span>{{ item.value }}{{ item.unit }}</span>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-collapse-item>
            <el-collapse-item title="波形信息" name="4">
              <div class="wave-chart">
                <dt-multiple-analysis
                  ref="uavDetailChart"
                  :data="detailUav.chart.data"
                  :legend="detailUav.chart.legend"
                  :tooltip="detailUav.chart.tooltip"
                  :title="detailUav.chart.title"
                  :grid="detailUav.chart.grid"
                  :xAxis="detailUav.chart.xAxis"
                  :yAxis="detailUav.chart.yAxis"
                ></dt-multiple-analysis>
              </div>
            </el-collapse-item>
            <el-collapse-item title="回传图像" name="5">
              <div class="back-image">
                <div
                  v-for="item in detailInfo.pictureList"
                  :key="item.time"
                  class="picture-list-item"
                >
                  <div class="picture-item-image">
                    <el-image
                      style="width: 40px; height: 40px"
                      :src="item.url"
                      :preview-src-list="[item.url]"
                    >
                    </el-image>
                  </div>
                  <div class="picture-item-info">
                    <div>
                      拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
                        item.loaderName
                      }}
                    </div>
                    <div>拍摄时间：{{ item.time }}</div>
                  </div>
                  <div class="picture-command">
                    <i
                      class="iconfont icon-dt-icon-dingwei"
                      @click="lockHistoryPicture(item)"
                    ></i>
                    <i
                      class="iconfont icon-quanjushijiao-copy"
                      @click="toggleHistoryPicture(item)"
                    ></i>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </dt-card>

    <dt-dialog
      :title="taskLineDetail.title"
      top="20vh"
      width="60vw"
      :visible.sync="taskLineDetail.visible"
      append-to-body
    >
      <div class="task-line-detail">
        <el-table :data="taskLineDetail.data" height="100%" style="width: 100%">
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="startLon" label="起点经度"> </el-table-column>
          <el-table-column prop="startLat" label="起点纬度"> </el-table-column>
          <el-table-column prop="startHeight" label="起点相对高度">
          </el-table-column>
          <el-table-column prop="startAlt" label="起点海拔高度">
          </el-table-column>
          <el-table-column prop="endLon" label="终点经度"> </el-table-column>
          <el-table-column prop="endLat" label="终点纬度"> </el-table-column>
          <el-table-column prop="endHeight" label="终点相对高度">
          </el-table-column>
          <el-table-column prop="endAlt" label="终点海拔高度">
          </el-table-column>
        </el-table>
      </div>
    </dt-dialog>

    <dt-loading :visible="loadingCount > 0"></dt-loading>
  </div>
</template>
<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
