<template>
  <div class="header-top">
    <div class="title">
      <div class="edit" v-show="!show" style="white-space: nowrap; text-overflow: ellipsis">
        编辑
      </div>
      <div class="span" :title="caseInfo.caseTitle">
        {{ caseInfo.caseTitle }}
      </div>
    </div>
    <div class="oper-btns" v-show="!show">
      <!-- <el-button class="newbut" style="padding: 5px 10px" type="primary" @click="handlemtk"> -->
      <i title="重命名" class="iconfont icon-rename" @click="handlemtk"></i>
      <!-- </el-button> -->
      <!-- <el-button class="newbut" style="padding: 5px 10px" type="primary" > -->
      <i title="媒体库" class="iconfont icon-media_l" @click="handleView"></i>
      <!-- </el-button> -->
      <div class="view" @click="handleSee">预览</div>
    </div>
    <el-dialog v-model="form.dialogFormVisible" title="重命名" width="500">
      <el-form :model="form">
        <el-form-item :label-width="0">
          <el-input v-model="form.name" maxlength="100" show-word-limit autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer text-center" >
          <el-button @click="form.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { openErrorMsg } from "@/request";
import { user, logout as logoutRaw } from "@/store/user";
import defAvatar from "@/assets/image/top_my.png";
import { getCaseInfo, getCaseInfoData, show } from "@/store/case";
import { refreshRole, roleId } from "@/store/role";
import { RouteName, router } from "@/router";
import { confirm } from "@/helper/message";
import { updatePwd } from "@/view/system/quisk";
import { computed, ref, watch, onMounted } from "vue";
import { addShowCaseScenes } from "@/view/originalPhoto/quisk";
import { ElMessage, ElMessageBox, formItemValidateStates } from "element-plus";
import { setExample } from "@/app/criminal/store/example";
// import { addCaseScenes } from "@/view/material/quisk";
refreshRole();
const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const form = ref({
  name: "",
  dialogFormVisible: false
});
const dialogFormVisible = ref(false);
const formLabelWidth = "120px";
// const useCaseStore = getCaseInfoData();
const caseInfo = computed(() => getCaseInfoData());
// const title = ref('')
// const getInfo = async () => {
//   const res = await getCaseInfo(caseId.value);
//   console.log('getInfo', res, getCaseInfoData())
//   title.value = getCaseInfoData() || res?.caseTitle || "";
// };
// getInfo();
watch(
  () => caseInfo.value.caseTitle,
  () => {
    document.title = caseInfo.value && caseInfo.value.caseTitle;
  }
);
const loginoutRaw = async () => {
  await logoutRaw();
  roleId.value = "";
  router.replace({ name: RouteName.login });
};
const handlemtk = () => {
  // window.open("/admin/index.html#/mediaLibrary/index");
  form.value.dialogFormVisible = true;
  form.value.name = caseInfo.value.caseTitle;
  // ElMessageBox.prompt("", "重命名", {
  //   confirmButtonText: "确定",
  //   customClass: "promptClass",
  //   cancelButtonText: "取消",
  //   showClose: true,
  //   inputValue: caseInfo.value.caseTitle,
  //   inputValidator: (value) => {
  //     if (!value) {
  //       return false;
  //     }
  //     return true;
  //   },
  //   inputErrorMessage: "请输入名称",
  // })
  //   .then(async ({ value }) => {
  //     await setExample({
  //       ...caseInfo.value,
  //       caseTitle: value,
  //       caseId: caseId.value,
  //     });
  //     ElMessage({
  //       type: "success",
  //       message: `修改成功`,
  //     });
  //     await getCaseInfo(caseId.value)
  //   })
  //   .catch(() => {
  //     // ElMessage({
  //     //   type: 'info',
  //     //   message: 'Input canceled',
  //     // })
  //   });
};
const handleConfirm = async () => {
      let value = form.value.name;
      if(!value){
        return  ElMessage.error("请输入修改名称");;
      }
      await setExample({
        ...caseInfo.value,
        caseTitle: value,
        caseId: caseId.value,
      });
      ElMessage({
        type: "success",
        message: `修改成功`,
      });
      form.value.dialogFormVisible = false;
      await getCaseInfo(caseId.value)
}
const handleSee = () => {
  window.open(window.location.origin + `/mix3d/?show=true#/abstract/${caseId.value}`);
};
 const handleView = async () => {
  await addShowCaseScenes({fileTypes: [0,1,2,5], formats: [], upload:true})
};
const logout = async () => {
  if (await confirm("确定要退出登录吗？")) {
    loginoutRaw();
  }
};
const updatePwdHandler = async () => {
  if (await updatePwd({})) {
    openErrorMsg("密码修改成功，请重新登录。");
    loginoutRaw();
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.header-top {
  width: 100%;
}
.title {
  // display: inline-block;
  max-width: calc(50% + 300px);
  font-size: 32px;
  .span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.oper-btns {
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 24px;
    margin-right: 40px;
    cursor: pointer;
  }
  .view {
    height: 40px;
    width: 88px;
    text-align: center;
    line-height: 40px;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid #26559b;
    font-size: 14px;
    color: #26559b;
    cursor: pointer;
  }
}
</style>