<template>
  <div>
    <div class="title text-center text-lg py-10">发起活动</div>
    <div class="scroll-controller">
      <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 v-show="isExist" class="text-xs text-app-red">
                {{ name }}已被占用
              </div>
            </div>
            <input
              type="text"
              placeholder="请输入投票标题（限10字）"
              class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
              maxlength="10"
              v-model="form.name"
              @blur="checkName"
            />
          </div>
          <div class="time-picker py-3">
            <app-calendar
              :blockTime="blockTime"
              :blockHeight="blockHeight"
              :value.sync="form.startHeight"
            />
          </div>
          <div class="time-picker py-3">
            <app-calendar
              :blockTime="blockTime"
              :blockHeight="blockHeight"
              :value.sync="form.endHeight"
              title="投票结束时间"
              placeholder="请输入结束区块               当前区块"
            />
          </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="show = true">
              <div class="text-xs">
                {{ times }}
              </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 v-show="!checked" 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">
                {{ num }}人
              </div>
                  <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
                </div>
						</div> -->
          <div class="space h-11"></div>
        </div>
      </div>
      <van-action-sheet v-model="show" description="每人参与次数">
        <div
          v-for="item in actions"
          :key="item.name"
          class="
            w-full
            h-12
            flex
            items-center
            justify-center
            text-white text-sm
          "
          :style="{ background: times === item.name ? '#3832AC' : '#1c1485' }"
          @click="onSelect(item)"
        >
          {{ item.name }}
        </div>
      </van-action-sheet>
      <div class="w-11/12 mx-auto mt-5" @click="submit">
        <app-btn
          text="发起活动"
          size="full"
          border="border-none"
          class="bg-app-blue-3 rounded py-3"
        ></app-btn>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Switch, ActionSheet, Toast, Calendar } from "vant";
import { service } from "@/service/index";
import { TICKET_COUNT } from "@/utils/config";
Vue.use(Switch);
Vue.use(ActionSheet);
Vue.use(Toast);
Vue.use(Calendar);

const baseForm = () => {
  return {
    name: "",
    startHeight: "",
    endHeight: "",
    numType: 2,
  };
};

export default Vue.extend({
  name: "Founder",
  components: {
    "app-icon": () => import("@/components/common/Icon.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
    "app-calendar": () => import("@/components/common/Calendar.vue"),
  },
  data() {
    return {
      form: baseForm(),
      actions: [
        { name: "每天一次", id: 2 },
        { name: "仅一次", id: 1 },
      ],
      show: false, // 参与次数
      times: "每天一次",
      blockHeight: "",
      blockTime: "",
      length: TICKET_COUNT, // 输入框与当前区块差值,当前1天高度86400/5
      isExist: false,
      name: "",
    };
  },
  methods: {
    checkName() {
      if (!this.form.name) return;
      service.checkName(this.form.name).then((res) => {
        if (res.result) {
          this.isExist = false;
        } else {
          this.name = this.form.name;
          this.isExist = true;
        }
      });
    },
    init() {
      this.form = baseForm();
    },
    getBlockHeight() {
      service.getHeight().then((res) => {
        this.blockHeight = res.result.mainHeight;
        this.blockTime = res.result.mainBlockTime;
      });
    },
    onSelect(item: { name: string, id: number }) {
      this.times = item.name;
      this.show = false;
      this.form.numType = item.id
    },
    submit() {
      if (!this.form.name || !this.form.startHeight || !this.form.endHeight) {
        Toast("请先填写表单内容");
        return;
      }
      if (this.isExist) {
        Toast("请确认表单名称正确");
        return;
      }
      const params = JSON.parse(JSON.stringify(this.form));
      params.startHeight = parseInt(params.startHeight);
      params.endHeight = parseInt(params.endHeight);
      // this.$store.commit("app/SET_COMMITTEXT", "发起的活动");
      service.createVote(params, {
        request: { text: '发起的活动' },
        result: { text: '活动' }
      })
    },
    setPerson() {
      this.$router.push("/Initiate/Member");
    },
  },
  mounted() {
    this.getBlockHeight();
  },
  activated() {
    this.init();
    this.getBlockHeight();
  },
});
</script>
<style scoped>
input::placeholder {
  font-size: 0.75rem;
}
.scroll-controller {
  height: calc(100vh - 160px);
  overflow-y: scroll;
}
>>> .van-action-sheet__item,
>>> .van-action-sheet__description {
  background: #1c1485;
  color: #fff;
}
>>> .van-action-sheet__description::after {
  border: none;
}
</style>