<template>
  <div>
    <van-nav-bar title="添加常用" left-text="返回" @click-left="$route_back" right-text="保存" @click-right="save" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group v-for="(item,index) in app_list" :key="index">
          <div slot="title" class="tip">
            {{item.remark}}
          </div>
          <van-cell @click="select(app)" :title="app.code" v-for="(app, app_index) in item.child" :key="app_index">
            <template slot="icon">
              <van-checkbox v-model="app.checked" :inserted="app.checked" :disabled="disabled9 && !app.checked" ></van-checkbox>
              <img class="app-icon" :src="app.icon"/>
            </template>
            <template slot="label">{{app.remark}}</template>
          </van-cell>
        </van-cell-group>
        <div style="padding-bottom: .5rem;"></div>
      </scroller>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Checkbox, CheckboxGroup } from 'vant'
import request from '@/utils/request'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)
let num = 0;
export default {
  name: 'add_common_menu',
  data () {
    return {
      app_list: [],
      num: 0,
      disabled9: false,
    }
  },
  methods: {
    getIs (str) {
      var menuCommon = window.plus ? JSON.parse(plus.storage.getItem('menuCommon')) : JSON.parse(localStorage.getItem('menuCommon'))
      var isTrue = false
      menuCommon.forEach(itme => {
        if (itme == str) {
          isTrue = true
        }
      })
      return isTrue
    },
    is_checked(){
      num = 0
      this.app_list.forEach((item)=>{
        item.child.some(arr =>{
          if(arr.checked){
            num++
            if(num > 10) return true
          }
        })
      })
      console.log(num)
      if(num >= 9){
        this.disabled9 = true
      }else{
        this.disabled9 = false
      }
    },
    select (item) {
      console.log(item)
      if (item.checked) {
        item.checked = false
      } else {
        if(num < 9){
          item.checked = true
        }else{
          this.$toast('常用应用最多9个')
          return
        }
      }
      this.is_checked()
      if(num < 9){
        this.$forceUpdate()
      }
    },
    save () {
      let ret = [], item = []
      for (let i in this.app_list) {
        for (let j in this.app_list[i].child) {
          if (this.app_list[i].child[j]['checked']) {
            ret.push(this.app_list[i].child[j].code_id)
            item.push(this.app_list[i].child[j])
          }
        }
      }
      if(item.length > 9){
        this.$toast('常用应用最多9个')
        return
      }
      var data = {id: this.$store.getters.user_info.id, menu_common: ret}
      request('POST', '/api/employee/menu', data).then((res) => {
        if (res.data.code == 1) {
          if (window.plus) {
            plus.storage.setItem('menuCommon', JSON.stringify(ret))
          } else {
            localStorage.setItem('menuCommon', JSON.stringify(ret))
          }
          this.$keep_alive_update('update_common_menu_list', item)
          this.$route_back()
        }
      })
    },
  },
  mounted () {
    var menu = window.plus ? JSON.parse(plus.storage.getItem('menu')) : JSON.parse(localStorage.getItem('menu'))
    menu.forEach(menu_itme => {
      if (menu_itme.child.length > 0) {
        menu_itme.child.forEach(item => {
          item.checked = this.getIs(item.code_id)
        })
      }
    })
    this.app_list = menu
    this.is_checked()
  }
}
</script>
<style scoped>
  .body_com{height: calc(100% - 0.92rem); position: relative;}
  .app-icon{width:0.96rem; height:0.96rem; margin-left:0.16rem; margin-right:0.16rem;}
</style>
