<script lang="ts" setup>
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'reject', params: any)
  (e: 'viewrepeat')
}>()

const cardStyle = {
  'width': '450px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '0px',
}

const show = ref(false)

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

async function reject() {
  emit('reject', { a: 'todo' })
  closeModal()
}

async function viewRepeat(e: MouseEvent) {
  emit('viewrepeat')
  e.preventDefault()
  closeModal()
}

defineExpose({
  showModal,
})
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center">
    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="wrapper">
        <div class="close" @click="closeModal">
          <SvgIcon size="24" name="clear" />
        </div>
        <div class="wrapper-header">
          <span style="font-weight: bold;">任务小结重复任务</span>
          <span>共<font class="count">18</font>项</span>
        </div>
        <div class="wrapper-content">
          <n-scrollbar style="max-height: 200px;">
            <div v-for="i in 2" :key="i" class="item">
              <div class="imgwrapper" />
              <n-grid x-gap="12" y-gap="0" :cols="12">
                <n-gi span="4">
                  <span style="color:#8b8d8f;">任务小结内容:</span>
                </n-gi>
                <n-gi span="8">
                  <span>今日去拜访中日友好医院今日去拜访中日友好医院今日去</span>
                </n-gi>
                <n-gi span="4">
                  <span style="color:#8b8d8f;">任务重复数量</span>
                </n-gi>
                <n-gi span="8">
                  <span>共<font class="count">18</font>条</span>
                </n-gi>
              </n-grid>
            </div>
          </n-scrollbar>
          <div class="footer">
            <SvgIcon style="cursor: pointer;" name="r1" width="162" height="54" @click="reject" />
            <SvgIcon style="cursor: pointer;" name="r4" width="162" height="54" @click="viewRepeat" />
          </div>
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  display: flex;
  position: relative;
  flex-direction: column;

  .close{
    position:absolute;
    right: 0px;
    top:-45px;
    cursor: pointer;
  }

  &-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 60px;
  }

  &-content {
    flex: 1;
    border-radius: 8px;
    background-color: #FFF;
    padding: 16px;

    .imgwrapper {
      width: 160px;
      height: 70px;
      margin-right: 20px;
      border-radius: 8px;
      background-image: url('../../../assets/images/test.png');
      background-repeat: no-repeat;
      background-size: cover;
    }

    .item {
      display: flex;
      padding: 20px 0px;
      border-bottom: 1px solid #e4e6eb;
    }

    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
  }

  .count {
    color: #6684fa;
    font-weight: bold;
    margin: 0px 5px
  }
}

::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
  border: 0px;
}

::v-deep(.n-card > .n-card-header) {
  --n-padding-top: 0px;
  --n-padding-bottom: 12px;
}

::v-deep(.n-divider:not(.n-divider--vertical)) {
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>
