<template>
  <div class="bottom-modules">
    <div class="box1">
      <!-- 挂牌督办 -->
      <div class="head" style="display: flex;align-items: center;justify-content: space-between;">
        <section class="tabs">
          <article><el-badge><el-link class="active">
                {{ listData[1].title }}
              </el-link></el-badge></article>
        </section>
        <el-link @click="goJump('hangUp')" style="width: 82px;">查看全部 ></el-link>
      </div>
      <div class="m-content" v-if="duBanList.dataList.length > 0">
        <el-scrollbar>
          <section class="m-list" v-for="(item, index) in duBanList.dataList" :key="index">
            <section class="m-flex" @click="handleClickDetail(item)">
              <section class="title">{{ item.title }}</section>
              <section class="time">{{ item.issuedTime }}</section>
            </section>
            <el-divider style="margin: 0 !important;" />
          </section>
        </el-scrollbar>
      </div>
      <div class="zanwu" v-else>暂无数据</div>
    </div>
    <div class="box-content">
      <div class='box2'>
        <!-- 安全警示 -->
        <div class="head" style="display: flex;align-items: center;justify-content: space-between;">
          <section class="tabs">
            <article><el-badge><el-link class="active">
                  {{ listData[0].title }}
                </el-link></el-badge></article>
          </section>
          <el-link @click="goJump('warning')" style="width: 82px;">查看全部 ></el-link>
        </div>
        <div class="m-content" v-if="warningList.dataList.length > 0">
          <!-- <el-divider style="margin: 0 !important;" /> -->
          <el-scrollbar>
            <section class="m-list" v-for="(item, index) in warningList.dataList" :key="index">
              <section class="m-flex" @click="handleClickDetail(item)">
                <section class="title">{{ item.title }}</section>
                <section class="time">{{ item.time }}</section>
              </section>
              <el-divider style="margin: 0 !important;" />
            </section>
          </el-scrollbar>
        </div>
        <div class="zanwu" v-else>暂无数据</div>
      </div>

      <div class="box3">
        <!-- 典型案例 -->
        <div class="head" style="display: flex;align-items: center;justify-content: space-between;">
          <section class="tabs">
            <article><el-badge><el-link class="active">
                  {{ listData[2].title }}
                </el-link></el-badge></article>
          </section>
          <el-link @click="goJump" style="width: 82px;">查看全部 ></el-link>
        </div>
        <div class="m-content" v-if="dianXalList.dataList.length > 0">
          <!-- <el-divider style="margin: 0 !important;" /> -->
          <el-scrollbar>
            <section class="m-list" v-for="(item, index) in dianXalList.dataList" :key="index">
              <section class="m-flex" @click="handleClickDetail(item)">
                <section class="title">{{ item.title }}</section>
                <section class="time">{{ item.issuedTime }}</section>
              </section>
              <el-divider style="margin: 0 !important;" />
            </section>
          </el-scrollbar>
        </div>
        <div class="zanwu" v-else>暂无数据</div>
      </div>
    </div>



  </div>
  <DetailsDialog :item="item" v-if="dialogVisibility" @close="dialogVisibility = false" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import DetailsDialog from "../../components/DetailsDialog.vue";
const router = useRouter();
const store = useStore();
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, reactive, onMounted } from 'vue'
const dialogVisibility = ref(false)
const item = ref({})
const listData = ref([
  { title: '安全警示', id: 1, tips: 0 },
  { title: '挂牌督办', id: 2, tips: 0 },
  { title: '典型案例', id: 3, tips: 0 },
])
/** 安全警示 */
const warningList = ref({
  query: {
    pageCurrent: 1,
    pageSize: 2,
  },
  dataList: [],
  details: {},
  dialogVisible: false
})
/** 督办 */
const duBanList = ref({
  query: {
    pageCurrent: 1,
    pageSize: 3,
  },
  dataList: [],
  details: {},
  dialogVisible: false
})
/**典型案例 */
const dianXalList = ref({
  query: {
    pageCurrent: 1,
    pageSize: 2,
  },
  dataList: [],
  details: {},
  dialogVisible: false
})
const actives = ref(1)



// 点击查看详情
const handleClickDetail = (val) => {
  item.value = {
    ...val,
    writer: val.writer || val.userName || val.publisher
  }
  dialogVisibility.value = true
}
// 获取安全警示列表
const getListData = () => {
  postApi(warningList.value.query, `/mosty-jcgl/safetyWarning/querySafetyWarningInfo`).then((res) => {
    if (res.records) {
      warningList.value.dataList = res.records;
    }
  });
}
/** 设置督办列表 */
const setDuBanList = () => {
  postApi(duBanList.value.query, "/mosty-jcgl/taskController/queryTaskInfo")
    .then(res => {
      duBanList.value.dataList = Array.isArray(res.records) ? res.records : []
    })
}
const setDianXalList = () => {
  postApi(dianXalList.value.query, "/mosty-jcgl/typicalCases/queryTypicalCases").then(res => {
    let tableArr = Array.isArray(res.records) ? res.records : []
    tableArr = tableArr.map(item => {
      item.contentText = item.content ? item.content.replace(/<[^>]+>/g, '') : ''
      return item
    })
    dianXalList.value.dataList = tableArr

  })
}
const handleTabs = _index => {
  actives.value = _index
  if (actives.value == 2) {
    if (!duBanList.value.dataList?.length) setDuBanList()
  } else if (actives.value == 3) {
    if (!dianXalList.value.dataList?.length) setDianXalList()
  }
}
// 查看全部
const handleMore = (_url, _title) => {
  if (_url) {
    store.commit(
      "app/addTagsViewList",
      {
        fullPath: _url,
        meta: {
          meta: {
            title: _title
          }
        },
        name: _url,
        params: {},
        path: _url,
        query: {},
        title: _title
      },
      {
        immediate: true
      }
    );
    router.push(_url)
  }
}
const goJump = (type) => {
  if (type === 'warning') {
    handleMore('/dutyBook/aqjs/index', '安全警示')
  } else if (type === 'hangUp') {
    handleMore('/supervision/tasks', '督办任务')
  } else {
    handleMore('/dutyBook/dianXal/index', '典型案例')
  }
}
onMounted(() => {
  getListData()
  setDuBanList()
  setDianXalList()
})
</script>
<style scoped lang="scss">
@import '../style/index.scss';

.bottom-modules {
  // height: calc(100% - 153px) !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #efefef !important;

  .box-content {
    display: flex;
    gap: 10px;
    // height: calc(100% - 178px);
    flex:1;


    .box2 {
      padding: 6px 10px;
      background-color: #ffffff;
      height: 100%;
      flex: 1;

      .head {


        .tabs {
          display: flex;
          align-items: center;
          color: #666666;
          font-size: 14px;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            background: var(--el-color-primary);
            width: 3px;
            height: 16px;
            top: 4px;
            left: 0;
          }

          .active {
            margin-right: 23px;
            cursor: pointer;
            color: #000000;
            font-size: 16px;
            margin-left: 8px;


            &:hover {
              color: var(--el-color-primary);
            }
          }




        }
      }

      .m-content {
        height: 100%;
        overflow: auto;

        .el-scrollbar__wrap {
          height: 100%;

          .m-list {
            .m-flex {
              height: 48px;
              line-height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
              cursor: pointer;

              &:hover .title {
                color: var(--el-color-primary);
              }

              &:hover .time {
                color: var(--el-color-primary);
              }

              .title {
                color: #000000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 65%;
              }

              .time {
                color: #999999;
              }
            }

          }
        }


      }

      .zanwu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      }

    }

    .box3 {
      padding: 6px 10px;
      background-color: #ffffff;
      height: 100%;
      flex: 1;

      .head {


        .tabs {
          display: flex;
          align-items: center;
          color: #666666;
          font-size: 14px;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            background: var(--el-color-primary);
            width: 3px;
            height: 16px;
            top: 4px;
            left: 0;
          }

          .active {
            margin-right: 23px;
            cursor: pointer;
            color: #000000;
            font-size: 16px;
            margin-left: 8px;


            &:hover {
              color: var(--el-color-primary);
            }
          }



        }
      }

      .m-content {
        height: 100%;
        overflow: auto;

        .el-scrollbar__wrap {
          height: 100%;

          .m-list {
            .m-flex {
              // height: 48px;
              height: 48px;
              line-height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
              cursor: pointer;

              &:hover .title {
                color: var(--el-color-primary);
              }

              &:hover .time {
                color: var(--el-color-primary);
              }

              .title {
                color: #000000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 65%;
              }

              .time {
                color: #999999;
              }
            }

          }
        }


      }

      .zanwu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      }

    }
  }

  .box1 {
    padding: 6px 10px;
    background-color: #ffffff;
    height: 169px;


    .head {


      .tabs {
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 14px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          background: var(--el-color-primary);
          width: 3px;
          height: 16px;
          top: 3px;
          left: 0;
        }

        .active {
          margin-right: 23px;
          cursor: pointer;
          color: #000000;
          font-size: 16px;
          margin-left: 8px;


          &:hover {
            color: var(--el-color-primary);
          }
        }


      }
    }

    .m-content {
      height: 100%;
      overflow: auto;

      .el-scrollbar__wrap {
        height: 100%;

        .m-list {
          .m-flex {
            // height: 25px;
            height: 45px;
            line-height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            cursor: pointer;

            &:hover .title {
              color: var(--el-color-primary);
            }

            &:hover .time {
              color: var(--el-color-primary);
            }

            .title {
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 65%;
            }

            .time {
              color: #999999;
            }
          }

        }
      }


    }

    .zanwu {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }

  }

  .box1 {
    &:nth-child(1) {
      margin-bottom: 5px;
    }

    &:nth-child(2) {
      margin-bottom: 5px;
    }

  }
}
</style>
