<script lang="tsx" setup>
import { onMounted, ref, watch } from 'vue';
import { NButton, NSpace, NTag, useNotification } from 'naive-ui';
import { ArrowLeft20Filled } from '@vicons/fluent';
/** api_algorithms 算法列表 api_modifyAlgorithms 修改算法 */
import { api_algorithms, api_modifyAlgorithms } from '@/api/index';
import type { ItablePagination } from '@/views/AlgorithmConfiguration/index';

const page = ref(1);
const pageSize = ref(10);
const tableData = ref([]);
const isInfo = ref(false);
const notification = useNotification();
const show = ref(false);


const total = ref(0);
const getAlgorithms = async () => {
  show.value = true;

  const param: ItablePagination = {
    pageNum: page.value,
    pageSize: pageSize.value
  };

  await api_algorithms(param)
    .then(res => {
      if (res.data.code === 200) {
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
      }
      show.value = false;
    })
    .catch(() => (show.value = false));
};

const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  }
];

/** algorithmAddress : "http://localhost:8080" algorithmName : "人员打电话检测" grade : 2 id : "9" version : "v1.0" */

const curInfo = ref({});

const tableColumn = [
  {
    title: '算法ID',
    align: 'center',
    key: 'id',
  },
  {
    title: '算法版本',
    align: 'center',
    key: 'version',
  },
  {
    title: '算法名称',
    align: 'center',
    key: 'algorithmName',
  },
  {
    title: '算法等级',
    key: 'grade',
    align: 'center',
    render: (row: any) => {
      return row.grade === 0 ? (
        <NTag bordered={false} type="error">一级</NTag>
      ) : row.grade === 1 ? (
        <NTag bordered={false} type="warning">二级</NTag>
      ) : row.grade === 2 ? (
        <NTag bordered={false} type="info">三级</NTag>
      ) : row.grade === 3 ? (
        <NTag bordered={false} type="success">四级</NTag>
      ) : (
        <NTag bordered={false} >五级</NTag>
      );
    }
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    render(row: any) {
      return (
        <NSpace justify='center'>
          <div>
            <n-button
              onClick={() => {
                curInfo.value = row;
                isInfo.value = true;
              }}
              quaternary
              type="info"
            >
              详情
            </n-button>
          </div>
        </NSpace>
      );
    }
  }
];

const selectWebCaM = ref<any>([]);

const handleCheck = (rowKeys: any) => {
  selectWebCaM.value = rowKeys;
};

const generalOptions = [
  {
    id: 0,
    label: '一级'
  },
  {
    id: 1,
    label: '二级'
  },
  {
    id: 2,
    label: '三级'
  },
  {
    id: 3,
    label: '四级'
  },
  {
    id: 4,
    label: '五级'
  }
];

const onSubmit = async () => {
  await api_modifyAlgorithms(curInfo.value?.id, curInfo.value?.grade).then(res => {
    if (res.data.code === 200) {
      getAlgorithms();
      isInfo.value = false;
      notification.success({
        duration: 4000,
        content: '修改成功!'
      });
    } else {
      notification.error({
        content: res.data.msg,
        duration: 4000
      });
    }
  });
};

watch(page, () => {
  getAlgorithms();
});

watch(pageSize, () => {
  getAlgorithms();
});

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

<template>
  <div id="webcamconfiguration">
    <div v-if="!isInfo">
      <NSpin :show="show">
        <NCard title="全部算法" size="medium">
          <NDataTable striped bottom-bordered :row-key="row => row.id" :columns="tableColumn" :data="tableData"
            :bordered="true" @update:checked-row-keys="handleCheck" />
          <div style="display: flex; justify-content: end">
            <NPagination
            :item-count="total"
            v-model:page="page" v-model:page-size="pageSize" style="margin-top: 20px"
              :display-order="['quick-jumper', 'pages', 'size-picker']" :page-count="100" show-quick-jumper
              show-size-picker :page-sizes="pageSizes" />
          </div>
        </NCard>
      </NSpin>
    </div>

    <NRow v-else gutter="12">
      <NCol :span="8">
        <NCard>
          <!-- <template #header-extra>
            <span style="font-size: 14px; font-weight: 520;">
              ID : {{ curInfo?.id }}
              <NDivider vertical />
              版本 {{ curInfo?.version }}
            </span>
          </template> -->
          <!-- ===================================== header | S -->
          <!-- <template #header>
            <span style="font-size: 15px" @click="() => {
              isInfo = false;
            }
              ">
              <NIcon size="16">
                <ArrowLeft20Filled />
              </NIcon>
              <span style="position: relative; top: -1px; margin-left: 5px; margin-right: 5px;">返回</span>
            </span>
            <NDivider vertical />
            <span style="font-size: 14px; font-weight: 520;"> {{ curInfo.algorithmName }}</span>
          </template> -->
          <!-- ===================================== header=### | S -->
          <!-- ========================= -->
          <!-- ========================= -->
          <template #header>
            <n-page-header title="返回" :subtitle="curInfo.algorithmName" @back="isInfo = false">
              <template #extra>
                <span style="font-size: 13px; font-weight: 520;">
                  ID : {{ curInfo?.id }}
                  <NDivider vertical />
                  版本 {{ curInfo?.version }}
                </span>
              </template>
            </n-page-header>
          </template>


          <template #footer>
            <div style="font-weight: 520">选择报警类型</div>
            <NSelect v-model:value="curInfo.grade" style="margin-top: 10px" value-field="id" label-field="label"
              placeholder="请选择分组" :options="generalOptions" />
          </template>
          <template #action>
            <div class="active">
              <NButton style="width: 100%;" type="info" @click="onSubmit">保存</NButton>
            </div>
          </template>
        </NCard>
      </NCol>
    </NRow>
  </div>
</template>

<style>
#webcamconfiguration {
  .active {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}
</style>
