<template>
  <van-popup v-model="isShow" position="right" :style="{ width: '70%', height: '100%'}" @click-overlay="close">
    <div class="relative w-full h-full overflow-hidden">
      <div class="content px-5 pt-10 overflow-x-hidden">
        <h4 class="font-bold text-3xl mb-9">筛选</h4>
        <div>
          <div class="text-sm text-gray-400 mb-4">项目信息</div>
          <div class="flex flex-wrap text-black w-full">
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': isActive === 1}"
              @click="setType(1)">全部</div>
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': isActive === 2}"
              @click="setType(2)">我的提案</div>
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': isActive === 3}"
              @click="setType(3)">他人的提案</div>
          </div>
        </div>
        <div class="mt-12">
          <div class="text-sm text-gray-400 mb-4">提案状态</div>
          <div class="flex flex-wrap text-black w-full">
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': status === 1}"
              @click="setStatus(1)">未开始</div>
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': status === 2}"
              @click="setStatus(2)">投票中</div>
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': status === 3}"
              @click="setStatus(3)">已结束</div>
            <div
              class="list-50 w-filterWidth h-9 leading-9 mb-3 bg-gray-200 text-center text-sm flex-shrink-0"
              :class="{'active': status === 4}"
              @click="setStatus(4)">已关闭</div>
          </div>
        </div>
      </div>
      <div class="absolute bottom-0 left-0 w-full text-sm text-black border-0 border-t border-gray-200 border-solid bg-white">
        <button class="w-1/2 h-12 leading-12 text-center border-0 border-r border-gray-200 border-solid" @click="cancel">取消</button>
        <button class="w-1/2 h-12 leading-12 text-center" @click="submit">确定</button>
      </div>
    </div>
  </van-popup>
</template>

<script lang="ts">
import Vue from 'vue'
import { Popup } from 'vant'
Vue.use(Popup)
export default Vue.extend({
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: this.show,
      isActive: 1,
      status: 0
    }
  },
  methods: {
    setType(n: number) {
      this.isActive = n
    },
    setStatus(n: number) {
      if (this.status === n) {
        this.status = 0
      } else {
        this.status = n
      }
    },
    cancel() {
      this.$emit('cancel', true)
    },
    submit() {
      this.$emit('filterList', { status: this.status, type: this.isActive })
    },
    close() {
      this.$emit('cancel', true)
    },
    clear() {
      this.status = 0
      this.isActive = 1
    }
  },
  watch: {
    show(v: boolean) {
      this.isShow = v
    }
  }
})
</script>

<style scoped>
  .list-50:nth-of-type(2n) {
    margin-right: 0;
  }
  .list-50:nth-of-type(2n - 1) {
    margin-right: 10%;
  }
  .active {
    background: #666EED;
    color: #fff
  }
  .content {
    height: calc(100% - 40px);
  }
</style>