<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;justify-content: 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:[],
          showOpenSettingDialog:false,
          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()
            this.showOpenSettingDialog = uni.getStorageSync('showOpenSettingDialog') || false; 
            this.subscription()
        }
        
      },
      
    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;
            }
            this.loading = false
            uni.showLoading({
                title: '提交中'
            });
            this.request2(
                {
                    url: '/api/AppletAssess/SetGoodsInfo',
                    data: this.msg
                },
                res => {
                    if(res.resultCode==1){
                        this.loading = true
                        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
            })
        },
        // 订阅
        subscription(){
            let _this = this
        // 开启订阅消息设置窗口
        // 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
        uni.getSetting({
            withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
            success(res) {
                if(_this.showOpenSettingDialog){
                    uni.requestSubscribeMessage({
                        tmplIds: _this.tmplIds,
                        success(res) {
                            if (res[_this.tmplIds[0]] == "accept" || res[_this.tmplIds[1]] == "accept" ||  res[_this.tmplIds[2]] == "accept") {
                                _this.showOpenSettingDialog = true;
                                uni.setStorageSync('showOpenSettingDialog',true);
                                
                            }else{
                                uni.showToast({
                                    title:"您拒绝订阅消息授权，无法接受通知",
                                    icon:"none"
                                });
                                _this.showOpenSettingDialog = false;		
                            }
                            uni.redirectTo({
                                url: '/publicPages/okPage/okPage?type=' + type
                            })
                        },
                        fail: (res) => {
                            uni.showModal({
                                title: '温馨提示',
                                content: "检测到您没有开启订阅消息的权限，是否去设置？",
                                success: function(modal) {
                                    if (modal.confirm) { // 点击肯定
                                        uni.openSetting({
                                            withSubscriptions: true
                                        });
                                        _this.showOpenSettingDialog = true;
                                        uni.setStorageSync('showOpenSettingDialog',true);
                                    }else{
                                        uni.showToast({
                                            title:"您已拒绝订阅消息授权，无法接受通知",
                                            icon:"none"
                                        });
                                        _this.showOpenSettingDialog = false;
                                    }
                                }
                            })
                        }
                    })
                }else{
                    
                    if (res.subscriptionsSetting[_this.tmplIds[0]] == "reject" || res.subscriptionsSetting[_this.tmplIds[1]] == "reject" || res.subscriptionsSetting[_this.tmplIds[2]] == "reject") { //用户点击了“总是保持以上，不再询问”
                        uni.showModal({
                            title: '温馨提示',
                            content: "检测到您没有开启订阅消息的权限，是否去设置？",
                            success: function(modal) {
                                if (modal.confirm) { // 点击肯定
                                    uni.openSetting({
                                        withSubscriptions: true
                                    });
                                    _this.showOpenSettingDialog = true;
                                    uni.setStorageSync('showOpenSettingDialog',true);
                                }else{
                                    uni.showToast({
                                        title:"您拒绝了一些订阅消息授权，无法接受通知",
                                        icon:"none"
                                    });
                                    _this.showOpenSettingDialog = false;
                                }
                            }
                        })
                    } else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
                        uni.requestSubscribeMessage({
                            tmplIds: _this.tmplIds,
                            success(res) {
                                if (res[_this.tmplIds[0]] == "accept" && res[_this.tmplIds[1]] == "accept" &&  res[_this.tmplIds[2]] == "accept") {
                                    _this.showOpenSettingDialog = true;
                                    uni.setStorageSync('showOpenSettingDialog',true);
                                }else{
                                    uni.showToast({
                                        title:"您拒绝订阅消息授权，无法接受通知",
                                        icon:"none"
                                    });
                                    _this.showOpenSettingDialog = false;
                                }
                                uni.redirectTo({
                                    url: '/publicPages/okPage/okPage?type=' + type
                                })
                            },
                            fail: (res) => {
                                uni.showModal({
                                    title: '温馨提示',
                                    content: "检测到您没有开启订阅消息的权限，是否去设置？",
                                    success: function(modal) {
                                        if (modal.confirm) { // 点击肯定
                                            uni.openSetting({
                                                withSubscriptions: true
                                            });
                                            _this.showOpenSettingDialog = true;
                                            uni.setStorageSync('showOpenSettingDialog',true);
                                            
                                        }else{
                                            uni.showToast({
                                                title:"您已拒绝订阅消息授权，无法接受通知",
                                                icon:"none"
                                            });
                                            _this.showOpenSettingDialog = false;
                                        }
                                    }
                                })
                            }
                        })
                    }
                }
                
            }
            })
        },
      },
    };
    </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>