<template>
    <c-popup
        :show="show"
        :max-height="'95%'"
        :row-tile="true"
        visibility-only-mask
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view
            class="card-popup"
            :style="{
                backgroundImage: 'url(' + (relation[select] && relation[select].bg || '') + ')',
                backgroundSize: '100% 100%'
            }"
        >
            <view class="card-popup-head">
                <view class="card-popup-topline"></view>
            </view>
            <view class="card-popup-cont">
                <view
                    class="letter"
                    :style="{
                        backgroundImage: 'url(' + (relation[select] && relation[select].letter || '') + ')',
                        backgroundSize: '100% 100%'
                    }"
                >
                    <view class="receiver-wrap c-span6">
                        <text>{{ receiverPrefix }}</text>
                        <input
                            type="text"
                            :value="receiver"
                            name="receiver"
                            :placeholder="receiverPlaceholder"
                            :maxlength="6"
                            cursor-spacing="20"
                            placeholder-class="receiver-input-placeholder c-line-clamp1"
                            autocomplete="off"
                            class="receiver-input c-gap-left-small"
                            @input="receiverInput($event)"
                        />
                    </view>
                    <textarea
                        class="textarea-cont c-gap-top-large"
                        :maxlength="100"
                        cursor="-1"
                        placeholder-class="text-cont-input"
                        selection-start="-1"
                        selection-end="-1"
                        :value="relation[select] && relation[select].text || ''"
                        :show-confirm-bar="false"
                        :adjust-position="true"
                        @input="textareaInput($event)"
                    />
                    <view class="word-num c-font-small">
                        <text class="input-word-num">{{ wordNum }}</text>
                        <text clas="input-word-all">/100</text>
                    </view>
                    <view class="giver-wrap c-span6">
                        <text>{{ giverPrefix }}</text>
                        <input
                            type="text"
                            :value="giver"
                            :placeholder="giverPlaceHolder"
                            name="giver"
                            :maxlength="6"
                            cursor-spacing="20"
                            placeholder-class="giver-input-placeholder c-line-clamp1"
                            autocomplete="off"
                            class="giver-input c-font-normal c-gap-left-small"
                            @input="giverInput($event)"
                        />
                    </view>
                </view>
                <view v-if="relation && relation.length" class="list-wrap">
                    <view
                        v-for="(item, index) in relation"
                        :key="'relation' + index"
                        :class="['list-item', 'list-item-'+index]"
                        :style="{
                            backgroundImage: 'url(' + item.img + ')',
                            border: select === index ? '2px solid #fff013' : '2px solid #ffffff00',
                            borderRadius: select === index ? '8px' : '16px'
                        }"
                        @tap.stop="changeType(item, index)"
                    >
                        <view
                            class="list-item-text "
                        >
                            <text class="c-font-small list-item-word">{{ item.title }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="introduction" class="c-font-small c-gap-top-large gift-use">
                    <view>
                        <text class="line">————</text>
                        <text class="c-gap-inner-left-middle c-gap-inner-right-middle c-font-wb">{{ introduction.title }}</text>
                        <text class="line">————</text>
                    </view>
                    <view v-if="introduction.list && introduction.list.length">
                        <view
                            v-for="(item, index) in introduction.list"
                            :key="'introduction' + index"
                        >{{ item }}</view>
                    </view>
                </view>
                <view class="btn-wrap swan-security-padding-bottom">
                    <view class="btn save" @tap="handlePic('save')">保存</view>
                    <view class="btn make" @tap="handlePic('make')">生成礼品卡</view>
                </view>
            </view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 制作卡片
 * @author zhanngqian51@baidu.com
*/

/* global Page swan  getApp */
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Button from '@baidu/med-ui/components/Button/Button';

import {request} from '../../utils/request';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as Conf from '../../utils/conf';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        'c-popup': Popup,
    },
    props: {
        show: {
            'type': Boolean,
            'default': false
        },
        data: {
            'type': String,
            'default': ''
        },
        orderId: {
            'type': String,
            'default': ''
        }
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0,
            btns: [{
                text: '保存',
                type: 'primary',
                function: 'save'
            }, {
                text: '生成礼品卡',
                function: 'make'
            }],
            receiver: '',
            giver: '',
            receiverPlaceholder: '',
            giverPlaceHolder: '',
            text: '',
            type: '',
            select: 0,
            wordNum: 0,
            relation: [],
            buttonLoading: false,
            giverPrefix: '',
            receiverPrefix: '',
            introduction: null
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenHeight = systemInfoSync.screenHeight;
        if (process.env.MARS_ENV === 'h5') {
            this.maxHeight = (this.screenHeight - 74) * 0.894 - 56;
        } else {
            this.maxHeight = this.screenHeight * 0.894 - 56;
        }
    },
    watch: {
        show(newVal) {
            this.show = newVal;
            if (newVal) {
                this.init();
            }
        },
        data(newVal, oldVal) {
            // if (newVal.relation && newVal.relation.length !== oldVal.relation.length) {
            //     this.data = newVal;
            // }
        }
    },
    methods: {
        init() {
            request({
                url: Conf.operateApihost + this.data,
                method: 'GET',
                isFirstScreen: false,
                isNeedLogin: true
            }).then(res => {
                let data = res.data;
                this.giverPrefix = data.giver_prefix || '';
                this.receiverPrefix = data.receiver_prefix || '';
                this.relation = data.relation || [];
                this.introduction = data.introduction || {};
                this.receiver = data.relation && data.relation[this.select].receiver || '';
                this.giver = data.relation && data.relation[this.select].giver || '';
                this.receiverPlaceholder = data.relation && data.relation[this.select].receiver || '';
                this.giverPlaceHolder = data.relation && data.relation[this.select].giver || '';
                this.text = data.relation && data.relation[this.select].text || '';
                this.type = data.relation && data.relation[this.select].type || '';
                this.wordNum = data.relation && data.relation[this.select].text.length || 0;
            }).catch(err => {
                console.log(err);
            });
        },
        handlePopupClose() {
            this.$emit('onClose');
        },
        receiverInput(e) {
            const value = e.detail.value;
            this.receiver = value;
        },
        giverInput(e) {
            const value = e.detail.value;
            this.giver = value;
        },
        changeType(item, index) {
            this.receiver = item.receiver;
            this.giver = item.giver;
            this.select = index;
            this.text = item.text;
            this.type = item.type;
        },
        // textarea 输入
        textareaInput(e) {
            const value = e.detail.value;
            this.wordNum = value.length > 100 ? 100 : value.length;
            this.text = value;
        },
        handlePic(type) {
            if (type === 'make') {
                if (!this.text) {
                    this.$api.showToast({
                        icon: 'none',
                        title: '内容不能为空~'
                    });
                    return;
                }
                if (!this.receiver) {
                    this.$api.showToast({
                        icon: 'none',
                        title: '请输入接收人~'
                    });
                    return;
                }
                if (!this.giver) {
                    this.$api.showToast({
                        icon: 'none',
                        title: '请输入赠送人~'
                    });
                    return;
                }
            }
            this.buttonLoading = true;
            if (type === 'make') {
                this.$api.showToast({
                    icon: 'loading',
                    title: '正在制作卡片',
                    duration: 3000
                });
            }
            request({
                url: Conf.operateApihost + '/api/hpv/cardsave',
                method: 'GET',
                isFirstScreen: false,
                isNeedLogin: true,
                data: {
                    receiver: this.receiver,
                    giver: this.giver,
                    text: this.text,
                    type: this.type,
                    orderId: this.orderId,
                    image: type
                }
            }).then(res => {
                this.buttonLoading = false;
                const {cardUrl, orderId} = res && res.data;
                if (type === 'save') {
                    this.$api.showToast({
                        icon: 'none',
                        title: '已为您成功保存～'
                    });
                    this.$emit('reloadPage');
                } else {
                    this.$emit('lookCard', cardUrl, orderId);
                }
                this.handlePopupClose();
            }).catch(err => {
                this.$api.showToast({
                    icon: 'none',
                    title: '网络竟然崩溃了，请重试'
                });
                this.buttonLoading = false;
                console.log(err);
            });
        }
    }
};
</script>
<style lang="less" scoped>
.card-popup {
    display: flex;
    flex-direction: column;
    height: 100%;
    &-head {
        width: calc(100% - 34px);
        height: 28px;
        padding: 0 17px;
        z-index: 922;
        .close-wrapper {
            width: 24px;
            height: 24px;
            float: right;
        }
    }
    &-topline {
        position: relative;
        width: 100%;
        height: 4px;
        padding-top: 5px;
        &::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 33px;
            height: 4px;
            background: #EEE;
            border-radius: 3px;
        }
    }
    &-cont {
        padding: 0 6px;
        .letter {
            // width: 404px;
            height: 249px;
            box-sizing: border-box;
            margin-top: 137px;
            padding: 23px 34px 33px 35px;
        }
        .receiver-wrap, .giver-wrap {
            display: flex;
            align-items: center;
            color: #D8736E;
            font-family: NotoSansHans-Medium;
            vertical-align: bottom;
            .receiver-input, .giver-input {
                position: relative;
                bottom: 2px;
                width: 60px;
                height: 22px;
                line-height: 22px;
                font-size: 14px;
                font-family: NotoSansHans-Medium;
                color: #D8736E;
                background: transparent;
                border-bottom: 1px solid transparent;
                border-image: linear-gradient(to bottom, transparent 50%, #d8736e 50%) 0 0 100%/1px 0;
                &:focus {
                    outline-offset: none;
                    outline: none;
                }
            }
            &::-webkit-input-placeholder {
                color: #D8736E;
            }
        }
        .giver-wrap {
            position: relative;
            top: -20px;
            float: right;
        }
        .textarea-cont {
            margin-top: 2px;
            width: 100%;
            height: 140px;
            color: #D8736E;
            resize:none;
            border: none;
            background: transparent;
            outline-offset: none;
            outline:none;
            padding-left: 4px;
            padding-top: 2px;
            font: 14px/25px NotoSansHans-Medium;
            &::-webkit-input-placeholder {
                color: #D8736E;
            }
            &:focus {
                outline-offset: none;
                outline: none;
            }
        }
        .word-num {
            position: relative;
            bottom: 37px;
            font-family: NotoSansHans-Regular;
            color: #D8736E;
            text-align: right;
            .input-word-num {
                opacity: 0.8;
            }
            .input-word-all {
                opacity: 0.5;
            }
        }
        .list-wrap {
            padding: 0 8px;
            display: flex;
        }
        .list-item {
            box-sizing: border-box;
            width: calc(20vw - 7px);
            height: 0;
            padding-bottom: calc(20vw - 17px);
            margin-left: 9px;
            // border-radius: 8px;
            position: relative;
            display: flex;
            justify-content: center;
            background-size: contain;
            background-repeat: no-repeat;
            &:first-child {
                margin-left: 0;
            }
            &-text {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 100%;
                text-align: center;
                border-radius: 8px;
                background-image: 'linear-gradient(180deg,#ffffff00,#EF5757BC)';
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }
            &-word {
                font-family: PingFangSC-Medium;
                color: #fff;
            }
        }
        .gift-use {
            color: #fff;
            text-align: center;
            .line {
                opacity: 0.3;
            }
        }
        .btn-wrap {
            display: flex;
            padding-left: 17px;
            padding-right: 17px;
            margin-top: 17px;
            margin-bottom: 9px;
        }
    }
}
.receiver-input-placeholder, .giver-input-placeholder  {
    color: #D8736E;
}
.text-cont-input {
    font-family: NotoSansHans-Medium;
    color: #D8736E;
    letter-spacing: 0;
}
.btn {
    width: calc(50% - 6px);
    border-radius: 24px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.save {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.make {
    background: #fff;
    border: 1px solid #fff;
    color: #FF6161;
    margin-left: 8px;
}
</style>

<style lang="less" target="h5" scoped>
.receiver-input, .giver-input {
    bottom: 0 !important;
}
</style>
