<!-- 工作台账 -->
<template>
  <div>
    <n-card style="margin-bottom: 16px">
      <n-tabs type="line" animated>
        <n-tab-pane name="oasis" tab="晨检仪">
          <TablePro
            ref="tableRef"
            :request-api="reqApi"
            :search-form-options="searchFormOptions"
            :columns="columns"
            :isPageTable="true"
            :single-line="false"
          >
            <template #headerExtra>
              <n-button style="margin-left: 10px">一键导出</n-button>
            </template>
          </TablePro>
        </n-tab-pane>
        <n-tab-pane name="the beatles" tab="电子秤">
          <TablePro
            ref="tableRef"
            :request-api="reqApiElectronicScale"
            :search-form-options="searchFormOptionsElectronicScale"
            :columns="columnsElectronicScale"
            :isPageTable="true"
            :single-line="false"
          >
            <template #headerExtra>
              <n-button style="margin-left: 10px">一键导出</n-button>
            </template>
          </TablePro>
        </n-tab-pane>
        <n-tab-pane name="jay chou" tab="摄像头">
          <TablePro
            ref="tableRef"
            :request-api="reqApiCameraDate"
            :search-form-options="searchFormOptionsCameraDate"
            :columns="columnsCameraDate"
            :isPageTable="true"
            :single-line="false"
          >
            <template #headerExtra>
              <n-button style="margin-left: 10px">一键导出</n-button>
            </template>
          </TablePro>
        </n-tab-pane>
      </n-tabs>
    </n-card>

  </div>
</template>
<script setup lang="tsx">
  import {
    TablePro,
    type TableProProps,
    FormPro,
    type FormItemOptions,
    type TableProInst,
    Icon
  } from "@/components";
  import { type FormInst, NPerformantEllipsis, NPopconfirm, NTag, useModal } from "naive-ui";
  import { type HardwareData,type ElectronicScale } from "@/views/hardwareData/index.ts";
  import hardwareData from "@/views/hardwareData/index.ts";
  import { ref,reactive } from "vue";

  const tableRef = useTemplateRef<TableProInst>("tableRef");
  const modal = useModal();
  const forms = ref<FormInst | null>(null);
  const reqApi: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: hardwareData.datalistHardwareData,
          size: "10",
          total: "12"
        },
        message: "操作成功！"
      });
    });
  };
  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    time: {
      type: "datePicker",
      label: "时间",
    },
    userName:{
      type:'input',
      label: "员工姓名"
    },
  });
  const columns = ref<TableType["columns"]>([
    {
      key:'userName',
      title:'员工姓名'
    },
    {
      key:'temperature',
      title:'体温'
    },
    {
      key:'bodyImageUrl',
      title:'衣着图片',
      render: (value: any) => {
        return (
          <n-image
            width="30"
            src={value.bodyImageUrl}
          />
        );
      }
    },
    {
      key:'handImageUrl',
      title:'手心图片',
      render: (value: any) => {
        return (
          <n-image
            width="30"
            src={value.handImageUrl}
          />
        );
      }
    },
    {
      key:'handbackImageUrl',
      title:'手背图片',
      render: (value: any) => {
        return (
          <n-image
            width="30"
            src={value.handbackImageUrl}
          />
        );
      }
    },
    {
      key:'headImageUrl',
      title:'头部图片',
      render: (value: any) => {
        return (
          <n-image
            width="30"
            src={value.headImageUrl}
          />
        );
      }
    },
    {
      key:'diseases',
      title:'健康状态',
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.diseases}
          </n-tag>
        );
      }
    },
    {
      key:'checkResultStr',
      title:'晨检结果',
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.checkResultStr}
          </n-tag>
        );
      }
    },
    {
      key:'checkInTime',
      title: "打卡时间"
    },
    {
      key: "createTimeStr",
      title: "晨检时间"
    },
    {
      key: "",
      title: "操作",
      width: 200,
      render: (value:HardwareData) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button>查看</n-button>
            <NPopconfirm
              onPositiveClick={async () => {
              }}
              onNegativeClick={() => {
              }}
              showIcon={false}
            >
              {{
                trigger: () => (
                  <n-button
                    strong
                    secondary
                    style={{ marginLeft: "10px" }}
                    type="error"
                  >
                    删除
                  </n-button>
                ),
                default: () => "确认要除么？"
              }}
            </NPopconfirm>
          </div>
        );
      }
    }
  ]);
  const workAccountsValueList = {
    bodyImage:"",
    bodyImageUrl :"",
    checkResultStr:"",
    checkStatusStr:"",
    createTime:"",
    createTimeStr:"",
    diseases:"",
    handImageUrl:"",
    handbackImageUrl:"",
    headImageUrl :"",
    isDefault:true,
    sexStr:"",
    temperature:"",
    updateTime :"",
    userName:"",
  }
  const userValue = ref<HardwareData>({
    ...workAccountsValueList
  });
  const resetModelValue = () => {
    userValue.value = { ...workAccountsValueList };
    title.value = '添加晨检记录'
  };
  const addUserOrUpdate =  () => {
    forms.value?.validate().then(() => {
      // loading.value = true

    });
  };
  const loading = ref<boolean>(false);
  const modalRef = ref();
  const title = ref("添加晨检记录");
  // const addWorkAccounts = ()=>{
  //   modalRef.value = modal.create({
  //     title: title.value,
  //     preset: "card",
  //     style: {
  //       width: "700px"
  //     },
  //     content: () => (
  //       <div style="height:600px">
  //         <FormPro  ref={forms} v-model:value={userValue.value}
  //                   form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
  //         </FormPro>
  //         <FormPro  ref={forms} v-model:value={userValue.value}
  //                   form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
  //         </FormPro>
  //       </div>
  //     ),
  //     footer: () => (
  //       <div
  //         style={{
  //           display: "flex",
  //           justifyContent: "flex-end"
  //         }}
  //       >
  //         <n-button
  //           loading={loading.value}
  //           style={{ marginRight: "10px" }}
  //           type="primary"
  //           onClick={() => {
  //             addUserOrUpdate();
  //           }}
  //         >
  //           确认
  //         </n-button>
  //         <n-button
  //           onClick={() => {
  //             modalRef.value.destroy();
  //             resetModelValue();
  //           }}
  //         >
  //           取消
  //         </n-button>
  //       </div>
  //     ),
  //     onAfterLeave: () => {
  //       resetModelValue();
  //     }
  //   });
  // }

//   电子秤


  const reqApiElectronicScale: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: hardwareData.dataListElectronicScale,
          size: "10",
          total: "12"
        },
        message: "操作成功！"
      });
    });
  };

  const searchFormOptionsElectronicScale = reactive<TableType["searchFormOptions"]>({
    time: {
      type: "datePicker",
      label: "时间",
    },
    userName:{
      type:'input',
      label: "负责人"
    },
  });
  const columnsElectronicScale = ref<TableType["columns"]>([
    {
      key:'personInCharge',
      title:'负责人'
    },
    {
      key:'deviceModel',
      title:'设备型号'
    },
    {
      key:'unit',
      title:'单位'
    },
    {
      key:'serialNumber',
      title:'序列号'
    },
    {
      key:'nameOfIngredients',
      title:'食材名称'
    },
    {
      key:'quantityOfIngredients',
      title:'食材数量'
    },
    {
      key:'weight',
      title:'重量值'
    },
    {
      key:'steadyState',
      title:'重量是否稳定'
    },
    {
      key:'outOfRange',
      title:'是否超出量程范围'
    },
    {
      key:'weighingTime',
      title:'称重时间'
    },
    {
      key:'',
      title:'操作',
      render:(value:ElectronicScale)=>{
         return (
           <div style={{ display: "flex" }}>
             <n-button
               strong
               secondary
               type="primary"
             >
               查看
             </n-button>
             <NPopconfirm
               onPositiveClick={async () => {
               }}
               onNegativeClick={() => {
               }}
               showIcon={false}
             >
               {{
                 trigger: () => (
                   <n-button
                     strong
                     secondary
                     style={{ marginLeft: "10px" }}
                     type="error"
                   >
                     删除
                   </n-button>
                 ),
                 default: () => "确认要除么？"
               }}
             </NPopconfirm>
           </div>
         )
      }
    }
  ])



  const reqApiCameraDate: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: hardwareData.dataListCameraDate,
          size: "10",
          total: "12"
        },
        message: "操作成功！"
      });
    });
  };

  const searchFormOptionsCameraDate = reactive<TableType["searchFormOptions"]>({
    time: {
      type: "datePicker",
      label: "时间",
    },
    userName:{
      type:'input',
      label: "摄像头名称"
    },
  });
  const columnsCameraDate = ref<TableType["columns"]>([
    {
      key:'id',
      title:'ID'
    },
    {
      key:'cameraName',
      title:'摄像头名称'
    },
    {
      key:'images',
      title:'现场图片',
      render: (value: any) => {
        return (
          <n-image
            width="30"
            src={value.images}
          />
        );
      }
    },
    {
      key:'videoChannel',
      title:'视频通道id'
    },
    {
      key:'states',
      title:'状态',
      render: (value: any) => {
        return (
          <n-tag type="success">
            {value.states}
          </n-tag>
        );
      }
    },
    {
      key:'cameraID',
      title:'录像机ID'
    },
    {
      key:'updatedBy',
      title:'更新人'
    },
    {
      key:'founder',
      title:'创建人'
    },
    {
      key:'updateTime',
      title:'更新时间'
    },
    {
      key:'',
      title:'操作',
      render:(value:ElectronicScale)=>{
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              type="primary"
            >
              查看
            </n-button>
            <NPopconfirm
              onPositiveClick={async () => {
              }}
              onNegativeClick={() => {
              }}
              showIcon={false}
            >
              {{
                trigger: () => (
                  <n-button
                    strong
                    secondary
                    style={{ marginLeft: "10px" }}
                    type="error"
                  >
                    删除
                  </n-button>
                ),
                default: () => "确认要除么？"
              }}
            </NPopconfirm>
          </div>
        )
      }
    }
  ])
</script>
<style scoped lang="scss"></style>
