<template>
    <div v-if="isloading">
      <div
      :style="{ height: contentHeight + 'px' }"
      style="ovoerflow: hidden; overflow-y: auto;background: #F7F7F7;">
        <view class="ValuationCenter-box">
            <view class="Valuation_item">
                <view class="class-title">
                    <view>*</view>
                    <text>分类</text>
                </view>
                <view class="class-name">
                    <text>首饰</text>
                    <u-icon class="name-icon" name="arrow" color="#B2B2B2" size="40" ></u-icon>
                </view>
            </view>
            <view style="width: 100%;height: 1px;background: #E5E5E5;"/>
            <view class="Valuation_item">
                <view class="class-title">
                    <view>*</view>
                    <text>品牌</text>
                </view>
                <view class="class-name">
                    <text>尚美</text>
                    <u-icon class="name-icon" name="arrow" color="#B2B2B2" size="40" ></u-icon>
                </view>
            </view>
        </view>
        <view class="cutOff"/>
        <view class="ValuationCenter-box">
            <view class="Valuation_item">
                <view class="class-title">
                    <view>*</view>
                    <text>上传照片</text>
                </view>
            </view>
            <view class="hint">请按示例上传清晰的照片</view>
            <view class="ValuationCenter-image">
                <view class="upload-comm-image">
                    <view class="comm-image">
                        <u-upload
                        class="uploadImg"
                        :action="action" 
                        :file-list="fileList" 
                        max-count="1" :custom-btn="true" 
                        @on-success="uploadSuccessHandlerA">
                            <view slot="addBtn" class="slot-btn">
                                <u-icon name="photograph" size="40" color="#ffffff"></u-icon>
                            </view>
                        </u-upload>   
                    </view>
                    <text class="image-name">正面</text>
                </view>
                <view class="upload-comm-image">
                    <view class="comm-image">
                        <u-upload
                        class="uploadImg"
                        :action="action" 
                        :file-list="fileList" 
                        max-count="1" :custom-btn="true" 
                        @on-success="uploadSuccessHandlerB">
                            <view slot="addBtn" class="slot-btn">
                                <u-icon name="photograph" size="40" color="#ffffff"></u-icon>
                            </view>
                        </u-upload>   
                    </view>
                    <text class="image-name">刻印</text>
                </view>
                <view class="upload-comm-image">
                    <view class="comm-image">
                        <u-upload
                        class="uploadImg"
                        :action="action" 
                        :file-list="fileList" 
                        max-count="1" :custom-btn="true" 
                        @on-success="uploadSuccessHandlerC">
                            <view slot="addBtn" class="slot-btn">
                                <u-icon name="photograph" size="40" color="#ffffff"></u-icon>
                            </view>
                        </u-upload>   
                    </view>
                    <text class="image-name">细节</text>
                </view>
            </view>
        </view>
        <view class="cutOff"/>
        <view class="ValuationCenter-box">
            <view class="Valuation_item">
                <view class="class-title">
                    <view></view>
                    <text>更多照片</text>
                    <view class="optional">(选填)</view>
                </view>
            </view>
            <view class="hint">上传发票、证书、配件、肩带、及磨损部位、瑕疵等 (选填)</view>
            <view class="ValuationCenter-image">
                <view class="upload-comm-image">
                    <view class="comm-image">
                        <u-upload
                        class="uploadImg"
                        :action="action" 
                        :file-list="fileList" 
                        max-count="9" :custom-btn="true" 
                        @on-success="uploadSuccessHandlerD">
                            <view slot="addBtn" class="slot-btn">
                                <u-icon name="photograph" size="40" color="#ffffff"></u-icon>
                            </view>
                        </u-upload>   
                    </view>
                </view>
            </view>
        </view>
        <view class="cutOff"/>
        <view class="ValuationCenter-box">
            <view class="Valuation_item">
                <view class="class-title">
                    <view></view>
                    <text>备注</text>
                    <view class="optional">(选填)</view>
                </view>
            </view>
            <view class="hint">可简单描述一下物品的购买时间、新旧程度、购买地点等</view>
            <view class="ValuationCenter-textarea">
                <view class="textarea-box">
                <textarea placeholder="描述" v-model="msg.Content" maxlength="-1"></textarea>
                </view>
            </view>
        </view>
        <view class="hintTwo">
            带<text>*</text>的内容为必填内容
        </view>
        <view class="footer-buttom">
            <view>
                提交
            </view>
        </view>
      </div>
    </div>
</template>
<script>
    export default {
      data() {
        return {
          isloading: true,
          pageTitle: "我要估价",
          navHeight: 0,
          contentHeight: 0,
          fileList:[],
          action:'',
          msg:{
            Content:''
          }
        };
      },
      components: {
        // search,
        // tabbars,
        // uniIndexedList
      },
      onLoad(option) {
        this.navHeight = this.$navHeight - 2;
        let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId
        ? uni.getStorageSync("mall_UserInfo").MallBaseId
        : 1;
        this.action =
        this.host2 + "/api/File/UploadTencent?MallBaseId=" + MallBaseId;
      },
      mounted() {
        let currentPages = getCurrentPages();
        // let c = this.$uiConfig.is_bang ? 80 : 52;
        let c = this.$uiConfig.is_bang ? 0 : 0;
        this.contentHeight = this.$utils.calcContentHeight(c);
        let u = "/" + currentPages[currentPages.length - 1].route;
        let pages = uni.getStorageSync("basedata")
          ? uni.getStorageSync("basedata").bar_title
          : [];
        pages.forEach((x) => {
          if (x.value == u) {
            this.pageTitle = x.new_name ? x.new_name : x.name;
          }
        });
        uni.setNavigationBarTitle({
          title: this.pageTitle,
        });
      },
      methods: {
        uploadSuccessHandlerA(data, index, lists) {
            let r = JSON.parse(data);
            // this.data.Photo = r.data;
        },
        uploadSuccessHandlerB(data, index, lists) {
            let r = JSON.parse(data);
        },
        uploadSuccessHandlerC(data, index, lists) {
            let r = JSON.parse(data);
        },
        uploadSuccessHandlerD(data, index, lists) {
            let r = JSON.parse(data);
        },
      },
    };
    </script>
    <style scoped>
        .cutOff{
            width: 100%;height: 15px;background: #F7F7F7;
        }
        .ValuationCenter-box{
            background: #ffffff;
            padding: 0 20px;
        }
        .Valuation_item{
            width: 100%;
            padding: 30rpx 0;
            color: #303133;
            font-size: 28rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
	    }
        .class-title{
            display: flex;
            align-items: center;
        }
        .class-title view{
            color: #E12913;
            font-size: 30rpx;
            font-weight: 600;
            margin-right: 15rpx;
        }
        .class-title text{
            color: black;
            font-size: 30rpx;
        }
        .class-name{
            display: flex;
            align-items: center;
        }
        .class-name text{
            color: #D0A86C;
            margin-right: 20rpx;
            font-size: 30rpx;
            font-weight: 600;
        }
        .name-icon{
            position: relative;
            top: 2rpx;
        }
        .hint{
            font-size: 28rpx;
            color: #666666;
            padding: 0 20rpx;
        }
        .ValuationCenter-image{
            display: flex;
            justify-content: space-between;
            padding: 50rpx 20rpx;
        }
        .upload-comm-image{
            width: 200rpx;
        }
        .image-name{
            display: block;
            width: 100%;
            padding: 30rpx 0 0 0;
            font-size: 30rpx;
            text-align: center;
            color: #333333;
        }
        .comm-image{
            width: 100%;
            height: 200rpx; 
        }
        .uploadImg{
            width: 100%;
            height: 100%;
            background: rgba(48,49,60,.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .class-title view.optional{
            color: #666666;
            font-size: 28rpx;
            font-weight: 500;
            margin-left: 10rpx;
        }
        .ValuationCenter-textarea{
            padding: 15rpx 20rpx;
            margin-top: 30rpx;
        }
        .textarea-box{
            background: #F6F6F6;
            padding: 20rpx;
            margin-bottom: 30rpx;
        }
        .ValuationCenter-textarea textarea{
            
            width: 100%;
            height: 200rpx;
        }
        .hintTwo{
            background: #F6F6F6;
            text-align: center;
            padding: 20rpx 0;
            color: #D0A86C;
            font-size: 28rpx;
        }
        .hintTwo text{
            display: inline-block;
            color: #E12913;
            margin-left: 10rpx;
            margin-right: 10rpx;
        }
        .footer-buttom{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0 20rpx;
        }
        .footer-buttom view{
            width: 100%;
            height: 80rpx;
            line-height: 70rpx;
            border-radius: 10rpx;
            background: #30313C;
            color: #ffffff;
            margin-bottom: 10rpx;
            text-align: center;
            font-size: 32rpx;
        }
    </style>