<script setup lang="ts">
import { PropType, reactive, ref, watch } from 'vue';
import { ITableColumns } from '@/model/base-interface';
import { traduction } from '@/utils/language';
import PullDownTriangle from '@/components/PullDownTriangle/PullDownTriangle.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import TableNoData from '@/components/TableNoData/TableNoData.vue';

const tableProps = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    required: true,
  },
});

watch(
  () => tableProps.tableData,
  (val: any) => {
    if (val) {
      currentPage.value = 1;
      pageSize.value = 10;
      checkTime.value = '';
      checkType.value = 'All';
      checkLevel.value = 'All';
      filterData();
    }
  },
  {
    deep: true,
  },
);

let showData: any[] = reactive([]);

let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);
let checkType = ref('All');
let checkLevel = ref('All');
let checkTime = ref('');

const typeArr = [
  {
    id: 'All',
    label: traduction('FDM_ALARM_ALL_TYPE'),
  },
  {
    id: 'FDM Warning',
    label: traduction('FDM_WARNING'),
  },
  {
    id: 'SEL Warning',
    label: traduction('FDM_SEL_WARNING'),
  },
  {
    id: 'Installation',
    label: traduction('FDM_INSTALLATION'),
  },
];

const levelArr = [
  {
    id: 'All',
    label: traduction('FDM_ALARM_ALL_LEVEL'),
  },
  {
    id: 'Critical',
    label: traduction('FDM_ALARM_CRITICAL_SHORT'),
  },
  {
    id: 'Major',
    label: traduction('ALARM_EVENT_MAJOR'),
  },
  {
    id: 'Minor',
    label: traduction('FDM_MINOR_ALARM_SHORT'),
  },
  {
    id: 'Event',
    label: traduction('FDM_TIME_LOG_SHORT'),
  },
];

const columns: ITableColumns[] = [
  {
    title: traduction('FDM_ALARM_NUM'),
    content: 'no',
    width: '120px',
  },
  {
    title: traduction('FDM_ALARM_TYPE'),
    content: 'type',
    width: '180px',
  },
  {
    title: traduction('FDM_ALARM_LEVEL'),
    content: 'level',
    width: '220px',
  },
  {
    title: traduction('FDM_ALARM_CREATED'),
    content: 'createTime',
    width: '250px',
  },
  {
    title: traduction('FDM_INFO'),
    content: 'info',
  },
];

// 数据过滤
function filterData() {
  showData.splice(0);
  let arr = [];
  const tableData = tableProps.tableData;
  if (checkType.value === 'All') {
    arr = tableData;
  } else {
    arr = tableData.filter((item: any) => {
      return item.type === checkType.value;
    });
  }

  if (checkLevel.value !== 'All') {
    arr = arr.filter((item: any) => {
      return item.level === checkLevel.value;
    });
  }

  if (checkTime.value) {
    const start = new Date(checkTime.value[0]).getTime();
    const end = new Date(checkTime.value[1]).getTime();
    arr = arr.filter((item: any) => {
      return item.createTime !== '--';
    });
    arr = arr.filter((item: any) => {
      const time = new Date(item.createTime).getTime();
      return time >= start && time <= end;
    });
  }
  total.value = arr.length;
  const list = arr.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value,
  );
  showData.push(...list);
}

filterData();

// 当前页 数量改变
function handleSizeChange(val: number) {
  pageSize.value = val;
  filterData();
}

// 页码改变
function handleCurrentChange() {
  filterData();
}
</script>

<template>
  <div class="table-part-content">
    <div class="part-title">{{ $t('FDM_DEVICE_CASE') }}</div>
    <!-- 筛选区域 -->
    <div class="screening-box">
      <el-select
        v-model="checkType"
        v-addId.select="'fdmType'"
        :teleported="false"
        :suffix-icon="PullDownTriangle"
        @change="filterData"
      >
        <el-option
          v-for="item in typeArr"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        v-model="checkLevel"
        v-addId.select="'fdmLevel'"
        :teleported="false"
        :suffix-icon="PullDownTriangle"
        @change="filterData"
      >
        <el-option
          v-for="item in levelArr"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-date-picker
        id="fdmTimePicker"
        v-model="checkTime"
        type="daterange"
        popper-class="daterange-popper"
        :start-placeholder="$t('IBMC_START_DATA')"
        :end-placeholder="$t('IBMC_END_DATA')"
        @change="filterData"
      ></el-date-picker>
    </div>

    <div class="table-box">
      <el-table v-addId.table="'authorityManagementTable'" :data="showData" border resizable>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.content"
          :label="item.title"
          :width="item.width"
        >
          <template #default="scope">
            <span v-if="item.content === 'level'">
              <span
                v-if="scope.row.level === 'Critical'"
                :id="item.content + scope.row.no"
                class="critical level"
              >
                {{ $t('FDM_ALARM_CRITICAL_SHORT') }}
              </span>
              <span
                v-if="scope.row.level === 'Major'"
                :id="item.content + scope.row.no"
                class="major level"
              >
                {{ $t('ALARM_EVENT_MAJOR') }}
              </span>
              <span
                v-if="scope.row.level === 'Minor'"
                :id="item.content + scope.row.no"
                class="minor level"
              >
                {{ $t('FDM_MINOR_ALARM_SHORT') }}
              </span>
              <span
                v-if="scope.row.level === 'Event'"
                :id="item.content + scope.row.no"
                class="event level"
              >
                {{ $t('FDM_TIME_LOG_SHORT') }}
              </span>
            </span>
            <span v-else :id="item.content + scope.row.no">{{ scope.row[item.content] }}</span>
          </template>
        </el-table-column>
        <template #empty>
          <TableNoData />
        </template>
      </el-table>
    </div>
    <el-pagination
      v-model:currentPage="currentPage"
      v-addId.pagination="'fdmPagination'"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">
.table-part-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .part-title {
    font-size: 16px;
    color: var(--o-text-color-primary);
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 16px;
  }

  .screening-box {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    :deep(.el-select) {
      margin-right: 16px;
    }

    :deep(.el-input__inner.el-date-editor) {
      border-color: var(--o-border-color-lighter);
      padding: 1px 10px !important;

      .el-range-separator {
        line-height: 30px;
      }
    }

    :deep(.el-date-editor) {
      max-width: 350px;
    }
  }

  .table-box {
    flex: 1;
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;

    .critical {
      background-color: var(--o-color-danger);
    }

    .major {
      background-color: var(--o-color-major);
    }

    .minor {
      background-color: var(--o-color-warning);
    }

    .event {
      background-color: var(--o-color-state-primary);
    }

    .level {
      padding: 1px 20px;
      border-radius: 4px;
      color: white;
    }
  }
}
</style>
