<template>
  <pop ref="popRef" :on-close="onClose" :allowClose="false">
    <div class="lofty-subscribe-pop">
      <div class="title">SAVE MARKET REPORT<i class="lofty_iconfont lofty-icon-close" @click="close"></i></div>
      <div class="desc">
        Market updates that will help you to better understand the local market.
      </div>
      <div class="market-subscribe-pop-content">
        <div class="label">Custom Market Report Name</div>
        <div class="snapshot-input-wrap">
          <input v-model="snapshotName" :class="{error: nameError}" placeholder="Type Something"/>
          <span v-show="nameError">Please fill out this field.</span>
          <span v-show="snapshotName" class="lofty_iconfont lofty-icon-clear_circle_outlined" @click="snapshotName=''"></span>
        </div>
        <div class="label mt20">Email Frequency</div>
        <Select class="mt10" v-model="mailFrequency" :list="mailList"/>
      </div>
      <div class="lofty-btn mt20" @click="submit">Save</div>
    </div>
  </pop>
</template>

<script setup>
import pop from '@/components/pop/index.vue';
import Select from "@/components/select/index.vue";
import http from "@/api/index.js";
import util from "@/util/index.js";
const popRef = useTemplateRef('popRef');
const emits = defineEmits(['submit']);
const { reportId, name, onClose } = defineProps({ reportId: [String, Number], name: String, onClose: Function })
const snapshotName = ref(name);
const mailFrequency = ref(7)
const mailList = [
  { label: 'Instantly', value: 0},
  { label: 'Daily', value: 1},
  { label: 'Weekly', value: 7},
  { label: 'Biweekly', value: 14},
  { label: 'Monthly', value: 28}
]

onMounted(()=>{
  popRef.value.open();
})
const nameError = ref(false)
async function submit() {
  if(!snapshotName.value.trim()) {
    nameError.value = true;
    setTimeout(()=>{ nameError.value = false}, 3000)
    return
  }
  const data = {
    encryptId: reportId,
    subscribe: true,
    snapshotName: snapshotName.value,
    mailFrequency: mailFrequency.value,
  }
  const res = await http.post('/admin/report/subscribe', { data })
  if(res.status.code === 0) {
    emits('submit');
    close();
  } else {
    util.toast('Failed to subscribe to this report')
  }
}
function close() {
  popRef.value?.close();
}
</script>
<style lang="scss">
.lofty-subscribe-pop {
  background: #fff;
  width: 400px;
  padding: 30px;
  position: relative;
  @include media-600 {
    width: 100vw;
    margin: 0 auto;
    padding: 15px;
  }
  .title {
    text-align: center;
    font-size: 20px;
    color: rgba(25, 25, 25, 1);
    font-family: var(--lofty-font-play-bold);
    .lofty-icon-close {
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
  }
  .desc {
    font-size: 12px;
    color: #505050;
    margin: 10px auto;
    text-align: center;
    width: 92%;
  }
  .market-subscribe-pop-content {
    div.label {
      font-size: 14px;
      color: #505050;
      font-family: var(--lofty-font-mon-regular);
    }
    input {
      border: solid 1px #DADADA;
      width: 100%;
      height: 40px;
      line-height: 16px;
      padding: 0 15px;
      border-radius: 0;
      outline: none;
      font-size: 14px;
      margin-top: 10px;
      color: #202437;
      &:focus {
        border-color: rgba(17, 17, 17, 1);
      }
    }
    input.error {
      border-color: #fb4444;
    }
    input.error + span{
      color: #fb4444;
      font-size: 12px;
    }
    .snapshot-input-wrap {
      position: relative;

      .lofty-icon-clear_circle_outlined {
        position: absolute;
        top: 16px;
        right: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>