<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template
          v-if="
            column.key === 'contents' &&
            record.key != 1 &&
            record.key != 2 &&
            record.key != 3 &&
            record.key != 4
          "
        >
          <div>
            <a-input
              v-if="editableData[record.key]"
              v-model:value="editableData[record.key][column.dataIndex]"
              placeholder="请输入参数内容"
            />
            <template v-else> {{ record.contents }} </template>
          </div>
        </template>

        <template
          v-if="
            column.key === 'contents' && (record.key == 2 || record.key == 3 || record.key == 4)
          "
        >
          <div>
            <a-radio-group
              v-model:value="editableData[record.key][column.dataIndex]"
              v-if="editableData[record.key]"
            >
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>

            <template v-else>
              {{ record.contents == 0 ? '否' : '是' }}
            </template>
          </div>
        </template>

        <template v-if="column.key === 'contents' && record.key == 1">
          <div>
            <DatePicker
              v-if="editableData[record.key]"
              :show-time="true"
              :format="'YYYY-MM-DD HH:mm:ss'"
              :value-format="'YYYY-MM-DD HH:mm:ss'"
              v-model:value="editableData[record.key][column.dataIndex]"
              placeholder="请选择时间"
            />
            <template v-else>
              {{ record.contents }}
            </template>
          </div>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                auth: ['bizSys:params:add', 'bizSys:params:edit', 'bizSys:params:remove'],
                ifShow: editableData[record.key] ? false : true,
                icon: 'icon-edit|iconfont',
                tooltip: '编辑',
                label: '',
                onClick: handleEdit.bind(null, record),
              },
              {
                auth: ['bizSys:params:add', 'bizSys:params:edit', 'bizSys:params:remove'],
                ifShow: editableData[record.key] ? true : false,
                icon: 'icon-check|iconfont',
                tooltip: '保存',
                label: '',
                onClick: handleSave.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { ref, UnwrapRef, reactive } from 'vue'; // onBeforeMount,
  import { DatePicker } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { get, edit } from '/@/api/biz/parameter/parameter';
  import { columns } from './data';

  interface DataItem {
    typeName: string;
    contents: string;
    typeIndex: string;
    key: number;
  }
  const dataList = ref([]);
  const resObj = ref({});
  const { createMessage } = useMessage();
  const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
  const [registerTable, { reload }] = useTable({
    api: getData,
    rowKey: 'id',
    columns,
    striped: false,
    pagination: false,
    showIndexColumn: false,
    formConfig: {
      labelWidth: 120,
      autoSubmitOnEnter: true,
      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
      resetButtonOptions: {
        preIcon: 'icon-delete|iconfont',
      },
      submitButtonOptions: {
        preIcon: 'icon-search|iconfont',
      },
    },
    useSearchForm: false,
    bordered: true,
    actionColumn: {
      width: 320,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: handleBeforeFetch,
  });
  // 获取数据结构变更
  async function getData() {
    dataList.value = [];
    const res = await get();
    resObj.value = res;
    Object.keys(res).forEach(value => {
      switch (value) {
        case 'firstScheduleBedTime': {
          const data = {
            typeName: '自动排床-首次排床日期',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'autoFlowPreDialysis': {
          const data = {
            typeName: '透前准备流程自动',
            contents: res[value],
            typeIndex: value,
            key: 2,
          };
          dataList.value.push(data);
          break;
        }

        case 'autoFlowAfterDialysis': {
          const data = {
            typeName: '透后称量流程自动',
            contents: res[value],
            typeIndex: value,
            key: 3,
          };
          dataList.value.push(data);
          break;
        }

        case 'autoFlowDisinfect': {
          const data = { typeName: '消毒流程自动', contents: res[value], typeIndex: value, key: 4 };
          dataList.value.push(data);
          break;
        }

        case 'urrMin': {
          const data = { typeName: 'URR最小值(%)', contents: res[value], typeIndex: value, key: 5 };
          dataList.value.push(data);
          break;
        }

        case 'sktVMin': {
          const data = { typeName: 'sKt/V最小值', contents: res[value], typeIndex: value, key: 6 };
          dataList.value.push(data);
          break;
        }

        case 'weightUpRate': {
          const data = {
            typeName: '体重增长率(%)',
            contents: res[value],
            typeIndex: value,
            key: 7,
          };
          dataList.value.push(data);
          break;
        }

        case 'preDialysisPressureMax': {
          const data = {
            typeName: '透前收缩压最大值(mmHg)',
            contents: res[value],
            typeIndex: value,
            key: 8,
          };
          dataList.value.push(data);
          break;
        }

        case 'albMin': {
          const data = {
            typeName: 'Alb最小值(h/L)',
            contents: res[value],
            typeIndex: value,
            key: 9,
          };
          dataList.value.push(data);
          break;
        }

        case 'hbMin': {
          const data = {
            typeName: 'HB最小值(g/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'hbMax': {
          const data = {
            typeName: 'HB最大值(g/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }
        case 'ipthMin': {
          const data = {
            typeName: 'IPTH最小值(ng/dL)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }
        case 'ipthMax': {
          const data = {
            typeName: 'IPTH最大值(ng/dL)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }
        case 'caMin': {
          const data = {
            typeName: 'Ca最小值(mmol/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }
        case 'caMax': {
          const data = {
            typeName: 'Ca最大值(mmol/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }
        case 'ppMin': {
          const data = {
            typeName: 'P最小值(mmol/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'ppMax': {
          const data = {
            typeName: 'P最大值(mmol/L)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'calciumPhosphorusMin': {
          const data = {
            typeName: '钙磷乘积最小值(mg2/dl2)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'calciumPhosphorusMiddle': {
          const data = {
            typeName: '钙磷乘积中间值(mg2/dl2)',
            contents: res[value],
            typeIndex: value,
            key: 1,
          };
          dataList.value.push(data);
          break;
        }

        case 'calciumPhosphorusMax': {
          const data = {
            typeName: '钙磷乘积最大值(mg2/dl2)',
            contents: res[value],
            typeIndex: value,
            key: 20,
          };
          dataList.value.push(data);
          break;
        }

        case 'phaseEvalInterval': {
          const data = {
            typeName: '阶段评估时间(天)',
            contents: res[value],
            typeIndex: value,
            key: 21,
          };
          dataList.value.push(data);
          break;
        }

        case 'phaseEvalAlarmInterval': {
          const data = {
            typeName: '阶段评估提前提醒时间(天)',
            contents: res[value],
            typeIndex: value,
            key: 22,
          };
          dataList.value.push(data);
          break;
        }

        case 'newPatientDay': {
          const data = {
            typeName: '新患者建档时间(天)',
            contents: res[value],
            typeIndex: value,
            key: 23,
          };
          dataList.value.push(data);
          break;
        }
      }
    });
    return dataList.value;
  }

  function handleBeforeFetch() {}
  // 编辑业务
  function handleEdit(record) {
    const key = record.key;
    editableData[key] = cloneDeep(dataList.value.filter(item => key === item.key)[0]);
  }
  // 保存业务
  async function handleSave(record) {
    const key = record.key;
    const editObj = resObj.value;
    const editName = editableData[key].typeName;
    if (
      editableData[key].typeIndex != 'firstScheduleBedTime' &&
      editableData[key].typeIndex != 'autoFlowAfterDialysis' &&
      editableData[key].typeIndex != 'autoFlowDisinfect' &&
      editableData[key].typeIndex != 'autoFlowPreDialysis'
    ) {
      editObj[editableData[key].typeIndex] = Number(
        parseFloat(editableData[key].contents).toFixed(2),
      );
    }
    await edit(resObj.value);
    delete editableData[key];
    createMessage.success('参数[' + editName + ']修改成功!');
    reload();
  }
</script>
