<template>
  <div>
    <div v-if="showTitle" class="title text-center text-lg py-6">发起活动</div>
    <div class="scroll-controller" :style="{ height: !showTitle? 'calc(100vh - 90px)' : ''}">
    <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="input py-3">
            <div class="flex justify-between">
                <div class="inpu-title">什么什么</div>
                <div class=" text-xs text-app-red">validation</div>
            </div>
              <input type="text" placeholder="请输入" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
          </div>
          <div class="input py-3">
            <div class="flex justify-between">
                <div class="inpu-title">什么什么</div>
                <div class=" text-xs text-app-red">validation</div>
            </div>
              <textarea type="text" placeholder="请输入"  maxlength="500" rows="2"  cols="50"   class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" />
          </div>
          <div class="input py-3">
            <div class="flex justify-between">
                <div class="inpu-title">什么什么</div>
                <div class=" text-xs text-app-red">validation</div>
            </div>
              <input type="text" placeholder="请输入" class="w-full text-sm app py-2 px-3 mt-2 rounded text-app-blue-1">
          </div>
          <app-option ref="optionEl"></app-option>
          <div class="space py-2"></div>
      </div>
    </div>
      <div class="form-contianer w-11/12 mt-3 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 opacity-60">
                每天一次
              </div>
                <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
              </div>
          </div>

          <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
            <div>是否公开投票</div>
            <van-switch v-model="checked" size="18px"/>
          </div>

          <div class="cell flex justify-between items-center py-2 ">
            <div>成员数设置</div>
            <div class="flex items-center cursor-pointer" @click="setPerson">
              <div class=" text-xs opacity-60">
                3人
              </div>
                  <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
                </div>
          </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" @btnClicked="checkSomething"></app-btn>
    </div>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script lang="ts">

import Vue from "vue";
import 'vue-date-pick/dist/vueDatePick.css';
import { Switch, Dialog, ActionSheet } from 'vant';
import DatePick from 'vue-date-pick';
Vue.use(Switch);
// Vue.use(Dialog);
Vue.use(ActionSheet);
export default Vue.extend({
  props: {
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dateStart: '2019-01-01',
      dateEnd:'2019-02-02',
      checked:true,
      actions: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ],
      show: false
    };
  },
  components:{
     DatePick,
    "app-btn":()=>import('@/components/common/Btn.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'app-option':()=>import('@/components/common/Option.vue'),
  },
  methods:{
    checkSomething(){
      const optionEl = this.$refs.optionEl as Vue
      console.log(optionEl.$data.value);
      Dialog.confirm({
        title: '提示',
        message: '提案项目发起后不可修改，并将扣除 0.02 BTY作为燃料费,是否确认发起投票？',
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
      // this.$router.push('/Initiate/Member')
    },
    setPerson() {
      this.$router.push('/Initiate/Member')
    },
    pickToggle(){
      console.log(2222);
      this.show = true
    },
    onSelect() {

    }
  },
  mounted() {
    console.log(this)
  }
});
</script>
<style scoped>
.scroll-controller {
    height: calc(100vh - 160px) ;
    overflow-y: scroll;
}
</style>