<style scoped>
    .main_div{
      overflow-y: scroll;
      height: 100%;
    }
    .list .item{
      padding: 1em;
      border-bottom: 1px solid rgba(100, 100, 100, 0.5);
    }
    @media screen and (max-width: 901px) {
    .login{
      position: fixed;
      justify-content:center;
      width: 100%;
    }
    .login-con {
      width: 100%;
      right:0;
    }
    .header_div{
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10;
    }
    .body_div{
      margin-top: 3em;
    }
  }
</style>
<template>
<div class="main_div">
   <Row class="list" v-if="showNav">
      <Col span="24" class="item" v-for="(item, key) of navlist" :key="key">
        <my-button :title="item.title" :clickfunction="item.clickfunction"></my-button>
      </Col>
    </Row>
    <div class="login" v-if="!isLogin">
      <div class="login-con">
        <Card icon="log-in" title="欢迎登录" :bordered="false">
          <div class="form-con">
            <login-form @on-success-valid="handleSubmit"></login-form>
          </div>
        </Card>
      </div>
    </div>
    <div v-if="!showNav">
       <Row class="header_div">
          <Col span="24">
            <Button type="success" long>返    回</Button>
          </Col>
       </Row>
        <Row class="body_div">
          <Col span="24" v-if="navlist.type1.isshow">
12
          </Col>
           <Col span="24" v-if="navlist.type2.isshow">
3
          </Col>
        </Row>
    </div>
</div>

</template>
<script>
import LoginForm from '_c/login-form'
import mybutton from '_c/mybutton'
import { mapActions } from 'vuex'
import { getToken } from '@/libs/util'
import { getTelnoConnectNum, getinventcount1 } from '@/api/other'
export default {
  components: {
    LoginForm
  },
  data () {
    return {
      showNav: true,
      isLogin: false,
      token: getToken(),
      navlist: {
        type1:
        {
          title: '电话联系数量',
          clickfunction: 'gettype1',
          isshow: false,
          columns: [
            {
              title: '日期',
              key: 'date'
            },
            {
              title: '总数',
              key: 'count'
            }
          ],
          list: []
        },
        type2:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [
            {
              title: '日期',
              key: 'date'
            },
            {
              title: '总数',
              key: 'ispass'
            },
            {
              title: '总数',
              key: 'count'
            }
          ],
          list: []
        },
        type3:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type4:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type5:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type6:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type7:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type8:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type9:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        },
        type10:
        {
          title: '招工数量',
          clickfunction: '',
          isshow: false,
          columns: [

          ],
          list: []
        }
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit ({ userName, password }) {
      var that = this
      this.handleLogin({ userName, password })
        .then(res => {
          if (res === 200) {
            this.getUserInfo().then(res => {
              that.isLogin = true
              that.showNav = true
            })
          } else {
            this.$Message.error('用户名或密码错误')
          }
        })
    },
    changenav (type) {
      const name = 'type' + type
      for (let key in this.navlist) {
        let isshow = false
        if (name == key) {
          isshow = true
        }
        this.navlist[key]['isshow'] = isshow
      }
    },
    shownav () {
      this.showNav = true
      for (let key in this.navlist) {
        this.navlist[key]['isshow'] = false
      }
    },
    gettype1 () {
      console.log(123)
      getTelnoConnectNum().then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.navlist.type1.list = data.data.countlist
          console.log(this.navlist.type1)
        }
      })
    },
    gettype2 () {
      getinventcount1().then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.navlist.type1.list = data.data.countlist
        }
      })
    }
  },
  mounted () {
    if (this.token) {
      this.isLogin = true
    }
  }
}
</script>
