<template>
  <div class="usermanage">
    <div class="content">
      <div
        class="card"
        v-for="(item, index) in list"
        :key="index"
        @click="jump(item)"
      >
        <van-swipe-cell right-width="200px;">
          <div class="top">
            <div class="name">{{ item.name }}</div>
            <van-button
              class="btn1"
              size="small"
              color="#FF8900"
              v-if="item.userType == 0"
              >默认用户</van-button
            >
          </div>
          <div class="user">
            <img class="icon" src="./images/home_icon.png" alt="" />
            <div class="num">用户号：{{ item.consNo }}</div>
          </div>
          <div class="add">
            <img class="icon" src="./images/address_icon.png" alt="" />
            <div class="address">{{ item.address }}</div>
          </div>
          <template #right>
            <van-button
              square
              color="#FF8900"
              style="height: 100%"
              text="设为默认"
              v-if="item.userType == 1"
              @click="change(item)"
            />
            <van-button
              square
              color="#EB4E3F"
              style="height: 100%"
              text="解绑"
              @click="unbound(item)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div class="button">
      <van-button
        class="operation"
        color="#EB4E3F"
        size="large"
        @click="newUser"
        >绑定新用户</van-button
      >
      <div class="safe-area"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Dialog, SwipeCell, Toast } from "vant";
import { queryListUser, userUnBind, defaultUserBind } from "@/api/rqfy.js";
Vue.use(Button).use(Dialog).use(SwipeCell).use(Toast);
export default {
  name: "usermanage",
  data() {
    return {
      list: [],
      userInfo: {},
    };
  },
  created() {
    if (window.android !== undefined) {
      const res = window.android.getUserInfo(); // 这是一个json字符串
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    } else if (window.webkit) {
      window.webkit &&
        window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
    } else {
      this.$toast("请先登录镇合意app");
    }
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    this.init();
  },
  methods: {
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      this.init();
    },
    init() {
      let params = {
        uid: this.userInfo.userId,
        appId: 1234,
      };
      queryListUser(params).then((res) => {
        if (res && res.length > 0) {
          this.list = res;
        } else {
          this.$router.replace({ name: "RqfyIndex" });
        }
      });
    },
    // 切换默认用户
    change(val) {
      console.log(val);
      Dialog.confirm({
        title: "切换默认用户",
        message: "确认切换默认用户吗?",
      })
        .then(() => {
          let params = {
            id: val.id,
            uid: this.userInfo.userId,
            consNo: val.consNo,
          };
          defaultUserBind(params).then((res) => {
            console.log(res);
            this.init();
          });
        })
        .catch(() => {
          Toast("取消切换");
        });
    },
    // 解绑用户
    unbound(val) {
      Dialog.confirm({
        title: "解绑",
        message: "确认解绑该用户吗?",
      })
        .then(() => {
          let params = {
            id: val.id,
            appId: 1234,
            uid: this.userInfo.userId,
          };
          userUnBind(params).then((res) => {
            console.log(res);
            this.init();
          });
        })
        .catch(() => {
          Toast("取消解绑");
        });
    },
    // 绑定新用户
    newUser() {
      this.$router.replace({ name: "RqfyIndex",query: {type:this.$route.query.type} });
    },
    jump(item) {
      if (this.$route.query.type == 1) {
        this.$router.replace({
          name: "Payrecord",
          query: { data: item, type: 1 },
        });
      }
      if (this.$route.query.type == 2) {
        this.$router.replace({
          name: "Recharge",
          query: { data: item, type: 2 },
        });
      }
      if (this.$route.query.type == 3) {
        this.$router.replace({
          name: "Repair",
          query: { data: item, type: 3 },
        });
      }
      if (this.$route.query.type == 4) {
        this.$router.replace({
          name: "Check1",
          query: { data: item, type: 4 },
        });
      }
      if (this.$route.query.type == 5) {
        this.$router.replace({
          name: "Fire",
          query: { data: item, type: 5 },
        });
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.usermanage {
  height: 100vh;
  overflow: auto;

  .content {
    padding: 0 30px;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100vh - 120px);
    overflow-y: auto;

    .card {
      width: 690px;
      height: 250px;
      margin-top: 20px;
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid #DDDDDD;
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;

        .name {
          width: 140px;
          font-size: 40px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }
      }

      .user {
        display: flex;
        align-items: center;

        img {
          width: 32px;
          height: 32px;
          margin-right: 15px;
        }

        .num {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }

      .add {
        display: flex;
        align-items: center;
        margin-top: 20px;

        img {
          width: 32px;
          height: 32px;
          margin-right: 15px;
        }

        .address {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .button {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0px;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>