<template>
  <child-view>
    <div class="mine-edit mt-2 mx-4 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg px-4">
      <p class="text-2xl">我的投票编辑</p>
      <!-- <div class="text-line flex justify-between items-center" @click="goPermission">
        <p class="text-sm">权限转让</p>
        <span class="inline-block">
          <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
        </span>
      </div> -->
      <div class="text-line flex justify-between items-center" @click="restart">
        <p class="text-sm">重新发起投票</p>
        <span class="inline-block">
          <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
        </span>
      </div>
      <div class="text-line flex justify-between items-center">
        <p class="text-sm">关闭投票</p>
        <!-- <span class="inline-block"> -->
          <van-switch v-model="checked" size="18px" @change="changeHandle"/>
        <!-- </span> -->
      </div>
    </div>
  </child-view>
</template>

<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
import { Switch, Dialog } from 'vant';
import ChildView from '@/layouts/childView.vue';
import { service } from '@/service/index'
Vue.use(Switch);
Vue.use(Dialog);
export default Vue.extend({
  components: {
    AppIcon,
    ChildView
  },
  data() {
    return {
      checked: false
    }
  },
  methods: {
    goPermission() {
      this.$router.push({path: '/Mine/Transfer', query: this.$route.query})
    },
    changeHandle(v: boolean) {
      if (!v) return
      Dialog.confirm({
        title: '提示',
        message: '确认关闭当前投票项目？',
      }).then(() => {
        this.checked = true
        this.closeVote()
        // on confirm
      }).catch(() => {
        this.checked = false
        // on cancel
      });
    },
    restart() {
      Dialog.confirm({
        title: '提示',
        message: '重新发起后，将会产生新的投票项目，当前发起的投票项目如果不用，建议关闭当前投票。',
      }).then(() => {
        this.$router.push({path: '/Mine/MyInitiate', query: this.$route.query})
        // on confirm
      }).catch(() => {
        // on cancel
      });
    },
    closeVote() {
      service.memberCloseVote({
        voteId: this.$route.query.voteID as string
      }, () => {
        this.$router.push('/Mine')
      })
      // .then(res => {
      //   console.log(res)
      // })
    }
  },
  watch: {
    $route(n, o) {
      if (n.path.indexOf('/MineEdit') <= -1) return
      if (n.query.voteID !== o.query.voteID) {
        this.checked = false
      }
    }
  },
  created() {
    this.$store.commit('app/CLEAR_FORM')
  }
})
</script>

<style scoped>
  p {
    margin-bottom: 0;
  }

  .mine-edit {
    height: calc(100vh - 80px);
  }

  .text-line {
    height: 60px;
    border-bottom: 1px solid #35379F;
  }
</style>