<!-- 工作台账 -->
<template>
  <div>
    <TablePro
      ref="tableRef"
      :request-api="reqApi"
      :search-form-options="searchFormOptions"
      :columns="columns"
      :isPageTable="true"
      :single-line="false"
    >
      <template #headerExtra>
        <n-button
          strong
          secondary
          type="primary"
          @click="addWorkAccounts"
        >
          添加
        </n-button>
      <n-button style="margin-left: 10px">一键导出</n-button>
      </template>
    </TablePro>
  </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 datalistWorkAccounts, { type WorkAccountsValue } from "@/views/workAccounts/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: datalistWorkAccounts,
          size: "10",
          total: "12"
        },
        message: "操作成功！"
      });
    });
  };
  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    time: {
      type: "datePicker",
      label: "时间",
    },
    name:{
       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: "createTimeStr",
      title: "晨检时间"
    },
    {
      key: "",
      title: "操作",
      width: 200,
      render: (value:WorkAccountsValue) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="warning"
              onClick={() => {
                title.value = `修改晨检记录`;
                console.log(value);
                userValue.value.userName = value.userName
                userValue.value.temperature = value.temperature
                userValue.value.bodyImageUrl =value.bodyImageUrl
                userValue.value.handImageUrl =value.handImageUrl
                userValue.value.handbackImageUrl =value.handbackImageUrl
                userValue.value.headImageUrl =value.headImageUrl
                userValue.value.diseases =value.diseases
                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();
                  }
                });

              }}
            >
              修改
            </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<WorkAccountsValue>({
    ...workAccountsValueList
  });

  const resetModelValue = () => {
    userValue.value = { ...workAccountsValueList };
    title.value = '添加晨检记录'
  };

  const addUserOrUpdate =  () => {
    forms.value?.validate().then(() => {
      // loading.value = true

    });
  };
  const formOptions1User = reactive<FormItemOptions<WorkAccountsValue>>({
    diseases:{
      type:'checkboxGroup',
      label:'健康状态',
      options:[
        {
          value:'无不适',
          label:'无不适'
        },
        {
          value:'发热',
          label:'发热'
        },
        {
          value:'恶心',
          label:'恶心'
        },
        {
          value:'呕吐',
          label:'呕吐'
        },
        {
          value:'咳嗽',
          label:'咳嗽'
        },
        {
          value:'湿疹',
          label:'湿疹'
        },
        {
          value:'腹泻',
          label:'腹泻'
        },
        {
          value:'烫伤',
          label:'烫伤'
        },
      ]
    }
  })
  const formOptionsUser = reactive<FormItemOptions<WorkAccountsValue>>({
    userName:{
      type: "select",
      label: "员工",
      required:true,
      options:[
        {
          value:'张三',
          label:'张三'
        },
        {
          value:'李四',
          label:'李四'
        },
        {
          value:'王五',
          label:'王五'
        },
        {
          value:'赵六',
          label:'赵六'
        },
        {
          value:'刘七',
          label:'刘七'
        },
      ]
    },
    temperature:{
       type:'input',
       label:'体温',
      required:true
    },
    bodyImageUrl:{
      type: "custom",
      label: "衣着图片",
      required:true,
      customRender: (val) => {
        return (
          <div>
            <n-image
              width="200"
              height="150"
              src={val.bodyImageUrl}
            />
          </div>
        );
      }
    },
    handImageUrl:{
      type: "custom",
      label: "手心图片",
      required:true,
      customRender: (val) => {
        return (
          <div>
            <n-image
              width="200"
              height="150"
              src={val.handImageUrl}
            />
          </div>
        );
      }
    },
    handbackImageUrl:{
      type: "custom",
      label: "手背图片",
      required:true,
      customRender: (val) => {
        return (
          <div>
            <n-image
              width="200"
              height="150"
              src={val.handbackImageUrl}
            />
          </div>
        );
      }
    },
    headImageUrl:{
      type: "custom",
      label: "头部图片",
      required:true,
      customRender: (val) => {
        return (
          <div>
            <n-image
              width="200"
              height="150"
              src={val.headImageUrl}
            />
          </div>
        );
      }
    },

  })

  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();
      }
    });
  }
</script>
<style scoped lang="scss"></style>
