<template>
    <app-layout>
        <view class="form">
            <view class="reply" v-if="detail.reply">
                <view class="name">商家回复</view>
                <view class="reply-content"><text>{{detail.reply}}</text></view>
            </view>
            <view class="content" style="padding-left:0;padding-right:0;padding-top: 1px" v-if="detail && detail.attr_list">
                <view class="content-item r dir-left-wrap cross-center form-g" v-if="detail.eval_calc_list && detail.eval_calc_list.length">
                    <view>总计</view>
                    <view class="f-icon amount"></view>
                    <template v-for="(i,index) of detail.eval_calc_list">
                        <template v-if="i.type === 'operation'">
                            <view v-if="i.label === '+'" class="f-icon add"></view>
                            <view v-else-if="i.label === '-'" class="f-icon sub"></view>
                            <view v-else-if="i.label === '*'" class="f-icon multiply"></view>
                            <view v-else-if="i.label === '/'" class="f-icon except"></view>
                            <view v-else-if="i.label === '('" class="f-icon bracket-left"></view>
                            <view v-else-if="i.label === ')'" class="f-icon bracket-right"></view>
                        </template>
                        <view v-else>{{ i.label }}</view>
                    </template>
                </view>
                <view class="content-item r dir-left-nowrap cross-center main-between" style="padding-bottom: 30rpx;border-bottom: 1px solid #E5E5E5">
                    <view>总计</view>
                    <view style="font-size: 30rpx;color:#ff4544">￥{{detail.total_price}}</view>
                </view>
                <view class="content-item dir-left-nowrap cross-center main-between">
                    <view class="dir-left-nowrap cross-center main-between r" style="width: 100%;">
                        <view class="dir-left-nowrap cross-center box-grow-1" @click="changeHide">
                            <view class="label box-grow-0" style="width: auto">商品价格</view>
                            <view :style="{transform: showInfo?  'rotate(180deg)' : 'rotate(0deg)'}"
                                class="showItemInfo dir-left-nowrap cross-center main-center">
                                <view></view>
                                <view></view>
                            </view>
                        </view>
                        <view style="margin-left:auto;color: #ff4544">￥{{calcPrice(detail.goods_price,detail.number)}}</view>
                    </view>
                </view>
                <view v-if="showInfo" style="border-radius: 10rpx;margin:20rpx 10rpx 0 10rpx;background: #F7F7F7">
                    <view style="border-bottom: 1px solid rgba(0,0,0,0.1);padding:10rpx 0">
                        <view class="dir-left-nowrap cross-center main-between" v-for="(attr,index) in detail.attr_list" :key="index"
                              style="padding: 10rpx 24rpx;">
                            <view class="label">{{ attr.attr_group_name }}</view>
                            <view>{{ attr.attr_name }}</view>
                        </view>
                    </view>
                    <view style="border-bottom: 1px solid rgba(0,0,0,0.1);padding:10rpx 0" v-if="detail.select_date && detail.select_date.length">
                        <view class="dir-left-nowrap cross-center main-between" style="padding: 10rpx 24rpx;">
                            <view class="label">预约时间</view>
                            <view></view>
                        </view>
                        <view class="dir-left-nowrap cross-center main-between" v-for="(time,label) in detail.select_date" :key="label"
                              style="padding: 10rpx 24rpx;">
                            <view class="label">{{ Object.keys(time).shift() }}</view>
                            <view>￥{{ Object.values(time).shift() }}</view>
                        </view>
                    </view>
                    <view class="dir-left-nowrap cropss-center main-between" style="padding: 20rpx 24rpx;">
                        <view class="label">数量</view>
                        <view>{{detail.number}}</view>
                    </view>
                </view>
                <view class="dir-left-nowrap cross-center main-between content-item r" v-if="i.type !== 'operation'"
                      v-for="(i,index) in detail.eval_calc_list" :key="index">
                    <view class="label">{{ i.label }}</view>
                    <view style="font-size: 30rpx">{{ i.value }}</view>
                </view>
            </view>
            <view class="content" v-if="!empty">
                <view class="name" v-if="options.id">{{detail.form_list_name}}</view>
                <view class="content-item" :class="item.key == 'text' ? 'dir-top-nowrap' : 'main-between cross-top'" v-for="(item,index) in detail.form_data" :key="index" v-show="!(item.key == 'button' && item.value.is_pay == 0)">
                    <view class="label" :class="{'full' : item.key == 'text'}">{{item.key == 'button' ? '支付信息' : item.label}}</view>
                    <view v-if="item.key == 'agreement'" class="dir-left-nowrap">
                        <view>{{item.value && item.value.is_check ? '已同意' : '未同意'}}</view>
                        <view @click="checkAgreement(item)" class="look">查看</view>
                    </view>
                    <view v-else-if="item.key == 'uvideo'">
                        <view class="dir-right-wrap" style="max-width: 300rpx">
                            <video @click="playVideo(video)" :show-center-play-btn="!hiddenBtn" v-for="(video,idx) in item.value" :key="idx"
                                style="margin: 2px 0;width: 80rpx;height: 80rpx;margin-left: 20rpx"
                                initial-time="0.01"
                                :src="video"
                            ></video>
                        </view>
                        <view v-if="!item.value">未上传</view>
                    </view>
                    <view v-else-if="item.key == 'uimage' || item.key == 'img_upload'">
                        <view class="dir-right-nowrap">
                            <view @click="previewImage(img,item.value)" v-for="(img,idx) in item.value" :key="idx" style="margin-left: 20rpx">
                                <app-image :img-src="img" width="80rpx" height="80rpx" borderRadius="5rpx"></app-image>
                            </view>
                        </view>
                        <view v-if="!item.value">未上传</view>
                    </view>
                    <view v-else-if="item.key == 'calendar'">
                        <view v-if="item.value && item.value.before && item.value.after">{{item.value.before}}~{{item.value.after}}</view>
                        <view v-else-if="item.value && item.value.fulldate">{{item.value.fulldate}}</view>
                        <view v-else>{{item.value ? item.value : '未填写'}}</view>
                    </view>
                    <view v-else-if="item.key == 'menu'">
                        <view v-if="item.value && item.value.type == 'date' && item.value.begin_at && item.value.end_at">{{item.value.begin_at}}~{{item.value.end_at}}</view>
                        <view v-else-if="item.value && item.value.type == 'date' && item.value.alone_at">{{item.value.alone_at}}</view>
                        <view v-else>{{item.value && item.value.text ? item.value.text : '未填写'}}</view>
                    </view>
                    <view v-else-if="item.key == 'switch'">{{item.value ? '开启' : '关闭'}}</view>
                    <view v-else-if="item.key == 'input'">{{item.value &&item.value.text ? item.value.text : '未填写'}}</view>
                    <view v-else-if="item.key === 'phone'">
                        {{item.value ? item.value.mobile : '未验证'}}
                    </view>
                    <view v-else-if="item.key == 'button' && item.value && item.value.is_pay == 1">
                        <view v-if="item.value && item.value.is_pay == 1">
                            <view v-if="item.value.title">感谢您购买{{item.value.title}}</view>
                        </view>
                        <view>
                            已成功支付{{item.value && detail.pay_price}}元
                        </view>
                    </view>
                    <view v-else-if="item.key === 'text'" style="padding-top: 10rpx">
                        {{item.value ? item.value : '未填写'}}
                    </view>
                    <view v-else-if="item.key === 'form-button'"></view>
                    <view v-else>{{item.value ? item.value : '未填写'}}</view>
                </view>
            </view>
            <view class="content" v-if="detail && detail.extra_attributes && detail.extra_attributes.new_send_data">
                <view class="name">赠送信息</view>
                <view v-if="detail.extra_attributes.new_send_data.send_balance > 0" class="main-between cross-top content-item">
                    <view class="label">赠送金额</view>
                    <view>{{detail.extra_attributes.new_send_data.send_balance}}元</view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_integral > 0" class="main-between cross-top content-item">
                    <view class="label">赠送积分</view>
                    <view>{{detail.extra_attributes.new_send_data.send_integral}}积分</view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_member_name" class="main-between cross-top content-item">
                    <view class="label">赠送会员</view>
                    <view>{{detail.extra_attributes.new_send_data.send_member_name}}</view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_coupon_list.length > 0" class="main-between cross-top content-item">
                    <view class="label">赠送优惠券</view>
                    <view>
                        <view v-for="(coupon,idx) in detail.extra_attributes.new_send_data.send_coupon_list" :key="idx">
                            {{coupon.send_num}}张{{coupon.name}}</view>
                    </view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_card_list.length > 0" class="main-between cross-top content-item">
                    <view class="label">赠送卡券</view>
                    <view>
                        <view v-for="(card,idx) in detail.extra_attributes.new_send_data.send_card_list" :key="idx">
                            {{card.num}}张{{card.name}}
                        </view>
                    </view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_scratch > 0" class="main-between cross-top content-item">
                    <view class="label">赠送抽奖机会</view>
                    <view>刮刮卡抽奖机会{{detail.extra_attributes.new_send_data.send_scratch}}次</view>
                </view>
                <view v-if="detail.extra_attributes.new_send_data.send_pond > 0" class="main-between cross-top content-item">
                    <view class="label">赠送抽奖机会</view>
                    <view>九宫格抽奖机会{{detail.extra_attributes.new_send_data.send_pond}}次</view>
                </view>
            </view>
            <view class='no-tip' v-if="empty">
                <image class="icon-image" src='./../image/no-log.png'></image>
                <view>没有任何表单信息哦~</view>
            </view>
        </view>
        <view v-if="showVideo" @click="showVideo = false" class="dialog dir-top-nowrap main-center cross-center">
            <video autoplay @click.stop="" style="width: 100%;" :src="video_url"></video>
        </view>
        <view v-if="showAgreement" class="dialog dir-top-nowrap main-center cross-center">
            <view class="dialog-content">
                <view class="dialog-title main-center cross-center" :style="{'color':agreement.title_color}">
                    <view class="rhombus" :style="{'background-color':agreement.title_color}"></view>
                    <view>{{agreement.title}}</view>
                    <view class="rhombus" :style="{'background-color':agreement.title_color}"></view>
                </view>
                <view class="dialog-agreement"><text>{{agreement.content}}</text></view>
            </view>
            <image @click="showAgreement = false;" class="close-icon" src="https://shop.9026.com/web/statics/image/mall/static/icon/icon-popup-close.png"></image>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                showInfo: false,
                hiddenBtn: true,
                showVideo: false,
                video_url: '',
                buttonItem: {},
                showAgreement: false,
                empty: false,
                detail: {},
                agreement: {
                    title: '服务协议',
                    content: '',
                    title_color: '#FF4544',
                },
                list: [],
                options: 0,
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info
            })
        },
        methods: {
            calcPrice(price, num){
                price = price * num;
                price = price.toFixed(3).toLocaleString();
                price = price.substr(0, price.length - 1);
                return price;
            },
            // 图片预览
            previewImage(item,list) {
                uni.previewImage({
                    current: item,
                    urls: list
                })
            },
            playVideo(video) {
                this.showVideo = true;
                this.video_url = video
            },
            changeHide(){
                this.showInfo = !this.showInfo;
            },
            checkAgreement(item) {
                this.showAgreement = true;
                this.agreement.title = item.value.title;
                this.agreement.content = item.value.content;
                this.agreement.title_color = item.value.title_color;
            },
            getList(id) {
                this.$request({
                    url: this.$api.diy.form_detail,
                    data: {
                        form_id: id
                    }
                }).then(response=>{
                    this.$hideLoading();
                    if(response.code === 0) {
                        this.detail = response.data.detail;
                        if(this.detail.form_data.length == 1 && this.detail.form_data[0].key == 'button' && this.detail.form_data[0].value.is_pay == 0 && !this.detail.extra_attributes.new_send_data) {
                            this.empty = true;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },

            getFormGoods(order_detail_id) {
                this.$request({
                    url: this.$api.order.customization,
                    data: {
                        order_detail_id: order_detail_id
                    }
                }).then(response=>{
                    this.$hideLoading();
                    if(response.code === 0) {
                        this.detail = response.data;
                        uni.setNavigationBarTitle({title: this.detail.form_list_name});
                        if(this.detail.form_data.length == 1 && this.detail.form_data[0].key == 'button' && this.detail.form_data[0].value.is_pay == 0 && !this.detail.extra_attributes.new_send_data) {
                            this.empty = true;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
        },

        onLoad(options) { this.$commonLoad.onload();
            let that = this;
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            this.options = options;
            if(options.order_detail_id){
                that.getFormGoods(options.order_detail_id);
            }
            if(options.id){
                uni.setNavigationBarTitle({title: '表单详情'});
                that.getList(options.id);
            }
        }
    }
</script>

<style scoped lang="scss">
.showItemInfo {
    margin-right: 30#{rpx};
    margin-left: 18#{rpx};
    margin-top: 4#{rpx};

    > view {
        height: 14#{rpx};
        width: 1px;
        background: #c0c4cc;
    }

    > view:first-child {
        transform: rotate(-45deg);
    }

    > view:last-child {
        margin-left: 8#{rpx};
        transform: rotate(45deg);
    }
}
    .form-g {
        margin-top: 40rpx;
        > view {
            margin: 0 2#{rpx};
        }
        .f-icon {
            height: 28#{rpx};
            width: 28#{rpx};
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
        .add {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAAAvMTEvMTIwMDMvLzErKy8sLCwvMDIvMDIvMDMuMDIvMDIvLzIvLzEtLTMwMDAwMTMUaDETAAAAEHRSTlMAcqewfCAX+O7j1s63nC0QDNtG+AAAADxJREFUKM9jGMKAkYMXtySLANNQkGSEAB4BbiiLH0mSXQANsCJJMjGDAZcAJzMEsA1mf1IsycbHyjDAAABiNQLwXoKcnQAAAABJRU5ErkJggg==");
        }

        .sub {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAGFBMVEUAAAAwMDMvMTEvMDIrKzIrKyswMDAwMTN9nrx8AAAAB3RSTlMAsHL4JBgQL4YSywAAAB1JREFUGNNjGB5ACQrUIFzzcggogXAFoUCUYUgCAJJ5BcA3BkSmAAAAAElFTkSuQmCC");
        }

        .multiply {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAWlBMVEUAAAAvMDIrLTEkJCQvMDIvMDIwMDIuLjAoKCgvMTMuLjEsLCwvMDIvMTIvMDIvMTIvLy8vMDIwMTItLzAtLTEtLS0uLi4AAAAAAAAvLzEwMDIvLzEvLy8wMTMsdcBXAAAAHXRSTlMA5iUI2PPfHwz3RhfKwr23PPztWTYtHAQBl39iG81EjX0AAAB+SURBVCjP3dDrDoMgDIbhjirodHMe5g763f9tCoGESOUC9P3V5EnTpHTFPmKKjW0TJu7+iVU3FE0w1CrR9+CVn6jvRKm63WAyZVVFk9qj9CabemDMWPUAUKw5Kxd712Ts5e5qI611RofK3mxGQ897/P6GiShox5Ro/OfMdMY2nD0GXCVusKcAAAAASUVORK5CYII=");
        }

        .except {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAFVBMVEUAAAAsLDMvMTMvLzMvMTIuLi4wMTPpeLFXAAAABnRSTlMAI/qZkxy9s6JvAAAAI0lEQVQY02OgMzByQOGmKaDLkgXY0qAgABuXURAKqOZI+gIAfcgKarluLIYAAAAASUVORK5CYII=");
        }

        .bracket-left {
            width: 14rpx;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAMAAABmiH5zAAAAV1BMVEUAAAA0NDQwMDAkJCQ1NTU0NDQ0NDQ1NTU0NDQ0NDQ0NDQ0NDQzMzM1NTUzMzMzMzMyMjI0NDQ0NDQ0NDQzMzMzMzMzMzMyMjI1NTUyMjI0NDQuLi41NTX2gDOoAAAAHHRSTlMA3xgH9vDOwrmxqKOaloI+NSDSkotzZExELicLiv43CQAAAF5JREFUGNOtzUkOgCAQRFERZRBEcB76/ud0W2WMK2v38tPp6ofVriAnpTE2K8bUaqSKqEM25CI1Mij6ah1RBaL0X2wj0XhiZ4izaOQuGXk1iY9H4iCZbP0jn+RSvewGCCgC+xojy6UAAAAASUVORK5CYII=");
        }

        .bracket-right {
            width: 14rpx;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAMAAABmiH5zAAAAV1BMVEUAAAA0NDQwMDAkJCQ1NTU0NDQ0NDQ1NTU0NDQ0NDQ0NDQ0NDQzMzM1NTUzMzMzMzMyMjI0NDQ0NDQ0NDQzMzMzMzMzMzMyMjI1NTUyMjI0NDQuLi41NTX2gDOoAAAAHHRSTlMA3xgH9vDOwrmxqKOaloI+NSDSkotzZExELicLiv43CQAAAFxJREFUGNOlzjkSgCAMQFFxQQREcV9y/3Namt/YmO7Nz0xS/J3sSs3KzMhbzdwk5GjAXU7NUlZkE0DXgsGAvXwxNmBnQevxtCyaoxyaqb41J8/dAWfw8cVYZOidBweIAvtW5vcrAAAAAElFTkSuQmCC");
        }
        .amount {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAFVBMVEUAAAAsLDIvMTMvMTEvMDIAAAAwMTNwdTKGAAAABnRSTlMAI41y+AR7iS8xAAAAKUlEQVQY02MYNIAlDQoEsHEZBaEggGKLmJSgAMJlg1kE4TIbQwHDoAEATQgNRStNEv8AAAAASUVORK5CYII=");
        }
    }
    .no-tip {
        position: fixed;
        top: #{400rpx};
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #666666;
        font-size: #{24rpx};
        width: #{240rpx};
        text-align: center;
        image {
            height: #{240rpx};
            width: #{240rpx};
            margin-bottom: #{20rpx};
        }
    }
    .form {
        width: 702rpx;
        margin: 30rpx auto;
        .name {
            margin-left: 3rpx;
            font-size: 30rpx;
            color: #353535;
        }
        .reply {
            width: 100%;
            margin-bottom: 20rpx;
            border-radius: 15rpx;
            padding: 25rpx 26rpx;
            background-color: #fff;
            font-size: 30rpx;
            color: #353535;
            .reply-content {
                width: 650rpx;
                margin-top: 16rpx;
                background-color: #F1F5F7;
                padding: 26rpx 30rpx;
                word-break: break-all;
                font-size: 28rpx;
                border-radius: 5rpx;
            }
        }
        .content {
            width: 100%;
            margin-bottom: 20rpx;
            border-radius: 15rpx;
            padding: 25rpx 30rpx;
            background-color: #fff;
            font-size: 28rpx;
            .r {
                padding-left: 30rpx;
                padding-right: 30rpx;
            }
            .label {
                color: #999999;
                width: 40%;
                flex-shrink: 0;
            }
            .content-item {
                margin-top: 30rpx;
                .label {
                    color: #999999;
                    width: 40%;
                    flex-shrink: 0;
                    &.full {
                        width: 100%;
                    }
                }
                .look {
                    width: 80rpx;
                    height: 40rpx;
                    text-align: center;
                    line-height: 40rpx;
                    background-color: rgba(255, 69, 68, 0.1);
                    color: #FF4544;
                    margin-left: 20rpx;
                }
                view {
                    word-break: break-all;
                }
            }
        }
    }
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        z-index: 100;
        .dialog-content {
            width: 600rpx;
            max-height: 627rpx;
            background-color: #fff;
            border-radius: 15rpx;
            padding: 50rpx 44rpx 69rpx;
            font-size: 28rpx;
            color: #545B60;
            .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;
                }
            }
            .dialog-agreement {
                max-height: 412rpx;
                overflow-y: auto;
            }
        }
        .close-icon {
            width: 62rpx;
            height: 62rpx;
            margin-top: 50rpx;
        }
    }
</style>