<template>
  <child-view>
    <div class="transfer mt-2 mx-4 py-5 px-4 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
      <p class="text-2xl mb-4">权限转让</p>
      <p class="text-sm opacity-60 mb-6">投票组只有管理员能进行投票发起以及成员地址和票数编辑，转让后将失去相应权限，请谨慎进行该操作</p>
      <div class="text-line flex justify-between items-center mb-5">
        <p class="text-sm mb-0">新管理员地址</p>
        <span class="inline-block flex">
          <img class="w-4 h-4 mr-7" src="@/assets/home/scan.png" alt="" @click="scan">
          <img class="w-4 h-4" src="@/assets/home/person.png" alt="">
        </span>
      </div>
      <div>
        <input class="w-full h-10 rounded-lg mb-5 px-3 text-sm text-gray-600 x-input" placeholder="请输入新的管理员地址" v-model="addr" />
      </div>
      <div>
        <button class="w-full h-10 rounded-lg mt-5 mb-5 px-3 bg-app-blue-2 text-lg tracking-widest" @click="transfer">转  让</button>
      </div>
    </div>
  </child-view>
  
</template>

<script lang="ts">
import childView from '@/layouts/childView.vue'
import Vue from 'vue'
import { service } from '@/service/index'
import { Toast } from 'vant'
import { scanQRCode } from '@/utils/bridge'
export default Vue.extend({
  components: { childView },
  data() {
    return {
      addr: ''
    }
  },
  methods: {
    transfer() {
      if (!this.addr) {
        Toast('请输入新的管理员地址')
        return
      }
      service.memberChangeVote({
        voteId: this.$route.query.voteID as string,
        addr: this.addr
      }, () => {
        this.$router.push('/Mine')
      })
      // .then(res => {
      //   console.log(res)
      //   this.$router.push('/Mine')
      // })
    },
    scan() {
      scanQRCode('',(res: any) => {
        this.addr = res
      })
    }
  },
})
</script>

<style scoped>
  .transfer {
    height: calc(100vh - 150px);
  }
</style>