<script setup>
import { ref } from "vue";
import { raiInterface } from "@/api/api.js";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps({
  addAuthorDlgVisible: {
    default: false,
    type: Boolean,
  },
  submitRejectDlgVisible: {
    default: false,
    type: Boolean,
  },
  submitRejectId: {
    default: 0,
    type: Number,
  },
});
const keyAuthor = ref("");
const isShowKey = ref(true);

const $emit = defineEmits(["updateParent", "updateGetSpecialList"]);

// 关闭添加作者的弹框
function handleCloseAuthor() {
  keyAuthor.value = "";
  $emit("update:addAuthorDlgVisible", false);
}

const companyList = ref([""]);
// 作者弹框的搜索事件
async function querySearchHandler(query, cb) {
  cb([]);
  if (!query) return;
  const res = await raiInterface.activitySignupUserList({ KeyWord: query });
  if (res.Ret === 200) {
    console.log(res);
    let arr =
      res.Data.List && res.Data.List.length
        ? res.Data.List.map((item) => {
            return {
              ...item,
              value: item.RealName + " - " + item.Mobile + " - " + item.CompanyName,
            };
          })
        : [];
    companyList.value = arr;
    cb(arr);
  }
}
// 作者添加的事件
async function addAuthorHandler() {
  const isKey = companyList.value.some((item) => item.value === keyAuthor.value);
  if (!isKey) return ElMessage.error("请输入客户姓名!");
  let params = companyList.value.filter((item) => item.value === keyAuthor.value);
  const res = await raiInterface.yanxuan_specialAuthorAdd({
    UserId: params[0].UserId,
    RealName: params[0].RealName,
    Mobile: params[0].Mobile,
  });
  if (res.Ret === 200) {
    handleCloseAuthor();
    ElMessage.success("添加成功！");
    $emit("updateParent");
  }
}

/* **************************************************** */
const textReject = ref("");
// 驳回的弹框关闭事件
function handleCloseReject() {
  textReject.value = "";
  $emit("update:submitRejectDlgVisible", false);
}

// 驳回的弹框确定事件
async function submitRejectHandler() {
  if (!textReject.value) return ElMessage.error("请输入驳回原因");
  // 提交成功后刷新页面
  const res = await raiInterface.yanxuan_specialEnable({
    Id: props.submitRejectId,
    Status: 2,
    Reason: textReject.value,
  });
  if (res.Ret === 200) {
    handleCloseReject();
    ElMessage.success("操作成功！");
    $emit("updateGetSpecialList");
  }
}
function changeHandler() {
  if (!keyAuthor.value) return;
  isShowKey.value = companyList.value.some((item) => item.value === keyAuthor.value);
}
function selectCompany() {
  isShowKey.value = companyList.value.some((item) => item.value === keyAuthor.value);
}
</script>

<template>
  <div class="container special-dlg-container">
    <el-dialog title="新建专栏作者" v-model="props.addAuthorDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
      <el-autocomplete
        class="inline-input"
        style="width: 100%; margin-bottom: 20px"
        v-model="keyAuthor"
        :fetch-suggestions="querySearchHandler"
        @blur="changeHandler"
        @select="selectCompany"
        placeholder="请输入客户姓名"
        :trigger-on-focus="false"
      ></el-autocomplete>
      <p v-show="!isShowKey" style="color: #f00">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseAuthor">取 消</el-button>
          <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog title="驳回" v-model="props.submitRejectDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
      <el-input type="textarea" :rows="4" style="margin-bottom: 20px" v-model.trim="textReject" placeholder="请输入驳回原因"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseReject">取 消</el-button>
          <el-button type="primary" @click="submitRejectHandler">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.special-dlg-container {
  .el-dialog .el-input {
    width: 100%;
  }
}
</style>
