<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 章造
 * @Date: 2020-06-24 09:45:09
 * @LastEditors: 李璕
 * @LastEditTime: 2020-10-10 14:43:51
--> 
<template>
    <div class="see-pictext" v-if="isShow">
        <!-- pc -->
        <div
            v-if="!isMobile"
            class="picText"
            :class="componentData.buttonType === 1 ? 'picLeft' : 'picRight'"
        >
            <div class="picture">
                <img class="image" v-show="logoURL" :src="logoURL" alt="" />
                <div
                    v-if="isDesign && !logoURL"
                    style="
                        width: 100%;
                        height: 150px;
                        background: rgba(204, 204, 204, 0.14);
                        border: 1px dashed rgba(0, 0, 0, 0.14);
                    "
                ></div>
            </div>
            <div class="text">
                <p class="title">{{ componentData.title }}</p>
                <p v-if="isDesign && !componentData.title" class="title">
                    标题
                </p>
                <p class="desc">{{ componentData.desc }}</p>
                <p v-if="isDesign && !componentData.desc" class="desc">
                    概要说明...
                </p>
                <div
                    class="linkCont"
                    :key="index"
                    v-for="(item, index) in componentData.group"
                >
                    <span
                        @click="_mixJumpClick(!isMobile, item.linkUrl)"
                        class="lintText"
                        >{{ item.linkText }}</span
                    >
                    <span v-if="isDesign && !item.linkText" class="lintText"
                        >链接文字</span
                    >
                </div>
            </div>
        </div>
        <!-- mobile -->
        <div v-if="isMobile" class="picTextMobile">
            <div
                class="displayCont"
                :class="componentData.buttonType === 1 ? 'picUp' : 'picDown'"
            >
                <div class="picture">
                    <img class="image" v-show="logoURL" :src="logoURL" alt="" />
                    <div
                        v-if="!logoURL"
                        style="
                            width: 100%;
                            height: 300px;
                            background: rgba(204, 204, 204, 0.14);
                            border: 1px dashed rgba(0, 0, 0, 0.14);
                        "
                    ></div>
                </div>
                <div class="text">
                    <p class="title">{{ componentData.title }}</p>
                    <p v-if="!componentData.title" class="title">标题</p>
                    <p class="desc">{{ componentData.desc }}</p>
                    <p v-if="!componentData.desc" class="desc">概要说明...</p>
                </div>
            </div>

            <div class="btnGroup">
                <template v-for="(item, index) in componentData.group">
                    <div :key="index" class="linkCont" v-if="isDesign">
                        <div class="btn">
                            <span
                                @click="_mixJumpClick(!isMobile, item.linkUrl)"
                                class="lintText"
                                >{{ item.linkText }}</span
                            >
                            <span
                                v-if="isDesign && !item.linkText"
                                class="lintText"
                                >链接文字</span
                            >
                        </div>
                    </div>
                    <div
                        :key="index"
                        class="linkCont"
                        v-if="!isDesign && item.linkText"
                    >
                        <div class="btn">
                            <span
                                @click="_mixJumpClick(!isMobile, item.linkUrl)"
                                class="lintText"
                                >{{ item.linkText }}</span
                            >
                        </div>
                    </div>
                </template>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</template>

<script>
import mixins from "./button-mixin.js";
import permissionMixin from "./permission-mixin";
export default {
    name: "see-pictext",
    mixins: [mixins, permissionMixin],
    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {};
    },
    components: {},
    created() {},
    computed: {
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
        logoURL() {
            return this.componentData.logo;
        },
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.picRight {
    flex-direction: row-reverse;
    .picture {
        padding-left: 36px;
    }
}
.picLeft {
    flex-direction: row;
    .picture {
        padding-right: 36px;
    }
}
.picText {
    width: 100%;
    min-height: 140px;
    display: flex;
    .picture {
        // width: 416px;
        width: 52%;

        .image {
            width: 100%;
        }
    }
    .text {
        // width: calc(100% - 416px);
        width: 48%;
        padding: 0;
        .title {
            font-size: 20px;
            line-height: 24px;
            color: #333;
            margin-bottom: 8px;
            // overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
            font-weight: bold;
        }
        .desc {
            line-height: 24px;
            color: #666;
            margin-top: 14px;
            word-break: break-all;
            margin-bottom: 8px;
        }
        .linkCont {
            display: inline-block;
            margin-right: 40px;
            .lintText {
                display: inline-block;
                font-size: 14px;
                color: #007aff;
                cursor: pointer;
                line-height: 28px;
            }
            .linkUrl {
                font-size: 14px;
                color: #007aff;
            }
        }
    }
}

.picTextMobile {
    width: 100%;
    .picUp {
        flex-direction: column;
    }
    .picDown {
        flex-direction: column-reverse !important;
        .text {
            padding-bottom: 10px !important;
        }
        .picture {
            width: 100%;
            margin-bottom: 15px;
        }
    }
    .displayCont {
        display: flex;
        flex-direction: column;
        .picture {
            width: 100%;
            .image {
                width: 100%;
            }
        }
        .text {
            width: 100%;
            padding-top: 15px;
            .title {
                font-size: 16px;
                font-weight: 700;
                line-height: 22px;
                color: #333;
                margin-bottom: 8px;
            }
            .desc {
                margin: 0;
                font-size: 12px;
                color: #333;
                line-height: 22px;
                word-break: break-all;
            }
        }
    }

    .btnGroup {
        // display: flex;
        // justify-content: space-between;
        float: left;
        .linkCont {
            line-height: 17px;
            display: inline-block;
            margin-right: 10px;
            margin-top: 10px;
            .btn {
                padding: 4px 16px;
                border-radius: 2px;
                background: #007aff;

                .lintText {
                    font-size: 12px;
                    color: #ffffff;
                    letter-spacing: 0;
                    text-align: center;
                    cursor: pointer;
                }

                .linkUrl {
                    font-size: 12px;
                    color: #007aff;
                }
            }
        }
    }
}
</style>