<script setup lang="ts">
import { ContentWrap } from '@common/src/components/ContentWrap'
import { reactive, ref, watch } from 'vue'
import { Descriptions, DescriptionsSchema } from '@common/src/components/Descriptions'
import { useRouter, useRoute } from 'vue-router'
import { personCaseFind } from '@/api/caseManage'
import { getCodeByType } from '@common/src/utils'
const { go } = useRouter()
const { query } = useRoute()

const detailSchema = reactive<DescriptionsSchema[]>([
  {
    field: 'caseId',
    label: '病例ID'
  },
  {
    field: 'taskNo',
    label: '关联事件编号'
  },
  {
    field: 'userName',
    label: '姓名'
  },
  {
    field: 'age',
    label: '年龄'
  },
  {
    field: 'sex',
    label: '性别',
    slots: {
      default: (data) => {
        return (data.sex && getCodeByType('SEX', data.sex)) || '-'
      }
    }
  },
  {
    field: 'career',
    label: '职业',
    slots: {
      default: (data) => {
        return (data.career && getCodeByType('CAREER', data.career)) || '-'
      }
    }
  },
  {
    field: 'educationDegree',
    label: '文化程度',
    slots: {
      default: (data) => {
        console.log(data)
        return (
          (data.educationDegree && getCodeByType('EDUCATION_DEGREE', data.educationDegree)) || '-'
        )
      }
    }
  },
  {
    field: 'currentAddress',
    label: '现住址',
    slots: {
      default(data) {
        return data.currentAddress && JSON.parse(data.currentAddress).value
      }
    }
  },
  {
    field: 'currentDetail',
    label: '详细地址'
  },
  {
    field: 'resident',
    label: '户口地'
  },
  {
    field: 'workUnit',
    label: '工作（学习）单位'
  },
  {
    field: 'contacts',
    label: '联系人'
  },
  {
    field: 'telephone',
    label: '联系电话'
  }
])

const detail = ref({})
const getDetail = async () => {
  const { data } = await personCaseFind({
    caseId: query.caseId
  })
  detail.value = data
}
getDetail()

const activeName = ref('1')
</script>

<template>
  <ContentWrap title="病例详情">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="病例基本信息" name="1">
        <Descriptions :schema="detailSchema" :data="detail" :column="1" />
      </el-tab-pane>
      <el-tab-pane label="疫苗接种记录" name="2">
        <div class="record-list">
          <div class="record-list-item">
            <div class="record-list-item__row">
              <div class="record-list-item__label">接种疫苗种类</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">接种日期</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">接种地点</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">详细地址</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="就诊记录" name="3">
        <div class="record-list">
          <div class="record-list-item">
            <div class="record-list-item__row">
              <div class="record-list-item__label">就诊原因</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">诊断结果</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">就诊日期</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">就诊地点</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">详细地址</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="购药记录" name="4">
        <div class="record-list">
          <div class="record-list-item">
            <div class="record-list-item__row">
              <div class="record-list-item__label">购药原因</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">购药清单</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">购药日期</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">购药地点</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">详细地址</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="检测记录" name="5">
        <div class="record-list">
          <div class="record-list-item">
            <div class="record-list-item__row">
              <div class="record-list-item__label">检测原因</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">检测结果</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">检测日期</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">检测地点</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <div class="record-list-item__row">
              <div class="record-list-item__label">详细地址</div>
              <div class="record-list-item__content">xxx</div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="活动轨迹" name="6">待接入</el-tab-pane>
    </el-tabs>

    <div class="btns text-right mt10px">
      <BaseButton @click="go(-1)">返回</BaseButton>
    </div>
  </ContentWrap>
</template>

<style lang="less">
.record-list {
  &-item {
    &__row {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }
    &__label {
      width: 150px;
      text-align: right;
      margin-right: 16px;
    }
    &__content {
      color: var(--el-text-color-regular);
    }
  }
}
</style>
