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

import { repetitionTask } from '@/api/final/index'

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

const cardStyle = {
  'width': '450px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '0px',
}
const state: any = reactive({
  detail: [],
  total: 0,
  taskId: '',
})
const { detail, total } = toRefs(state)
const show = ref(false)

function showModal(id) {
  getDetail(id)
}

async function getDetail(id) {
  const res = await repetitionTask()
  if (res.code === 'OK') {
    state.detail = res.data
    state.detail.forEach((item) => {
      state.total += item.count
    })
    show.value = true
  }
}

// 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" class="modal_wrap">
    <div class="wrapper">
      <div class="closed">
        <SvgIcon
          class="icon"
          name="close-white"
          width="32"
          @click="closeModal"
        />
      </div>
      <div class="wrapper-header">
        <div style="font-weight: bold;">
          任务小结重复任务
        </div>
        <div>共<span class="total">{{ total }}</span>项</div>
      </div>
      <div class="wrapper-content">
        <n-scrollbar style="max-height: 214px;">
          <div v-for="item in detail" :key="item.id" class="item">
            <!-- <div class="imgwrapper" /> -->
            <img class="imgwrapper" :src="item.imgUrl">
            <n-grid x-gap="12" y-gap="0" :cols="12">
              <n-gi span="3">
                <span style="color:#8b8d8f;">任务小结内容:</span>
              </n-gi>
              <n-gi span="8">
                <span>{{ item.content }}</span>
              </n-gi>
              <n-gi span="3">
                <span style="color:#8b8d8f;">任务重复数量</span>
              </n-gi>
              <n-gi span="8">
                <span>共<span class="count">{{ item.count }}</span>条</span>
              </n-gi>
            </n-grid>
          </div>
        </n-scrollbar>
        <div class="footer">
          <img class="img-btn1" src="@/assets/images/btn_pass.png" alt="" @click="reject">
          <img class="img-btn" src="@/assets/images/btn_repeat.png" alt="" @click="viewRepeat">
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style lang="less" scoped>
.modal_wrap {
  background-image: url(../../../assets/images/approval_modal_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 700px;
  height: 500px;
  box-shadow: none !important;
}
.wrapper {
  position: absolute;
  left: calc(50% - 350px);
  .closed {
    position: relative;
    .icon{
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 7px;
    }
  }
  .wrapper-header {
    padding-top: 40px;
    margin-top: 80px;
    text-align: center;
    .wrapper-title {
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: Semibold;
      text-align: center;
      color: #333333;
      line-height: 32px;
    }
    .wrapper-mark {
      text-align: center;
      font-size: 13px;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #666666;
      line-height: 18px;
    }
  }

  &-content {
    flex: 1;
    border-radius: 8px;
    padding: 16px;
    padding-top: 0;
    margin: 45px 12px 35px 38px;

    .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;
    }
  }
  // .wrapper-content {
  //   flex: 1;
  //   border-radius: 8px;
  //   margin: 105px 60px 35px 120px;
  //   .item {
  //     display: flex;
  //     flex-flow: row nowrap;
  //     align-items: center;
  //     margin: 20px 0;
  //   }

  //   .imgwrapper {
  //     width: 200px;
  //     height: 120px;
  //     margin-right: 20px;
  //     border-radius: 8px;
  //     background-image: url("../../../assets/images/test.png");
  //     background-repeat: no-repeat;
  //     background-size: cover;
  //   }
  //   .content {
  //     .task_id {
  //       font-size: 14px;
  //       font-family: PingFang SC, PingFang SC-Regular;
  //       font-weight: Regular;
  //       text-align: left;
  //       color: #333333;
  //       line-height: 20px;
  //     }
  //     .tag_box {
  //       display: flex;
  //       flex-flow: row nowrap;
  //       margin: 8px 0;
  //       .tag_item {
  //         background: rgba(80, 122, 253, 0.1);
  //         border-radius: 2px;
  //         font-size: 12px;
  //         font-family: PingFang SC, PingFang SC-Regular;
  //         font-weight: Regular;
  //         text-align: left;
  //         color: #507afd;
  //         line-height: 16px;
  //         margin-right: 10px;
  //       }
  //       .error {
  //         background: rgba(255, 78, 79, 0.1);
  //         color: #ff4e4f;
  //       }
  //     }
  //     .time_box {
  //       font-size: 14px;
  //       font-family: PingFang SC, PingFang SC-Regular;
  //       font-weight: Regular;
  //       text-align: left;
  //       color: #333333;
  //       line-height: 20px;
  //     }
  //   }
  //   .mark_text {
  //     font-size: 13px;
  //     font-family: PingFang SC, PingFang SC-Regular;
  //     font-weight: Regular;
  //     text-align: left;
  //     color: #666666;
  //     line-height: 16px;
  //   }
  //   .footer {
  //     display: flex;
  //     flex-flow: row nowrap;
  //     align-items: center;
  //     justify-content: center;
  //     margin: 20px 30px 0 0;
  //   }
  // }

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

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

  .img-btn1{
    width: 162px;
    height: 54px;
    cursor: pointer;
  }

  .img-btn{
    width: 173px;
    height: 54px;
    cursor: pointer;
  }
}
</style>
