<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" @click="goBack(2)">
                    <text>{{data.CategoryName}}</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" @click="goBack(1)">
                    <text>{{data.Name}}</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" v-for="(item,index) in data.BrandImgList">
                    <view class="comm-image" style="height: 200rpx;"
                        :style="{'background':'url('+item.Path+')no-repeat rgba(48,49,60,.1)','background-size': '100% 100%'}">
                        <u-upload
                        class="uploadImg"
                        style="display: flex;align-items: center;width: 200rpx;background: rgba(48,49,60,.4)"
                        
                        :action="action" 
                        :file-list="fileList"
                        :obj="item"
                        max-count="1" :custom-btn="true" 
                        @on-success="uploadSuccessHandler"
                        @on-remove="onRemove">
                            <view slot="addBtn" class="slot-btn">
                                <u-icon name="photograph" size="40" color="#ffffff"></u-icon>
                            </view>
                        </u-upload>   
                    </view>
                    <text class="image-name">{{item.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">
                <!-- 上传发票、证书、配件、肩带、及磨损部位、瑕疵等 (选填) -->
                {{data.RemarkDesc}}
            </view>
            <view class="ValuationCenter-image" style="padding: 50rpx 10rpx;">
                <view class="upload-comm-image">
                    <view class="comm-image">
                        <u-upload
                        style="width: 660rpx;flex-wrap: wrap;"
                        class="uploadImg"
                        :action="action"
                        :file-list="fileList"
                        max-count="10"
                        :custom-btn="true"
                        @on-success="uploadSuccessHandlerB"
                        @on-remove="onRemoveB"
                        >
                        <view slot="addBtn" class="slot-btn" style="width: 200rpx;height: 200rpx;background:rgba(48,49,60,.1);">
                            <u-icon name="photograph" size="40" color="#888" style="width: 200rpx;height: 200rpx;line-height: 200rpx;justify-content: center;"></u-icon>
                        </view>
                        </u-upload>
                        <!-- <u-upload
                        class="uploadImg"
                        :style="{'background':'rgba(48,49,60,.1)'}"
                        :action="action" 
                        :file-list="fileList" 
                        max-count="9" 
                        :custom-btn="true"
                        @on-success="uploadSuccessHandlerB"
                        @on-remove="onRemoveB">
                        <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">
                <!-- 可简单描述一下物品的购买时间、新旧程度、购买地点等 -->
                {{data.MoreDesc}}
            </view>
            <view class="ValuationCenter-textarea">
                <view class="textarea-box">
                <textarea placeholder="描述" v-model="msg.Remark" maxlength="-1"></textarea>
                </view>
            </view>
        </view>
        <view class="hintTwo">
            带<text>*</text>的内容为必填内容
        </view>
        <view class="footer-buttom">
            <view v-if="loading" @click="setMsg">
                提交
            </view>
            <view v-else class="active">
                提交
            </view>
        </view>
      </div>
      <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    </div>
</template>
<script>
    import auth from "@/components/auth/index.vue";
    export default {
      data() {
        return {
            showAuth:false,
            loading: true,
          isloading: true,
          pageTitle: "我要估价",
          navHeight: 0,
          contentHeight: 0,
          fileList:[],
          action:'',
          Obj:{},
          msg:{
            Id:0,
            CategoryId:"",
            BrandId:"",
            GoodsImgList:[],
            MoreImgList:[],
            Remark:""
          },
          BrandId:'',
          data:{},
          tmplIds:[],
          u:{}
        };
      },
      components: {
        auth,
        // 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;
        if(option.BrandId){
            this.msg.BrandId = option.BrandId    
        }
        this.u = uni.getStorageSync("mall_UserInfo");
        if (!this.u) {
            this.u = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.isloading = false
            this.showAuth = true;
        } else {
            this.getDetails()
        }
        
      },
      
    onShow() {
        
    },
      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: {
        reloadUserinfo() {
            this.u = uni.getStorageSync("mall_UserInfo");
            // this.showAuth=false;
            this.getDetails()
        },
        //关闭登录窗口
        gbAuth() {
            uni.navigateBack();
        },
        goBack(type){
            uni.navigateBack({
                delta: type
            });
        },
        // 提交
        setMsg(){
            if(this.msg.GoodsImgList.length==0||this.msg.GoodsImgList.length<this.data.BrandImgList.length){
                uni.showToast({
                    title: "请上传商品图",
                    icon:'none'
                });
                return;
            }
            let that = this
            if(this.loading){
                this.loading = false
                uni.requestSubscribeMessage({
                    tmplIds: this.tmplIds,
                    complete(res) {
                        that.loading = true
                        uni.showLoading({
                            title: '提交中'
                        });
                        that.request2(
                            {
                                url: '/api/AppletAssess/SetGoodsInfo',
                                data: that.msg
                            },
                            res => {
                                if(res.resultCode==1){
                                    uni.hideLoading();
                                    uni.showToast({
                                        title: "提交成功",
                                        icon:'none'
                                    });
                                    uni.navigateTo({
                                        url: '/pages/Luxury/myValuation'
                                    });
                                }
                                uni.hideNavigationBarLoading();
                            }
                        );  
                    }
                })
            }
            
        },
        // 获取详情
        getDetails(){
            uni.showLoading({
                title: '加载中'
            });
            this.request2(
                {
                    url: '/api/AppletAssess/GetBrandInfo',
                    data: {
                        BrandId: this.msg.BrandId
                    }
                },
                res => {
                    this.isloading = false;
                    if(res.resultCode==1){
                        uni.hideLoading();
                        this.data = res.data
                        this.msg.CategoryId = this.data.CategoryId
                        this.tmplIds = this.data.TempIdList
                    }
                    uni.hideNavigationBarLoading();
                }
            );
        },
        onRemove(index) {
            this.msg.GoodsImgList.splice(index, 1);
        },
        uploadSuccessHandler(data, index, lists, obj) {
            let r = JSON.parse(data);
            let datas = {
                Sort:obj.Sort,
                Name:obj.Name,
                Path:r.data
            }
            this.msg.GoodsImgList.push(datas)
        },
        onRemoveB(index) {
            this.msg.MoreImgList.splice(index, 1);
        },
        uploadSuccessHandlerB(data, index, lists) {
            let r = JSON.parse(data);
            let datas = {
                Sort:'',
                Name:'',
                Path:r.data
            }
            this.msg.MoreImgList.push(datas)
            this.msg.MoreImgList.forEach((item,index)=>{
                item.Sort = index+1
            })
        },
      },
    };
    </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;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            padding: 50rpx 20rpx;
        }
        .upload-comm-image{
            /* width: 200rpx; */
            margin-right: 10rpx;
            margin-bottom: 20rpx;
        }
        .image-name{
            display: block;
            width: 100%;
            padding: 30rpx 0 0 0;
            font-size: 30rpx;
            text-align: center;
            color: #333333;
        }
        .comm-image{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .uploadImg{
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
        }
        .u-upload{
            flex-wrap:nowrap !important
        }
        .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: #33343f;
            color: #ffffff;
            margin-bottom: 10rpx;
            text-align: center;
            font-size: 32rpx;
        }
        .footer-buttom view.active{
            background: rgba(48,49,60,.8);
        }
        .uploadImg .slot-btn .u-list-item{
            margin: 0 !important;
            margin-right: 20rpx;
        }
        .slot-btn{
            width: 200rpx;
            height: 200rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>