<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="专场名称"
                                       :rightText="form.name"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="专场开始时间"
                                       :rightText="form.specialStartTime"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="专场结束时间"
                                       :rightText="form.specialEndTime"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="截止报名时间"
                                       :rightText="form.signEndDate"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="是否允许中途报名"
                                       :rightText="form.allowSign?'是':'否'"></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 list" v-if="list.length>0">
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="商品编码"
                                       :rightText="item.productCode"></uni-list-item>
                    </view>
                    <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.sellerName"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="库存数量"
                                       :rightText="item.availableCount"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="厂家"
                                       :rightText="item.manufacturer"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="起拍价格"
                                       :rightText="item.startPrice"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="起拍时间"
                                       :rightText="item.startDate"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="结束时间"
                                       :rightText="item.endDate"></uni-list-item>
                    </view>
                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="保证金金额"
                                       :rightText="item.amount"></uni-list-item>
                    </view>

                    <view class="list-item-bg">
                        <uni-list-item style="width: 100%;" :border="false" title="状态"
                                       :rightText="item.statusName"></uni-list-item>
                    </view>

                </uni-list>
                <no-data :show="list.length==0"></no-data>
            </uni-collapse-item>
        </uni-collapse>

    </view>
</template>

<script>
import {
    auctionSpecialGet, auditBuyerMarginInfo,
    centralizedPurchasingRegister,
    centralizedPurchasingRegisterAudit,
    depositConfirmSubmit,
    downloadFileById, findAuctionMarginInfo, pageAudit
} from "@/config/api";
import serverConfig from "@/config/server_config";
export default {
    data() {
        return {

            loading: false,
            type:'',
            form: {
                imageId: ""
            },
            imageUrl:'',
            list: [],
            showTurndown: false,
            formTurndown: {},
            id: '',

        };
    },
    onLoad(options) {
        this.type = options.type
        this.id = options.id
        this.init(options.id)
    },
    methods: {
        init(id) {
            auctionSpecialGet(
                id
            ).then(res => {
                this.form = res.content;

                this.$nextTick(()=>{
                    this.getImage(this.form.imageFileIds)
                })
            })
            pageAudit(
                {
                    specialId: id,
                    page: 1,
                    rows: 15
                }
            ).then(res => {
                this.list = res.content.content;
            })

        },
        transStatus(item){
            console.log(item)
            switch (item) {
                case 'auditPass':
                    return '审核通过'
                    break;
                case 'notPass':
                    return '审核驳回'
                    break;
                case 'confirm':
                    return '审核通过'
                    break;
                default:
                    return '待审核'
                    break;
            }
        },
        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,item) {
            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,item)
                                break;
                            default:
                                break
                        }
                    }
                }
            });
        },
        auditStatus(flag,item) {
            auditBuyerMarginInfo({
                id: item.id,
                auditStatus: flag ? 'confirm' : 'notPass',
                refuseDesc: ''
            }).then(res => {
                uni.showToast({
                    title: `${flag ? '审核': '驳回'}成功！`,
                    icon: 'none'
                });
                this.list =[]
                this.init(this.id)
            })
        },
    }


}
</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 {

    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>
