<template>
    <!-- 基础 cell -->
    <div class="cell" :class="item.type">
        <div class="label" v-if="item.type !== 'info' && !(item.type === 'address' && custom)">
            <i class="required" v-if="item.verify && item.verify.required">*</i>
            <span class="title">{{ item.nth }}{{ custom ? title : item.title }}</span>
        </div>
        <p class="info">{{ item.info }}</p>
        <!-- textarea -->
        <el-input
            type="textarea"
            resize="none"
            :rows="3"
            :placeholder="custom ? placeholder : item.placeholder"
            :value="custom ? value : item.value"
            readonly
            v-if="item.type === 'textarea' || (item.type === 'address' && custom)"
        ></el-input>
        <!-- radioText -->
        <div class="option" v-else-if="item.type === 'radioText'">
            <template v-if="item.option">
                <div v-for="(n, i) in item.option.list" :key="i">
                    <el-radio v-model="item.option.checked" :label="n.value">{{ n.name }}</el-radio>
                    <div class="info describe">{{ n.describe }}</div>
                </div>
            </template>
        </div>
        <!-- checkboxText -->
        <div class="option" v-else-if="item.type === 'checkboxText'">
            <template v-if="item.option">
                <el-checkbox-group v-model="item.option.checked" v-if="item.option">
                    <div v-for="(n, i) in item.option.list" :key="i">
                        <el-checkbox :label="n.value">{{ n.name }}</el-checkbox>
                        <div class="info describe">{{ n.describe }}</div>
                    </div>
                </el-checkbox-group>
            </template>
        </div>
        <!-- radioImg -->
        <option-img :item="item" radio v-else-if="item.type === 'radioImg'"></option-img>
        <!-- checkboxImg -->
        <option-img :item="item" checkbox v-else-if="item.type === 'checkboxImg'"></option-img>
        <!-- radioMatrix -->
        <radio-matrix :item="item" v-else-if="item.type === 'radioMatrix'"></radio-matrix>
        <!-- rate -->
        <div class="score" v-else-if="item.type === 'rate'">
            <template v-if="item.rate">
                <img
                    :src="getFileHost(`/Assets/rate/${item.rate.icon}0.png`, 1)"
                    v-for="(n, i) in item.rate.score"
                    :key="i"
                >
            </template>
        </div>
        <!-- sort -->
        <sort-topic :item="item" v-else-if="item.type === 'sort'"></sort-topic>
        <!-- img -->
        <i class="add el-icon-plus" v-else-if="item.type === 'img'"></i>
        <!-- info -->
        <p class="info type" v-else-if="item.type === 'info'">{{ item.placeholder || '说明文字' }}</p>
        <!-- subform -->
        <slot v-else-if="item.type === 'subform'"></slot>
        <!-- input -->
        <el-input
            :class="{ pr: isArrow }"
            :placeholder="custom ? placeholder : item.placeholder"
            :value="custom ? value : valueFormat(item.value)"
            readonly
            v-else
        ></el-input>
        <!-- arrow -->
        <i class="arrow el-icon-arrow-down" v-if="isArrow"></i>
    </div>
</template>

<script>
import { getFileHost } from '@/assets/utils/host.js'
export default {
    components: {
        OptionImg: () => import('./components/OptionImg'),
        RadioMatrix: () => import('./components/RadioMatrix'),
        SortTopic: () => import('./components/SortTopic')
    },
    props: {
        item: { type: Object, default: () => ({}) },
        custom: { type: Boolean, default: false }, // 是否使用自定义的 title value placeholder
        title: { type: String, default: '' },
        value: { type: String, default: '' },
        placeholder: { type: String, default: '' }
    },
    data () {
        return {
            getFileHost,
            isArrow: /^(radio|checkbox|date|dateRange|file|contacts|gradeClass)$/.test(this.item.type)
        }
    },
    methods: {
        valueFormat (value) {
            return Array.isArray(value) ? value.join('，') : value
        }
    }
}
</script>

<style lang="less" scoped>
.el-input.pr /deep/ input {
    padding-right: 50px;
}
.info {
    color: #909399;
    margin-bottom: 5px;
    word-break: break-all;
    &.type {
        min-height: 20px;
        margin: -10px 0;
        white-space: pre-wrap;
    }
    &.describe {
        font-size: 14px;
        padding-left: 24px;
        white-space: pre-wrap;
    }
}
/deep/ .option {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
}
.score img {
    height: 32px;
}
.el-select {
    display: block;
}
.arrow {
    position: absolute;
    right: 15px;
    bottom: 10px;
}
.add {
    width: 64px;
    line-height: 64px;
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    text-align: center;
}
</style>
