<template>
  <div>
    <div class="title text-center text-lg py-10">发起活动</div>
      <div class="form-contianer w-11/12 rounded-lg mx-auto border border-app-blue-3">
        <div class="form p-3 text-sm">
            <div class="time-picker py-3">
                <div class='flex justify-between'>
                  <div>投票开始时间</div>
                  <div class='flex items-center'>        
                    <span class=" text-xs">{{dateStart}}</span>        
                    <date-pick v-model="dateStart"  class=" self-center" >
                      <template v-slot:default="{toggle}">
                          <div @click="toggle">
                            <app-icon customize type='icon-rili' size='20px'> </app-icon>
                          </div>
                      </template>
                    </date-pick> 
                  </div>
                </div>
                <input type="number" placeholder="请输入开始区块               当前区块3923288" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
            </div>
            <div class="time-picker py-3">
                <div class='flex justify-between'>
                  <div>投票截止时间</div>
                  <div class='flex items-center'>        
                    <span class="  text-xs">{{dateEnd}}</span>        
                    <date-pick v-model="dateEnd" >
                      <template v-slot:default="{toggle}">
                          <div @click="toggle" class="items-center">
                            <app-icon customize type='icon-rili' size='20px'> </app-icon>
                          </div>
                      </template>
                    </date-pick> 
                  </div>
                </div>
                <input type="number" placeholder="请输入开始区块               当前区块3923288" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
            </div>
            <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
              <div>每人参与次数设置</div>
              <div class="flex items-center cursor-pointer" @click="pickToggle">
                <div class=" text-xs">
                  每天一次
                </div>
                    <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
                 </div>
            </div>

            <div class="cell flex justify-between items-center py-2 ">
              <div>是否公开投票</div>
              <van-switch v-model="checked" size="18px"/>
            </div>
            <div class="space h-11"></div>
        </div>
      </div>
      <div class="w-11/12 mx-auto mt-5">
        <app-btn text='发起活动' size="full" border='border-none' class=" bg-app-blue-3 rounded py-3"></app-btn>
      </div>
  </div>
</template>

<script lang="ts">
import DatePick from 'vue-date-pick';
import Vue from "vue";
import 'vue-date-pick/dist/vueDatePick.css';
import { Switch } from 'vant';

Vue.use(Switch);
export default Vue.extend({
  components:{
    DatePick,
    "app-icon":()=>import('@/components/common/Icon.vue'),
    "app-btn":()=>import('@/components/common/Btn.vue')
  },
  data() {
    return {
       dateStart: '2019-01-01',
       dateEnd:'2019-02-02',
       checked:true
    };
  },
  methods:{
    pickToggle(){
      console.log(2222);
      
    }
  }

});
</script>
<style scoped>
input::placeholder{
  font-size: 0.75rem;
}
</style>