<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import GdMap from "@/components/Map/GdMap/index.vue";
import {
  onMounted,
  reactive,
  ref,
  watchEffect,
  defineAsyncComponent
} from "vue";
import {
  fetchTbZdxlFgdwSelectList,
  fetchTbZdxlFgxlrwSelectList
} from "@/api/service/taskProgress";
import emitter from "@/utils/eventBus";
import TaskDetailsDialog from "@/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue";

const visible = ref(false);
const taskDetailsRef = ref(null);
const data = reactive({
  currentDate: "",
  list: []
});

const fetchTaskList = async () => {
  if (!data.currentDate) return;
  // const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
  const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
  emitter.emit("deletePointArea", "zdxl_fzyc");
  if (res && res?.length > 0) {
    data.list = res;

    let cc = [];
    const list = data.list?.map((el, index) => {
      let centerPoint = [el.zxX, el.zxY];
      if (index == 0) cc = centerPoint;
      let position = [
        [Number(el.x1), Number(el.y1)],
        [Number(el.x2), Number(el.y2)]
      ];
      let text = el.mc;
      let obj = { position: position, text, id: el.id, userData: el };
      return obj;
    });

    emitter.emit("echoPlane", {
      fontColor: "red",
      coords: list,
      type: "rectangle",
      flag: "zdxl_fzyc",
      color: "rgba(2,20,51,0.5)",
      linecolor: "#ee0629"
    });
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  } else {
    data.list = [];
  }
};

const info = ref([]);
const getData = async () => {
  const res = await fetchTbZdxlFgdwSelectList();
  if (res && res?.length > 0) {
    emitter.emit("deletePointArea", "tbZdxlFgdw");

    let cc = [];
    const list = res?.map((el, index) => {
      let centerPoint = [el.zxX, el.zxY];
      if (index == 0) cc = centerPoint;
      let position = [
        [Number(el.x1), Number(el.y1)],
        [Number(el.x2), Number(el.y2)]
      ];
      let text = el.mc;
      let obj = { position: position, text, id: el.id, userData: el };
      return obj;
    });

    info.value = list;
    emitter.emit("echoPlane", {
      fontColor: "#12fdb8",
      coords: list,
      type: "rectangle",
      flag: "tbZdxlFgdw",
      color: "rgba(2,20,51,0.5)",
      linecolor: "#1C97FF"
    });
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  }

  await fetchTaskList();
};

const handleChange = (val) => {
  fetchTaskList();
};

const handleItem = (item) => {
  const { zxX, zxY } = item;
  emitter.emit("setMapCenter", { location: [zxX, zxY], zoomLevel: 14 });
};

const handleUpdate = () => {
  emitter.emit("echoPlane", {
    fontColor: "#12fdb8",
    coords: info.value,
    type: "rectangle",
    flag: "tbZdxlFgdw",
    color: "rgba(2,20,51,0.5)",
    linecolor: "#1C97FF"
  });
};

onMounted(async () => {
  // 设置当前日期
  const today = new Date();
  data.currentDate = today.toISOString().split("T")[0]; // 格式化为 YYYY-MM-DD
  await getData();
  emitter.on("showFzycInfo", (data) => {
    taskDetailsRef.value?.open(data?.info);
  });
});
</script>

<template>
  <div class="container">
    <div class="titleBox">
      <PageTitle title="任务进度" />
    </div>
    <div class="task-page">
      <div style="height: 100vh; width: 80%">
        <gd-map />
      </div>
      <div class="right">
        <div class="search">
          <el-date-picker
            v-model="data.currentDate"
            placeholder="请选择日期"
            type="date"
            @change="handleChange"
            value-format="YYYY-MM-DD"
          />
          <!--          <el-button @click="handleChange">查询</el-button>-->
        </div>

        <div class="listWrapper">
          <template v-for="(item, index) in data.list" :key="index">
            <div class="item" @click="handleItem(item)">
              <div>方格名称：{{ item?.fgMc }}</div>
              <!--              <div>必到点名称：</div>-->
              <div>
                <div>打卡进度：</div>
                <el-progress
                  width="50"
                  :percentage="item?.bddAllProgress || 0"
                />
              </div>
              <div>
                <div>巡逻里程进度：</div>
                <el-progress
                  width="50"
                  color="#e6a23c"
                  :percentage="item?.bddAllProgress || 0"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <task-details-dialog
      ref="taskDetailsRef"
      v-model="visible"
      @update="handleUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
.task-page {
  display: flex;
  justify-content: space-between;

  .right {
    width: 19%;
  }

  .listWrapper {
    margin-top: 20px;
    overflow-y: auto;
    height: calc(100vh - 236px);

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 5px;
      padding: 10px;
      border: 1px solid #24b6dd;
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      cursor: pointer;

      &:hover {
        color: #24b6dd;
      }

      ::v-deep {
        .el-progress__text {
          color: #fff;
        }
      }
    }
  }

  .search {
    display: flex;
  }
}
</style>
