<template>
    <view class="diy-form-agreement main-center cross-center" :style="cRadioStyle">
        <view @click="toggleCheck" class="checked">
            <image :style="{'background-color': is_check ? data.active_color : data.inactive_color}" src="https://shop.9026.com/web/statics/image/mall/static/icon/icon-checkbox-checked.png"></image>
        </view>
        <view @click="toggleCheck" class="agreement-title" :style="{'color': data.text_color}">{{is_check ? '勾选即表示您已阅读并同意' : '请完整阅读'}}<text @click.stop="showAgreement">《{{data.title}}》</text></view>
        <i :style="{'color': data.text_color}" class="iconfont icon-right">&#xe7eb;</i>
        <view v-if="is_show" @click="is_show = false" class="agreement-dialog main-center cross-center" :style="{'padding': '86rpx '+ data.inputPadding +'rpx'}">
            <view class="agreement-dialog-item" :style="cDialogStyle" @click.stop="">
                <view class="agreement-dialog-title main-center cross-center" :style="{'color':data.title_color}">
                    <view class="rhombus" :style="{'background-color':data.title_color}"></view>
                    <view>{{data.title}}</view>
                    <view class="rhombus" :style="{'background-color':data.title_color}"></view>
                </view>
                <scroll-view scroll-y @scroll="showScroll($event)" class="agreement-dialog-content" :style="{'color': data.content_color, 'height': data.height - 372 + 'rpx'}"><text>{{data.content}}</text>
                    <view class="agreement-dialog-content-hidden"><text>{{data.content}}</text></view>
                </scroll-view>
                <view class="agreement-dialog-button main-center cross-center">
                    <view @click.stop="close(0)" :style="{'background-color': is_over ? data.over_color : data.open_color}">不同意</view>
                    <view @click.stop="close(1)" :style="{'background-color': is_over ? data.over_color : data.open_color}">同意</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'diy-form-agreement',
        data() {
            return {
                is_check: false,
                is_show: false,
                is_over: false,
                scrollHeight: 476,
                data: {
                    is_required: '0',
                    is_read: '1',
                    title: '服务协议',
                    content: '',
                    height: 848,
                    inputPadding: 24,
                    radius: 10,
                    title_color: '#FF4544',
                    content_color: '#545B60',
                    text_color: '#545B60',
                    active_color: '#FF4544',
                    inactive_color: '#BEC3C7',
                    over_color: '#FF4544',
                    open_color: '#BEC3C7',
                    fill_color: '#F3F3F3',
                    bg_color: '#FFFFFF'
                }
            }
        },
        props: {
            index: [Number, String],
            value: {
                type: Object
            }
        },
        computed: {
            cDialogStyle() {
                let style = `background-color:${this.data.fill_color};color:${this.data.content_color};border-radius:${this.data.radius}px;height:${this.data.height}rpx;`;
                return style;
            },
            cRadioStyle() {
                let style = `background-color:${this.data.bg_color};width:100%;padding: 0 24rpx;`;
                return style;
            },
            cTitleStyle() {
                let style = `color:${this.data.title_color};`;
                return style;
            },
        },
        created() {
            this.data = this.value
            let value = {
                is_check: this.is_check,
                title: this.data.title,
                content: this.data.content,
                title_color: this.data.title_color,
            }
            this.$emit('updateValue', {
                index: this.index,
                value: value,
            });
        },
        methods: {
            close(e) {
                if(!this.is_over) return;
                this.is_check = e ? true : false;
                this.is_show = false;
                let value = {
                    is_check: this.is_check,
                    title: this.data.title,
                    content: this.data.content,
                    title_color: this.data.title_color,
                }
                this.$emit('updateValue', {
                    index: this.index,
                    value: value,
                });
            },
            toggleCheck() {
                if(this.is_check) {
                    this.is_check = false;
                }else {
                    this.showAgreement();  
                }
                let value = {
                    is_check: this.is_check,
                    title: this.data.title,
                    content: this.data.content,
                    title_color: this.data.title_color,
                }
                this.$emit('updateValue', {
                    index: this.index,
                    value: value,
                });
            },
            showAgreement() {
                let that = this;
                that.is_show = !that.is_show;
                that.is_over = that.data.is_read == '1' ? false : true;
                // #ifdef MP-WEIXIN || H5
                let time = 0;
                // #endif
                // #ifndef MP-WEIXIN || H5
                let time = 500;
                // #endif
                setTimeout(() => {
                    // #ifndef MP-WEIXIN || MP-TOUTIAO
                    let query = uni.createSelectorQuery();
                    // #endif
                    // #ifdef MP-WEIXIN || MP-TOUTIAO
                    let query = uni.createSelectorQuery().in(that);
                    // #endif
                    query.selectAll('.agreement-dialog-content-hidden').fields({
                        size: true,
                    }, function (res) {
                        that.scrollHeight = res[0].height - (that.data.height/2 - 136);
                        if(that.scrollHeight < 0) {
                            that.is_over = true;
                        }
                    }).exec();
                },time)

            },
            showScroll(e) {
                if(!(e.detail.scrollTop < this.scrollHeight)) {
                    this.is_over = true;
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .diy-form-agreement {
        height: 62rpx;
        line-height: 62rpx;
        font-size: 24rpx;
        position: relative;
        .checked {
            width: 46rpx;
            height: 62rpx;
            padding: 18rpx 10rpx;
            image {
                width: 26rpx;
                height: 26rpx;
                border-radius: 50%;
                display: block;
            }
        }
        .agreement-title {
            height: 62rpx;
            line-height: 62rpx;
            text {
                display: inline-block;
                height: 62rpx;
                line-height: 62rpx;
            }
        }
        .icon-right {
            font-size: 22rpx;
            margin-left: -5rpx;
        }
        .agreement-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            z-index: 1234;
            background-color: rgba(36, 36, 36, .35);
            .agreement-dialog-item {
                padding: 50rpx;
                padding-bottom: 46rpx;
                width: 100%;
                .agreement-dialog-title {
                    font-size: 40rpx;
                    font-weight: bold;
                    padding-bottom: 56rpx;
                    .rhombus{
                        width: 8rpx;
                        height: 8rpx;
                        transform: rotateZ(45deg)skew(0,0);
                        margin: 0 12rpx;
                    }
                }
                .agreement-dialog-content {
                    overflow: auto;
                    word-break: break-all;
                    position: relative;
                    font-size: 28rpx;
                    line-height: normal;
                    text-align: left;
                }
                .agreement-dialog-content-hidden {
                    word-break: break-all;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }
                .agreement-dialog-button {
                    height: 80rpx;
                    margin-top: 70rpx;
                    view {
                        margin: 0 30rpx;
                        height: 80rpx;
                        line-height: 80rpx;
                        width: 220rpx;
                        border-radius: 40rpx;
                        color: #fff;
                        font-size: 32rpx;
                        text-align: center;
                    }
                }
            }
        }
    }
    //#ifdef MP-BAIDU || MP-TOUTIAO
    @font-face {
      font-family: 'iconfont';  /* Project id 1819490 */
      src: url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff2?t=1628318185237') format('woff2'),
           url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff?t=1628318185237') format('woff'),
           url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.ttf?t=1628318185237') format('truetype');
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:12px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
    //#endif
</style>
