<template>
    <view class="card">
        <view class="card-title">
            <view class="left">
                <global-icon :icon="type == 'appeal' ? 'email' : 'message'" color="#1D2129"></global-icon>
                <text>{{ getIitle }}</text>
            </view>
            <view class="right" v-if="edit">
                <global-button type="text">添加</global-button>
            </view>
        </view>
        <view class="card-content">
            <template v-if="type == 'appeal'">
                <view class="card-content-row">
                    <view>申诉跟踪</view>
                </view>
                <view class="card-content-image">
                    <image src="/static/image/panel/page-bg.png" />
                </view>
            </template>
            <template v-else>
                <view class="card-content-row" v-for="item in getData" :key="item.label">
                    <view>{{ item.label }}</view>
                    <text>-</text>
                </view>
                <view class="card-content-desc">
                    <view class="label">
                        <global-icon icon="idcard" color="#1D2129"></global-icon>
                        <text>-</text>
                    </view>
                    <view class="label">
                        <global-icon icon="calendar" color="#1D2129"></global-icon>
                        <text>-</text>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    // company,quality,appeal
    type: {
        type: String,
        default: 'company'
    },
    titleIcon: {
        type: String,
        default: 'message'
    },
    edit: {
        type: Boolean,
        default: false
    }
})
const getData = computed(() => {
    if (ps.type == 'company') {
        return [
            {
                label: '公司值班经理',
                value: ''
            },
            {
                label: '公司值班经理意见',
                value: ''
            },
            {
                label: '公司值班经理意见描述',
                value: ''
            }
        ]
    }
    if (ps.type == 'quality') {
        return [
            {
                label: '品质中心经理',
                value: ''
            },
            {
                label: '品质中心经理意见',
                value: ''
            },
            {
                label: '品质中心经理意见描述',
                value: ''
            }
        ]
    }
    return {}
})
const getIitle = computed(() => {
    if (ps.type == 'company') {
        return '公司值班信息'
    }
    if (ps.type == 'quality') {
        return '品质中心信息'
    }
    if (ps.type == 'appeal') {
        return '申诉状态'
    }
    return ''
})
</script>
<style lang="scss" scoped>
.card {
    margin-top: 16rpx;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    color: #1d2129;
    background: #ffffff;
    &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #f4f4f4;
        padding-bottom: 16rpx;
        .left {
            display: flex;
            align-items: center;
            text {
                margin-left: 8rpx;
            }
        }
    }
    &-content {
        padding-top: 16rpx;
        &-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16rpx;
        }
        &-desc,
        .label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .label {
                margin-left: 16rpx;
                text {
                    margin-left: 16rpx;
                }
            }
        }
        &-image {
            image {
                width: 100%;
            }
        }
    }
}
</style>
