<template>
    <view>
        <u-popup :zoom="zoom"  mode="center" :popup="false" z-index="99999" v-model="value" :length="width"
            :mask-close-able="maskCloseAble" :border-radius="borderRadius"
            :negative-top="negativeTop">

            <view class="page-height">
                <view class="update-wrap">
                    <image :src="wxhsImg('/imgbg.png')" class="top-img"></image>
                    </image>
                    <view class="content">
                        <text class="title">設備固件版本號{{bluetoothversion}}</text>
                        <!-- 升級描述 -->
                        <view class="title-sub">設備固件升級中</view>
                        <!-- 升級按鈕 --> 
                        <button class="btn" v-if="!pressShow" @click.stop="clickUpgradation()">立即升級</button>
                        <!-- <button class="btn" v-if="!pressShow" @click.stop="upgradeCompleted()">升級完成</button> -->
                        <!-- <button class="btn" v-if="!pressShow" @click.stop="toUpLoadFile()">發送數據</button> -->
                    
                        <!-- 下載進度 -->
                        <view class="sche-wrap" v-else> 
                            <!-- 更新包下載中 -->
                            <view class="center fs14 bold c_19" style="margin:10px 0px;" v-if="pressValue==100">
                                數據傳輸完成,設備固件升級中,請等待<u-loading :show="true" color="#19be6b"></u-loading>
                            </view>
                            <view v-if="pressValue!=100">
                                  <view class="fs12 c_57" >{{upgradationtext}} {{pressValue}}%</view>
                            </view>
                          
                            <view class="sche-bg">
                                <view class="sche-bg-jindu" :style="{'width':pressValue+'%'}"></view>
                            </view>
                        </view>
                        
                        <view>
                           
                            <view>
                                <input
                                type="number"
                                class="upgr"
                                style="width:400rpx;"
                                placeholder="請輸測試入次數"
                                v-model="upgradesNumber" />
                            </view>
                         
                            <view class=""><u-button  @click="startUpgrade" size="default" type="success">開始測試</u-button> </view>
                            <view class="me-fx-row-c bold fs18" style="padding-top:10px;"> 次數統計:{{statistics}} </view>
                        </view>
                         
                    </view>
                </view>

                <view class="iconBtn" v-if="iscolse">
                    <span @click.stop="popupClose">  
                        <u-icon name="close-circle" color="#bdb9b9" size="58" ></u-icon>
                    </span>
                </view>

            </view>
        </u-popup>
    </view>
</template>

<script>
    import {wxhsImg} from '@/utils/index.js'
    import store from '@/store';
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    import {bluetoothRequest} from '@/api/bluetoothque.js'
    import {
        writeBLECharacteristicValue,
        onBLECharacteristicValueChange,
        instructioNencapsulation,
    } from '@/Bluetooth/bluetoothData.js'
    
    import {agreementFuncversionInfo} from '@/Bluetooth/InstructionMethod.js'
    import func from '@/utils/func.js'
    import {devUrl} from '@/common/setting'

    
    export default {
        props: {
            zoom: {
                type: Boolean,
                default: true
            },
            // 彈窗寬度，可以是數值(rpx)，百分比，auto等
            width: {
                type: [Number, String],
                default: 600
            },
            // 是否顯示Modal
            value: {
                type: Boolean,
                default: false
            },
            borderRadius: {
                type: [Number, String],
                default: 16
            },
            // 是否允許點擊遮罩關閉modal
            maskCloseAble: {
                type: Boolean,
                default: false
            },
            // 給一個負的margin-top，往上偏移，避免和鍵盤重合的情況
            negativeTop: {
                type: [String, Number],
                default: 0
            }
        },
        components: {
  
        },
        watch:{
            'versionInformation':{
                handler(val,old){
                    console.log('-watch-versionInformation-----',val);
                    if(val){
                        this.newVision=val.version
                    }
                    
                },
                immediate:true
            },
            'upgradeResults':{
               handler(val,old){
                    console.log('升級成功狀態碼val---',val)
                   if(val==1){//升級成功  
                         //請求版本號，對比
                        this.upgradeCompleted()
                   }else if(val!=0){
                       this.upgradeError(val)
                   }
               },
               immediate:true 
            }
        },
        data() {
            return {
                wxhsImg:wxhsImg, 
                pressShow:false,
                iscolse:true,
                pressValue:0,
                splitFileData:[],
                blueIndex:0,
                circulateNum:0,
                newVision:'',
                upgradationtext:'數據傳輸進度: ',
                upgradesNumber:'',
                statistics:0,
                bluetoothversion:'',
                versionIndex:'',
                upgradList:[
                    {
                        'version':'V1.0',
                        'fileSize':35172,
                        'encryption':'0f283da541b0cc9061a4844f881b486c',
                    },{
                        'version':'V1.1',
                        'fileSize':35172,
                        'encryption':'4470103f83a83d1d245507415f0fc673',
                    }
                ]
            }
        },
        computed: {
           ...mapGetters([
               "versionInformation",
               "upgradeResults",
           ])
        },
        created() {
            
        },
        mounted() {
            
        },
        beforeDestroy() {
 
        },
        methods: {
            //開始測試 
            startUpgrade(){
                
                const that=this;
                if(this.upgradesNumber==''){
                    that.$u.func.showToast('請輸入測試次數')
                    return false;
                }
                
                if(that.statistics>=this.upgradesNumber){
                    that.$u.func.showToast('測試完成')
                    uni.showModal({
                                title:'溫馨提示',
                                content:`測試完成-共測試${that.statistics}次`,
                                });
                    return false;
                }
                
                console.log('開始測試次數----',this.upgradesNumber);
                const upgradationzl=this.$instructionList.upgradation;
                const interupgradation=this.$agrFuc.getSendData(upgradationzl);
                
                writeBLECharacteristicValue(interupgradation).then(res=>{
                        uni.hideLoading()
                      const v1=agreementFuncversionInfo(res);//設備版本號
                      this.bluetoothversion=v1
                      console.log('獲取設備版本號---',v1)
                      if(v1.slice(1)=='1.1'){
                        that.clickUpgradation(0)
                      }else{
                         that.clickUpgradation(1)  
                      }
                }).catch(err=>{
                    
                })
                
                 
            },
            clickUpgradation(index){
                const that=this;
                const encryption=this.$agrFuc.charToHex(that.upgradList[index].encryption)//md5值 轉16進制  32位
                const baseSize=this.$agrFuc.transNumber(that.upgradList[index].fileSize) //文件大小
                const code=[19];//功能碼從 13 的十六進制 
                console.log('baseContent---1-',encryption)
                const  baseContent=[...code,...baseSize,...encryption]  //功能碼， 文件大小 ， 32個m5數據 組合
                console.log('baseContent---1-',baseContent)
                const upgradationData=this.$agrFuc.getSendData(baseContent);
                console.log('upgradationData---1-',upgradationData)
                writeBLECharacteristicValue(upgradationData).then(res=>{
                        console.log('是否升級成功---',res);
                        console.log('是否升級成功-3-',res[3]);
                        uni.hideLoading();
                        const codeStats=res[3];
                         if(codeStats=='0'){//升級模式準備就緒 00 就是升級允許
                              console.log('升級模式準備就緒 00 就是升級允許--',)
                              that.toUpLoadFile(index)
                         }else{
                             that.upgradeError(codeStats)
                         }
                 }).catch(err=>{
                       uni.hideLoading()
                       console.log('-是否升級失敗 操作失敗--',err);
               
                })
            },
            /*** 下載升級 下次文件 */
            toUpLoadFile(index){
                console.log('下載升級 下次文件 ---');
                const that=this;
                that.versionIndex=that.upgradList[index].version
                const url=`upload/files/carFragrance/update/${that.upgradList[index].version}.bin`;
              //  const url=`upload/files/carFragrance/update/V1.0.bin`;
                const method='GET';
                const responseType='arraybuffer';
                bluetoothRequest(url,method,responseType).then(res=>{
                       console.log('下載升級文件-res-',res.data);
                      if(res.statusCode==200){
                        const file=res.data;//文件  arrayBuffer 格式
                        const filesize=that.upgradList[index].fileSize;//文件總大小
                        const chunkSize=128;//每次切片數量   (app每次 256字節)  (小程序 支持128字節)
                        this.splitFileData=that.$u.func.arrbefsplitFil(file,chunkSize)
                        console.log('arrbefsplitFil ----', this.splitFileData);
                        that.pressShow=true; 
                        that.iscolse=false;
                        that.bluetoothContinuation();
                      }else{
                          this.$u.func.showToast('下載文件失敗')
                      }
                }).catch(err=>{
                         this.$u.func.showToast('下載文件失敗')
                         console.log('下載升級文件-err-',err)
                })
            },
            //持續發送數據，需要做 斷點 續傳
            bluetoothContinuation(){
                const that=this;
                  this.uploadChunk().then(res=>{
                        this.circulateNum=0;// 初始化
                        if(res=='success'){ //全部上傳成功
                            this.upgradationtext='傳輸完成，設備固件升級中，請等待'
                            //判斷升級是否完成
                            // setTimeout(()=>{
                            //     that.upgradeCompleted()
                            // },2000)
                        }else{
                            //上傳成功，繼續上傳
                            console.log('上傳成功,繼續上傳--',res)
                            setTimeout(()=>{ // (app 每隔 50毫秒)  (小程序 每隔 20毫秒)
                                  this.bluetoothContinuation()
                            },20)
                        }
                  }).catch(err=>{
                      //發送失敗  循環10次發送
                        this.circulateNum= this.circulateNum+1
                        if(this.circulateNum==10){
                            console.log('上傳失敗,繼續上傳---')
                            this.bluetoothContinuation()
                        }else{
                            uni.showModal({
                                title:'溫馨提示',
                                content:'升級失敗,請斷開藍牙，重新連接升級或聯系管理員',
                                success: function (res){
                                    if (res.confirm) {
                                        that.pressValue=0
                                        that.blueIndex=0
                                        that.iscolse=true;
                                        that.$emit('popupClose',false)
                                        console.log('用戶點擊確定');
                                    } else if (res.cancel) {
                                        console.log('用戶點擊取消');
                                    }
                                }
                            });
                            // this.$u.func.showToast('上傳失敗');
                        }
                  })
            },
            //傳送數據處理 
            uploadChunk(){
                const appStore =this.$store.getters;
                console.log(`第${this.blueIndex}次`)
                const bluetoothData= this.splitFileData[this.blueIndex];//每次切片的數據
                return new Promise((resolve,reject) =>{
                        //總長度 大于  成功次數 ，相反的話，就說明發送成功
                        // if(this.splitFileData.length>this.blueIndex){
                            if(bluetoothData){
                                    console.log('bluetoothData-----',bluetoothData);
                                    this.blueIndex=this.blueIndex+1;//記錄上傳的位置
                                    this.pressValue=parseInt((this.blueIndex/this.splitFileData.length)*100)// 下載 進度
                                    let typedArray = new Uint8Array(bluetoothData);
                                     
                                        buffer1 = typedArray.buffer;
                                          console.log('typedArray---',typedArray)
                                          console.log('buffer1---',buffer1)
                                    // let  buffer1 = bluetoothData
                                    uni.writeBLECharacteristicValue({
                                                   deviceId: appStore.deviceId,
                                                   serviceId: appStore.servicesUuid,
                                                   characteristicId: appStore.characteristicId,
                                                   value: buffer1,
                                                   success: (res) => {
                                                        console.log('指令發送sueccess--',res)
                                                         resolve(this.blueIndex);
                                                   },
                                                   fail: (err) => {
                                                        console.log('指令發送err-err--',err)
                                                       reject(err)
                                                   }
                                })
                             
                             
                             resolve(this.blueIndex);
                        }else{
                            //上傳成功
                             resolve('success')
                        } 
                })
            },
            //判斷升級是否完成
            upgradeCompleted(){
                console.log('--判斷升級是否完成-1-')
                const that=this;
                // 設備版本號和服務器版本相同 升級完成 
                const upgradationzl=this.$instructionList.upgradation;
                const interupgradation=this.$agrFuc.getSendData(upgradationzl);
                this.$store.commit('Bluetooth/set_versionInfo','');
                console.log('--判斷升級是否完成-2-')
                writeBLECharacteristicValue(interupgradation).then(res=>{
                    console.log('--版本號--',res)
                    const  versionInfo=agreementFuncversionInfo(res)
                    uni.hideLoading()
                    console.log('升級完成---',versionInfo)
                    const v1=versionInfo.slice(1);//設備返回 的 版本號
                     const v2=that.versionIndex.slice(1);//服務器放回的版本號  1.2
                    console.log('升級完成-版本號--',v1,v2)
                     if(Number(v1)==Number(v2)){
                        that.$u.func.showToast('升級成功')
                        that.pressValue=0
                        that.blueIndex=0
                        that.iscolse=true;
                        that.upgradationtext='數據傳輸進度'
                        that.statistics=that.statistics+1
                        that.startUpgrade();
  
                     } 
                }).catch(err=>{
                    // 升級失敗 
                    console.log('err---',err);
                    uni.hideLoading()
                    this.$u.func.showToast('傳輸異常斷開,請斷開藍天，重新連接更新')
                })
            },
            //升級失敗
            upgradeError(code){
                if(code){
                    if(code==2){
                        this.$u.func.showToast('MD5校驗失敗,')
                    }else if(code==3){
                        this.$u.func.showToast('容量不足')
                    }else if(code==4){
                        this.$u.func.showToast(' 升級超時')
                    }
                    this.pressValue=0
                    this.blueIndex=0
                    this.iscolse=true;
                    this.$emit('popupClose',false)
                }
             
                    
           
                    
            },
            // 點擊遮罩關閉modal，設置v-model的值為false，否則無法第二次彈起modal
            popupClose() {
                this.$emit('popupClose', false);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .page-height {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //background-color: rgba($color: #000000, $alpha: .7);
    }

    .update-wrap {
        width: 580rpx;
        border-radius: 18rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        padding: 290rpx 30rpx 0;

        .top-img {
            position: absolute;
            left: 0;
            width: 100%;
            height: 246rpx;
            top: 20rpx;
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 40rpx;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #6526f3;
            }

            .title-sub {
                text-align: center;
                font-size: 24rpx;
                color: #666666;
                padding: 30rpx 0;
            }

            .btn {
                width: 460rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 30rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 100px;
                background-color: #6526f3;
                margin-top: 20rpx;
            }
        }
    }
    
    .upgr{
        margin:10px 0px;border:2px solid green;padding:10px;border-radius:10rpx;
    }

    .iconBtn {
        padding-bottom: 30rpx;
    }
    
    .sche-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding: 10rpx 50rpx 0;
    
            .sche-wrap-text {
                font-size: 24rpx;
                color: #666;
                margin-bottom: 20rpx;
            }
            
            .c_57{
                color:#5775e7;
            }
    
            .sche-bg {
                position: relative;
                background-color: #cccccc;
                height: 30rpx;
                border-radius: 100px;
                width: 480rpx;
                display: flex;
                align-items: center;
                margin-top:10rpx;
    
                .sche-bg-jindu {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 30rpx;
                    min-width: 30rpx;
                    border-radius: 100px;
                    background: #6526f3;
                    // background: url(./img/round.png) #5775e7 center right 4rpx no-repeat;
                    background-size: 26rpx 26rpx;
                }
            }
    
            .down-text {
                font-size: 24rpx;
                color: #5674e5;
                margin-top: 16rpx;
            }
        }
    
</style>