<template>
  <div class="review" v-if="is_status !== 'show'">
    <el-image style="width: 310px; height: 232.5px" :src="jy" fit="fill" />
    <template v-if="is_status === 'none'">
      <div class="none_title">检查完毕，一切都好</div>
      <ul>
        <li>实时分析文本内容进行校阅</li>
        <li>鼠标划选句子进行风格改写，提供写作新思路</li>
      </ul>
    </template>
    <template v-if="is_status === 'load'">
      <div class="checking_tip_text">
        为您检查中
        <div class="dot-flashing"></div>
      </div>
    </template>
  </div>
  <template v-if="is_status === 'show'">
    <div class="show">
      <div class="left">
        <el-card
          style="margin-bottom: 1em"
          v-for="(item, i) in selectList()"
          :key="i"
        >
          <p
            class="list"
            style="font-size: 12px; font-weight: 400; color: #888"
          >
            {{ err_text[item.errorType].text }}
            {{ err_text[item.errorType].sub_text }}
          </p>
          <p class="list">
            <span v-text="item.sourceText"></span>
            <span
              class="alert-go-right"
              v-if="item.replaceText"
              :style="{ backgroundImage: 'url(' + image_base64.right + ')' }"
            ></span>
            <span
              v-if="item.replaceText"
              class="replaceText"
              v-text="item.replaceText"
            ></span>
          </p>
          <div class="list" v-html="item.alertMessage"></div>
        </el-card>
      </div>
      <div class="right">
        <div
          @click="() => selectList(i)"
          class="item"
          :style="{ backgroundColor: select === i ? '#d9e6ff' : '#fff' }"
          v-for="(item, i) in err_text"
          :key="i"
        >
          <div
            class="read"
            :style="{
              backgroundColor: item.color,
              borderColor: item.color !== '#fff' ? item.color : '#222',
            }"
          >
            <el-icon
              v-if="item.num != 0"
              :size="16"
              :color="'#fff' || item.color"
              ><Check
            /></el-icon>
          </div>
          <div
            style="
              text-align: center;
              font-size: 14px;
              padding-left: 3px;
              display: inline-block;
              width: calc(100% - 16px);
            "
          >
            <p v-text="item.text" style="line-height: 1.5em"></p>
            <p v-text="geterrNum(i) + '个'" style="line-height: 1.5em"></p>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup>
// 校阅
import { ref, defineProps, defineExpose } from 'vue';
import { checkContent } from '@/api/aleditor.js';
import { image_base64 } from './data';
import jy from '@/assets/img/jy.png';
const is_status = ref('none');
const props = defineProps({
  headTitle: String,
  html: Function,
  text: Function,
  setHtml: Function,
  setisupText: Function,
});
let li = [];
let select = ref(0);
const err_text = ref([
  {
    text: '所有提示',
    sub_text: '',
    color: '#fff',
  },
  {
    text: '字词错误',
    sub_text: '',
    color: '#ff7a7a',
  },
  {
    text: '标点错误',
    sub_text: '',
    color: '#aaaaaa',
  },
  {
    text: '语序问题',
    sub_text: '·建议交换为',
    color: '#977aff',
  },
  {
    text: '语法问题',
    sub_text: '',
    color: '#ee6bbb',
  },
  {
    text: '敏感词',
    sub_text: '',
    color: '#636363',
  },
]);
const geterrNum = i => {
  let n = 0;
  for (let o = 0; o < li.length; o++) {
    const v = li[o];
    v.errorType === i && n++;
  }
  return n;
};

const selectList = i => {
  const index = !i && i !== 0 ? select.value : i;
  select.value = index;
  let l = [];
  props.setisupText(true);
  for (let o = 0; o < li.length; o++) {
    if (index === 0) l.push(li[o]);
    else if (li[o].errorType === index) l.push(li[o]);

    let html = props.html();
    const rex = new RegExp(li[o].sourceText);
    html.replace(
      rex,
      `<span style="border-bottom: 1px solid ${
        err_text.value[li[o].errorType].color
      }">${li[o].sourceText}</span>`
    );
    props.setHtml(html);
  }
  props.setisupText(false);
  return l;
};

const jiaoyue = () => {
  is_status.value = 'load';
  checkContent({
    data: {
      content: props.html(),
      contentText: props.text(),
      docId: localStorage.getItem('fileId') || undefined,
      generationInfo: null,
      shouldGenerate: false,
    },
    noload: true,
  })
    .then(r => {
      if (r.errCode !== 0) return;
      li = r.alerts || [];
      is_status.value = li.length ? 'show' : 'none';
    })
    .catch(() => {
      is_status.value = 'none';
    });
};
jiaoyue();
defineExpose({
  jiaoyue,
});
</script>

<style scoped>
.review {
  width: 310px;
  margin: 0 auto;
}

.none_title {
  font-size: 24px;
  text-align: left;
  font-weight: 700;
  margin-bottom: 16px;
  margin-left: 11.3%;
}

ul {
  margin-left: 20px;
}

ul > li {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 16px;
}

.checking_tip_text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: -38px;
  margin-top: -26px;
}

.dot-flashing {
  margin-left: 22px;
  margin-top: 3px;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s linear infinite alternate;
  animation: dot-flashing-0833031b 0.6s linear infinite alternate;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.dot-flashing:after,
.dot-flashing:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing:before {
  left: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s infinite alternate;
  animation: dot-flashing-0833031b 0.6s infinite alternate;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.dot-flashing:after {
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s infinite alternate;
  animation: dot-flashing-0833031b 0.6s infinite alternate;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
@-webkit-keyframes dot-flashing-0833031b {
  0% {
    background-color: #2d2d2d;
  }

  50%,
  to {
    background-color: hsla(0, 0%, 100%, 0.1);
  }
}

@keyframes dot-flashing-0833031b {
  0% {
    background-color: #2d2d2d;
  }

  50%,
  to {
    background-color: hsla(0, 0%, 100%, 0.1);
  }
}

.show .left {
  width: 60%;
  padding: 0 10px;
  display: inline-block;
}
.show .right {
  display: inline-block;
  width: 30%;
}
.list {
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  line-height: 32px;
  color: #111;
  margin-left: 26px;
}

.alert-go-right,
.alert-two-way {
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
}

.replaceText {
  background: #d9e6ff;
  color: #2470ff;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.read {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 0;
}
.item {
  padding: 7px 0 0 10px;
  margin-bottom: 1em;
}
</style>
