<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>{{datas.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>{{datas.BrandName}}</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 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-uploadB
                        class="uploadImg"
                        style="display: flex;align-items: center;width: 200rpx;background: rgba(48,49,60,.4)"
                        :action="action" 
                        :file-list="[msg.GoodsImgList[index]]"
                        :obj="item"
                        :indexs="index"
                        :showShanchu="showShanchu"
                        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-uploadB>   
                    </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-uploadB
                        style="width: 660rpx;flex-wrap: wrap;"
                        class="uploadImg uploadImgb"
                        :action="action"
                        :file-list="msg.MoreImgList"
                        :showShanchu="showShanchu"
                        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-uploadB>
                    </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 v-if="showShanchu" placeholder="描述" v-model="msg.Remark" maxlength="-1"></textarea>
                    <text v-else>描述: {{msg.Remark}}</text>
                </view>
            </view>
        </view>
        <view class="cutOff"/>
        <view v-if="!showShanchu" class="ValuationCenter-box">
            <view class="Valuation_item">
                <view class="ReplyContent-title">
                    <view class="title-text">
                        回复 
                    </view>
                    
                </view>
            </view>
            <view class="ValuationCenter-textarea" style="margin-top: 0;padding: 0 20rpx 20rpx 20rpx;">
                <view class="textarea-box">
                    <text>{{datas.ReplyContent}}</text>
                    <view class="ReplyDate-text">{{datas.ReplyDate}}</view>
                </view>
                
            </view>
        </view>
        <template v-if="showShanchu">
            <view class="hintTwo">
                带<text>*</text>的内容为必填内容
            </view>
            <view class="footer-buttom">
                <view v-if="loading" @click="setMsg">
                    提交
                </view>
                <view v-else class="active">
                    提交
                </view>
            </view>
        </template>
      </div>
      <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    </div>
</template>
<script>
    import auth from "@/components/auth/index.vue";
    export default {
      data() {
        return {
          loading: true,
          isloading: true,
          pageTitle: "我要估价",
          navHeight: 0,
          contentHeight: 0,
          BrandImgList:[],
          fileList:[],
          action:'',
          Obj:{},
          msg:{
            Id:0,
            CategoryId:"",
            BrandId:"",
            GoodsImgList:[],
            MoreImgList:[],
            Remark:""
          },
          BrandId:'',
          datas:{},
          tmplIds:[],
          showShanchu:true,
          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.Obj){
            this.isloading = false
            this.datas = JSON.parse(option.Obj)
            this.datas.BrandName = this.datas.BrandName.replace(/8/,"&")
            if(this.datas.ReplyDate){
                this.showShanchu = false
            }else{
                this.showShanchu = true
            }
            this.msg.Id = this.datas.Id
            this.msg.CategoryId = this.datas.CategoryId
            this.msg.BrandId = this.datas.BrandId
            this.msg.Remark = this.datas.Remark
            this.msg.GoodsImgList = this.datas.GoodsImgList
            this.msg.MoreImgList = this.datas.MoreImgList
        }
        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: {
        goBack(type){
            if(type==1){
                uni.navigateTo({
                    url: '/pages/Luxury/ClassList?Id=' + this.datas.CategoryId
                });  
            }
            // if(type==2){
            //     uni.navigateTo({
            //         url: '/pages/index/index?page_id=2644'
            //     });  
            // } 
        },
        // 提交
        setMsg(){
            let arr = this.msg.GoodsImgList.map(item=>{
                return item.Path
            })
            
            if(this.msg.GoodsImgList.length==0&&this.msg.GoodsImgList.length<this.BrandImgList.length){
                uni.showToast({
                    title: "请上传商品图",
                    icon:'none'
                });
                return;
            }
            if(arr.indexOf(undefined)!=-1){
                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'
                                    });
                                }
                                this.loading = true
                                uni.hideNavigationBarLoading();
                            }
                        );
                    }
                })
            }
            
        },
        onRemove(index,lists,indexs) {
            this.msg.GoodsImgList[indexs]={}
            // this.msg.GoodsImgList.splice(indexs, 1);
        },
        uploadSuccessHandler(data, index, lists, obj,indexs) {
            let r = JSON.parse(data);
            let datas = {
                Sort:obj.Sort,
                Name:obj.Name,
                Path:r.data
            }
            this.msg.GoodsImgList.forEach((item,i)=>{
                if(i==indexs){
                    item.Sort=obj.Sort,
                    item.Name=obj.Name,
                    item.Path=r.data
                }
            })
        },
        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
            })
        },
        // 获取详情
        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.BrandImgList = res.data.BrandImgList
                        // this.msg.CategoryId = this.data.CategoryId
                        // this.tmplIds = this.data.TempIdList
                    }
                    uni.hideNavigationBarLoading();
                }
            );
        },
      },
    };
    </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;
        }
        .ReplyContent-title{
            width: 100%;
            display: flex;
            align-items: center;
        }
        .title-text{
            color: black;
            font-size: 28rpx;
            margin-left: 15rpx;
        }
        .ReplyDate-text{
            display: block;
            text-align: right;
            color: #a8a8a8;
            font-weight: 400;
            font-size: 26rpx;
        }
        .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 .u-list-item{
            margin: 0 !important;
            margin-right: 10rpx;
        }
        .uploadImgb .u-list-item{
            margin-right: 20rpx;
        }
        .slot-btn{
            width: 200rpx;
            height: 200rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
    </style>