<template>
  <div class="nav-bgcolor">
    <div class="auto">
      <div class="nav-bgcolor" >
<!--<img src="../../assets/形状4.png" style="width: 100%;position: relative;height: 255px;top: -5px">-->
<!--        <div class="" style="background-image: url('')"></div>-->
        <div class="row"  style="width: 100%;position: relative;height: 255px;top: -5px;background: url('../../static/形状4.png') no-repeat center 0;background-size: cover;text-align: center;">
         <div class="col-sm-8" style="height: 45%;margin-top: 25%">
           <img style="width: 120px;border-radius:100%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599050985570&di=9b7c04b0e87f42e8d0c6132ed05d86d9&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg">
         </div>

         <label style="font-size: 20px">在线</label>
        </div>
        <p></p>

        <div class="row tiaoxingkuang" v-for="tab in tabs" @click="gotopage(tab.link,tab.name)" >
          <div class="" style="float: left;width: 25%"><img  :src="imgback(tab.name)" style="width: 40px;padding-left: 5%"></div>
          <div class="" style="float: left;font-size: 25px"><p class="pagesfoot">{{tab.name}}</p></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    title: '系统设置',
    data() {
      return {
        titleName:'系统设置',
        tabs: this.getTabs(),
        text: '导航组件this',
        beforeName:'系统设置',
      }
    },
    methods: {
      imgback(val){
        return require('../../assets/'+val+'1.png')
      },
      getTabs(){
        for(let funs in Vue.user.functions){
          if(Vue.user.functions[funs].link == 'system-setup'){
            return Vue.user.functions[funs].children
          }
        }
      },
      gotopage(link,name) {
        if(name == '清空数据'){
          this.cleandata()
        }else if(name == '导出数据'){
          this.outdata()
        }else if(name == '退出系统'){
          this.$showMessage('即将返回登陆界面！', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.$androidUtil.setPreference('f_repairman_id', 'x')
              this.$androidUtil.setPreference('f_repairman_name', 'x')
              this.$dispatch('gologin')
            }
          })
        }else{
          console.log('进入子组件')
          var prpdata = {
            _this:this,
            title:name,
            safe:true
          }
          this.titleName=name
          this.$dispatch('gotoson',prpdata)
          this.$goto(link)
        }
      },
      // 清空数据
      cleandata(){
        this.$showMessage('此操作为清理数据，无法恢复！', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let result = this.$androidUtil.bzLogic('clearPhoneData', {flag: 0})
            console.log((result.result))
            if(result.result == '成功'){
              this.$showMessage('清除数据完成!')
            }else{
              this.$showMessage('清除数据失败!')
            }
          }
        })
      },
      // 导出数据
      outdata(){
        HostApp.backupDatabase()
        this.$showMessage('数据导出成功!')
      },
      //取消自动登录
      cancelAutoLogin(){
        let auto=this.$androidUtil.getPreference('autoLogin')
        if(auto){
          this.$androidUtil.setPreference('autoLogin', false)
          this.$showMessage('已取消自动登录!')
        }else{
          this.$showMessage('当前已处于非自动登录!')
        }
      }
    }
  }

</script>
<style scoped>
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flex-between span {
    padding-right: 10px;
  }
  .flex-full {
    flex: 1;
  }
  .name{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .imgs{
    width: 35px;
    margin-top: 15px;
  }
  .plan {
    border-bottom: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .manbiankuang{
    width: 44%;
    margin-top: 15px;
    margin-left: 4%;
    border:1px solid #e3e3e3;
    border-radius:10px 10px 10px 10px;
    text-align: center;
    background-color: #ffffff;
  }
  .tiaoxingkuang{
    background: #FFFFFF;
    border:1px solid #e3e3e3;
    text-align: center;
    border-radius:10px 10px 10px 10px;
    height: 50px;
    line-height: 50px;
  }
  .user{
    border-bottom: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .safecheck{
    border-bottom: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .beijingimg{
    width: 100%;
    position: relative;
    height: 255px;
    top: -5px;
    background-size: cover;
    text-align: center;
  }
  .appointment{
    border-top: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .search{
    border-top: 0.5px solid #EAEAEA;
    border-right: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }
  .upload{
    border-top: 0.5px solid #EAEAEA;
    border-left: 0.5px solid #EAEAEA;
    height: 120px;
  }


</style>
