<template>
  <div class="nav-bgcolor">
    <img src="../../assets/通用背景图.png" style="height: 20vh; width: 96vw; margin: 8px 0 0 8px; border-radius: 10px">
    <div class="auto">
      <div class="row nav-bgcolor">
        <div class="col-xs-6  manbiankuang" v-for="tab in tabs" @click="gotopage(tab.link,tab.name)">
          <img class="imgs" :src="imgback(tab.name)">
          <p></p>
          <p class="pagesfoot">{{ tab.name }}</p>
          <p></p>
        </div>
      </div>
    </div>
    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header text-center">
        <h4 class="modal-title">清除项选择</h4>
        <input type="checkbox" class="" id="f_operator" v-model="all">
        <label for="f_operator" class="font-size">全选</label>
      </header>
      <article slot="modal-body" v-if="show">
        <div class="auto col-sm-11 col-xs-11 col-xs-offset-1 col-md-offset-1" style="margin-top: 10px;">
          <div class="col-sm-4 col-xs-4" v-for="f in fields">
            <input type="checkbox" class="" :id="'export-col-'+$index" v-model="modelval" :value="$key">
            <label :for="'export-col-'+$index" class="font-size">{{ f }}</label>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <center>
          <button v-show="show" type="button" class="btn btn-default" @click='close()'>取消</button>
          <button v-show="show" type="button" class="btn btn-success" @click='clear()'>确定</button>
        </center>
      </footer>
    </modal>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    title: '系统设置',
    data() {
      return {
        version: '1.0',
        titleName: '系统设置',
        all: false,
        flag: true,
        show: false,
        fields: {},
        dataclear: [],
        tabs: this.getTabs(),
        //tabs:[{name:"清空数据"}],
        modelval: [],
        text: '导航组件this',
        beforeName: '系统设置',
      }
    },
    ready() {
      this.version = HostApp.getAppVersion().data
      // if(Vue.config.safecheck.clearPhone){
      //   let cleartable=Vue.config.safecheck.clearPhone.cleardata
      //   for (let i = 0; i < cleartable.length; i++) {
      //     this.fields[cleartable[i].module]=cleartable[i].module
      //   }
      // }
    },
    methods: {
      versionShow() {
        this.$showMessage('系统版本：' + this.version)
      },
      // clear(){
      //   let cleartable=Vue.config.safecheck.clearPhone.cleardata
      //   console.log(this.modelval)
      //   for (let i = 0; i < cleartable.length; i++) {
      //     for (let j = 0; j < this.modelval.length; j++) {
      //       if (cleartable[i].module==this.modelval[i]){
      //         this.dataclear=Object.assign([],this.dataclear,cleartable[i].tables)
      //       }
      //     }
      //   }
      //   console.log(this.dataclear)
      //   this.cleandata()
      // },
      close() {
        this.show = false
        this.all = false
        this.flag = true
        this.modelval = []
      },
      sortModelval() {
        let sortModel = []
        Object.keys(this.fields).forEach((key) => {
          if (this.modelval.includes(key)) {
            sortModel.push(key)
          }
        })
        console.log('看看选择的顺序。。。', sortModel)
        console.log('看看选择的顺序。。。', this.modelval)
        if (sortModel.length == this.modelval.length - 1) {
          this.flag = false
          console.log("66666666666666")
          this.all = false
        }
        console.log(Object.keys(this.fields).length)
        if (sortModel.length == Object.keys(this.fields).length) {
          this.all = true
        }
        this.modelval = sortModel
      },
      imgback(val) {
        return require('../../assets/' + val + '.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.cleanalldata()
          return
        }
        if (name == '系统版本') {
          this.versionShow()
          return
        }
          // else if (name == '清除数据'){
          //   this.openclear()
        // }
        else if (name == '声音开关') {
          this.voiceSwitch()
        } else if (name == '导出数据') {
          this.outdata()
        } else if (name == '退出系统') {
          HostApp.back_home()
        } else if (name == '删除照片') {
          const result = HostApp.deletePic()
          if (result){
            this.$showMessage('删除成功!共删除照片'+result.delete_pic_ok+'张!')
          }
        } else if (name == '返回桌面') {
          HostApp.back_home()
        } 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('进入子组件')
          let safe = true
          if (name == '打卡'){
            safe = false
          }
          var prpdata = {
            _this:this,
            title:name,
            safe
          }
          this.$dispatch('gotoson',prpdata)
          this.$goto(link)
        }
      },
      cleanalldata() {
        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('清除数据失败!')
            }
          }
        })
      },
      // 清空数据
      cleandata() {
        console.log("88888888888")
        this.$showMessage('此操作为清理数据，无法恢复！', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let result = this.$androidUtil.bzLogic('clearPhoneDataNew', {tables: this.dataclear})
            console.log((result.result))
            if (result.result == '成功') {
              this.$showMessage('清除数据完成!')
            } else {
              this.$showMessage('清除数据失败!')
            }
            this.close()
          }
        })
      },
      // 导出数据
      openclear() {
        this.show = true
      },
      voiceSwitch() {
        console.log("进入声音开关")
        let voicedata = this.$androidUtil.getPreference('f_voiceSwitch')
        console.log(voicedata)
        let voicechange = '开启'
        if (voicedata == "true") {
          console.log("进入判断")
          voicechange = '关闭'
        }
        this.$showMessage('此操作为' + voicechange + '提示音,请再次确认！', ['confirm', 'cancel']).then((res) => {
          if (res == 'confirm') {
            if (voicechange == '关闭') {
              this.$androidUtil.setPreference('f_voiceSwitch', "false")
              this.$showMessage('提示音关闭成功!')
            } else {
              this.$androidUtil.setPreference('f_voiceSwitch', "true")
              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('当前已处于非自动登录!')
        }
      }
    },
    watch: {
      'all'(val) {
        if (val) {
          this.modelval = Object.keys(this.fields)
        } else {
          console.log(this.flag)
          if (this.flag) {
            this.modelval = []
          }
        }
        this.flag = true
      },
      'modelval.length'() {
        this.sortModelval()
      }
    }
  }

</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;
    height: 39px;
  }

  .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;
  }

  .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;
  }

  .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>
