<template>
    <view class="app-customer" :style="[styleA]">
        <view v-if="selectStyle === '1'" class="customer-box dir-top-nowrap cross-center" :style="[styleB]">
            <view :style="{color: titleColor}" class="title">{{ title }}</view>
            <image :src="we.qrcode" @click="clickImg(we.qrcode)" show-menu-by-longpress></image>
            <view v-if="we.name" :style="{color: wechatColor}" class="wechat-name">微信号：{{ we.name }}</view>
            <view class="customer-btn dir-left-nowrap">
                <view :style="[styleD]" @click="handlerSave">{{ saveTitle }}</view>
                <view :style="[styleC]" @click="handleCopy">{{ copyTitle }}</view>
            </view>
        </view>
        <view v-if="selectStyle === '2'" class="customer-box-two dir-left-nowrap cross-center" :style="[styleB]">
            <image :src="twoIcon" class="box-grow-0"></image>
            <view class="dir-top-nowrap">
                <view :style="{color: titleColor}" class="title">{{ title }}</view>
                <view :style="{color: subTitleColor}" class="sub-title">{{ subTitle }}</view>
            </view>
            <view class="customer-two-btn box-grow-0">
                <view :style="[styleE]" @click="handleCopy">{{ twoTitle }}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'app-customer',
    props: {
        bg: String,
        bgPadding: [String, Number],

        title: String,
        titleColor: String,
        wechat: Array,
        wechatColor: String,

        cBorderBottom: [String, Number],
        cBorderTop: [String, Number],
        cPaddingTop: [String, Number],
        cPaddingLr: [String, Number],
        cPaddingBottom: [String, Number],
        copyBg: String,
        copyBorder: String,
        copyColor: String,
        copyRadius: [String, Number],
        copyTitle: String,
        saveBg: String,
        saveBorder: String,
        saveColor: String,
        saveRadius: [String, Number],
        saveTitle: String,

        twoIcon: String,
        twoBg: String,
        twoBorder: String,
        twoColor: String,
        twoRadius: [String, Number],
        twoTitle: String,
        subTitle: String,
        subTitleColor: String,
        selectStyle: [Number, String],
    },
    computed: {
        we() {
            let {wechat} = this;
            if (wechat && wechat.length) {
                return wechat[parseInt(Math.random() * wechat.length)];
            } else {
                return {
                    qrcode: '',
                    name: '',
                }
            }
        },
        styleA() {
            let {
                bgPadding,
                cPaddingTop,
                cPaddingLr,
                cPaddingBottom,
            } = this;
            return {
                backgroundColor: bgPadding,
                padding: `${cPaddingTop}rpx ${cPaddingLr}rpx ${cPaddingBottom}rpx`
            }
        },
        styleB() {
            let {
                bg,
                cBorderTop,
                cBorderBottom
            } = this;
            return {
                backgroundColor: `${bg}`,
                borderTopLeftRadius: `${cBorderTop}rpx`,
                borderTopRightRadius: `${cBorderTop}rpx`,
                borderBottomLeftRadius: `${cBorderBottom}rpx`,
                borderBottomRightRadius: `${cBorderBottom}rpx`,
            }
        },
        styleC() {
            let {
                copyBg,
                copyBorder,
                copyColor,
                copyRadius,
            } = this;
            return {
                backgroundColor: copyBg,
                borderColor: copyBorder ? copyBorder : copyBg,
                color: copyColor,
                borderRadius: copyRadius + 'rpx',
            }
        },
        styleD() {
            let {
                saveBg,
                saveBorder,
                saveColor,
                saveRadius,
            } = this;
            return {
                backgroundColor: saveBg,
                borderColor: saveBorder ? saveBorder: saveBg,
                color: saveColor,
                borderRadius: saveRadius + 'rpx',
            }
        },
        styleE() {
            let {
                twoBg,
                twoBorder,
                twoColor,
                twoRadius,
            } = this;
            return {
                backgroundColor: twoBg,
                borderColor: twoBorder ? twoBorder : twoBg,
                color: twoColor,
                borderRadius: twoRadius + 'rpx',
            }
        },
    },
    methods: {
        clickImg(src) {
            // #ifdef MP
            uni.previewImage({
                current: 0,
                urls: [src]
            });
            // #endif
            // #ifdef H5
            this.$jwx.previewImage({
                current: src,
                urls: [src]
            });
            // #endif
        },
        handleCopy() {
            this.$utils.uniCopy({
                data: this.we.name,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none',
                    })
                }
            });
        },
        handlerSave() {
            this.$utils.batchSave(this.we.qrcode).then(() => {
                uni.showToast({title: '保存成功'});
            });
        }
    }
}
</script>

<style scoped lang="scss">
.app-customer {
    .customer-box-two {
        padding: #{20rpx};

        .customer-two-btn {
            margin-left: auto;
            > view {
                border-width: #{1upx};
                border-style: solid;
                font-size: #{28upx};
                background: #ff4544;
                color:#FFFFFF;
                padding: #{14upx} #{28upx};
            }
        }
        image {
            height: #{100rpx};
            width: #{100rpx};
            display: block;
            margin-right: #{20rpx};
        }

        .title {
            font-size: #{28rpx};
            color: #353535;
        }

        .sub-title {
            margin-top: #{10rpx};
            font-size: #{24rpx};
            color: #999999;
        }
    }

    .customer-box {
        .title {
            font-size: #{34upx};
            color: #353535;
            margin: #{32upx} 0;
        }

        image {
            display: block;
            height: #{360rpx};
            width: #{360rpx};
            margin-bottom: #{32rpx};
        }

        .wechat-name {
            font-size: #{28upx};
            color: #999999;
            margin-bottom: #{24upx};
        }
    }

    .customer-btn {
        margin-bottom: #{32upx};
        z-index: 1;
        > view {
            border-width: #{1upx};
            border-style: solid;
            font-size: #{24upx};
            margin: 0 #{20upx};
            padding: #{20upx} #{22upx};
        }
    }
}
</style>