<template>
  <div class="view-box">
    <div class="container-box">
      <div class="hard-box">
        <div class="hard-name text-title-0-show">美国政府机构</div>
        <div class="hard-num text-title-2-show">{{organizationInfo.total}}家</div>
        <div style="width: 0px; flex: auto;"></div>
        <div class="hard-input">
          <el-input v-model="organizationInfo.keyWord" @keyup.enter="onAllOrganization()" style="width:100%; height:100%;" :suffix-icon="Search" placeholder="搜索机构" />
        </div>
        <div class="hard-time">
          <el-select v-model="organizationInfo.isSort" @change="onAllOrganization()" placeholder="发布时间" style="width:160px; margin-left:8px;">
            <template #prefix>
              <div class="icon1">
                <img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
                <img v-else src="@/assets/icons/jiangxu1.png" alt="" />
              </div>
            </template>
            <el-option label="政令数量" :value="1" />
          </el-select>
        </div>
      </div>
      <div class="date-box">
        <div class="date-icon">
          <img :src="tipsTcon" alt="">
        </div>
        <div class="date-text">近期美国各联邦政府机构发布涉华政令数量汇总</div>
        <TimeTabPane @time-click="handleDateChange" />
      </div>
      <div class="organization-list" ref="refOrganization" v-loading="organizationInfo.loading">
        <div class="organization-item" v-for="(item, index) in organizationInfo.list" :key="index" @click="handleToInstitution(item)">
          <div class="item-left">
            <img :src="item.orgImage || DefaultIcon2" alt="" />
          </div>
          <div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
          <div class="item-total">{{ item.total }}项</div>
          <el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
          <div class="item-dot" v-if="item.totalRecent">+{{item.totalRecent}}</div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination @current-change="onAllOrganization" :pageSize="organizationInfo.pageSize" :current-page="organizationInfo.pageNum" background layout="prev, pager, next" :total="organizationInfo.total" />
      </div>
    </div>
    <div class="back-bnt" @click="router.back()">
      <el-icon><Back /></el-icon>
      <div style="margin-left: 6px;">返回</div>
    </div>
  </div>
</template>

<script setup name="index">
import {onMounted, reactive, ref} from "vue"
import { Search } from '@element-plus/icons-vue'

import router from "@/router";
import TimeTabPane from '@/components/base/TimeTabPane/index.vue';

import { getDepartmentList } from "@/api/decree/home";

import tipsTcon from "./assets/icons/tips-icon.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";

const organizationInfo = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 8,
  total: 0,
  isSort: 1,
  keyWord: "",
  day: 7,
  list: []
})

const onAllOrganization = async (num) => {
  organizationInfo.pageNum = num || 1
  organizationInfo.loading = true
  try {
    let {keyWord, pageNum, pageSize, day} = organizationInfo
		const res = await getDepartmentList({day, pageNum:pageNum-1, pageSize, keyWord: keyWord||undefined});
		console.log("机构列表", res);
		if (res.code === 200) {
			organizationInfo.list = res.data.orgList || [];
			organizationInfo.total = res.data.total || 0;
		}
	} catch (error) {
    console.error("获取机构列表数据失败", error);
		organizationInfo.list = [];
		organizationInfo.total = 0;
  }
  organizationInfo.loading = false
}

const handleDateChange = (event) => {
	if (event?.time === '近一周') organizationInfo.day = 7
	if (event?.time === '近一月') organizationInfo.day = 30
	if (event?.time === '近一年') organizationInfo.day = 365
  onAllOrganization()
}

// 跳转行政机构主页
const handleToInstitution = item => {
	window.sessionStorage.setItem("curTabName", item.orgName);
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: item.orgId
		}
	});
	window.open(curRoute.href, "_blank");
};

const refOrganization = ref()
onMounted(() => {
  // 根据元素的高度决定分页显示的机构数量
  let height = 2;
  if (refOrganization.value) {
    height = Math.floor(refOrganization.value?.clientHeight/120)
  }
  organizationInfo.pageSize = height*4

  onAllOrganization()
})
</script>

<style scoped lang="scss">
.view-box {
  width: 100%;
  height: 100%;
  background: url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  position: relative;

  .back-bnt {
    position: absolute;
    top: 16px;
    left: 30px;
    width: 86px;
    height: 38px;
    background-color: white;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary-65-color);
    font-family: Source Han Sans CN;
    font-size: 16px;
    cursor: pointer;
  }

  .container-box {
    width: 1600px;
    padding: 50px 0 20px;
    display: flex;
    flex-direction: column;

    .hard-box {
			display: flex;
      align-items: center;
      width: 100%;

      .hard-name {
        color: var(--text-primary-90-color);
        height: 62px;
        line-height: 62px !important;
      }
      .hard-num {
        height: 36px;
        background-color: var(--color-primary-100);
        color: var(--bg-white-100);
        border-radius: 18px;
        line-height: 36px !important;
        padding: 0 16px;
        margin-left: 16px;
      }
      .hard-input {
        background-color: var(--el-fill-color-blank);
        border-radius: var(--el-border-radius-base);
        box-shadow: 0 0 0 1px var(--el-border-color) inset;
        box-sizing: border-box;
        margin-left: 20px;
        width: 160px;
        height: 32px;
      }
      .hard-time {
        height: 42px;
        padding: 5px 0;

        .icon1 {
          width: 11px;
          height: 14px;
          font-size: 0px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .date-box {
      margin-top: 6px;
			display: flex;
      align-items: center;
      width: 100%;

      .date-icon {
        width: 16px;
        height: 16px;
        font-size: 0px;
        margin-right: 6px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .date-text {
        width: 20px;
        flex: auto;
        font-size: 18px;
        line-height: 18px;
        font-family: Source Han Sans CN;
        color: var(--text-primary-80-color);
      }
    }

    .organization-list {
      width: 100%;
      height: 20px;
      padding: 16px 0;
      margin-top: 10px;
      flex: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 104px;
      gap: 16px;
      font-family: Microsoft YaHei;

      .organization-item {
        padding: 0 16px;
        display: flex;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(255, 255, 255, 1);
        border-radius: 10px;
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .item-left {
          width: 48px;
          height: 48px;
          font-size: 0px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .item-right {
          width: 20px;
          flex: auto;
          color: rgba(59, 65, 75, 1);
          font-size: 20px;
          font-weight: 700;
          line-height: 20px;
          margin: 0 16px;
        }

        .item-total {
          font-size: 20px;
          margin-right: 2px;
          white-space: nowrap;
          font-weight: 700;
          line-height: 20px;
          color: var(--color-primary-100);
        }

        .item-more {
          font-size: 16px;
          margin-right: 12px;
          white-space: nowrap;
          font-weight: 700;
          line-height: 16px;
          color: var(--color-primary-100);
        }

        .item-dot {
          position: absolute;
          right: -13px;
          top: -10px;
          padding: 0 8px;
          height: 26px;
          background-color: #FF4D4F;
          color: white;
          font-size: 16px;
          line-height: 26px;
          font-family: Source Han Sans CN;
          border-radius: 14px;
          letter-spacing: 1px;
        }
      }
    }

    .pagination-box {
      display: flex;
      justify-content: center;
      position: relative;
    }
  }
}
</style>