<template>
  <div class="management">
    <div class="main">
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="w100% flex justify-between items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/News.png" alt="" />
              <span>项目新闻</span>
            </div>
            <div class="hint">PROJECT NEWS</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="events">
        <div class="content events-content event_s">
          <AutoScroller :items="projectNewsData" class="events-list" ref="newsScroller">
            <template #default="{ item, index }">
              <li>
                <span class="text detail" style="display: inline"> {{ item.title }}</span>
                <span class="more" v-if="!item.show" @click="onMore(index, true, item.id)">查看详情</span>
                <span class="more" style="color: #ffb100eb" v-else @click="onMore(index, false)">关闭详情</span>
              </li>
            </template>
          </AutoScroller>
          <div class="detail-content" v-if="newsDetailDialog" v-html="NewsDetailMain"></div>
          <!-- <span v-else style="font-size: 20px; letter-spacing: 10px">暂无数据</span> -->
        </div>
      </div>
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="w100% flex justify-between items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/Safety.png" alt="" />
              <span>安全管理</span>
            </div>
            <div class="hint">SAFETY MANAGEMENT</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="safetyData">
        <div class="head flex justify-around">
          <div class="safetyData-item flex items-center">
            <div>
              <img src="@/assets/images/danggerNum.png" alt="" />
            </div>
            <div>
              <span>站班会情况</span>
              <p>{{ safetyInspectionData.teamMeetingCount }}<span> 件</span></p>
            </div>
          </div>
          <div class="safetyData-item flex items-center">
            <div>
              <img src="@/assets/images/record.png" alt="" />
            </div>
            <div>
              <span>巡检记录</span>
              <p>{{ safetyInspectionData.safetyInspectionCount }}<span> 件</span></p>
            </div>
          </div>
          <div class="safetyData-item flex items-center">
            <div>
              <img src="@/assets/images/situation.png" alt="" />
            </div>
            <div>
              <span>整改情况</span>
              <p>{{ safetyInspectionData.correctSituationCount }}<span> 件</span></p>
            </div>
          </div>
        </div>
        <div class="tables">
          <div class="thead">
            <span class="teamWidth">班组</span>
            <span class="teamWidth">名称</span>
            <span class="teamWidth">时间</span>
            <span class="statusWidth">操作</span>
          </div>
          <AutoScroller :items="safetyInspectionData.teamMeetingList" class="tbody" safety>
            <template #default="{ item }">
              <div class="flex">
                <span class="teamWidth">{{ item.teamName }}</span>
                <span class="teamWidth">{{ item.name }}</span>
                <span class="teamWidth time">{{ item.meetingDate }}</span>
                <span class="statusWidth">查看</span>
              </div>
            </template>
          </AutoScroller>
        </div>
      </div>
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="w100% flex justify-between items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/Quality.png" alt="" />
              <span>质量管理</span>
            </div>
            <div class="hint">SAFETY MANAGEMENT</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="quality">
        <div class="qualitydata flex items-center">
          <div>
            <img src="@/assets/images/qualityLogo.png" alt="" />
          </div>
          <div class="qualityNum">
            <div>巡检记录 <b></b></div>
            <p>{{ qualityData?.count }}<span> 件</span></p>
          </div>
          <div class="qualityNum ml-15">
            <div>整改情况 <b></b></div>
            <p>{{ qualityData?.correctSituation }}<span> %</span></p>
          </div>
        </div>
        <AutoScroller :items="qualityData?.list" class="qualityList">
          <template #default="{ item }">
            <div class="qualityItem flex items-center">
              <div>
                <img src="@/assets/images/timeIcon.png" alt="" />
                <span class="text-white qualityTime">{{ item.createTime }}</span>
              </div>
              <div class="text-#43E2CB record">{{ item.inspectionTypeLabel }}</div>
              <div class="text-#E6F7FF text-truncate">
                <el-tooltip :content="item.inspectionHeadline" placement="top"> {{ item.inspectionHeadline }}</el-tooltip>
              </div>
            </div>
          </template>
        </AutoScroller>
      </div>
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="w100% flex justify-between items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/usercopy.png" alt="" />
              <span>形象进度</span>
            </div>
            <div class="hint">PROGRESS MANAGEMENT</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="user" id="userMain"></div>
    </div>
    <div class="topleft"></div>
    <div class="bottomright"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';

import { projectNewsVO, QualityVO, safetyInspectionVO } from '@/api/gis/type';
import { useUserStoreHook } from '@/store/modules/user';
import { getQualityList, getprojectNewsDetailList, getprojectNewsList, getsafetyInspectionList } from '@/api/gis';
import AutoScroller from './autoScroller.vue';
const userStore = useUserStoreHook();
type EChartsOption = echarts.EChartsOption;
const option = ref<EChartsOption>(null);
const myMachineryChart = ref(null);
const projectScroll = ref(null);
const tableScroll = ref(null);
const qualityScroll = ref(null);
const scrollList = reactive({
  projectRef: {
    dom: projectScroll,
    intervalId: null
  },
  tableRef: {
    dom: tableScroll,
    intervalId: null
  },
  qualityRef: {
    dom: qualityScroll,
    intervalId: null
  }
});
const newsScroller = ref();
const newsDetailDialog = ref<boolean>(false);
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const qualityData = ref<QualityVO>({ list: [], correctSituation: null, count: null });
const projectNewsData = ref<projectNewsVO[]>([]);
const NewsDetailMain = ref<string>(null);
const safetyInspectionData = ref<safetyInspectionVO>({
  teamMeetingCount: null,
  safetyInspectionCount: null,
  correctSituationCount: null,
  teamMeetingList: []
});
const classOptions = {
  limitMoveNum: 3,
  hoverStop: true,
  step: 1
};

//获取质量信息
const getQualityData = async () => {
  const res = await getQualityList({ projectId: currentProject.value?.id });
  if (res.code !== 200) return;
  qualityData.value = res.data;
};

//获取大屏项目新闻列表
const getProjectNewsData = async () => {
  const res = await getprojectNewsList({ projectId: currentProject.value?.id });
  if (res.code !== 200) return;
  projectNewsData.value = res.data;
};

//查询大屏安全信息
const getsafetyInspectionData = async () => {
  const res = await getsafetyInspectionList({ projectId: currentProject.value?.id });
  if (res.code !== 200) return;
  safetyInspectionData.value = res.data;
};

const safetyData = ref([]);
new Array(10).fill(0).forEach((item) => {
  safetyData.value.push({
    id: 1,
    name: '站班会',
    teamName: '测试组',
    meetingDate: '2024-03-18'
  });
});

const onMore = async (index, isShow, id?) => {
  if (isShow) {
    newsScroller.value.pause();
    projectNewsData.value[index].show = true;
    const res = await getprojectNewsDetailList(id);
    NewsDetailMain.value = res.data.content;
    newsDetailDialog.value = true;
  } else {
    newsScroller.value.resume();
    projectNewsData.value[index].show = false;
    newsDetailDialog.value = false;
  }
};
//初始化形象进度图表
const initUserChart = () => {
  let chartDom = document.getElementById('userMain');
  myMachineryChart.value = echarts.init(chartDom);
  // prettier-ignore
  let dataAxis = ['桩点浇筑', '支架安装', '组件安装', '箱变安装'];
  option.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true,
      width: '90%',
      height: '100%'
    },
    xAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(108, 128, 151, 0.3)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: dataAxis,
      offset: 0,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      inverse: true,
      axisLabel: {
        color: '#E6F7FF',
        fontSize: 12
      }
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 89, 84, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(102, 225, 223, 1)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134],
        showBackground: true,
        barWidth: 8,
        backgroundStyle: {
          color: 'rgba(108, 128, 151, .1)'
        }
      }
    ]
  };
  option.value && myMachineryChart.value.setOption(option.value);
};

// 防抖函数
const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
  let timer: ReturnType<typeof setTimeout> | null = null;
  return function (this: T, ...args: any[]) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
};

// 窗口大小变化时触发的函数
const handleResize = () => {
  myMachineryChart.value && myMachineryChart.value.dispose();
  initUserChart();
};

const debouncedHandleResize = debounce(handleResize, 300);

onMounted(() => {
  initUserChart();
  getQualityData();
  getProjectNewsData();
  getsafetyInspectionData();
  window.addEventListener('resize', debouncedHandleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', debouncedHandleResize);
  myMachineryChart.value && myMachineryChart.value.dispose();
});
</script>

<style lang="scss" scoped>
@import '../css/gis.scss';

#userMain {
  width: 100%;
  padding-right: vw(14);
  margin-top: vh(19);
  height: vh(170);
}

.management {
  width: vw(449);
  height: vh(927);
  background: rgb(1, 26, 33, 0.4);
  backdrop-filter: blur(vw(8));
  position: absolute;
  top: vh(122);
  right: vw(21);
  z-index: 2;
  .main {
    padding-top: vh(17);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: vw(2);
    background: linear-gradient(to bottom left, #43e2cb 0%, transparent 50%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.4;
    z-index: -1;
  }

  .topleft {
    width: vw(7);
    height: vw(7);
    position: absolute;
    top: vh(1);
    right: vw(1);
    background-image: url('@/assets/images/topleft.png');
    transform: rotatez(90deg);
  }

  .bottomright {
    width: vw(7);
    height: vw(7);
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('@/assets/images/bottomright.png');
    transform: rotatez(90deg);
  }
}

.title {
  > div > img {
    width: vw(14);
    height: vh(35);
  }

  .subTitle {
    img {
      width: vw(18.8);
      height: vh(20);
      margin-right: vw(10);
    }

    span {
      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
      font-size: vw(16);
      letter-spacing: 0;
      color: rgba(255, 255, 255, 1);
      font-family: 'DOUYUFont';
      padding-top: vh(5);
    }
  }

  .hint {
    font-size: vw(14);
    font-weight: 400;
    color: rgba(204, 204, 204, 0.5);
    margin-right: vw(20);
    font-family: 'Roboto';
  }

  .mark {
    width: vw(2);
    height: vh(14);
    background: rgba(67, 226, 203);
    margin-right: vw(10);
  }

  .ligner {
    height: vh(1);
    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
    margin-left: vw(14);
  }
}

.quality {
  margin: vh(13) 0 vh(15);
  font-family: '思源黑体';
  .qualitydata {
    margin: 0 0 vh(12) vw(28);

    img {
      width: vw(68);
      margin-right: vw(48);
    }

    .qualityNum {
      width: vw(99);
      height: vh(53);
      text-align: center;
      div {
        /** 文本1 */
        font-size: vw(14);
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-bottom: vh(5);
        position: relative;
        font-family: '思源黑体';
        b {
          position: absolute;
          top: vh(5);
          left: 0;
          width: 100%;
          height: vh(6);
          background-color: rgba(67, 226, 203, 0.1);
          z-index: -1;
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: vw(3);
            height: vh(3);
            background-color: rgba(67, 226, 203, 1);
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: vw(3);
            height: vh(3);
            background-color: rgba(67, 226, 203, 1);
          }
        }
      }
      p {
        width: 100%;
        height: vh(27);
        background-color: rgba(67, 226, 203, 0.1);
        font-size: vw(24);
        color: #fff;
        text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
        line-height: vh(27);
        font-family: 'Roboto';
        span {
          font-size: vw(12);
          font-family: '思源黑体';
        }
      }
    }
  }

  .qualityList {
    margin-left: vw(21);
    display: block;
    height: vh(90);
    overflow: hidden;
    margin-right: vw(10);
    font-size: vw(14);
    .qualityItem {
      margin-bottom: vh(13);
      font-family: '思源黑体';
      .qualityTime {
        font-family: 'Roboto';
      }
      img {
        width: vw(12);
        margin-right: vw(8);
      }
      .record {
        margin: 0 vw(54) 0 vw(40);
      }
      .text-truncate {
        width: vw(154);
      }
    }
  }
}

.safetyData {
  margin: vh(20) 0 vh(15);

  .head {
    img {
      width: vw(36);
    }

    .safetyData-item {
      height: vh(53);

      > div {
        > span {
          font-size: vw(14);
          font-weight: 400;
          color: rgba(204, 204, 204, 1);
          font-family: '思源黑体';
        }

        > p {
          text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
          font-size: vw(24);
          font-weight: 700;
          color: rgba(255, 255, 255, 1);
          font-family: 'Roboto';
          > span {
            font-size: vw(12);
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            font-family: '思源黑体';
          }
        }
      }
    }
  }
}

p {
  margin: 0;
}

.events {
  margin: vh(20) 0 vh(15);
  width: 100%;
  font-family: '思源黑体';
  position: relative;
  height: vh(82);
  .events-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-right: vw(10);
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      padding-left: vw(20);
      background: url('@/assets/images/li.png') no-repeat 0 20%;
      list-style-type: none;
      list-style-position: inside;
      margin-bottom: vh(8);
      position: relative;

      .detail {
        display: inline;
      }

      .more {
        color: rgba(67, 226, 203, 1);
        font-size: vw(14);
        cursor: pointer;
      }

      .text {
        font-size: vw(12);
        font-weight: 400;
        letter-spacing: 0;
        color: rgba(230, 247, 255, 1);
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 4em;
        height: 4em;
        margin-right: vw(5);
      }
    }

    // li:last-child {
    //   margin-bottom: 0;
    // }

    li::after {
      content: '';
      border-left: vw(1) dashed rgba(0, 190, 247, 0.3);
      position: absolute;
      top: vh(22);
      left: vw(5);
      width: vw(10);
      height: 85%;
      display: block;
    }

    // li:last-child::after {
    //   content: '';
    //   border-left: none;
    // }
  }
  .detail-content {
    position: absolute;
    top: 0;
    left: vw(-275);
    width: vw(250);
    height: vh(328);
    background: rgba(0, 0, 0, 0.5);
    overflow: auto;
    padding: vh(15) vw(15);

    color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(vw(8));
    border: 1px solid;
    border-image: linear-gradient(to bottom, rgba(67, 226, 203, 1), rgba(67, 226, 203, 0.5)) 1;
    ::v-deep(p) {
      margin: vh(10) 0;
      img {
        width: 100%;
        border-radius: vw(8);
      }
      span {
        font-size: vw(12) !important;
        line-height: 18px;
      }
    }
  }
}

.content {
  width: 100%;
  height: vh(82);
  padding: 0 vw(10) 0 vw(20);
}

.event_s {
  display: grid;
  place-items: center;
  color: #f0f8ff;
}

.tables {
  padding: 0 vw(13) 0 vw(14);
  font-weight: 400;
  font-size: vw(14);
  font-family: '思源黑体';
  .tbody {
    height: vh(94);
    overflow: hidden;
    padding-right: vw(14);
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    font-family: '思源黑体';
    .flex {
      padding-left: vw(16);
      height: vh(26);
      line-height: vh(26);
      font-size: vw(13);
      margin: vh(8) 0;
    }
    .time {
      font-family: 'Roboto';
    }
  }

  .thead {
    padding-right: vw(20);
    margin-top: vh(12);
    display: flex;
    color: #43e2cb;
    height: vh(40);
    padding-left: vw(16);
    line-height: vh(40);
  }
  .statusWidth {
    width: vw(44);
    color: rgba(67, 226, 203, 1);
    cursor: pointer;
  }
  .teamWidth {
    width: vw(114);
  }
}

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: vw(6);
  display: none;

  /* 纵向滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent;
  /* 轨道背景颜色 */
  border-radius: vw(5);
  /* 轨道圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(67, 226, 203, 0.5) 0%, rgba(21, 181, 230, 0.5) 100%);
  border-radius: vw(5);
  /* 滑块圆角 */
}

/* 隐藏滚动条的上下手柄 */
::-webkit-scrollbar-button {
  display: none;
}
</style>
