<template>
  <div class="wrap">
    <el-row :gutter="20">
      <el-col :span="showType ? 6 : 24"> 
        <patient-info :patientCallNumber="patientCallNumber" ></patient-info>
      </el-col>
      <el-col v-if="showType" :span="18">
        <div class="info-card">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <!-- <el-tab-pane label="就诊记录" name="first">
              <medical-info></medical-info>
            </el-tab-pane>
            <el-tab-pane label="住院记录" name="second">
              <in-hospital/>
            </el-tab-pane> -->
            <el-tab-pane label="工单" name="third">
              工单
              <!-- <operation-log></operation-log> -->
            </el-tab-pane>
            <el-tab-pane label="通话记录" name="fourth">
              通话记录
              <!-- <knowledge-list></knowledge-list>  -->
            </el-tab-pane>
            <!-- <el-tab-pane label="随访记录" name="five">
              <visitLogs :patientId="patientId"></visitLogs>
            </el-tab-pane> -->
    
            <el-tab-pane label="变更日志" name="six">
              <log :patientId="patientId" @getLogs="getLogs" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

    <page-modal :defaultInfo="defaultInfo" ref="pageModalRef" pageName="/patient/patient" @submit="submit"
      :modalConfig="modalConfigRef"></page-modal>

  </div>
</template>

<script setup>
import { ref, onMounted, watch, toRaw } from "vue";
import patientInfo from "../patientInfo/patientInfo";
// import medicalInfo from "../medicalInfo/medicalInfo";
// import inHospital from "../inHospital/inHospital";
// import visitLogs from '../visitLogs/visitLogs.vue'
import log from "../logs/log.vue";

import patientIcon from '@/assets/images/patientIcon.png'
import { useRoute } from 'vue-router';
import { getPatientInfo } from '@/api/patient/patient';
import { userDecryptToAsterisk } from '@/utils/aes'
import { nations, patientStatus, sex, patientSource, phoneStatus } from "@/utils/commonDic.js";
import { getStrById, areaTrees } from "@/utils/area.js";
import { ArrayToMap } from '@/utils/tools'
import PageModal from '@/components/page-modal'
import { usePageModal } from '@/hooks/use-page-modal'
import { modalConfig } from '../../config/modal.config'
import { ElMessage } from 'element-plus'
import { Avatar, Edit } from '@element-plus/icons-vue'
import { getPageListData } from '@/api/main/system/system';

const activeName = ref('first')
function handleClick() {
}

const router = useRoute();

let detail = ref({});

const patientId = ref(router.query.patientId || router.query.id);

const props = defineProps({
  descColumn: {
    type: Number,
    default: 4,
  },
  patientCallNumber:{
    type:String,
    default:''
  },
  showType: {
    type: Number,
    default: 1,
  }
})
watch(props, (nweProps) => {
    if (nweProps.patientCallNumber) {
      customerDetail(nweProps.patientCallNumber)
    }
});

onUpdated(() => {
  patientId.value = router.query.patientId || router.query.id;
  console.log(patientId.value);
});
const getPatientId = computed(() => {
  return router.query.patientId || router.query.id;
});
watch(getPatientId, async (newValue) => {
  patientId.value = newValue;
  getDetail(newValue).then(() => { });
})
const stateLog = ref();
async function customerDetail(customerno) {
    const resultData = await getPageListData('/patient/patient',{phoneNumber:customerno});
    detail.value = resultData.data[0]
    console.log(detail.value);
}
const getDetail = async () => {
  const res = await getPatientInfo(patientId.value)
  detail.value = res.data
}
onBeforeMount(async () => {
  if (props.patientCallNumber) {
    customerDetail(props.patientCallNumber)
  } else{
    await getDetail(patientId.value);
  }
})
const statusMap = ArrayToMap(patientStatus, 'value');
const sourceMap = ArrayToMap(patientSource, 'value');
const phoneStatusMap = ArrayToMap(phoneStatus, 'value');
const sexMap = ArrayToMap(sex, 'value');
const nationsMap = ArrayToMap(nations, 'value');

const getLogs = (logs) => {
  // 获取当前状态对应的数据
  if (phoneStatusMap[detail.value.phoneStatus] && phoneStatusMap[detail.value.phoneStatus].showLog) {
    stateLog.value = logs.find((o) => {
      return o.type === '状态变更';
    })
    console.log(stateLog.value, 'stateLog.value');
  }

}

</script>

<style lang="scss" scoped>
  :deep(.el-descriptions__label){
    width: 80px;
    text-align: right;
    display: inline-block;
  }
  .cardInfo{
    width: 100%;
    line-height: 30px;
    background-color: #F3F9FF;
    display: flex;
    padding: 10px;
  }
.wrap {
  .info-header {
    padding: 30px;
    padding-right: 0px;
    width: 100%;
    .title-text {
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .title-time {
      margin-left: 10px;
      font-size: 14px;
      font-weight: normal;
      color: #606266;
    }

    .title-reson {
      color: #F56C6C;
      font-size: 14px;
      font-weight: normal;
      margin-left: 5px;
    }

  }

  .info-card {
    margin: 0px 30px 30px 30px;
  }
}
</style>