<script setup lang="ts">
import { PureTable } from "@pureadmin/table";
import { type PaginationProps } from "@pureadmin/table";
import { onMounted, ref, reactive } from "vue";
import { useWindowSize } from "@vueuse/core";
import { getVideoList } from "@/api/videoParse";
import { useRouter } from "vue-router";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

defineOptions({
  name: "VideoListPage"
});

const formInline = reactive({
  date: "",
  violation: ""
});
function pickerOptions(time) {
  return time.getTime() > Date.now();
}
const now_date = new Date();
now_date.setMonth(now_date.getMonth() - 1);
const lastMonth = now_date;
const tableData = ref([]);
// const violationMap = ref({
//   疑似静止: "0",
//   疑似遮挡: "1",
//   疑似抖动: "2",
//   疑似递烟: "3",
//   疑似递钱: "4"
// });
const options = [
  {
    value: "疑似静止",
    label: "疑似静止"
  },
  {
    value: "疑似遮挡",
    label: "疑似遮挡"
  },
  {
    value: "疑似抖动",
    label: "疑似抖动"
  },
  {
    value: "疑似递烟",
    label: "疑似递烟"
  },
  {
    value: "疑似递钱",
    label: "疑似递钱"
  }
];
const { height } = useWindowSize();
const tableSize = ref("default");
const columns: TableColumnList = [
  {
    label: "序号",
    type: "index",
    width: 70,
    fixed: "left"
  },
  {
    label: "视频名称",
    width: 300,
    prop: "video_name"
  },
  {
    label: "日期",
    prop: "video_date",
    width: 100,
    sortable: true
  },

  {
    label: "异常数量",
    width: 80,
    prop: "abnormal_count"
  },
  {
    label: "异常表现",
    prop: "abnormal_performance",
    width: 400,
    slot: "violation"
  },
  {
    label: "文件地址",
    prop: "video_path"
  },
  {
    label: "操作",
    fixed: "right",
    width: 100,
    slot: "operation"
  }
];
function tagStyle(type) {
  switch (type) {
    case "疑似遮挡":
      return "span-occlusion";
    case "疑似递烟":
      return "span-smoke";
    case "疑似递钱":
      return "span-money";
    case "疑似静止":
      return "span-stillness";
    default:
      return "span-shake";
  }
}
async function onSearch() {
  const params = {
    start_time: formInline.date === null ? undefined : formInline.date[0],
    end_time: formInline.date === null ? undefined : formInline.date[1],
    abnormal_behavior: formInline.violation || undefined,
    page: pagination.currentPage || undefined,
    page_size: pagination.pageSize || undefined
  };
  const { results, count } = await getVideoList(params);
  pagination.total = count;
  tableData.value = results;
  setTimeout(() => {
    loading.value = false;
  }, 500);
}
function handleSearch() {
  pagination.currentPage = 1;
  onSearch();
}

function handleRefresh() {
  Object.assign(formInline, { date: "", violation: "" });
  onSearch();
}

function handleSizeChange(val) {
  pagination.pageSize = val;
  onSearch();
}

function handleCurrentChange(val) {
  pagination.currentPage = val;
  onSearch();
}
const router = useRouter();
function handleProductDetail(product) {
  // 保存信息到标签页
  useMultiTagsStoreHook().handleTags("push", {
    path: `/videoParse/index`,
    name: "VideoParsePage",
    query: product,
    meta: {
      title: `视频分析`,
      showLink: false
    }
  });
  router.push({ name: "VideoParsePage", query: product });
}
const loading = ref(true);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true
});
onMounted(() => {
  onSearch();
});
</script>

<template>
  <div class="main">
    <h2 class="mb-4 text-xl">视频分析</h2>
    <el-card shadow="never" :style="{ height: `calc(${height}px - 140px)` }">
      <template #header>
        <div class="card-header">
          <span class="font-semibold">异常分析</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="formInline"
        class="search-form bg-bg_color w-[99/100]"
      >
        <el-form-item style="margin-right: 10px">
          <el-date-picker
            v-model="formInline.date"
            type="daterange"
            unlink-panels
            range-separator="~"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :disabled-date="pickerOptions"
            :default-value="lastMonth"
          />
        </el-form-item>

        <el-form-item style="margin-right: 12px">
          <el-select
            v-model="formInline.violation"
            placeholder="异常表现"
            multiple
            collapse-tags
            collapse-tags-tooltip
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleRefresh">重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- <PureTableBar title="" :columns="columns" @refresh="onSearch"> -->
      <!-- <template v-slot="{ size, columns }"> -->
      <pure-table
        adaptive
        align-whole="left"
        table-layout="auto"
        :loading="loading"
        :data="tableData"
        showOverflowTooltip
        :columns="columns"
        :pagination="pagination"
        :paginationSmall="tableSize === 'small' ? true : false"
        :header-cell-style="{
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)'
        }"
        @page-size-change="handleSizeChange"
        @page-current-change="handleCurrentChange"
      >
        <template #violation="{ row }">
          <!-- {{ row.is_violation ? "是" : "否" }} -->
          <span
            :class="tagStyle(item)"
            v-for="(item, index) in row.abnormal_performance"
            :key="index"
            >{{ item }}</span
          >
        </template>
        <template #operation="{ row }">
          <el-button
            class="reset-margin"
            link
            type="primary"
            @click="handleProductDetail(row)"
          >
            详情
          </el-button>
        </template>
      </pure-table>
      <!-- </template> -->
      <!-- </PureTableBar> -->
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.span-occlusion,
.span-smoke,
.span-money,
.span-stillness,
.span-shake {
  box-sizing: border-box;
  display: inline-block;
  width: 64px;
  height: 24px;
  margin-right: 10px;
  font-size: 12px;
  color: rgb(247 95 25 / 100%);
  text-align: center;
  background: rgb(247 112 49 / 10%);
  border: 1px solid #f75f19;
  border-radius: 2px;
}

.span-smoke {
  color: rgb(2 36 215 / 100%);
  background: rgb(2 36 215 / 10%);
  border: 1px solid rgb(2 36 215 / 100%);
}

.span-money {
  color: rgb(232 13 13 / 100%);
  background: rgb(232 13 13 / 10%);
  border: 1px solid rgb(232 13 13 / 100%);
}

.span-stillness {
  color: rgb(68 174 245 / 100%);
  background: rgb(68 174 245 / 10%);
  border: 1px solid rgb(68 174 245 / 100%);
}

.span-shake {
  color: rgb(246 148 0 / 100%);
  background: rgb(246 148 0 / 10%);
  border: 1px solid rgb(246 148 0 / 100%);
}

.reset-margin {
  color: #e80d0d;

  &:hover {
    color: #e80d0d;
    opacity: 0.5;
  }
}
</style>
