<template>
  <n-modal
    :show="show"
    :on-update:show="close"
    :mask-closable="false"
    style="width: 98vw; transform: translateY(4%)"
    preset="card"
    title="党建活动录入"
  >
    <div class="content">
      <div id="activity-filter">
        <n-form
          :model="model"
          label-placement="left"
          label-width="1rem"
          size="small"
          inline
        >
          <n-form-item label="活动日期区间" path="dateRange">
            <n-date-picker
              v-model:value="model.dateRange"
              start-placeholder="请选择日期"
              end-placeholder="请选择日期"
              size="small"
              separator="至"
              type="daterange"
            />
          </n-form-item>
          <n-form-item label="出席率区间" path="rateStart">
            <n-input-number
              v-model:value="model.rateStart"
              :show-button="false"
              size="small"
              :min="0"
              :max="model.rateEnd || 100"
            >
              <template #suffix>%</template>
            </n-input-number>
          </n-form-item>
          <span class="dot">- </span>
          <n-form-item path="rateEnd">
            <n-input-number
              v-model:value="model.rateEnd"
              size="small"
              :show-button="false"
              :min="model.rateStart || 0"
              :max="100"
            >
              <template #suffix>%</template>
            </n-input-number>
          </n-form-item>
          <n-form-item label="标签类别" path="type">
            <n-select
              v-model:value="model.type"
              size="small"
              :options="typeOptions"
            />
          </n-form-item>
          <n-form-item>
            <n-button
              color="#dd505e"
              text-color="#fff"
              @click="openNewDrawer(null)"
            >
              <n-icon size=".1rem">
                <Add />
              </n-icon>
              新增活动
            </n-button>
          </n-form-item>
        </n-form>
      </div>
      <div class="list">
        <n-data-table
          class="activity-table"
          :columns="columns"
          :data="activityList"
          :pagination="pagination"
          size="small"
        />
      </div>
    </div>
  </n-modal>
  <n-modal
    v-model:show="deleteConfirm"
    preset="dialog"
    title="操作确认"
    content="请确认是否删除?"
    @positive-click="sureToDelete"
  >
    <template #action>
      <n-space>
        <div class="btn cancel" @click="deleteConfirm = false">取消</div>
        <div class="btn sure" @click="sureToDelete">确定</div>
      </n-space>
    </template>
  </n-modal>
  <NewActivityDrawer :data="activityData" />
</template>

<script lang="ts" setup>
import store from '@/store'
import { computed, ref, h } from 'vue'
import NewActivityDrawer from './new-activity-drawer.vue'
import { Add } from '@vicons/ionicons5'
import { NButton, NTag, useMessage } from 'naive-ui'
import { activity } from '@/util/tags'

const message = useMessage()

const show = computed(() => store.state.showActivityListModal)
const close = (val: boolean) => {
  store.commit('SET_ACTIVITY_LIST_MODAL', val)
  store.commit('SET_SHOW_BASIC_INFO', true)
}
const model = ref({})
const typeOptions = [
  { label: '类型1', value: 'type1' },
  { label: '类型2', value: 'type2' },
]

const mockData = {
  name: '某某活动',
  type: '某某标签',
  orgName: '某某党组织',
  date: 1630425600000,
  address: '某区某路XX号XX中心',
  count: 20,
  excludeCount: 10,
  fileType: 'file',
}
const activityData = ref<any>(null)
const openNewDrawer = (data: any = null) => {
  console.log(model.value)
  activityData.value = data
  store.commit('SET_NEW_ACTIVITY_DRAWER', true)
}

const deleteConfirm = ref(false)
const curRow = ref<any>(null)
const columns = [
  { title: '活动名称', key: 'name' },
  { title: '活动日期', key: 'date' },
  {
    title: '标签类别',
    key: 'type',
    render(row: any) {
      return h(
        NTag,
        {
          size: 'small',
          type: activity?.find((e) => e.name === row.type)?.type,
        },
        { default: () => row.type },
      )
    },
  },
  { title: '活动地址', key: 'address' },
  { title: '出席率', key: 'rate' },
  { title: '参与人数', key: 'count' },
  {
    title: ' ',
    key: 'actions',
    render(row: any) {
      return h(
        'div',
        { style: { display: 'flex', justifyContent: 'flex-end' } },
        [
          h(
            NButton,
            {
              size: 'tiny',
              type: 'primary',
              color: 'transparent',
              tag: 'a',
              textColor: '#3d7fe9',
              onClick: () => openNewDrawer({ ...mockData, _mode: 'view' }),
            },
            { default: () => '查看' },
          ),
          h(
            NButton,
            {
              size: 'tiny',
              type: 'primary',
              color: 'transparent',
              tag: 'a',
              textColor: '#3d7fe9',
              onClick: () => openNewDrawer({ ...mockData, _mode: 'modify' }),
            },
            { default: () => '修改' },
          ),
          h(
            NButton,
            {
              size: 'tiny',
              type: 'primary',
              color: 'transparent',
              tag: 'a',
              textColor: '#dd505E',
              onClick: () => {
                deleteConfirm.value = true
                curRow.value = row
              },
            },
            { default: () => '删除' },
          ),
        ],
      )
    },
  },
]
const activityList = [
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部党员大会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部委员会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '楼组党建会议',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '党课',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '主题党日活动',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部党员大会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部委员会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '楼组党建会议',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '党课',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '主题党日活动',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部党员大会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '支部委员会',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '楼组党建会议',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '党课',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
  {
    name: '某某党员大会',
    date: '2020年8月1日',
    type: '主题党日活动',
    address: '某某区某某路某某小区某某号',
    rate: '82%',
    count: '200人',
  },
]
const pagination = {
  pageSize: 10,
}

const sureToDelete = () => {
  deleteConfirm.value = false
  console.log(curRow.value)
  message.success('删除成功')
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
  height 100%
  background #ededed
  border-radius .06rem
  #activity-filter
    background #fafafa
    padding .2rem .05rem 0
    .dot
      margin-right .15rem
      font-size .14rem
      color $gray
  .list
    padding .08rem
    .activity-table
      font-size .08rem
.btn
  font-size .1rem
  box-sizing border-box
  padding .03rem .2rem
  border-radius .03rem
  cursor pointer
  &:hover
    box-shadow 0 0 .06rem rgba(0,0,0,0.3)
  &.cancel
    border .01rem solid $light-gray
  &.sure
    color #fff
    background $blue
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.n-modal.n-card
  .n-card-header
    background $white-bg
    box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
    font-family $font-ping-medium
    border-radius inherit
    z-index 2
  .n-card__content
    padding 0
#activity-filter
  .n-select
    width 1rem
  .n-input-number
    width 1rem
    .n-input-wrapper
      padding-right 0
      .n-input__suffix
        background #f3f4f7
        border-left .01rem solid $light-gray
        padding 0 .05rem
  .n-form-item-label
    font-size .1rem
    color $font
  .n-date-picker
    width 2rem
    .n-input
      background #fff
.activity-table
  .n-scrollbar-container
    border-radius .06rem
.n-dialog
  .n-dialog__content
    margin-left .3rem
  .n-dialog__icon
    color #F2A70D
  .n-button.n-button--primary-type
    background $blue
    .n-button__border
      border none
</style>
