<template>
  <el-dialog
    title="回访提醒"
    :visible.sync="visible"
    width="850px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <div v-if="reminderList.length === 0" style="text-align: center; padding: 40px; color: #999;">
      暂无待回访提醒
    </div>
    <el-table v-else :data="reminderList" border max-height="400" style="width: 100%">
      <el-table-column label="客户昵称" align="center" prop="nickName" min-width="100" />
      <el-table-column label="外部联系人ID" align="center" prop="customerId" width="130" />
      <el-table-column label="上次回访" align="center" width="145">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.visitTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="方式" align="center" prop="visitType" width="70" />
      <el-table-column label="结果" align="center" prop="visitResult" width="80" />
      <el-table-column label="回访内容" align="center" prop="visitContent" show-overflow-tooltip min-width="120" />
      <el-table-column label="应回访时间" align="center" width="145">
        <template slot-scope="scope">
          <el-tag v-if="isOverdue(scope.row.nextVisitTime)" type="danger" size="small">超期</el-tag>
          <span>{{ parseTime(scope.row.nextVisitTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleGo(scope.row)">去处理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { getMsg } from '@/api/crm/msg'
import { closeRemind } from '@/api/store/customerVisit'
import { getToken } from '@/utils/auth'

export default {
  name: 'VisitReminderPopup',
  data() {
    return {
      visible: false,
      reminderList: []
    }
  },
  created() {
    this.checkFromGetMsg()
    this.$root.$on('visit-reminders-update', this.onRemindersUpdate)
  },
  beforeDestroy() {
    this.$root.$off('visit-reminders-update', this.onRemindersUpdate)
  },
  methods: {
    checkFromGetMsg() {
      if (this.visible || !getToken()) return
      getMsg().then(res => {
        if (res.code === 200 && res.visitReminders && res.visitReminders.length > 0) {
          this.showReminders(res.visitReminders)
        }
      }).catch(() => { })
    },
    onRemindersUpdate(visitReminders) {
      if (this.visible) return
      if (visitReminders && visitReminders.length > 0) {
        this.showReminders(visitReminders)
      }
    },
    showReminders(list) {
      this.reminderList = list
      if (!this.visible) {
        this.visible = true
      }
    },
    handleGo(row) {
      const resolved = this.$router.resolve({
        path: '/qw/qwExternal/myExternalContact',
        query: { userId: row.userId, customerId: row.customerId }
      })
      window.open(resolved.href, '_blank')
      // 标记该条为已提醒并关闭弹窗
      closeRemind([row.id]).then(() => { }).catch(() => { })
      this.reminderList = this.reminderList.filter(item => item.id !== row.id)
      if (this.reminderList.length === 0) {
        this.visible = false
      }
    },
    handleClose() {
      const ids = this.reminderList.map(item => item.id)
      if (ids.length > 0) {
        closeRemind(ids).then(() => { }).catch(() => { })
      }
      this.reminderList = []
    },
    isOverdue(nextVisitTime) {
      if (!nextVisitTime) return false
      return new Date(nextVisitTime) < new Date()
    }
  }
}
</script>
