<template>
  <div class="df">
    <div class="left-top">
      <div id="map-container" class="map-container"></div>
      <div class="df aic tabs">
        <div
          @click="changeVoyageType(0)"
          :class="
            status == 0
              ? 'currentbtn radio-btns left-radius'
              : 'radio-btns left-radius'
          "
        >
          全部航次
        </div>
        <div
          style="border-left: none"
          @click="changeVoyageType(1)"
          :class="status == 1 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          装货中
        </div>

        <div
          style="border-left: none"
          @click="changeVoyageType(2)"
          :class="status == 2 ? 'currentbtn radio-btns' : 'radio-btns'"
        >
          运输中
        </div>
        <div
          style="border-left: none"
          @click="changeVoyageType(3)"
          :class="
            status == 3
              ? 'currentbtn radio-btns right-radius'
              : 'radio-btns right-radius '
          "
        >
          卸货中
        </div>
      </div>
    </div>
    <div class="right-top">
      <div class="cards card-1">
        <div>总航次数</div>
        <div>{{ indexData.totalVoyageNum }}</div>
      </div>
      <div class="cards card-2">
        <div>总实际装载吨位</div>
        <div>{{ indexData.totalLoadTons }}</div>
      </div>
      <div class="cards card-3">
        <div>总已完成卸货吨位</div>
        <div>{{ indexData.finshDiscTons }}</div>
      </div>
      <div class="cards card-4">
        <div>总剩余卸货吨位</div>
        <div>{{ indexData.unfinshDiscTons }}</div>
      </div>
      <div id="pie" class="card-5">
        <div>饼图</div>
        <div>卸货</div>
      </div>
    </div>
  </div>
  <div class="df">
    <div class="left-bottom">
      <div
        class="df aic jcfs mt20"
        style="
          font-size: 14px;
          color: #333;
          width: calc(100vw - 300px);
          flex-wrap: wrap;
        "
      >
        <div class="df jcsb aic mb10 mr20 ml20">
          <div class="mr10">装货港:</div>
          <el-select
            style="width: 120px"
            v-model="postData.loadPortId"
            placeholder="装货港"
            size="small"
            @change="getIndexData(1)"
            @focus="getPortSelect"
            filterable
            clearable
          >
            <el-option
              v-for="item in portOptions"
              :key="item"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="df jcsb aic mb10 mr20">
          <div class="mr10">卸货港:</div>
          <el-select
            style="width: 120px"
            v-model="postData.discPortId"
            placeholder="卸货港"
            size="small"
            @change="getIndexData(1)"
            @focus="getPortSelect"
            filterable
            clearable
          >
            <el-option
              v-for="item in portOptions"
              :key="item"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </div>
        <div class="df jcsb aic mb10 mr20">
          <div class="mr10">到港状态:</div>
          <el-select
            style="width: 120px"
            v-model="postData.isArrived"
            placeholder="到港状态"
            size="small"
            @change="getIndexData(1)"
          >
            <el-option label="已到港" :value="0" />
            <el-option label="未到港" :value="1" />
          </el-select>
        </div>
        <div class="df jcsb aic mb10 mr20">
          <div class="mr10">航次状态:</div>
          <el-select
            style="width: 120px"
            v-model="postData.abnormalStatus"
            placeholder="航次状态"
            size="small"
            @change="getIndexData(1)"
          >
            <el-option label="正常" :value="0" />
            <el-option label="异常" :value="1" />
          </el-select>
        </div>
        <div class="df jcsb aic mb10 mr20">
          <div class="mr10">货种:</div>
          <el-select
            style="width: 100px"
            v-model="postData.cargoId"
            placeholder="货种"
            size="small"
            @change="getIndexData(1)"
            @focus="getCargoSelect"
            filterable
            clearable
          >
            <el-option
              v-for="item in cargoOptions"
              :key="item"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </div>
        <el-button
          @click="resetFilter"
          class="mb10"
          size="small"
          type="primary"
        >
          重置
        </el-button>
      </div>
    </div>
    <div class="right-bottom">
      <el-popover placement="top" :width="100" trigger="hover">
        <template #reference>
          <el-button size="large" type="primary">导出报告</el-button>
        </template>
        <div
          style="
            display: flex;
            flex-direction: column;
            height: 180px;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div>
            <el-button
              type="primary"
              size="medium"
              v-auth="'DOWNLOADVOYAGELIST'"
              @click="showExportModal('航次列表')"
            >
              导出航次列表
            </el-button>
          </div>
          <div>
            <el-button
              type="primary"
              size="medium"
              v-auth="'MULTDOWNLOADSHIPTRACK'"
              @click="showExportModal('航次跟踪')"
            >
              导出航次跟踪
            </el-button>
          </div>
          <div>
            <el-button
              type="primary"
              size="medium"
              @click="showExportModal('卸货记录')"
              v-auth="'MULTDOWNLOADDISCHARGE'"
            >
              导出卸货记录
            </el-button>
          </div>
          <div>
            <el-button
              v-auth="'DOWNLOADFYDI'"
              type="primary"
              size="medium"
              @click="downloadFYDI"
            >
              下载FYDI指数
            </el-button>
          </div>
        </div>
      </el-popover>
      <el-dialog
        v-model="exportModalVisable"
        :title="exportModalTitle"
        :close-on-click-modal="false"
        @close="isLoadingZip = false"
        width="200px"
      >
        <div class="df aic jcsb">
          <div
            v-if="exportModalTitle != '航次列表' || cargoOwnerId == 7"
            class="df aic"
          >
            <div class="mr20">请选择月份:</div>
            <el-date-picker
              v-model="currentMonth"
              type="month"
              placeholder="请选择年月"
              value-format="YYYYMM"
              :disabled="isLoadingZip"
            />
          </div>
          <div></div>
          <el-button type="primary" @click="exportZip" :loading="isLoadingZip">
            导出{{ exportModalTitle }}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, computed, onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import store from "../../store";
import router from "../../router";

import md5 from "md5";
import api from "../../apis/fetch";
import downloadBlobFile from "../../utils/downloadBlobFile";
import url from "../../apis/config";
let map = ref({});
let cargoOwnerId = localStorage.userId;
let echarts = inject("ec");

function initMap() {
  map.value = new AMap.Map("map-container", {
    zoom: 11, //级别
    center: [120.563757, 31.891174], //中心点坐标
    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
    zoomEnable: false,
    dragEnable: false,
  });
  let toolBar = new AMap.ToolBar({
    position: {
      top: "40px",
      right: "40px",
    },
  });
  let hawkEye = new AMap.HawkEye({
    opened: false,
  });
  // map.value.addControl(toolBar);
  map.value.addControl(hawkEye);
  drawMarkers();
  drawPie();
}

function drawMarkers() {
  let markers = [];
  for (let i of indexData.value.mapPoints) {
    if (i.latitude && i.longitude) {
      let content = `<div style='width:160px'>
        ${
          i.audit == 1
            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
            : ``
        }
        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
      </div>`;

      let marker = new AMap.Marker({
        content,
        position: new AMap.LngLat(i.longitude, i.latitude),
        offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
      });
      if (i.audit == 1) {
        marker.on("click", () => {
          openMediaModal(i.viewUrl, 1, "航次图片", i);
        });
      }

      markers.push(marker);
    }
  }
  let overlayGroups = new AMap.OverlayGroup(markers);
  map.value.add(overlayGroups);
  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
}
let status = ref(0);
function changeVoyageType(s) {
  status.value = s;
  getIndexData();
}

let postData = ref({
  status: 0,
  loadPortId: "",
  discPortId: "",
  isArrived: "",
  abnormalStatus: "",
  cargoId: "",
});
let indexData = ref({
  finshDiscTons: "",
  mapPoints: [],
  totalLoadTons: "",
  totalVoyageNum: "",
  unfinshDiscTons: "",
});
async function getIndexData(type) {
  console.log(type);

  postData.value.status = status.value;
  let res = await api.getIndexData({
    ...postData.value,
  });
  if (res.data.status == 0) {
    indexData.value = res.data.result;
    if (type == "init") {
      console.log(1);
      initMap();
      drawPie("init");
    } else {
      map.value.clearMap();
      drawMarkers();
      console.log(2);
      drawPie();
    }
  }
}
let chartDom = ref({});
let myChart = ref({});

function drawPie(type) {
  if (!myChart.value.id) {
    chartDom.value = document.getElementById("pie");
    myChart.value = echarts.init(chartDom.value);
  }

  let option;

  option = {
    grid: {
      bottom: 500,
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        center: ["50%", "65%"],
        type: "pie",
        radius: "60%",
        data: [
          { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
          { value: indexData.value.unfinshDiscTons, name: "剩余卸货吨位" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          show: true,
          position: "inner", // 数值显示在内部
          formatter: "{d}%", // 格式化数值百分比输出
        },
      },
    ],
  };
  myChart.value.setOption(option);
}

let portOptions = ref([]);
async function getPortSelect() {
  if (portOptions.value.length) return;
  let res = await api.getCol({
    term: "",
  });
  portOptions.value = res.data.result;
}

let cargoOptions = ref([]);
async function getCargoSelect() {
  if (cargoOptions.value.length) return;
  let res = await api.getCargoSelect({
    status: 2,
    term: "",
  });
  cargoOptions.value = res.data.result;
}

async function downloadFYDI() {
  let res0 = await api.getFYFIDownloadUrl({
    loginAccountId: localStorage.loginAccountId,
  });

  if (res0.data.result == 1) {
    ElNotification({
      type: "info",
      title: "更新中",
    });
  } else {
    let url = res0.data.result;
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.click();
  }
}

let exportModalVisable = ref(false);
let exportModalTitle = ref("");
let currentMonth = ref("");

function showExportModal(type) {
  exportModalVisable.value = true;
  exportModalTitle.value = type;
}

let isLoadingZip = ref(false);

async function exportZip() {
  if (!currentMonth.value && exportModalTitle.value != "航次列表") return;

  isLoadingZip.value = true;
  let path = "";
  let type = "";
  let postData = {
    loginAccountId: localStorage.loginAccountId,
  };
  let title = "";
  switch (exportModalTitle.value) {
    case "航次列表": {
      if (localStorage.userId == 7) {
        path = "/voyage/exportVoyageReportExcel";
        postData.loginAccountId = localStorage.loginAccountId;
        postData.date = currentMonth.value;
      } else {
        path = "/voyage/exportListExcel";
        let arr = [];
        for (let i of tableData.value) {
          arr.push(i.id);
        }
        postData.voyageIds = arr.join(",");
      }
      type =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
      title = `${exportModalTitle.value}`;
      break;
    }
    case "航次跟踪": {
      path = "/voyage/exportMultExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;

      break;
    }
    case "卸货记录": {
      path = "/voyage/exportMultDischargeExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;
      break;
    }
  }
  try {
    let res = await downloadBlobFile(
      `${url.baseurl}${path}`,
      postData,
      title,
      "post",
      type
    );
    if (res.status == 0) {
      ElNotification({
        title: "导出成功!",
        type: "success",
      });
    } else {
      ElNotification({
        title: "暂无数据",
      });
    }
  } catch (error) {
    ElNotification({
      title: "暂无数据",
    });
  } finally {
    isLoadingZip.value = false;
    currentMonth.value = "";
    exportModalVisable.value = false;
  }
}

function resetFilter() {
  postData.value = {
    status: 0,
    loadPortId: "",
    discPortId: "",
    isArrived: "",
    abnormalStatus: "",
    cargoId: "",
  };
  getIndexData();
}
onMounted(() => {
  getPortSelect();
  getCargoSelect();
  getIndexData("init");
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.tabs {
  position: absolute;
  top: 20px;
  left: 30px;
}

.radio-btns {
  height: 38px;
  width: 70px;
  border: 1px solid #1486f9;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  cursor: pointer;
  background: #fff;
}

.left-radius {
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  width: 80px;
}

.right-radius {
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
  width: 80px;
}
.currentbtn {
  background: #1486f9;
  color: #fff;
}

.left-top {
  width: calc(100% - 280px);
  height: calc(100vh - 238px);
  position: relative;
}

.right-top {
  width: 280px;
  height: calc(100vh - 238px);
  background: #fff;
  text-align: center;
  color: #3992de;
}

.left-bottom {
  width: calc(100% - 280px);
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.right-bottom {
  width: 280px;
  height: 100px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

:deep() .el-dialog {
  width: 800px;
}
.cards {
  height: 15%;
  border-bottom: 1px solid grey;
}

.cards > div:first-child {
  font-size: 2vh;
  padding-top: 6%;
  padding-bottom: 6%;
}

.cards > div:last-child {
  font-size: 1.5vh;
}
/* 
.cards {
}
.card-1 {
}
.card-2 {
}
.card-3 {
}
.card-4 {
} */
.card-5 {
  height: 30%;
}
</style>
