<script setup>
import { ref } from "vue";
import { raiInterface } from "@/api/api.js";

import { ElMessage } from 'element-plus'
const props = defineProps({
  isShowDia: Boolean,
  title: String,
  status: String,
  itemObj: Array,
  applyId: Number,
});

const emit = defineEmits(['cancel','saveOver'])
const datetime = ref("");

/* 保存 */
const saveHandle = () => {
  if (props.title === "update" || props.title === "cancel") {
    if (props.status == "待邀请") {
      datetime.value && this.updateApply();
      !datetime.value && ElMessage.warning("访谈时间不能为空");
    } else {
      updateApply();
    }
  }
  props.title === "deal" && emit("saveOver");
};
/* 取消 */
const cancelHandle = () => {
  datetime.value = "";
  emit("cancel");
};

/* 更新/取消 */
const updateApply = () => {
  raiInterface
    .cancelInterview({
      HandleType: props.title == "update" ? 1 : 2,
      InterviewApplyId: Number(props.applyId),
      InterviewTime: props.title == "update" && props.status == "待邀请" ? datetime.value : "",
    })
    .then((res) => {
      if (res.Ret === 200) {
        ElMessage.success(res.Msg);
        emit("over");
      }
    });
};

const lookDetail = (id) => {
  let url =
    process.env.NODE_ENV === "production"
      ? "https://details.hzinsights.com/cygx/report"
      : process.env.NODE_ENV === "test"
      ? "http://xcxh5test.hzinsights.com/xcx_h5/cygx/report"
      : "http://xcxh5test.hzinsights.com/xcx_h5/cygx/report";
  let href = `${url}?id=${id}`;
  window.open(href, "_blank");
};
</script>

<template>
  <el-dialog
    draggable
    v-model="props.isShowDia"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :show-close="false"
    @close="cancelHandle"
    class="interview_dialog"
    :width="title == 'detail' ? '600px' : '450px'"
  >
    <template #header>
      <div style="position: relative">
        <span style="fontsize: 16px">{{ title === "update" ? "状态更新" : title === "cancel" ? "取消申请" : title === "detail" ? "访谈详情" : "标记处理" }}</span>
      </div>
    </template>

    <!-- 访谈申请弹窗 -->
    <div class="dialog_cont">
      <!-- 状态更新 -->
      <div v-if="title === 'update'">
        <span>{{ status == "待邀请" ? "状态将跟更新为：待访谈" : status == "待访谈" ? "是否将状态更新为已完成？" : "" }}</span>
        <date-picker v-model="datetime" type="datetime" value-type="format" placeholder="请选择访谈时间" style="margintop: 20px" v-if="status == '待邀请'"></date-picker>
      </div>
      <!-- 取消申请 -->
      <span v-else-if="title === 'cancel' || title === 'deal'">{{ title === "cancel" ? "确定要取消此次访谈申请吗？" : "是否确认已处理该用户申请？" }}</span>
      <!-- 访谈详情 -->
      <el-table max-height="260px" :data="itemObj" border v-else>
        <el-table-column align="center" label="相关纪要" width="200px">
          <template #default="scope">
            <span style="color: #409eff; cursor: pointer" @click="lookDetail(scope.row.ArticleIdMd5)">{{ scope.row.ArticleTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属行业" prop="CategoryName">
          <template #default="scope">{{ scope.row.CategoryName }}</template>
        </el-table-column>
        <el-table-column align="center" label="访谈时间">
          <template #default="scope">{{ scope.row.InterviewTime }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; justify-content: center; margin: 40px 0">
      <el-button type="primary" style="width: 120px" @click="cancelHandle" v-if="title === 'detail'">知道了</el-button>
      <template v-else>
        <el-button type="primary" style="width: 80px; marginright: 24px" @click="saveHandle">确定</el-button>
        <el-button type="primary" plain style="width: 80px" @click="cancelHandle">取消</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog_cont {
  padding: 0 10px;
  .node_name {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .node_ipt {
    display: block;
    width: 100%;
    margin: 20px 0;
  }
}
</style>
