<template>
  <div class="m-4">
    <XTTitle title="业务参数设置" />
    <div class="page-body">
      <!-- <Input placeholder="请输入医嘱类型" class="search-input" @change="handleSearch">
        <template #prefix> <Icon icon="icon-search|iconfont" :size="14" /></template>
      </Input> -->
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'typeName' && record.typeName.indexOf('天') != -1">
            <div style="display: flex">
              {{ record.typeName }}
              <a-tooltip color="orange" :title="record.typeName + ': 不可超过360天'">
                <div class="tips">?</div>
              </a-tooltip>
            </div>
          </template>
          <template
            v-if="
              column.key === 'contents' &&
              record.key != 1 &&
              record.key != 2 &&
              record.key != 3 &&
              record.key != 4
            "
          >
            <div v-if="record.typeName.indexOf('天') != -1">
              <a-input-number
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][column.dataIndex]"
                :min="0"
                :max="365"
                placeholder="请输入参数内容"
              />
              <template v-else> {{ record.contents }} </template>
            </div>
            <div v-else>
              <a-input-number
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][column.dataIndex]"
                :min="0"
                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-xt-details_edit_default|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>
  </div>
</template>
<script lang="ts" setup>
  import { ref, UnwrapRef, reactive } from 'vue'; // onBeforeMount,
  import { DatePicker } from 'ant-design-vue'; // , Input

  // import Icon from '/@/components/Icon/src/Icon.vue';
  import { XTTitle } from '/@/components/XTTitle/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getParameter, editParameter } 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,
    actionColumn: {
      width: 320,
      title: '操作',
      dataIndex: 'action',
    },
  });
  // 获取数据结构变更
  async function getData(type) {
    dataList.value = [];
    const res = await getParameter(type);
    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: 10,
          };
          dataList.value.push(data);
          break;
        }

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

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

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

        case 'calciumPhosphorusMiddle': {
          const data = {
            typeName: '钙磷乘积中间值(mg2/dl2)',
            contents: res[value],
            typeIndex: value,
            key: 19,
          };
          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 handleSearch() {}
  // 编辑业务
  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),
      );
    } else {
      editObj[editableData[key].typeIndex] = editableData[key].contents;
    }
    await editParameter(resObj.value);
    delete editableData[key];
    createMessage.success('参数[' + editName + ']修改成功!');
    reload();
  }
</script>
<style lang="less" scoped>
  ::v-deep(.ant-btn-link) {
    color: rgb(61 65 85 / 100%);
  }

  ::v-deep(.ant-table-thead > tr > th) {
    text-align: left !important;
    color: #818694;
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    text-align: left !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: 0 !important;
  }

  .page-body {
    background-color: #fff;
    padding: 16px;
    margin-top: 16px;
  }

  .search-input {
    width: 300px;
    margin: 0.6rem;
    float: right;
  }

  ::v-deep(.fan-basic-table .ant-table-wrapper table) {
    border: 0 !important;
  }

  ::v-deep(.fan-basic-table-action.center) {
    justify-content: left !important;
  }

  .tips {
    width: 14px;
    height: 14px;
    margin: 5px 0 0 8px;
    line-height: 14px;
    text-align: center;
    border: solid 1px #696969;
    border-radius: 50%;
    background-color: #696969;
    color: #fff;
    font-size: 3px;
  }
</style>
