<template>
    <div class="warp">
        <el-timeline style="max-width: 600px;">

            <el-timeline-item :key="index" v-for="(item, index) in logs" type="primary"
                :color="taskResultsMap[item.callState] ? taskResultsMap[item.callState].color : ''" hide-timestamp>
                <el-row>
                    <span class="el-timeline-item_user">{{ item.createUser }}</span>
                    <span class="el-timeline-item__timestamp">{{ item.createTime }}</span>
                    <el-text v-if="taskResultsMap[item.callState]"
                        :style="{'color': taskResultsMap[item.callState].color}" class="el-timeline-item_phonestate">{{
                        item.callState }}</el-text>
                </el-row>
                <el-row style="margin-top: 10px;" v-if="item.content">
                    <span class="el-timeline-item_visitresult">{{ item.content }}</span>
                </el-row>
                <el-row style="margin-top: 10px;">
                    <span class="el-timeline-item_spantext" v-if="item.workcode">工单： <el-link type="primary"
                            :underline="false" @click="skpiWorkOrder(item.workcode)">{{ item.workcode }}</el-link></span>
                    <span class="el-timeline-item_spantext" v-if="item.questionnaire">问卷： <el-link type="primary" :underline="false" @click="skpiQuestion(item.questionnaire)">{{
                            item.questionnaireName || '问卷' }}</el-link></span>
                </el-row>
            </el-timeline-item>
        </el-timeline>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getVisitResults } from '@/api/patient/task';
import { taskResults } from "@/utils/commonDic.js";
import { ArrayToMap } from '@/utils/tools';
import { useRoute } from 'vue-router';

const props = defineProps({
    patientId: {
        type: String,
        default: '',
    }
});
const router = useRoute();
const patientId = ref(router.query.patientId);

onUpdated(() => {
    initMethod()
});
const logs = ref([]);
const taskResultsMap = ArrayToMap(taskResults, 'value');

onMounted(() => {
    // 通过客户编号获取随访记录
    initMethod()
})
function initMethod() {
    console.log(props.patientId,patientId.value)

    getVisitResults({
        patientFiles: props.patientId,
    }).then((res) => {
        if (res.state === 'success') {
            logs.value = res.data;
        }
    })
}
/**
 * TODO:跳转到问卷详情页面
 */
const skpiQuestion = (id) => {

}

/**
 * TODO:跳转到工单详情页面
 */
const skpiWorkOrder = (id) => {

}

</script>

<style lang="scss" scoped>
.warp {
    margin-top: 10px;

    .el-timeline-item_user {
        font-size: var(--el-font-size-small);
        line-height: 1;
        color: black;
        margin-right: 10px;
    }

    .el-timeline-item_visitresult {
        color: var(--el-text-color-secondary);
    }

    .el-timeline-item_phonestate {
        margin-left: 10px;
        font-size: var(--el-font-size-small);
        line-height: 1;
    }

    .el-timeline-item_spantext {
        align-items: center;
        display: flex;
        margin-right: 30px;
    }
}
</style>