<template>
  <div>
    <Modal id="UpdateSystemModal" v-model="isUpdateSystemModal" title="系统更新提示" :width="470">
      <p class="update_tap">
        尊敬的用户，您的系统当前版本为{{nowVersionName}}，最新版本为
        <span>{{updateSystemDataDetail.version_name||''}}</span> ，是否进行更新？
      </p>
      <p class="update_summny" >
        （检测更新后会立即执行更新操作，建议您选择平台使用低峰时间段进行更新，如00:00，也可在【系统更新】页面内执行更新操作，自动更新期间若更新失败则会自动回滚更新操作，直至更新成功）
      </p>
      <p class="update_content mar_T_15">更新内容：</p>
      <div style="height:200px;overflow:auto">
        <p
          class="update_content"
          v-for="(item,index) in updateSystemDataDetail.content"
          :key="index"
        >{{Number(index+1)}}、{{item}}</p>
      </div>
      <div class="update_btn">
        <Button @click="isUpdateSystemModal=false">暂不更新</Button>
        <Button type="primary" class="mar_L_30" @click="startUpdateSystem">检测更新</Button>
      </div>
    </Modal>
    <Modal v-model="MDnotCanUpdate" id="notCanUpdate" title="系统更新提示" :width="416">
      <p class="notCanUpdate_tap">尊敬的用户，您的系统暂不支持自动更新，可联系溪谷售后进行更新升级。</p>
      <div class="update_btn">
        <Button type="primary">联系客服</Button>
      </div>
    </Modal>
    <Modal
      v-model="autoUpdata"
      id="autoUpdata"
      title="自动更新进度"
      :width="416"
      class="demo-spin-container"
    >
      <div class="ivu-modal-body">
        <!-- <Spin fix style='margin-top:40px;height:80%;'></Spin> -->
        <div style="height:210px;overflow:auto" id="scolldiv">
          <p v-for="(item,index) in updateInfo" :key="index" v-html="item"></p>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "@/api/base.js";
import { setInterval } from 'timers';
export default {
  name: "update_system_modal",
  data() {
    return {
      nowVersionName:'',
      autoUpdata: false,
      updateInfo:[]
      // iframeUrl: ""
    };
  },
  props: {
    isUpdateSystem: Boolean,
    notCanUpdate: Boolean,
    updateSystemDataDetail: Object
  },
  computed: {
    isUpdateSystemModal: {
      get(n) {
        this.$nextTick(() => {
          if (n && this.isUpdateSystem) {
            this.getNowSystem();
          }
        });
        return this.isUpdateSystem;
      },
      set(val) {
        this.$emit("update:isUpdateSystem", val);
      }
    },
    MDnotCanUpdate: {
      get(n) {
        return this.notCanUpdate;
      },
      set(val) {
        this.$emit("update:notCanUpdate", val);
      }
    }
  },
  watch: {},
  methods: {
    startUpdateSystem() {
      this.updateInfo=[]
      this.$api.beginUpdateSystem().then(data=>{
        if(data.code==200){
          this.updateSystemInfo(data.url,data.data)
          this.updateInfo.push(data.msg)
        }
      })
      this.isUpdateSystemModal = false;
      this.autoUpdata = true;
    },
    updateSystemInfo(url,res){
      axios.post(url,{...res}).then(data=>{
        if(!!data.code){
          if(data.code==200){
            this.updateInfo.push(data.msg)
            document.getElementById('scolldiv').scrollTop = document.getElementById('scolldiv').scrollHeight;
            if(!data.url) {
              setTimeout(() => {
                location.reload()
              },2000)
            }else {
              this.updateSystemInfo(data.url,data.data)
            }
          }else{
            this.$Message.info(data.msg)
            return false
          }
        }else{
          if(!!!data.url) {
            this.updateInfo.push('更新成功')
            setTimeout(() => {
              location.reload()
            },2000)
          }
          // if(!!!data.url){
          //   this.updateInfo.push('更新成功')
          //   let i=4
          //   document.getElementById('scolldiv').scrollIntoView()
          //   setInterval(() => {
          //     if(i>1){
          //       this.updateInfo.push(`页面将在${i-1}秒后,自动更新`)
          //       i--
          //     }
          //     document.getElementById('scolldiv').scrollTop = document.getElementById('scolldiv').scrollHeight;
          //   }, 1000);
          //   setTimeout(() => {
          //     location.reload()
          //   }, 4000);
          // }
        }
      })
    },
    getNowSystem() {
      this.$api.getNowSystem().then(data=>{
        if(data.code==200){
          this.nowVersionName=data.data.version_name||''
        }
      })
    },
  }
};
</script>
<style>
#UpdateSystemModal .ivu-modal-content,
#autoUpdata .ivu-modal-content {
  min-height: 300px;
}
#UpdateSystemModal .ivu-modal-footer,
#notCanUpdate .ivu-modal-footer,
#autoUpdata .ivu-modal-footer {
  display: none;
}
#UpdateSystemModal .ivu-modal-body,
#notCanUpdate .ivu-modal-body {
  padding: 20px !important;
}
#autoUpdata .ivu-modal-body {
  padding: 5px 15px 15px 15px !important;
  font-size: 13px;
}
.update_tap {
  font-weight: bold;
  font-size: 15px;
}
.update_summny {
  letter-spacing: 0.4px;
  font-size: 13px;
  color: rgb(255, 121, 0);
}
.update_content {
  padding: 5px 0px;
  font-size: 14px;
}
.update_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 18px;
}
.update_btn button {
  width: 120px;
}
.notCanUpdate_tap {
  font-size: 15px;
  line-height: 28px;
  font-weight: bold;
}
#autoUpdata p {
  font-size: 12px;
  line-height: 26px;
}
</style>

