<template>
  <div class="wrap">
    <div class="info-header">

      <el-descriptions :column="descColumn" border>
        <template #title>
          <el-icon>
            <Avatar />
          </el-icon>
          <!-- <span class="title-text" @click="handleCopy(patientId)">{{ patientId.split('-')[0] }}</span> -->
          <el-tooltip class="box-item" effect="dark" content="点击复制客户编号" placement="bottom">
            <el-link class="title-text" :underline="false" @click="handleCopy(patientId)">{{ patientId && patientId.split('-')[0]
              }}</el-link>
          </el-tooltip>


          <el-button v-if="phoneStatusMap[detail.phoneStatus]" style="margin-left: 10px"
            :type="phoneStatusMap[detail.phoneStatus].color" size="small">{{ phoneStatusMap[detail.phoneStatus].title
            }}</el-button>

          <el-button v-else-if="statusMap[detail.patientStatus]" style="margin-left: 10px"
            :type="statusMap[detail.patientStatus].color" size="small">{{ statusMap[detail.patientStatus].title
            }}</el-button>

          <span class="title-time" v-if="stateLog">{{ stateLog.createTime }}</span>
          <span class="title-reson" v-if="stateLog">{{ stateLog.content }} </span>
        </template>
        <template #extra>
          <el-button type="primary" :icon="Edit" circle @click="handleEditData(detail)" />
          <el-button type="danger" :icon="Avatar" circle @click="joinBlacklist(detail)" />
        </template>
        <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ detail.age }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ sexMap[detail.sex] ? sexMap[detail.sex].title : '' }}</el-descriptions-item>
        <!-- <el-descriptions-item label="出生日期">{{ detail.nation }}</el-descriptions-item> -->
        <el-descriptions-item label="民族">{{ nationsMap[`${detail.nation}`] ? nationsMap[`${detail.nation}`].title : ''
          }}</el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ getStrById(detail.nativePlace) }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detail.phoneNumber && userDecryptToAsterisk(detail.phoneNumber)
          }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ detail.tel && userDecryptToAsterisk(detail.tel) }}</el-descriptions-item>
        <el-descriptions-item label="备用号码">{{ detail.secondPhone && userDecryptToAsterisk(detail.secondPhone)
          }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ detail.email }}</el-descriptions-item>
        <!-- <el-descriptions-item label="职业">{{ detail.work }}</el-descriptions-item> -->
        <el-descriptions-item label="身份证号">{{ detail.idcard && userDecryptToAsterisk(detail.idcard)
          }}</el-descriptions-item>
        <el-descriptions-item label="医保卡号" span="2">{{ detail.ybkId }}</el-descriptions-item>
        <el-descriptions-item label="住址" span="4">{{ detail.address }}</el-descriptions-item>
        <el-descriptions-item label="标签" span="4" v-if="detail.label && detail.label.length > 0">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <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">
          工单
          <!-- <operation-log></operation-log> -->
        </el-tab-pane>
        <el-tab-pane label="通话记录" name="third">
          通话记录
          <!-- <knowledge-list></knowledge-list>  -->
        </el-tab-pane>
        <el-tab-pane label="随访记录" name="fourth">
          <visitLogs :patientId="patientId"></visitLogs>
        </el-tab-pane>

        <el-tab-pane label="变更日志" name="five">
          <log :patientId="patientId" @getLogs="getLogs" />
        </el-tab-pane>
      </el-tabs>
    </div>

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

    <!-- 黑名单组件 -->
    <page-modal :defaultInfo="blackInfo" ref="blackModalRef" pageName="/patient/black"
      :modalConfig="blackModalConfig" :otherInfo="blackOtherInfo"></page-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, toRaw } from "vue";
import medicalInfo from "../medicalInfo/medicalInfo";
import log from "../logs/log.vue";
import visitLogs from '../visitLogs/visitLogs.vue'
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 { useClipboard } from "@vueuse/core"
import { ElMessage } from 'element-plus'
import { modalConfig as blackModalConfig } from '@/views/main/patientFile/patientblack/config/modal.config'
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 descColumn = ref(4)

const props = defineProps({
  descColumn: {
    type: Number,
    default: 4,
  },
  patientCallNumber:{
    type:String,
    default:''
  }
})
watch(props, (nweProps) => {
    // initMethod(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});
    // form.value.caller =  resultData.data[0].name
    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) {
    console.log(logs, 'asdf')
    stateLog.value = logs.find((o) => {
      return o.type === '状态变更';
    })

    console.log(stateLog.value, 'stateLog.value');
  }

}


// 1.处理逻辑
const newCallback = () => { }
const editCallback = () => { 
  console.log(defaultInfo.value)
}

const blackNewCallback = () => { }
const blackEditCallback = () => {
  console.log(blackInfo.value)
}

// 2.动态添加部门和角色列表
const modalConfigRef = computed(() => {

  const nativePlace = modalConfig.formItems.find(
    (item) => item.field === 'nativePlace'
  )
  nativePlace.options = areaTrees()

  const nation = modalConfig.formItems.find(
    (item) => item.field === 'nation'
  )
  nation.options = nations

  const patientStatusConf = modalConfig.formItems.find(
    (item) => item.field === 'patientStatus'
  )
  patientStatusConf.options = patientStatus

  const sexConf = modalConfig.formItems.find(
    (item) => item.field === 'sex'
  )
  sexConf.options = sex

  return modalConfig
})

// 加入黑名单
const blackOtherInfo = ref({
  patientId: '',
});
const joinBlacklist = async (row) => {
  blackOtherInfo.value.patientId = row.patientId;
  blackNewData();
}


// 3.调用hook获取公共变量和函数
const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
  usePageModal(newCallback, editCallback)

const [blackModalRef, blackInfo, blackNewData, blackEditData] =
  usePageModal(blackNewCallback, blackEditCallback)


const submit = () => {
  getDetail(patientId.value);
}


const { copy, isSupported } = useClipboard();
const handleCopy = (val) => {
  if (!isSupported) {
    ElMessage({
      message: '您的浏览器不支持Clipboard API',
      type: 'error',
    })
    return;
  }

  copy(val);
  ElMessage({
    message: '复制成功',
    type: 'success',
  })
};

</script>

<style lang="scss" scoped>
.wrap {
  .info-header {
    padding: 30px;

    .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>