<template>
  <div class="h-full flex flex-col gap-y-3">
    <n-page-header @back="$router.back">
      <template #title> 数据来源 </template>
    </n-page-header>
    <n-space>
      <n-input v-model:value="queryData.T_sn" placeholder="请输入SN" />
      <n-input v-model:value="queryData.T_id" placeholder="请输入ID" />
      <n-date-picker
        format="yyyy-MM-dd HH:mm"
        :time-picker-props="{ format: 'HH:mm' }"
        @update:formatted-value="
          (value) => {
            queryData.Time_start = value[0];
            queryData.Time_end = value[1];
          }
        "
        type="datetimerange"
        clearable
      />
      <n-button type="primary" @click="getDataList">搜索</n-button>
      <n-button type="primary" @click="handleReset">重置数据</n-button>
    </n-space>
    <n-data-table
      remote
      :columns="columns"
      :data="taskList"
      :pagination="pagination"
      :bordered="false"
      flex-height
      class="flex-1"
    />
  </div>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    :mask-closable="false"
    :closable="false"
    preset="dialog"
  >
    <n-form
      label-width="auto"
      label-placement="top"
      :model="queryData"
      show-require-mark
    >
      <n-form-item label="自定义时间">
        <n-date-picker
          format="yyyy-MM-dd HH:mm"
          :time-picker-props="{ format: 'HH:mm' }"
          @update:formatted-value="
            (value) => {
              queryData.Time_start = value[0];
              queryData.Time_end = value[1];
            }
          "
          type="datetimerange"
          clearable
        />
      </n-form-item>
      <n-button type="primary" block @click="handleSearch">搜索</n-button>
    </n-form>
  </n-modal>
</template>

<script setup>
import { NSpace, NButton,useMessage} from 'naive-ui';
import { extractTaskData, getTaskDataList } from '@/api';
import { reactive, ref } from 'vue';

const router = useRouter();
const message = useMessage()
const dialog = useDialog();
const formRef = ref()

const task = window.sessionStorage.getItem('task')
  ? JSON.parse(window.sessionStorage.getItem('task'))
  : {};

// 查询数据
const queryData = reactive({
  T_task_id: task.T_task_id,
  T_sn: '',
  T_id: '',
  Time_start: null,
  Time_end: null,
  page: 1,
  page_z: 20,
});

// 列表
const taskList = ref([]);

// 需要展示的列
const columns = [

{
    title: '编号',
    key: 'T_id',
  },
  {
    title: 'SN',
    key: 'T_sn',
  },
  {
    title: '温度℃',
    key: 'T_t',
  },
  {
    title: '湿度%',
    key: 'T_rh',
  },
  {
    title: '记录时间',
    key: 'T_time',
  },
];

// 分页数据源
const pagination = reactive({
  page: queryData.page,
  pageSize: queryData.page_z,
  itemCount: 0,
  onChange: (page) => {
    pagination.page = page;
    queryData.page = page;
    getDataList();
  },
});

//
const showModal = ref(false);

//
const handleSearch = (e) => {
  if(queryData.Time_start==null&&queryData.Time_end==null){
    message.error('请选择查询时间')
  }else{
    queryData.T_id = '';
    queryData.T_sn = '';
    showModal.value = false;
    extractTask();
  }
  
};

// 重置
const handleReset = () => {
  dialog.warning({
    title: '警告',
    content: '是否确认重置数据？',
    positiveText: '确认',
    negativeText: '取消',
    onPositiveClick: () => {
      showModal.value = true;
    },
  });
};

//
const extractTask = async () => {
  try {
    const { data: res } = await extractTaskData({     
      T_task_id: queryData.T_task_id,
      Time_start: queryData.Time_start,
      Time_end: queryData.Time_end,
    });
    if (res.Code === 200) {
      setTimeout(function() {
				router.replace('/')
			}, 500)
    }else{
      setTimeout(function() {
				router.replace('/')
			}, 500)
    }
  } catch (e) {
    console.log(e);
  }
};

// 获取列表
const getDataList = async () => {
  try {
    const { data: res } = await getTaskDataList(queryData);
    console.log('返回数据',res)
   
    pagination.itemCount = res.Data.Num;
    if (!res.Data.List) {
      showModal.value = true;
    } else {
      showModal.value = false;
      taskList.value = res.Data.List;
    }
  } catch (e) {
    console.log(e);
  }
};

getDataList();
</script>

<style scoped></style>
