<template>
  <div class="c-activity flex flex-col">
    <h5 class="text-center text-lg font-medium pt-2 pb-3">发动活动</h5>
    <div class="flex-grow mx-4 py-5 px-4 rounded-xl border border-app-blue-3 border-solid">
      <div class="flex justify-between items-center pb-2.5">
        <p class="text-sm font-medium">投票开始时间</p>
        <div class="flex items-center">
          ≈
          <span class="inline-block px-1">{{0}}</span>
          月
          <span class="inline-block px-1">{{0}}</span>
          日
          <img class="w-4 h-4 flex-shrink-0 ml-2" src="@/assets/home/date-icon.png" alt="" />
        </div>
      </div>
      <div class="relative">
        <Input
          class="w-full h-10 rounded-lg text-sm px-3 text-gray-600"
          type="text"
          placeholder="请输入开始区块"
          @focus="startShow = false"
          @blur="startShow = true"
          v-model="activityForm.start" />
        <p v-show="startShow" class="absolute right-3 top-1/2 z-50 text-gray-400 text-sm transform -translate-y-1/2">当前区块 345678</p>
      </div>
      <div class="flex justify-between items-center py-2.5">
        <p class="text-sm font-medium">投票结束时间</p>
        <div class="flex items-center">
          ≈
          <span class="inline-block px-1">{{0}}</span>
          月
          <span class="inline-block px-1">{{0}}</span>
          日
          <img class="w-4 h-4 flex-shrink-0 ml-2" src="@/assets/home/date-icon.png" alt="" />
        </div>
      </div>
      <div class="relative">
        <Input
          class="w-full h-10 rounded-lg text-sm px-3 text-gray-600"
          type="text"
          placeholder="请输入结束区块"
          @focus="endShow = false"
          @blur="endShow = true"
          v-model="activityForm.end" />
        <p v-show="endShow" class="absolute right-3 top-1/2 z-50 text-gray-400 text-sm transform -translate-y-1/2">当前区块 345678</p>
      </div>
      <div class="flex justify-between items-center py-2.5">
        <p class="text-sm font-medium">每人参与次数设置</p>
        <div class="flex items-center" @click="show">
          {{ joinTimes }}
        </div>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-sm font-medium">是否公开投票</p>
        <div class="flex items-center">
          <!-- <Switch @change="changeHandle" /> -->
        </div>
      </div>
    </div>
    <div class="mx-4">
      <btn text="发起活动" />
    </div>
  </div>
</template>

<script lang="ts">
import Btn from '@/components/common/Btn.vue'
import { Input } from 'ant-design-vue'
import Vue from 'vue'
export default Vue.extend({
  components: {
    Btn,
    Input
  },
  data() {
    return {
      activityForm: {
        start: '',
        end: '',
        isPublic: true
      },
      startShow: true,
      endShow: true,
      joinTimes: '每天一次'
    }
  },
  methods: {
    show() {

    },
    changeHandle(v:boolean) {
      console.log(v)
    }
  }
})
</script>

<style scoped>
  .c-activity {
    height: calc(100vh - 65px);
  }
</style>