<template>
  <n-drawer
    to="#main"
    :show="show"
    :on-update:show="closeDrawer"
    width="2.8rem"
    :mask-closable="false"
  >
    <n-drawer-content title="党建活动" closable>
      <div class="content">
        <div class="head">
          <p>活动日期</p>
          <n-button
            color="#dd505e"
            text-color="#fff"
            size="tiny"
            @click="showModal"
          >
            活动录入
          </n-button>
        </div>
        <div class="date">
          <div class="name">
            <p>起始日期</p>
            <p>截止日期</p>
          </div>
          <n-date-picker
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="small"
            separator="至"
            type="daterange"
          />
        </div>
        <div class="list">
          <div v-for="(item, i) in list" :key="i">
            <div class="title">
              <p>{{ item.title }}</p>
              <span>
                地图显示
                <n-switch v-model:value="item.onMap" size="small">
                  <template #checked>
                    <n-icon size=".1rem">
                      <Checkmark />
                    </n-icon>
                  </template>
                  <template #unchecked>
                    <n-icon size=".1rem">
                      <Close />
                    </n-icon>
                  </template>
                </n-switch>
              </span>
            </div>
            <div class="sum">
              <div>
                <m-count class="count" :value="item.count" /> <span>次</span>
                <p>举办次数</p>
              </div>
              <div>
                <m-count class="count" :value="item.people" /> <span>人次</span>
                <p>参与人次</p>
              </div>
              <div>
                <m-count class="count" :value="item.ratio" /> <span>%</span>
                <p>出席率</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
  <ActivityListModal />
</template>

<script lang="ts" setup>
import store from '@/store'
import { computed, ref } from 'vue'
import { Checkmark, Close } from '@vicons/ionicons5'
import ActivityListModal from './activity-list-modal.vue'

const show = computed(() => store.state.showActivityDrawer)
const closeDrawer = () => {
  store.commit('SET_ACTIVITY_DRAWER', false)
  store.commit('SET_SHOW_BASIC_INFO', true)
}
const list = ref([
  { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
  { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
  {
    title: '楼组党建相关会议',
    count: 35,
    people: 890,
    ratio: 50,
    onMap: false,
  },
  { title: '党课', count: 35, people: 890, ratio: 50, onMap: false },
  { title: '主题党日活动', count: 35, people: 890, ratio: 50, onMap: false },
])

const showModal = () => {
  store.commit('SET_SHOW_BASIC_INFO', false)
  store.commit('SET_ACTIVITY_LIST_MODAL', true)
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
  display flex
  flex-direction column
  .head
    padding 0 .12rem
    $flex-align()
    justify-content space-between
    font-family $font-ping-medium
    margin .1rem 0
  .date
    padding 0 .1rem .1rem
    border-bottom .01rem solid $light-gray
    .name
      display flex
      >p
        flex 1
        color $font
        padding-left .02rem
  .list
    flex 1
    background #f7f7f7
    padding .08rem
    >div
      border-radius .04rem
      background #fff
      box-shadow 0 .02rem .06rem 0 rgba(0,0,0,0.1)
      padding .05rem .08rem
      box-sizing border-box
      margin-bottom .1rem
      .title
        $flex-align()
        justify-content space-between
        margin .05rem 0
        p
          font-family $font-ping-medium
        span
          font-size .08rem
          color $font
      .sum
        $flex-align()
        justify-content space-between
        margin .03rem 0
        >div
          width 32%
          border .01rem solid $light-gray
          border-radius .04rem
          padding .03rem .01rem .03rem .08rem
          box-sizing border-box
          .count
            color $red
            font-family $font-din
            font-size .14rem
            margin-right .03rem
          span
            font-size .08rem
          p
            color $font
            font-size .09rem
</style>
<style lang="stylus">
.n-date-picker
  .n-input
    background #f9fafb
</style>
