<template>
  <div class="h-full">
    <div v-if="members.length > 0" class="p-4">
      <p class="text-sm flex items-center justify-between">
        <span>
          投票成员
        </span>
        <van-uploader v-if="tab === 2">
          <div class="flex items-center">
            <app-icon customize size="16px" type='icon-shangchuan' />
            <span>
              重新上传
            </span>
          </div>
        </van-uploader>
      </p>
      <ul>
        <li
          v-for="(item, index) in members"
          :key="index"
          class="mb-3 px-3 py-3 border border-app-blue-3 border-solid rounded-lg">
          <div class="flex justify-between items-center">
            <p class="mb-0 text-sm">{{ item.name }}</p>
            <div class="flex items-center">
              <!-- <div class="pb-0.5" @click="showEdit(item, index)">
                <app-icon customize size="16px" color="#6870F1" type='icon-bianji'></app-icon>
              </div> -->
              <div class="pt-0.5" @click="delItem(item, index)">
                <app-icon customize size="24px" color="#BF463D" type='icon-delete-s'></app-icon>
              </div>
            </div>
          </div>
          <p class="text-xs opacity-60 mb-0 mt-2 break-all tracking-tight">{{ item.addr }}</p>
        </li>
      </ul>
      <button class="w-full mt-5 py-2 text-xs flex items-center justify-center border border-app-blue-3 border-solid rounded-lg" @click="showDialog">
        <img class="w-4 mr-4" src="@/assets/add.png" alt="">
        添加人员
      </button>
    </div>
    <div v-else class="h-full flex flex-col items-center justify-center">
      <template v-if="tab === 1">
        <img class="w-32" src="@/assets/none.png" alt="">
        <p class="text-sm text-center">暂无成员信息！</p>
        <button class="flex items-center px-4 py-2 text-sm border border-app-blue-3 border-solid rounded-lg" @click="showDialog">
          <img class="w-4 mr-4" src="@/assets/add.png" alt="">
          添加人员
        </button>
      </template>
      <template v-else>
        <button class="flex flex-col items-center px-6 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg" @click="downloadModel">
          <app-icon customize size="20px" type='icon-xiazai'></app-icon>
          <span class="inline-block mt-1 text-sm">模板下载</span>
        </button>
        <p class="text-xs mt-3 mb-10">仅支持xlsx格式文件</p>
        <van-uploader >
          <button class="flex flex-col items-center px-6 py-5 border border-app-blue-3 border-solid rounded-lg">
            <app-icon customize size="20px" type='icon-shangchuan'></app-icon>
            <span class="inline-block mt-1 text-sm">上传表格</span>
          </button>
        </van-uploader>
        <p class="text-xs mt-3">仅支持xlsx格式文件</p>
      </template>
    </div>
    <van-dialog v-model="show" title="添加成员" @confirm="confirm">
      <div class="px-4 mt-9">
        <div class="flex items-center justify-between text-sm">
          <p class="mb-0 text-black font-medium">成员地址</p>
          <div class="flex items-center">
            <p class="mb-0 mr-2 text-black text-xs mr-5">我的地址</p>
            <img class="w-4 h-4 mr-5" src="@/assets/sc1.png" alt="" @click="scan">
            <img class="w-4 h-4" src="@/assets/per1.png" alt="">
          </div>
        </div>
        <div class="w-full mt-5 mb-5">
          <input class="w-full h-6 leading-6 border-0 border-b-1 border-black text-xs text-black" type="text" placeholder="请输入bty地址" v-model="address" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
import { Dialog, Toast, Uploader } from 'vant'
import { scanQRCode } from '@/utils/bridge'
// import { service } from '@/service/index'
Vue.use(Dialog)
Vue.use(Uploader)
export default Vue.extend({
  components: {
    AppIcon,
    
  },
  data() {
    return {
      show: false,
      address: '',
      type: 'add',
      num: 0
    }
  },
  props: {
    tab: {
      type: Number,
      default: 1
    }
  },
  computed: {
    members() {
      return this.$store.state.app.members
    }
  },
  methods: {
    showDialog() {
      this.show = true
      this.type = 'add'
      this.init()
    },
    init() {
      this.address = ''
    },
    scan() {
      scanQRCode('',(res: any) => {
        // console.log('res', res)
        this.address = res
      })
    },
    delItem(o: any, i: number) {
      this.$store.commit('app/REMOVE_MEMBER', i)
      // console.log(this.$store.state)
    },
    downloadModel() {
    },
    confirm() {
      if (!this.address) {
        Toast('请输入成员地址')
        return
      }
      const params = {
        name: '成员地址',
        addr: this.address
      }
      this.$store.commit('app/ADD_MEMBER', params)
      // if (this.type === 'add') {
      //   const that = this as any
      //   service.addMember(params, function(v: any) {
      //     console.log(v)
      //     that.$store.commit('app/HIDE_LOADING')
      //     that.$store.commit('app/SET_RES')
      //     if (v.data.result.receipt.ty === 1) {
      //       // Toast('失败')
      //       that.$store.commit('app/SET_TYPE', 2)
      //       that.$store.commit('app/SET_RESULT', v.data.result.receipt.logs[0].log)
      //     } else {
      //       // Toast('成功')
      //       that.$store.commit('app/SET_TYPE', 1)
      //       that.$store.commit('app/ADD_MEMBER', params)
      //     }
      //   })
      // }
    }
  },
})
</script>

<style scoped>
  >>> .van-dialog__header {
    color: #000;
  }
</style>