<template>
    <!-- 基础 cell -->
    <div class="cell" :class="item.type">
        <div class="label" v-if="item.type !== 'info'">
            <i class="required" v-if="item.verify && item.verify.required">*</i>
            <span class="title">{{ custom ? title : item.title }}</span>
            <i class="info el-icon-info" v-if="item.info"></i>
        </div>
        <div class="right" :class="{ value: custom ? value : valueFormat(item.value) }">
            <!-- img -->
            <i class="el-icon-camera" v-if="item.type === 'img'"></i>
            <!-- file -->
            <i class="el-icon-paperclip" v-else-if="item.type === 'file'"></i>
            <!-- subform -->
            <slot v-else-if="item.type === 'subform'"></slot>
            <!-- info -->
            <span class="text item-info" v-else-if="item.type === 'info'">{{ item.placeholder || '说明文字' }}</span>
            <!-- input -->
            <span class="text" v-else>{{ custom ? value || placeholder : valueFormat(item.value) || item.placeholder }}</span>
            <!-- arrow -->
            <i
                class="arrow el-icon-arrow-right"
                v-if="/^(radio|checkbox|date|dateRange|address|contacts)$/.test(item.type)"
            ></i>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: { type: Object, default: () => ({}) },
        custom: { type: Boolean, default: false },
        title: { type: String, default: '' },
        value: { type: String, default: '' },
        placeholder: { type: String, default: '' }
    },
    methods: {
        valueFormat (value) {
            return Array.isArray(value) ? value.join('，') : value
        }
    }
}
</script>

<style lang="less" scoped>
.textarea, .address + .cell, .info {
    .right {
        width: 100%;
        line-height: 20px;
        text-align: left;
        .text {
            word-break: break-all;
            white-space: normal;
        }
    }
}
.textarea .right {
    min-height: 50px;
    padding-bottom: 10px;
}
.address + .cell, .info {
    .right {
        word-break: break-all;
        white-space: normal;
        padding: 10px 0;
    }
}
.img, .file {
    .right {
        width: 100%;
        font-size: 36px;
        padding-bottom: 10px;
    }
}
.item-info {
    white-space: pre-wrap !important;
}
</style>
