<template>
  <div class="violation-statistics-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">违规行为统计</span>
    </div>
    <div class="violation-statistics-content">
      <div class="violation-statistics-item vehicle-count">
        <span class="item-title">当月车辆违规数</span>
        <span class="item-count">{{ vehicleCount }}</span>
        <img class="item-icon" src="@/assets/images/traffic-overview/vehicle-icon.png" alt="" />
        <div class="edit-icon" v-if="editVehicleViolations" @click="handleOpenEditDialog">
          <el-icon><Edit /></el-icon>
          编辑
        </div>
      </div>
      <div class="violation-statistics-item regulation-count">
        <span class="item-title">当月违规通知数</span>
        <span class="item-count">{{ regulationCount }}</span>
        <img class="item-icon" src="@/assets/images/traffic-overview/regulation-icon.png" alt="" />
      </div>
      <div class="violation-statistics-item accident-count">
        <span class="item-title">当月交通事故数</span>
        <span class="item-count">{{ accidentCount }}</span>
        <img class="item-icon" src="@/assets/images/traffic-overview/accident-icon.png" alt="" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="424" center align-center class="violation-statistics-dialog">
      <div class="dialog-content">
        <span class="dialog-content-title">当月违章</span>
        <el-input v-model="vehicleCountCopy" class="input-count" />
        <div v-if="showError" class="error-message">需≥{{ regulationCount }}</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="handleConfirm" :disabled="!isValid"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import { ElIcon, ElDialog, ElInput } from 'element-plus';
  import { Edit } from '@element-plus/icons-vue';
  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
  import { TRAFFIC_PERMISSIONS } from '@/views/traffic/constant';
  import { getViolationStatisticsOverview, addVehicleViolationCount } from '@/api/traffic-overview';

  const { permissions } = useUserInfoHook();
  const editVehicleViolations = ref<boolean>();

  const vehicleCount = ref<number>(0);
  const regulationCount = ref<number>(0);
  const accidentCount = ref<number>(0);

  const vehicleCountCopy = ref<number>(0);
  const dialogVisible = ref<boolean>(false);
  const isValid = ref<boolean>(true);
  const showError = ref<boolean>(false);

  const handleOpenEditDialog = () => {
    dialogVisible.value = true;
    vehicleCountCopy.value = JSON.parse(JSON.stringify(vehicleCount.value));
  };

  const validateCount = (value: number) => {
    const valid = value >= regulationCount.value;
    isValid.value = valid;
    showError.value = !valid;
  };

  watch(vehicleCountCopy, (newVal) => {
    validateCount(newVal);
  });

  const handleConfirm = async () => {
    if (!isValid.value) return;
    addVehicleViolationCount({
      violateCount: vehicleCountCopy.value,
    }).then(() => {
      getViolationStatisticsOverviewData();
    });
    dialogVisible.value = false;
  };

  const getViolationStatisticsOverviewData = () => {
    getViolationStatisticsOverview().then((res) => {
      vehicleCount.value = res.vehicleViolationCount || 0;
      regulationCount.value = res.violationNoticeCount || 0;
      accidentCount.value = res.trafficAccidentCount || 0;
    });
  };

  onMounted(() => {
    editVehicleViolations.value = Boolean(
      permissions.find((item: { code: string }) => item.code === TRAFFIC_PERMISSIONS.EDIT_VEHICLE_VIOLATIONS),
    );
    getViolationStatisticsOverviewData();
  });
</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;
    }
  }

  .violation-statistics-container {
    width: 100%;
    height: 100%;
    padding-top: 14px;
  }

  .violation-statistics-content {
    width: 100%;
    height: calc(100% - 24px);
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }

  .violation-statistics-item {
    border-radius: 8px;
    color: #ffffff;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .item-title {
      font-size: 14px;
      font-weight: 400;
    }

    .item-count {
      font-size: 30px;
      font-weight: bold;
    }

    .item-icon {
      position: absolute;
      top: 50%;
      right: 16px;
      width: 48px;
      height: 48px;
      transform: translateY(-50%);
    }

    .edit-icon {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.29);
      border-radius: 0px 8px 0px 8px;
      padding: 3px 6px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .edit-icon:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  .vehicle-count {
    background-image: url('@/assets/images/traffic-overview/vehicle-bg-pure.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .regulation-count {
    background-image: url('@/assets/images/traffic-overview/regulation-bg-pure.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .accident-count {
    background-image: url('@/assets/images/traffic-overview/accident-bg-pure.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  :deep(.violation-statistics-dialog) {
    .el-dialog__header {
      display: none;
    }

    .dialog-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 18px 0 4px 0;
    }

    .dialog-content-title {
      font-size: 16px;
      font-weight: 400;
      color: #000000;
    }

    .dialog-footer {
      margin-bottom: 4px;
    }
  }

  .input-count {
    width: 188px;
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    margin-top: 20px;
  }

  :deep(.el-input) {
    --el-input-border-color: transparent;
    --el-input-hover-border-color: transparent;
    --el-input-focus-border-color: transparent;

    .el-input__inner {
      font-weight: bold;
      font-size: 24px;
      color: #000000;
      text-align: center;
    }
  }

  .error-message {
    font-size: 12px;
    color: #ff4d4f;
    margin-top: 4px;
  }
</style>
