<template>
  <div class="management">
    <van-nav-bar title="用户列表" left-arrow @click-left="onNavBack">
      <van-icon name="friends-o" slot="right" v-show="show" id="friends-o" @click="onIconClick" />
    </van-nav-bar>
    <div class="management-con">
      <van-cell v-for="(item, index) in listData" :key="`management_${index}`">
        <img :src="item.imagePath" />
        <div class="con">
          <span class="cell">
            {{ item.relationName }}
            <i>（{{ item.userName }}）</i>
          </span>
          <span>{{ item.userMobile }}</span>
        </div>
        <em v-show="item.bindType == 0">（管理员）</em>
      </van-cell>
    </div>
  </div>
</template>

<script>
import APIUser from '@/api/user';
export default {
  data() {
    return {
      listData: [],
      show: false
    };
  },
  methods: {
    // 返回
    onNavBack() {
      this.$router.push({ name: 'Myself' });
    },
    getListData() {
      /* let url = `/api/User/AdminList`;
        let jsonData = {
          deviceId: this.$store.getters.deviceId
        }; */
      /* this.$axios
          .post(url, jsonData) */
      APIUser.getAdminList({
        deviceId: this.$store.getters.deviceId
      })
        .then(res => {
          console.log(res.data);
          let item = res.data;
          this.listData = item.adminList;
          item.adminList.forEach(val => {
            if (val.userId == this.$store.getters.userId && val.bindType == 0) {
              this.show = true;
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    onIconClick() {
      this.$router.push({ name: 'replace' });
    }
  },
  created() {
    this.getListData();
  }
};
</script>

<style lang="scss" scoped>
i#friends-o {
  color: #2599ff !important;
  font-size: 48px !important;
}
.management {
  position: relative;
  .management-con {
    position: relative;
    height: calc(100vh - 160px);
    overflow: scroll;
    .van-cell {
      position: relative;
      width: 100%;
      height: 60px;
      align-items: center;
      padding: 0 16px;
      box-sizing: border-box;
      background-color: #fff;

      &:after {
        content: '';
        @include border();
      }

      &:nth-child(2) {
        margin-top: 20px;
      }

      &:not(:last-child):after {
        left: 0;
        border-color: $border_color;
      }

      i {
        font-size: 16px;
      }

      .van-cell__value {
        display: flex;
        align-items: center;
        height: 100%;
        position: relative;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 15px;
          object-fit: cover;
        }

        .con {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-flow: column;

          span {
            @include colorAndFont(#999, 20);
            line-height: 1;

            &.cell {
              @include colorAndFont(#333, 17);
              margin-bottom: 7px;

              &.mbnone {
                margin-bottom: 0;
              }

              i {
                margin-left: -14px;
                font-style: normal;
                @include colorAndFont(#999, 17);
              }
            }
          }
        }

        input[type='text'] {
          position: absolute;
          right: 0;
          display: flex;
          width: 200px;
          height: 70px;
          @include colorAndFont(#999, 28);
          text-align: right;
        }
        input[type='number'] {
          position: absolute;
          right: 0;
          display: flex;
          width: 200px;
          height: 70px;
          @include colorAndFont(#999, 28);
          text-align: right;
        }
        input[type='tel'] {
          position: absolute;
          right: 0;
          display: flex;
          width: 200px;
          height: 70px;
          @include colorAndFont(#999, 28);
          text-align: right;
        }

        .van-switch {
          position: absolute;
          right: 0;
        }

        em {
          font-style: normal;
          position: absolute;
          right: 0;
          @include colorAndFont(#999, 18);

          &.fs30 {
            font-size: 30px;
            margin-right: 24px;
            color: red;
            span {
              color: #000;
              margin-right: 20px;
            }
          }

          &.circle {
            width: 32px;
            height: 32px;
            border: 2px solid #bfbfbf;
            border-radius: 50%;
            position: absolute;
            right: 15px;

            &.on {
              border-color: $green;

              &:before {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 20px;
                height: 20px;
                background: $green;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
    .tips-container {
      padding: 20px;
      p {
        font-size: 32px;
        color: red;
        margin: 20px;
        line-height: 55px;
      }
    }

    .submit {
      @include flexbox(flex-end, center, column, nowrap);
      flex-flow: column;
      padding: 0 40px;
      position: absolute;
      left: 0;
      bottom: 82px;

      a {
        @include flexbox(flex-end, center, column, nowrap);
        margin-bottom: 40px;
        width: 578px;
        height: 88px;
        background: $next;
        color: #fff;
        font-size: 17px;
        border-radius: 10px;

        &.next {
          background: $green;
        }
      }
    }
  }
}
</style>
