<template>
  <div class="regulation-list-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">交通管理规定与通知</span>
      <span class="more" @click="handleClickMore"
        >更多<el-icon><ArrowRight /></el-icon
      ></span>
    </div>
    <div class="regulation-list">
      <div v-if="regulationList.length === 0" class="empty-style">
        <img class="empty-img" src="@/assets/images/empty@1X.png" alt="" />
        <span>暂无数据</span>
      </div>
      <div
        class="regulation-item"
        v-for="(item, index) in regulationList"
        :key="index"
        :title="item.name"
        @click="handleClick(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import router from '@/router';
  import { ElIcon } from 'element-plus';
  import { ArrowRight } from '@element-plus/icons-vue';
  import { getManagementTypeUrl, MANAGEMENT_TYPE } from '../constant';
  import { QueryRuleNoticeInfoListOverviewRes, getRuleNoticeInfoListOverview } from '@/api/traffic-overview';

  const regulationList = ref<QueryRuleNoticeInfoListOverviewRes[]>([]);

  const handleClickMore = () => {
    router.push({
      path: '/traffic/regulation',
    });
  };

  const handleClick = (item) => {
    if (item.managementType === MANAGEMENT_TYPE.MANAGEMENT_NOTICE) {
      router.push({
        path: getManagementTypeUrl(item.managementType),
        query: {
          id: item.id,
          operate: 'notice-view',
        },
      });
    } else {
      router.push({
        path: getManagementTypeUrl(item.managementType),
      });
    }
  };

  const getRuleNoticeInfoListOverviewData = () => {
    getRuleNoticeInfoListOverview().then((res) => {
      regulationList.value = res;
    });
  };

  onMounted(() => {
    getRuleNoticeInfoListOverviewData();
  });
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }

    .more {
      margin-left: auto;
      margin-right: 17px;
      font-weight: 400;
      font-size: 16px;
      color: #1777ff;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .more:hover {
      color: #94c1ff;
    }
  }

  .regulation-list-container {
    width: 100%;
    height: 100%;
    padding-top: 14px;

    .regulation-list {
      width: 100%;
      height: calc(100% - 24px - 18px);
      margin-top: 18px;
      padding: 0 16px;

      .empty-style {
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: rgba(153, 153, 153, 1);

        .empty-img {
          height: 90%;
          object-fit: contain;
        }
      }

      .regulation-item {
        width: 100%;
        height: 33px;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #ededed;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 10px;
        cursor: pointer;
      }

      .regulation-item:hover {
        color: #1777ff;
      }
    }
  }
</style>
