<template>
  <div class="replace">
    <div class="management oh_100vh_bgColor">
      <van-nav-bar title="管理员转让" left-arrow @click-left="$router.push({ name: 'management' })" />
      <div class="management-con">
        <van-cell v-for="(item, index) in listData" :key="`list_data_${index}`" @click="listClick(index, item.userId)">
          <img :src="item.imagePath" />
          <div class="con">
            <span class="cell">
              {{ item.relationName }}
              <i v-show="item.userName != ''">（{{ item.userName }}）</i>
            </span>
            <span>{{ item.userMobile }}</span>
          </div>
          <em :class="[{ on: index == active }, 'circle']"></em>
        </van-cell>
        <div class="submit">
          <div class="btn" :class="[{ next: blueClass }]" @click="onSubmitClick">转让管理员</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DialogService from '../../services/dialog-service';
import ToastService from '../../services/toast-service';
export default {
  data() {
    return {
      active: -1,
      listData: [],
      mainUserId: '',
      viceUserId: ''
    };
  },
  methods: {
    getUsersList() {
      let url = `/api/User/AdminList`;
      let jsonData = {
        deviceId: this.$store.getters.deviceId
      };
      this.$axios
        .post(url, jsonData)
        .then(res => {
          console.log(res);
          let item = res.data;
          let newData = [];
          newData = item.adminList;

          newData.forEach((val, index) => {
            if (val.bindType == 0) {
              this.active = index;
              this.mainUserId = val.userId;
            }
          });

          this.listData = newData;
        })
        .catch(() => {});
    },
    listClick(index, id) {
      this.active = index;
      this.viceUserId = id;
    },
    onSubmitClick() {
      if (!this.listData || this.listData.length == 1) {
        DialogService.confirm({
          title: '当前账号已是主管理员'
        });
      } else {
        DialogService.confirm({
          title: '转让管理员',
          message: '是否确定转让管理员？',
          confirmButtonText: '转让管理员',
          showCancelButton: true
        })
          .then(() => {
            if (this.mainUserId == this.viceUserId || this.viceUserId == '') {
              DialogService.confirm({
                title: '当前账号已是主管理员'
              });
            } else {
              let url = `/api/User/AdminTransfer`;
              let jsonData = {
                deviceId: this.$store.getters.deviceId,
                mainUserId: this.mainUserId,
                viceUserId: this.viceUserId
              };
              this.$axios
                .post(url, jsonData)
                .then(res => {
                  let item = res.data;
                  console.log(item);
                  if (item.stateCode == 0) {
                    DialogService.confirm({
                      title: item.message
                    });
                  } else {
                    ToastService.clear();
                    ToastService.success({
                      message: '转让成功'
                    });
                  }
                })
                .catch(() => {});
            }
          })
          .catch(() => {});
      }
    }
    /*  dialog(message) {
        this.$dialog.confirm({
          title: message,
          className: "device_confirm",
          confirmButtonColor: "#3296fa",
          cancelButtonColor: "#999",
          overlayStyle: { backgroundColor: "rgba(0,0,0,.5)" },
          showCancelButton: false
        });
      } */
  },
  computed: {
    blueClass() {
      return this.listData && this.listData.length != 1;
    }
  },
  created() {
    this.getUsersList();
  }
};
</script>
<style lang="scss" scoped>
i#friends-o {
  color: #2599ff !important;
  font-size: 48px !important;
}
.replace {
  .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, 16);

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

            &.circle {
              width: 20px;
              height: 20px;
              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: 16px;
                  height: 16px;
                  background: $green;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
      .tips-container {
        padding: 20px;
        p {
          font-size: 32px;
          color: red;
          margin: 20px;
          line-height: 55px;
        }
      }

      .submit {
        @include center();
        padding: 0 80px;
        position: absolute;
        left: 0;
        bottom: 82px;
        .btn {
          @include center();
          width: 578px;
          height: 88px;
          background: $next;
          color: #fff;
          font-size: 36px;
          border-radius: 10px;

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