<template>
  <!-- 稍后处理时间组件 -->
  <div class="g-components-interval g_flex_column_between">
    <div v-if="speed > 0" class="interval-box">
      <!-- 存放时间 -->
      <div class="time-box g_flex_row_between g_flex_none">
        <div class="g_flex_1 g_flex_row_start key">
          <div class="g_flex_none g_flex_row_start">
            <div class="g_flex_column_center icon-box">
              <ClockCircleOutlined style="color: #929292;" />
            </div>
            <div class="g_flex_column_center text">稍后处理</div>
          </div>
          <div class="g_flex_none g_flex_row_start item-box">
            <div class="small-box g_flex_row_start">
              <div class="item g_fs_12" v-for="(item,index) in time" :key="index" @click="handleUpdateTime(item,index)" :class="active == index ? 'item-active' : ''">{{item.text}}</div>
            </div>
            <div class="g_flex_column_center" style="margin-left: 3px;">
              <a-date-picker v-model:value="timer" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" size="small" class="g_w_150" @change="handlePointTimer" />
            </div>
          </div>
        </div>
        <div class="g_flex_none value g_flex_column_center" @click="handleSendEvent(30)">
          <div class="icon-bos">
            <ThunderboltOutlined class="g_w_12 g_h_18" />
          </div>
        </div>
      </div>
      <div class="g_flex_row_between g_flex_1">
        <!-- 存放输入框和提示语 -->
        <div class="input-box g_flex_1">
          <div class="an-input g_flex_column_center g-ant-textarea">
            <a-textarea v-model:value="send_text" placeholder="请输入跟进记录" :autoSize="{ minRows: 3, maxRows: 3 }" class="textare" style="border:0;" @change="handleChange" />
          </div>
          <div class="time-tip g_flex_column_center c045 f12 g_h_23">{{tip}}</div>
        </div>
        <!-- 存放提交按钮 -->
        <div class="submit-box g_flex_none g_flex_column_center">
          <div class="btn g_flex_c" @click="handleSubmitEvent">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/* 定时器
 * @function quickEvent  快捷发送事件
 * @function submitEvent 提交按钮事件
 */
import { ref, onMounted, getCurrentInstance, h, watch, defineEmits } from 'vue'
import { ThunderboltOutlined, EditOutlined, EyeInvisibleOutlined, UserAddOutlined, TeamOutlined, PhoneOutlined, PlusCircleOutlined, MinusCircleOutlined, ClockCircleOutlined, PauseCircleOutlined, StopOutlined, InfoCircleOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '../../stores/counter.ts'
import dayjs from 'dayjs'

/* #################### 初始化事件 #################### */
const router = useRouter() // 应用路由
const route = useRoute()
const emits = defineEmits(['quickEvent', 'submitEvent'])
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
const storeJS = useStore()
const speed = ref(0)
watch(storeJS.deliveryUserid, (val) => {
  if (val.content == -1) {
    speed.value = 0
  } else {
    speed.value = 1
  }
  active.value = -1
  send_text.value = ''
  timer.value = ''
  str.value = ''
  tip.value = ''
})
const time = ref([
  {
    text: '30min',
    num: '30',
    remark: '30分钟',
  },
  {
    text: '1h',
    num: '60',
    remark: '1小时',
  },
  {
    text: '2h',
    num: '120',
    remark: '2小时',
  },
  {
    text: '4h',
    num: '240',
    remark: '4小时',
  },
  {
    text: '1d',
    num: '1440',
    remark: '1天',
  },
  {
    text: '2d',
    num: '2880',
    remark: '2天',
  },
  {
    text: '3d',
    num: '4320',
    remark: '3天',
  },
])
const active = ref(-1)
const tip = ref('')
const handleUpdateTime = (item, index) => {
  if (index < 7) {
    tip.value = '提示：系统会在' + item.remark + '后提醒你'
    active.value = index
    timer.value = ''
    str.value = ''
  }
}
const send_text = ref('')
const timer = ref('')
const str = ref('')
const handlePointTimer = (value, dateString) => {
  str.value = dateString
  active.value = -1
  tip.value = '提示：系统会在' + dateString + '提醒你'
}

// 快捷发送
const handleSendEvent = () => {
  commonJS.gConfirmModal('快速稍后处理', '系统会在30分钟后提醒你', () => {
    emits('quickEvent')
  })
}
// 提交事件
const handleSubmitEvent = () => {
  let promise = new Promise((resolve, reject) => {
    emits('submitEvent', {
      type: str.value == '' ? 1 : 3,
      num: active.value < 0 ? '' : time.value[active.value].num,
      str: str.value,
      remark: send_text.value,
    })
    resolve()
  })
  promise
    .then(() => {
      active.value = -1
      send_text.value = ''
      timer.value = ''
      str.value = ''
      tip.value = ''
    })
    .catch()
}
</script>

<style lang="less">
.g-components-interval {
  .interval-box {
    height: 132px;
    box-shadow: 0px -4px 4px 0px rgba(228, 228, 228, 0.5);
  }
  .time-box {
    border-bottom: 1px solid #eee;
    height: 33px;
    .key,
    .value {
      height: 100%;
    }
    .icon-box {
      padding: 0 6px 0 6px;
    }
    .text {
      color: #929292;
      font-size: 14px;
    }
    .item-box {
      .item {
        border-radius: 3px;
        background-color: rgba(250, 250, 250, 1);
        border: 1px solid rgba(217, 217, 217, 1);
        padding: 0px 9px;
        height: 22px;
        line-height: 18px;
        margin-left: 5px;
        margin-top: 4.5px;
        cursor: pointer;
        color: #656565;
        &:hover {
          color: #109eff;
        }
        &:first-child {
          margin-left: 10px;
        }
      }
      .item-active {
        background-color: #109eff;
        color: #fff;
        border-color: #109eff;
        &:hover {
          color: #fff;
        }
      }
    }
    .value {
      cursor: pointer;
      .icon-bos {
        padding: 0 10px;
        border-left: 1px solid #d9d9d9;
      }
    }
  }
  .input-box {
    padding-left: 0px;
    .time-tip {
      padding-left: 10px;
      margin-top: 3px;
      font-size: 14px;
      color: #666;
    }
  }
  .submit-box {
    padding: 0 15px;
    .btn {
      width: 60px;
      height: 28px;
      border-radius: 3px;
      background-color: rgba(24, 144, 255, 1);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .ant-calendar-picker {
    min-width: 48px !important;
    width: 48px;
    .custom_default {
      min-width: 48px !important;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1680px) {
  .g-components-interval {
    .time-box {
      .icon-box {
        padding: 0 4px 0 4px;
      }
      .text {
        font-size: 12px;
      }
      .item-box {
        .item {
          padding: 0px 2px;
          line-height: 18px;
          margin-left: 4px;
          margin-top: 4.5px;
          &:first-child {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>