<template>
  <div class="content_foot">
    <!-- <div class="top">
      <el-checkbox-group v-model="Gislist" class="checkbox">
        <el-checkbox :label="i.icon" v-for="i in checkList">
          <img :src="i.icon" alt="" />
          <span class="label"> {{ i.label }}</span>
        </el-checkbox>
      </el-checkbox-group>
    </div> -->
    <div class="center">
      <el-table
        ref="scroll_table"
        :height="176"
        solt="append"
        :data="categoryDataList"
        @cell-mouse-enter="mouseEnter"
        @cell-mouse-leave="mouseLeave"
      >
        <el-table-column
          v-for="(item, index) in categoryColumList"
          :key="index + 'i'"
          :label="item.label"
          :prop="item.value"
          :width="item.width"
          :min-width="item.minWidth"
          show-overflow-tooltip
        >
          <template #default="{ row }" v-if="item.value === 'scenarioName'">
            <span class="pointer" @click="openDialog(row)">{{ row.scenarioName }}</span>
          </template>
          <template #default="{ row }" v-else-if="item.value === 'status'">
            <span style="color: red" v-if="row.fromStatus">驳回</span>
            <span v-else>{{
              dangerous_status.find((item) => item.value === row.status)?.label
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="foot">
      <div>图例</div>
      <div class="border"></div>
      <div v-for="i in tuliList">
        <div :style="{ background: i.icon }" class="tuliclass">
          <span class="label"> {{ i.label }}</span>
        </div>
      </div>
      <div></div>
    </div>

    <!-- 综合弹窗 -->
    <!-- <el-dialog
      class="pmpSitNewDialog"
      v-model="dialogConfig.visible"
      :title="dialogConfig.title"
      width="1400px"
      :append-to-body="true"
      :destroy-on-close="true"
      :draggable="true"
    >
      <DialogTabs
        :dataID="dialogConfig.getSiteId"
        :SiteNo="dialogConfig.SiteNo"
        :comIDs="dialogConfig.comIDs"
        :customComponents="dialogConfig.customData"
        :RefName="dialogConfig.RefName"
      ></DialogTabs>
    </el-dialog> -->
  </div>
</template>

<script setup name="content_foot">
import { ref, reactive, toRefs, onMounted } from "vue";
// 引入弹窗
import bus from "@/bus";
import DialogTabs from "../DialogTabs/dialogTabs";
import gwjcd from "@/assets/images/gcpjimg/gwjcd.png";
import nljcd from "@/assets/images/gcpjimg/nljcd.png";
import swjcd from "@/assets/images/gcpjimg/swjcd.png";
import szjcd from "@/assets/images/gcpjimg/szjcd.png";
import hsqx from "@/assets/images/gcpjimg/hsqx.png";
import gcxmzj from "@/assets/images/gcpjimg/gcxmzj.png";
import hhsx from "@/assets/images/gcpjimg/hhsx.png";
import nlfz from "@/assets/images/gcpjimg/nlfz.png";
import { getDangerousProjectApproveList } from "@/api/gcpjApi";
const { proxy } = getCurrentInstance();
const { dangerous_status } = proxy.useDict("dangerous_status");
const AllData = reactive({});
const Gislist = ref([]);
const autoPlay = ref(false);
const timer = ref();
const tuliList = ref([
  { label: "已竣工", icon: "#95F204" },
  { label: "实施中", icon: "#FBFF82" },
  { label: "未启动", icon: "#A0ADCA" },
]);
const categoryDataList = ref([]);
const categoryColumList = reactive([
  {
    label: "安全事件",
    value: "scenarioName",
  },
  {
    label: "所属项目",
    value: "projectName",
  },
  {
    label: "整改进度",
    value: "status",
  },
]);
const checkList = ref([
  // { label: "管网监测点", icon: gwjcd },
  // { label: "内涝监测点", icon: nljcd },
  // { label: "水位监测点", icon: swjcd },
  // { label: "水质监测点", icon: szjcd },
  // { label: "汇水分区", icon: hsqx },
  // { label: "工程项目", icon: gcxmzj },
  // { label: "河湖水系", icon: hhsx },
  // { label: "内涝风险区", icon: nlfz },
]);
const config = ref({});
const dialogConfig = reactive({
  visible: false,
  getSiteId: "",
  SiteNo: "",
  data: {},
  comIDs: [
    "xxxx",
    "jdfx",
    "zjfx",
    "jsdb",
    "gckh",
    "zlfengxian",
    "aqfengxian",
    "xmxc",
    // 'xmzl'
  ],
  customData: [],
  RefName: "aqfengxian",
  title: "详情",
});

const openDialog = (row) => {
  console.log(row,'rowrow');
  // dialogConfig.visible = true;
  // dialogConfig.data = row;
  bus.emit(
    "mapClick",
    {  gisType: "project",id:row.id, title: "详情",RefName:'aqfengxian'},
    1
  ); //给弹窗
  sessionStorage.setItem('getProjectInfo',row.projectNo)
};
function mouseEnter() {
  autoPlay.value = true;
}
function mouseLeave() {
  autoPlay.value = false;
}
function startMove() {
  const table = proxy.$refs.scroll_table;
  // debugger
  if (table) {
    const divData = table.$el.querySelector(
      ".el-table__body-wrapper .el-scrollbar__wrap"
    );
    if (divData) {
      if (timer.value) {
        clearInterval(timer.value);
      }
      timer.value = setInterval(() => {
        if (autoPlay.value) {
          if (divData.scrollTop >= 40) {
            const item = categoryDataList.value.shift();
            categoryDataList.value.push(item);
            divData.scrollTop -= 40;
          }
          divData.scrollTop += 1;
        }
      }, 20);
    }
  }
}

const getTableData = async () => {
  const res = await getDangerousProjectApproveList();
  if (res?.code !== 200) return;
  categoryDataList.value = res.data || [];
  // startMove()
};

onMounted(() => {
  getTableData();
});

provide("getProjectInfo", () => {
  return dialogConfig.data;
});
</script>

<style lang="scss" scoped>
.content_foot {
  width: 100%;
  height: 180px;
  display: flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .top,
  .center,
  .foot {
    flex: 1;
    background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
    height: 100%;
    border-radius: 4px;
  }
  .top {
    flex: 0 0 312px;
  }
  .center {
    margin: 0 10px;
  }
  .foot {
    flex: 0 0 194px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .border {
      width: 193px;
      height: 1px;
      background: #08244d;
      margin: 10px 0;
    }
    .tuliclass {
      width: 69px;
      display: inline-block;
      height: 20px;
      margin: 10px 3px;
      position: relative;
    }
    .label {
      display: inline-block;
      position: absolute;
      right: -50px;
    }
  }
  .checkbox {
    margin: 20px 4px;
    .label {
      position: absolute;
      top: 10px;
      right: 0;
    }
  }
  :deep(.el-checkbox) {
    width: 117px;
    text-align: center;
  }
}
.pointer {
  cursor: pointer;
}
</style>