<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 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) => {
  dialogConfig.visible = true
  dialogConfig.data = row
}
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>