<template>
    <global-page :showNavbar="false">
        <template #top>
            <global-navbar :title="details?.appraiseeshowData || '暂无标题~'">
                <template #left>
                    <uni-icons type="left" size="16" @tap="goBack"></uni-icons>
                </template>
                <template #right>
                    <global-button type="text" @tap="goTo">编辑</global-button>
                </template>
            </global-navbar>
        </template>
        <view class="content" v-if="details">
            <view class="details">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="txt">{{ details.status == 1 ? 'OPEN' : 'ClOSE' }}</view>
                        <global-score
                            v-if="details.score != -1"
                            :type="details.eventType == 1 ? 'success' : 'warning'"
                            :count="details.score"
                        ></global-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="left">
                            <global-icon icon="mind-mapping"></global-icon>
                            <text>来源编号:{{ details.acOwn || '暂无~' }}</text>
                        </view>
                        <view class="right">
                            {{ details.department != '-1' ? details.department : '' }}
                            <text>{{ 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>{{ 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>当班人员：{{ details.onDutyUser || '-' }}</text>
                        </view>
                        <view class="person-info">
                            <global-icon icon="idcard"></global-icon>
                            <text>值班人员：{{ 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">
                <template v-if="details.appealInfo != -1">
                    <view class="appeal-status">{{ useGetDictByValue('appealInfo', details.appealInfo) }}</view>
                    <image :src="item.fileUrl" v-for="(item, index) in getFileList" :key="item.id" @tap="previewImage(index)" />
                </template>
                <global-empty v-else></global-empty>
            </card-details>
        </view>
    </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 goTo = () => {
    uni.navigateTo({
        url: 'edit'
    })
}
//返回
const goBack = () => {
    uni.navigateBack()
    uni.$emit('appraisalRecordReload')
}
//图片预览
const previewImage = (index) => {
    uni.previewImage({
        current: index,
        urls: getFileList.value.map((item) => item.fileUrl)
    })
}
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
