<template>
    <global-page :padding="24" title="考核记录详情" showEdit :editMode="2" @handleEdit="handleEdit">
        <template v-if="details">
            <view class="details">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="txt">{{ details.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
                        <custom-score
                            v-if="details.score != -1"
                            :type="details.eventType == 1 ? 'success' : 'warning'"
                            :count="details.score"
                        ></custom-score>
                    </view>
                    <view class="details-header-bottom">
                        <view class="left">
                            <global-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
                            <view class="txt">{{ details.ac }} {{ details.acType }}</view>
                        </view>
                        <view class="right">{{ timeStampFormat(details.eventTime, { format: 'YYYY-MM-DD' }) }}</view>
                    </view>
                </view>
                <view class="details-body">
                    <view class="details-body-top">
                        <view class="top">
                            <global-icon icon="mind-mapping"></global-icon>
                            <text class="txt u-line-1">事件来源:{{ details.eventSource || ' -' }}</text>
                        </view>
                        <view class="bottom" v-if="details.department != '-1' && details.appraisee != '-1'">
                            {{ details.department != '-1' ? details.department : '-' }}
                            <text class="txt">{{ details.appraisee != '-1' ? details.appraisee : '-' }}</text>
                        </view>
                    </view>
                    <view class="details-body-bottom">
                        {{ details.eventMsg || '-' }}
                    </view>
                </view>
                <view class="details-footer">
                    <view class="details-footer-top">
                        <global-icon icon="subscribed" color="#1D2129"></global-icon>
                        <text class="txt">{{ details.examineType != -1 ? details.examineType : '-' }}</text>
                    </view>
                    <view class="details-footer-center">{{ details.examineBasis || ' -' }}</view>
                    <view class="details-footer-bottom">
                        <view class="person-info">
                            <global-icon icon="idcard"></global-icon>
                            <text class="txt">当班人员：{{ details.onDutyUser || '-' }}</text>
                        </view>
                        <view class="person-info">
                            <global-icon icon="idcard"></global-icon>
                            <text class="txt">值班人员：{{ details.dmName || '-' }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <card-details type="company" title="公司值班信息" showfooter :idcard="details.dmName" :calendar="details.optionSaveTime">
                <card-details-item label="公司值班经理" :value="details.dmName || '-'"></card-details-item>
                <card-details-item
                    label="公司值班经理意见"
                    :value="details.opinionType != -1 ? useGetDictByValue('opinionType', details.opinionType) : '-'"
                ></card-details-item>
                <card-details-item label="公司值班经理意见描述" :value="details.dmMsg || '-'"></card-details-item>
            </card-details>
            <card-details type="quality" title="品质中心信息" showfooter :idcard="details.qmName" :calendar="details.qualitySaveTime">
                <card-details-item label="品质中心经理" :value="details.qmName || '-'"></card-details-item>
                <card-details-item
                    label="品质中心经理意见"
                    :value="details.qualityOpinionType != -1 ? useGetDictByValue('opinionType', details.qualityOpinionType) : '-'"
                ></card-details-item>
                <card-details-item label="品质中心经理意见描述" :value="details.qmMsg || '-'"></card-details-item>
            </card-details>
            <card-details type="appeal" title="申诉状态" titleIcon="email">
                <view class="appeal-status">{{ useGetDictByValue('appealInfo', details.appealInfo) }}</view>
                <image
                    class="appeal-image"
                    :src="item.fileUrl"
                    v-for="(item, index) in getFileList"
                    :key="item.id"
                    @tap="previewImage(index)"
                    mode="widthFix"
                />
            </card-details>
        </template>
    </global-page>
</template>

<script setup>
import CardDetails from './components/card-details.vue'
import CardDetailsItem from './components/card-details-item.vue'
import { timeStampFormat } from '@/utils/tool'
import { useGetDictByValue } from '@/components/global-picker/useDict'
import useAppraisalRecordStore from '@/store/appraisal-record'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'

const query = defineProps(['id'])
const appraisalRecordStore = useAppraisalRecordStore()
const { details, getFileList } = storeToRefs(appraisalRecordStore)
onLoad(() => {
    appraisalRecordStore.setState('id', query.id)
    appraisalRecordStore.getRqmDetails()
})
//跳转
const handleEdit = () => {
    uni.navigateTo({
        url: 'edit'
    })
}
//图片预览
const previewImage = (index) => {
    uni.previewImage({
        current: index,
        urls: getFileList.value.map((item) => item.fileUrl)
    })
}
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
