<template>
  <div id="nav-box">
    <div class="nav-left">
      <i class="icon el-icon-s-fold" @click="show(true)" v-if="!flag"></i>
      <i class="icon el-icon-s-unfold" @click="show(false)" v-else></i>
    </div>
    <div class="nav-right">
      <p class="mrr10px p-top fz16px mrl10px">
        <span
          style="color: #606266; vertical-align: middle"
          class="el-icon-user fz18px mrr5px"
        ></span>
        <span style="color: #333">admin</span>
      </p>
      <p class="fz14px out" @click="out">
        <el-tag type="info" size="mini" effect="plain">退出平台</el-tag>
      </p>
    </div>
  </div>
</template>

<script>
import local from '../../utils/local'
import { LoginOut, LoginEnter } from '../../api/consumer'
// import { farmswitch } from '../../api/systemSet'
export default {
  data() {
    return {
      value: '',
      flag: false,
      zhanghao: '',
      options: [],
      farm_name: '', // 养殖场
      object: {}
    }
  },
  created() {
    this.getUserInfo()
    this.farm_name = local.get('farm_name')
  },
  methods: {
    // 大屏按钮
    screenClick() {
      window.open(
        'https://datav.aliyuncs.com/share/page/3c006051da485e266d41ca59e4ec36bb',
        '_blank'
      )
    },
    shopClick() {
      window.open(
        'https://datav.aliyuncs.com/share/page/d8ff7d8044e930c7a12cdaa0591c04db',
        '_blank'
      )
    },
    // 显示 - 账号
    getUserInfo() {
      this.zhanghao = local.get('account_sds')
    },
    show(flag) {
      this.flag = flag
      this.$bus.$emit('show', flag)
    },
    // 退出
    out() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        title: '退出登录',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          this.$message({
            message: '退出成功!',
            type: 'success'
          })
          local.set('farm_name', '')
          local.set('token_sd', '')
          local.set('account_sds', '')
          setTimeout(() => {
            this.$router.push('/login')
          }, 500)
          // const res = await LoginOut({
          //   token: local.get('token_sd')
          // })
          // if (res.status === 1) {
          //   this.$message({
          //     message: '退出成功!',
          //     type: 'success'
          //   })
          //   local.set('farm_name', '')
          //   local.set('token_sd', '')
          //   local.set('account_sds', '')
          //   setTimeout(() => {
          //     this.$router.push('/login')
          //   }, 500)
          // } else {
          //   this.$message.error(res.msg)
          // }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // true - 出现
    visiblechange(e) {
      if (e === true) {
        this.getfarmswitch()
      }
    },
    // 切换养殖场 - 列表
    async getfarmswitch() {
      const res = await farmswitch({
        token: local.get('token_sd')
      })
      if (res.status === 1) {
        this.options = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    change(e) {
      this.options.forEach((item) => {
        if (e === item.org_name) {
          this.object = item
        }
      })
      this.getLoginEnter()
    },
    // 养殖 - 切换
    async getLoginEnter() {
      const res = await LoginEnter({
        id: this.object.id,
        uid: this.object.uid,
        cate: this.object.cate,
        org_id: this.object.org_id
      })
      if (res.status === 1) {
        this.$message({
          type: 'success',
          message: '已切换'
        })
        var token = res.data.token // 暂时
        // 存储
        local.set('token_sd', token)
        local.set('farm_name', this.farm_name)
        location.reload()
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
#nav-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nav-left {
    .icon {
      font-size: 26px;
      color: #606060;
    }
  }
  .nav-right {
    display: flex;
    align-items: center;
    .p-top {
      color: #606060;
      display: flex;
      align-items: center;
    }
    .out {
      cursor: pointer;
    }
  }
}
// 按钮 - 可视化
.el-tag {
  cursor: pointer;
}
</style>
