<template>
    <view  class="container" >
        <uni-collapse ref="collapse">
            <!-- 保证金审核 -->
            <uni-collapse-item style="margin-top: 0;" name="message" :open="true">
                <template v-slot:title>
                    <view class="title-box">
                        <text class="order-title">保证金审核</text>
                        <text class="flag"></text>
                    </view>
                </template>

                <uni-list class="custom-uni-list">
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" :title="$t('index.buyer-name')"
                                       :rightText="marginInfo.buyerName"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" :title="$t('index.buyer-code')"
                                       :rightText="marginInfo.buyerCode"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" :title="$t('index.seller-name')"
                                       :rightText="marginInfo.orderedQuantity"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="本次保证金缴纳金额"
                                       :rightText="marginInfo.marginAmount"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="保证金缴纳时间"
                                       :rightText="marginInfo.payTime"></uni-list-item>
                    </view>
                </uni-list>

                <view class="image-list ">
                    <text class="enclosure-text">{{$t('index.annex')}}：</text>
                    <view class="image">
                        <view class="enclosure" v-for="(img, index) in marginInfo.fileResponseList"
                              :key="img.id" @click="lookDeposit(img, index)">
                            {{$t('index.annex')}}{{ index + 1 }}-预览
                        </view>
                    </view>
                </view>
            </uni-collapse-item>
            <!-- 集采计划信息 -->
            <uni-collapse-item name="message" :open="true">
                <template v-slot:title>
                    <view class="title-box">
                        <text class="order-title">集采计划信息</text>
                        <text class="flag"></text>
                    </view>
                </template>
                <uni-list class="custom-uni-list">
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="集采标题"
                                       :rightText="form.title"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="集采结束时间"
                                       :rightText="form.deadline"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="集采计划说明"
                                       :rightText="form.description"></uni-list-item>
                    </view>

                </uni-list>
                <view class="image-list " style="flex-flow: column">
                    <text class="enclosure-text">封面图片：</text>
                    <view class="image" style="width: 100%">
                       <image :src="imageUrl"></image>
                    </view>
                </view>
            </uni-collapse-item>
            <!-- 集采商品清单 -->
            <uni-collapse-item name="message" :open="true">
                <template v-slot:title>
                    <view class="title-box">
                        <text class="order-title">集采商品清单</text>
                        <text class="flag"></text>
                    </view>
                </template>
                <uni-list class="custom-uni-list" v-for="(item, index) in productList">
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="商品名称"
                                       :rightText="item.productName"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="工厂名称"
                                       :rightText="item.supplierName"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="税率"
                                       :rightText="item.productVo.taxRate+'%'"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="参考价"
                                       :rightText="item.referencePrice"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="集采总量"
                                       :rightText="item.totalQuantity"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="最少起订数量"
                                       :rightText="item.minOrderQuantity"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="定金比例(%)"
                                       :rightText="item.marginAmount"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="截止时间"
                                       :rightText="item.deadline"></uni-list-item>
                    </view>
                </uni-list>
            </uni-collapse-item>
        </uni-collapse>
        <view class="orderType-box">
            <block v-if="type === 'waitAudit'">
                <view class="btn-btm">
                    <view style="flex: 1;">
                        <button class="button red"
                                @click="confirmOrder('确认驳回此保证金吗？', 'auditStatus', false)">{{ $t('index.reject') }}</button>
                    </view>
                    <view style="flex: 1;margin-left:30rpx;">
                        <button style="background: #086DCA;" @click="confirmOrder('确认审核通过吗？', 'auditStatus', true)"
                                class="button blue">{{ $t('index.sure') }}</button>
                    </view>
                </view>
            </block>

        </view>
    </view>
</template>

<script>
import {
    centralizedPurchasingRegister,
    centralizedPurchasingRegisterAudit,
    depositConfirmSubmit,
    downloadFileById
} from "@/config/api";
import serverConfig from "@/config/server_config";
export default {
    data() {
        return {
            marginInfo: {},
            loading: false,
            type:'',
            form: {
                imageId: ""
            },
            imageUrl:'',
            productList: [],
            showTurndown: false,
            formTurndown: {},
            id: '',

        };
    },
    onLoad(options) {
        this.type = options.type
        this.id = options.id
        this.init(options.id)
    },
    methods: {
        init(id) {
            centralizedPurchasingRegister(
                {
                    id: id,
                  }
            ).then(res => {
                this.form = res.content.schedule;
                this.productList.push(res.content.product);
                this.marginInfo = res.content.register;

               this.$nextTick(()=>{
                   this.getImage(this.form.imageId)
               })
            })
        },
        getImage(id){
            downloadFileById(id).then(res => {
                this.imageUrl = serverConfig.baseURL +"/"+ res.content[0].fullFilePath
                console.log(this.form.imageUrl,res)
            })
        },
        lookDeposit(data, index) {
            console.log(data)
            uni.previewImage({
                current: index,
                urls: [data],
            })
        },
        confirmOrder(content, type, data) {
            let _this = this;
            uni.showModal({
                title: this.$t('index.msg-notice-tip'),
                content,
                success: function(res) {
                    if (res.confirm) {
                        switch (type) {
                            case 'auditStatus':
                                _this.auditStatus(data)
                                break;
                            default:
                                break
                        }
                    }
                }
            });
        },
        auditStatus(flag) {
            centralizedPurchasingRegisterAudit({
                id: this.id,
                marginStatus: flag ? 'auditPass' : 'notPass',
                content: ''
            }).then(res => {
                uni.showToast({
                    title: `${flag ? '审核': '驳回'}成功！`,
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.navigateBack({
                        delta: 1,

                    });
                }, 1500)
            })
        },
    }


}
</script>

<style lang="scss">
.container {
    /deep/ .uni-collapse {
        background-color: #F5F5F6;
    }

    /deep/ .uni-collapse-item {
        margin-top: 10px;
        background-color: #fff;
    }
}

.title-box {
    height: 110rpx;
    padding-left: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .order-title {
        font-size: 34rpx;
        color: #ADB0B5;
        line-height: 1;
        position: relative;
    }

    .flag {
        font-size: 12px;
        color: #99A0AF;
        vertical-align: middle;
    }

    .message {
        font-size: 15px;
        color: #222;
    }

    .price-box {
        line-height: 1;
        vertical-align: middle;

        .unit {
            color: #B60001;
            font-size: 12px;
        }

        .price {
            font-size: 40rpx;
            color: #B60001;
            margin-right: 20rpx;
        }
    }
}
.image-list {
    margin-top: 20rpx;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    padding: 12px 15px;

    .enclosure-text {
        flex: none;
        font-size: 14px;
        color: #99A0AF;
    }

    .image {
        // display: flex;
        // flex-wrap: wrap;

        .enclosure {
            font-size: 14px;
            color: #636872;
            // margin-right: 50rpx;
            word-break: break-all;

            &+.enclosure {
                margin-top: 20rpx;
            }
        }
    }
}
.orderType-box {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8;
    background: #fff;
    padding: 0 30rpx 30rpx;

    .button {
        height: 92rpx;
        line-height: 92rpx;
        color: #fff;
        font-size: 14px;
        border-radius: 0;
    }
}
.btn-btm {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 30rpx;
}

.button {
    &.red {
        background-color: #DE0000;
    }

    &.orange {
        background-color: #F36E03;
    }

    &.blue {
        background-color: #B60001;
    }

    &.yellow {
        background-color: #dfc803;
    }

    &.green {
        background-color: #03d97d;
    }

    &::after {
        border-radius: 0;
        border: 0;
    }
}
</style>
