<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';
Vue.use(Switch);
Vue.use(Dialog);
export default Vue.extend({
  components: {
    AppIcon,
    ChildView
  },
  data() {
    return {
      checked: true
    }
  },
  methods: {
    goPermission() {
      this.$router.push('/Mine/Transfer')
    },
    changeHandle(v: boolean) {
      if (!v) return
      Dialog.confirm({
        title: '提示',
        message: '确认关闭当前投票项目？关闭后，你的投票项目数据将清空。',
      }).then(() => {
        this.checked = true
        // on confirm
      }).catch(() => {
        this.checked = false
        // on cancel
      });
    },
    restart() {
      Dialog.confirm({
        title: '提示',
        message: '重新发起后，将会产生新的投票项目，当前发起的投票项目如果不用，建议关闭当前投票。',
      }).then(() => {
        this.$router.replace('/Mine/MyInitiate')
        // on confirm
      }).catch(() => {
        // on cancel
      });
    }
  }
})
</script>

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

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

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