<template>
  <div>
    <el-dialog
      :visible.sync="show"
      width="100%"
      height="100%"
      fullscreen
      :modal="true"
      class="studentWorkPreviewDialog"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="s_body">
        <div class="s_b_main">
          <div class="s_b_m_top">
            <div>{{ lang.ssStudentWorkPreview }}</div>
            <span @click="close()">{{ lang.ssExit }}</span>
          </div>
          <div
            class="s_b_m_content"
            v-if="[45, 48, 52, 15, 41, 47,40,4,72].includes(tool)"
          >
            <div class="s_b_m_tool45" v-if="[45].includes(tool)">
              <div class="s_b_m_toolItem" v-for="(item, index) in testJson" :key="index+'one'">
                <div class="s_b_m_ti_title">
                  <span>{{ index + 1 }}</span>
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M15.3536 8.35355C15.5488 8.15829 15.5488 7.84171 15.3536 7.64645L12.1716 4.46447C11.9763 4.2692 11.6597 4.2692 11.4645 4.46447C11.2692 4.65973 11.2692 4.97631 11.4645 5.17157L14.2929 8L11.4645 10.8284C11.2692 11.0237 11.2692 11.3403 11.4645 11.5355C11.6597 11.7308 11.9763 11.7308 12.1716 11.5355L15.3536 8.35355ZM1 8.5H15V7.5H1V8.5Z"
                      fill="#3681FC"
                    />
                  </svg>

                  <span
                    style="display: flex;align-items: center;"
                    >{{ item.type == 1 ? lang.ssSingleChoiceColon : lang.ssMultipleChoiceColon
                    }}<span v-html="renderedFormula(item.teststitle)"></span> </span
                  >
                </div>
                <div
                  class="s_b_m_ti_option"
                  v-for="(item2, index2) in item.checkList"
                  :key="index2+'index2T'"
                  :class="{
                    s_b_m_ti_o_choice:
                      item.type == '1'
                        ? userAnswer[index] == index2
                        : userAnswer[index].includes(index2)
                  }"
                >
                  <!-- :class="{
                           s_b_m_ti_o_choice:
                          item2.type == 1
                          ? item2.answer == index2
                          : item2.answer[index].includes(index2)
                    }" -->
                  <div class="s_b_m_ti_o_btn">
                    <span class="s_b_m_ti_o_btn1" v-if="item.type == 1">
                      <!-- {{testJson}} -->
                      <span v-if="userAnswer[index] == index2"></span>
                      <!-- v-if="testJson.anwer[index] == index2" -->
                    </span>
                    <span class="s_b_m_ti_o_btn2" v-else>
                      <span v-if="userAnswer[index].includes(index2)">
                        <!-- <svg
                              width="8"
                              height="6"
                              viewBox="0 0 8 6"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M7.44194 0.558058C7.68602 0.802136 7.68602 1.19786 7.44194 1.44194L3.44194 5.44194C3.19786 5.68602 2.80214 5.68602 2.55806 5.44194L0.558058 3.44194C0.313981 3.19786 0.313981 2.80214 0.558058 2.55806C0.802136 2.31398 1.19786 2.31398 1.44194 2.55806L3 4.11612L6.55806 0.558058C6.80214 0.313981 7.19786 0.313981 7.44194 0.558058Z"
                                fill="white"
                              />
                            </svg> -->
                      </span>
                    </span>
                  </div>
                  <span>
                    <img
                      v-if="item2.imgType && item2.imgType === 1"
                      :src="item2.src"
                      alt=""
                      @click="$hevueImgPreview(item2.src)"
                    />
                    <span v-else>{{ item2 }}</span>
                  </span>
                </div>
                <div></div>
              </div>
            </div>
            <div class="s_b_m_tool45" v-if="[4].includes(tool)">
             
              <div>
                <div
                  class="a_add_title"
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div style="margin-right: 20px; font-size: 20px">{{ lang.ssTitleColon }}</div>
                  <div style="font-size: 20px">{{ testData.askTitle }}</div>
                </div>
                <div class="a_addBox">
                  <div style="font-size: 16px; color: #c7c7c7; margin-bottom: 10px">
                    {{ lang.ssQuestionContent }}
                  </div>
                  <div
                    class="a_add_box"
                    v-for="(item1, index1) in testData.askCount"
                    :key="index1"
                  >
                    <div class="a_add_head">
                      <div style="display: flex">
                        <span class="askIndex"> {{ index1 + 1 }}</span>
                        <div>{{ lang.ssQuestionColon }}{{ testData.askJson[index1].askstitle }}</div>
                      </div>
                      <img
                        v-if="testData.askJson[index1].img"
                        :src="testData.askJson[index1].img"
                        style="height: 300px; margin-top: 10px; max-width: 100%"
                      />
                    </div>
                    <div class="a_add_body">
                      <div class="a_add_input">
                        <el-radio-group
                          v-model="userAnswer[index1]"
                          v-if="
                            testData.askJson[index1].type == '1' ||
                            !testData.askJson[index1].type
                          "
                        >
                        
                          <el-radio
                            v-for="(item2, checkIndex) in testData.askJson[index1]
                              .checkList"
                            :key="checkIndex"
                            :label="checkIndex"
                            :disabled="isAnswer"
                            class="redioStyle"
                            ><span>{{ optionTypeList[checkIndex] }}.</span><span v-html="item2"></span
                          ></el-radio>
                        </el-radio-group>
                        <el-checkbox-group
                          v-model="userAnswer[index1]"
                          v-if="testData.askJson[index1].type == '2'"
                        >
                          <el-checkbox
                            v-for="(item2, checkIndex1) in testData.askJson[index1]
                              .checkList"
                            :key="checkIndex1"
                            :label="checkIndex1"
                            :disabled="isAnswer"
                            class="redioStyle"
                            ><span>{{ optionTypeList[checkIndex1] }}.</span> <span v-html="item2"></span>
                          </el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="s_b_m_tool48" v-if="[48, 52].includes(tool)">
              <div v-html="userAnswer"></div>
            </div>

            <div class="s_b_m_tool15" v-if="[15].includes(tool)">
              <div class="s_b_m_ti_title">
                <div>{{ lang.ssQuestionColon }}{{ testData.answerQ }}</div>
              </div>

              <div class="s_b_m_ti_answer">{{ userAnswer }}</div>
            </div>

            <div class="s_b_m_tool41" v-if="[41].includes(tool)">
              <div class="s_b_m_t_image">
                <img :src="testData.selectJson.url" :alt="lang.ssQuestionImage" />
              </div>
              <div class="s_b_m_t_select">
                <div
                  class="s_b_m_t_selectItem"
                  v-for="(item, index) in testData.selectJson.answer"
                  :key="index"
                >
                  <el-select v-model="userAnswer[index]" :placeholder="lang.ssPleaseSelect">
                    <el-option
                      v-for="(item2, index2) in testData.selectJson.select"
                      :disabled="true"
                      :key="index2"
                      :label="item2"
                      :value="index2"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>

            <div class="s_b_m_tool47" v-if="[47].includes(tool)">
              <div
                class="s_b_m_sortItem"
                v-for="(item, index) in testData.sentenceList"
                :key="index"
              >
                <div class="s_b_m_ti_title">
                  <span></span>
                  <span>{{ lang.ssQuestionNumber.replace(/\*/g, index + 1) }}</span>
                </div>

                <div class="s_s_b_m_s_rightOrError">
                  <div v-if="JSON.stringify(item.rightAnswer)==JSON.stringify(userAnswer[index])">
                    <img
                      src="../../assets/icon/conSentences/right.png"
                      alt=""
                    />
                    {{ lang.ssAnswerCorrect }}
                  </div>
                  <div v-else>
                    <img
                      src="../../assets/icon/conSentences/wrong.png"
                      alt=""
                    />
                    {{ lang.ssAnswerWrong }}
                  </div>
                </div>

                <div class="s_b_m_s_answer">
                  <span v-for="(item2, index2) in userAnswer[index]" :key="index2">{{
                    item2
                  }}</span>
                </div>

                <div class="s_b_m_s_sortText">
                  <div>
                    {{ lang.ssComposeSentence }}<span
                      v-for="(item2, index2) in userAnswer[index]" :key="index2"
                      >{{ item2 }}</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <div class="s_b_m_tool40" v-if="[40].includes(tool)">
                  
              <div class="s_b_m_t_rateItem" v-for="(item,index) in testData.rateJson" :key="index">
                <div>
                  <span>{{ item.value }}</span>
                  <el-rate
                    :value="userAnswer.eStar[index]"
                    disabled
                  ></el-rate>
                </div>
                <span>{{ item.detail }}</span>
              </div>

              <div class="s_b_m_t_rateText">
                {{ userAnswer.eBzText }}
              </div>
            </div>
            <div class="s_b_m_tool40" v-if="[72].includes(tool)">
              <template  v-if="JSON.parse(studentWork.works).length && showListData(JSON.parse(studentWork.works))">
                <div v-for="(item,index) in JSON.parse(studentWork.works)" :key="index">
                  <div class="BodyCon" v-if="item.imageUrls && item.imageUrls.length">
                      <div class="BodyConTit">{{ lang.ssNodeLabel.replace(/\*/g, index + 1) }}</div>
                       <div style="display: flex;flex-wrap: wrap;gap: 10px;">
                            <img 
                                style="max-width: 360px;object-fit: cover;cursor: pointer;" 
                                v-for="(image,imgIndex) in item.imageUrls"
                                :key="index+'-image-'+imgIndex" 
                                :src="image" 
                                alt="" 
                                @click="previewImage(image)"
                            />
                        </div>
                  </div>  
                  <div class="BodyCon" v-if="item.messages && item.messages.length" >
                        <div class="BodyConTit">{{ lang.ssNodeLabel.replace(/\*/g, index + 1) }}</div>
                        <div class="BodyConChat" v-for="(po, index2) in item.messages" :key="index+'-'+index2">
                            <div class="left" v-if="po.role == 'assistant'">
                                    <div class="TName" style="background-color: #0560FD;">{{ lang.ssXiaoKeAIAssistant }}</div>
                                    <div class="con" v-html="MarkdownT(po.content)"></div>
                            </div>

                            <div class="left" v-if="po.role == 'user'">
                                    <div class="TName" style="background-color: #9747FF;">{{ studentWork.sName }}</div>
                                    <div class="con" v-html="po.content"></div>
                            </div>
                        </div>
                    </div>
                </div>
              </template>
              <div v-else style="text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    min-height: 500px;">
                  {{ lang.ssWorkOnlyShowsDialog }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
     <!-- 图片预览对话框 -->
    <el-dialog
        :visible.sync="imagePreviewVisible"
        width="90%"
        :close-on-click-modal="true"
        :show-close="true"
        class="image-preview-dialog"
        @close="imagePreviewVisible = false">
        <div style="text-align: center;">
            <img 
                :src="previewImageUrl" 
                :alt="lang.ssPreviewImage" 
                style="max-width: 100%; max-height: 80vh; object-fit: contain;"
            />
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"
import MarkdownIt from "markdown-it";
import katex from 'katex'
import 'katex/dist/katex.min.css'
const getFile = url => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: "AKIATLPEDU37QV5CHLMH",
      secretAccessKey: "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"
    }; //秘钥形式的登录上传
    window.AWS.config.update(credentials);
    window.AWS.config.region = "cn-northwest-1"; //设置区域
    let url2 = url;
    let _url2 = "";
    if (
      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    ) {
      _url2 = url2.split(
        "https://view.officeapps.live.com/op/view.aspx?src="
      )[1];
    } else {
      _url2 = url2;
    }
    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
    let name = decodeURIComponent(
      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
    );
    var params = {
      Bucket: "ccrb",
      Key: name
    };
    s3.getObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
        resolve({ data: 1 });
      } else {
        const fileContent = data.Body.toString("utf-8");
        resolve({ data: fileContent });
      } // sxuccessful response
    });
    // axios({
  });
};
export default {
  mixins: [myMixin],
  components: {},
  data() {
    return {
      isAnswer:false,
      show: false,
      toolList: [
        {
          labelKey: "ssChoice",
          value: 45,
          img: require("../../assets/icon/thirdToolList/choose.png")
        },
        {
          labelKey: "ssSurvey",
          value: 4,
          img: require("../../assets/icon/thirdToolList/ask.png")
        },
        {
          labelKey: "ssTable",
          value: 48,
          img: require("../../assets/icon/fourthToolList/table.png")
        },
        {
          labelKey: "ssDocument",
          value: 52,
          img: require("../../assets/icon/fourthToolList/text.png")
        },
        {
          labelKey: "ssStudentGroup",
          value: 49,
          img: require("../../assets/icon/fourthToolList/group.png")
        },
        {
          labelKey: "ssWhiteboard",
          value: 1,
          img: require("../../assets/icon/secondToolList/whiteBoard.png")
        },
        {
          labelKey: "ssQaQuestion",
          value: 15,
          img: require("../../assets/icon/thirdToolList/answer.png")
        },
        {
          labelKey: "ssMatch",
          value: 41,
          img: require("../../assets/icon/thirdToolList/select.png")
        },
        {
          labelKey: "ssSort",
          value: 47,
          img: require("../../assets/icon/fourthToolList/conSentences.png")
        },
        {
          labelKey: "ssPersonalEval",
          value: 40,
          img: require("../../assets/icon/secondToolList/eval.png")
        },
        {
          labelKey: "ssMindGrid",
          value: 7,
          img: require("../../assets/icon/secondToolList/mindNetwork.png")
        }
      ],
      studentWork: null,
      testData: null,
      testJson: null,
      tool: null,
      imagePreviewVisible: false,
      previewImageUrl: '',
			optionTypeList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

    };
    },
    computed: {
      translatedToolList() {
        return this.toolList.map(item => ({
          ...item,
          label: this.lang[item.labelKey]
        }));
      }
    },
    methods: {
    async open({ work, testData, testJson, tool }) {

      console.log('work',work);
      if (this.isValidURL(work.works) && tool == '72') {
          await getFile(work.works).then((res) => {
              work.works = res.data;
          });
      }
      

      this.studentWork = work;
      (this.testData = testData),
        (this.testJson = testJson),
        (this.tool = tool);
      this.show = true;
    },
    isValidURL(str){
      try {
              const url = new URL(str);
              return ['http:', 'https:', 'ftp:'].includes(url.protocol) && !!url.hostname;
      } catch (e) {
          return false;
      }
    },
    close() {
      this.show = false;
      (this.studentWork = null),
        (this.testData = null),
        (this.testJson = null),
        (this.tool = null);
        this.$emit("close")
    },
    init() {
      this.studentWork = null;
    },
    // 预览图片
    previewImage(imageUrl) {
        this.previewImageUrl = imageUrl;
        this.imagePreviewVisible = true;
    },
  },
  computed: {
    showListData(){
        return function (val) {
            let kk = val.map(e=> e.messages).flat()
            console.log('kk',kk);
            if (kk.length == 0) {
            return false
            }
            return true
        };
    },
    renderedFormula() {
      return function(val){
        if (this.lang.lang == 'com') {
          return val;
        }
       try {
           // 判断是否含有HTML标签，<tag ...>...</tag>
            const hasTag = /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g.test(val);
            if (!hasTag) {
              val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, '');

              // 纯文本，整体渲染
              try {
                return katex.renderToString(val.trim(), {
                  throwOnError: false,
                  strict: false,
                  output: "htmlAndMathml"
                });
              } catch (e) {
                return val; // 渲染失败原样输出
              }
            } else {
              // 有标签，对每个标签内容渲染
              return val.replace(
                /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g,
                (match, tag, attrs, inner) => {
                  let html;
                  val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, '');
                  try {
                    html = katex.renderToString(inner.trim(), {
                      throwOnError: false,
                      strict: false,
                      output: "htmlAndMathml"
                    });
                  } catch (e) {
                    html = inner;
                  }
                  return `<${tag}${attrs}>${html}</${tag}>`;
                }
              );
            }
        } catch (e) {
          console.error('KaTeX渲染错误:', e);
          return val;
        }
      }
    },
    MarkdownT() {
      return function (c) {
        let md = new MarkdownIt();
        return c
          ? md.render(c) : "";
      };
    },
    userAnswer() {
      let _result = [];

      if (this.studentWork && this.tool) {
        let _studentWorks = [41].includes(this.tool)
          ? this.studentWork.works
          : JSON.parse(this.studentWork.works);
        if ([45].includes(this.tool)) {
          let _answer = _studentWorks[0].anwer;
          _result = _answer;
        } else if ([4].includes(this.tool)) {
          console.log('_studentWorks',_studentWorks);

          let _answer = _studentWorks[0].anwer;
          _result = _answer;
        } else if ([48, 52].includes(this.tool)) {
          let _answer = _studentWorks.text;
          _result = _answer;
        } else if ([15].includes(this.tool)) {
          let _answer = _studentWorks[0].answer;
          _result = _answer;
        } else if ([41].includes(this.tool)) {
          let _answer = _studentWorks.split(",");
          _answer.forEach((item, index) => (_answer[index] = parseInt(item)));
          _result = _answer;
        } else if ([47].includes(this.tool)) {
          let _answer = _studentWorks.map(i => i.chooseSenList);
          _result = _answer;
        }else if([40].includes(this.tool)){
          _result = _studentWorks;
        }
      }

      return _result;
    }
  }
};
</script>

<style scoped>
.studentWorkPreviewDialog {
  width: 100vw;
  height: 100vh;
}

.studentWorkPreviewDialog >>> .el-dialog__header,
.studentWorkPreviewDialog >>> .el-dialog__footer {
  display: none; /* 隐藏头部和底部 */
}

.studentWorkPreviewDialog >>> .el-dialog__body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.studentWorkPreviewDialog >>> .katex {
  font-size: 16px;
  width: 100%;
  white-space: normal;
}
.studentWorkPreviewDialog >>> .katex .base{
  display: inline !important;
  display: contents !important;
}

.studentWorkPreviewDialog >>> .katex .base .cjk_fallback{
    white-space: normal !important;
    display: inline !important;
}
.s_body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px;
  background-color: #f3f7fd;
}

.s_b_main {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
}

.s_b_m_top {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30px;
  font-size: 20px;
}

.s_b_m_top > span {
  cursor: pointer;
}

.s_b_m_ti_title {
  display: flex;
  align-items: center;
}

.s_b_m_ti_title > span:nth-of-type(1) {
  font-size: 30px;
  font-weight: bold;
  color: #3681fc;
}

.s_b_m_ti_title > svg {
  width: 30px;
  height: 30px;
  margin: 0 20px 0 5px;
}

.s_b_m_ti_title > span:nth-of-type(2) {
  font-size: 20px;
  font-weight: bold;
}

.s_b_m_ti_title > div {
  font-size: 30px;
  font-weight: bold;
}

.s_b_m_content {
  width: 100%;
  overflow: auto;
  height: calc(100% - 70px);
  box-sizing: border-box;
}

.s_b_m_content > div {
  width: 70%;
  height: auto;
  margin: 0 auto;
  min-width: 600px;
  padding: 10px 0 30px 0px;
}

.s_b_m_toolItem {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.s_b_m_ti_option {
  width: 100%;
  height: auto;
  padding: 15px 15px 15px 15px;
  display: flex;
  flex-wrap: wrap;
  background-color: #f3f7fd;
  border-radius: 30px;
  margin: 10px 0 10px 0px;
  box-sizing: border-box;
}

.s_b_m_ti_option > span > img {
  max-height: 150px;
  border-radius: 2px;
  cursor: pointer;
}

.s_b_m_ti_o_btn {
  width: 20px;
  height: 100%;
  min-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.s_b_m_ti_o_btn > span {
  width: 20px;
  height: 20px;
  display: block;
  box-sizing: border-box;
  border: solid 1px #3681fc;
  overflow: hidden;
}

.s_b_m_ti_o_btn > span > span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3681fc;
  position: relative;
}

.s_b_m_ti_o_btn1 {
  border-radius: 50%;
}

.s_b_m_ti_o_btn1 > span::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}

.s_b_m_ti_o_btn2 {
  border-radius: 2px;
}
/*
.s_b_m_ti_o_btn2 > span > svg {
  width: 12px;
  height: 12px;
} */

.s_b_m_ti_o_btn2 > span::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: #fff;
  /* border-radius: 50%; */
}

.s_b_m_ti_o_choice {
  border: solid 1px #3681fc;
}

.s_b_m_tool48 >>> table {
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
}

.s_b_m_tool48 >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
  height: 30px;
  vertical-align: baseline;
  border-right: 1px solid #ccc;
  padding: 5px 10px;
  max-width: 0;
  box-sizing: border-box;
  background-color: #f1f1f1;
}

.s_b_m_tool48 >>> table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 5px 10px;
  text-align: center;
  height: 30px;
  min-height: 30px;
  vertical-align: baseline;
  max-width: 0;
  box-sizing: border-box;
  background-color: #fff;
}

.s_b_m_ti_answer {
  margin-top: 20px;
  font-size: 20px;
  color: #4078dd;
}

.s_b_m_tool41 {
  display: flex;
}

.s_b_m_t_image {
  width: calc(100% - 350px);
  height: auto;
}

.s_b_m_t_image > img {
  width: 95%;
  height: auto;
  object-fit: cover;
}

.s_b_m_t_select {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.s_b_m_t_selectItem {
  margin-bottom: 20px;
}

.s_b_m_sortItem {
  margin-bottom: 30px;
}

.s_b_m_s_answer {
  width: 100%;
  height: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.s_b_m_s_answer > span {
  padding: 10px 35px;
  border-radius: 8px;
  margin-right: 20px;
  border: solid 2px #a3c7f9;
  font-size: 20px;
  font-weight: bold;
}

.s_b_m_s_sortText {
  font-size: 20px;
}

.s_s_b_m_s_rightOrError {
  display: flex;
  margin-top: 20px;
}

.s_s_b_m_s_rightOrError > div {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.s_s_b_m_s_rightOrError > div > img {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.s_b_m_t_rateItem{
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  font-size: 18px;
}

.s_b_m_t_rateItem>div{
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}


.s_b_m_t_rateItem>div>>> .el-rate {
  height: 30px;
}


.s_b_m_t_rateItem>div>>> .el-rate__icon{
  font-size: 28px;
}

.s_b_m_t_rateItem>div>span{
  margin-right: 20px;
}

.s_b_m_t_rateItem>span{
  padding: 10px 30px;
  background-color: #F7F6F9;
  border-radius: 8px;
  font-size: 18px;
}

.s_b_m_t_rateText{
  margin-top: 20px;
  min-width: 200px;
  min-height: 100px;
  height: auto;
  width: auto;
  padding: 10px 10px;
  border: solid 1px #D0D0D2;
  background-color: #F7F6F9;
}
.a_add_body {
  display: flex;
  align-items: center;
}

.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.a_add_input >>> .el-radio-group,
.a_add_input >>> .el-checkbox-group {
  width: 100%;
}

.a_add_input >>> .el-radio,
.a_add_input >>> .el-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 15px 0;
}

.a_add_input >>> .el-radio:not(:last-child),
.a_add_input >>> .el-checkbox:not(:last-child) {
  width: 100%;
  border-bottom: 1px solid #efefef;
}
.redioStyle >>> .el-radio__label {
  font-size: 18px;
}

.redioStyle >>> .el-radio__label > span,
.redioStyle >>> .el-checkbox__label > span {
  word-break: break-all;
  white-space: normal;
}

.redioStyle >>> .el-checkbox__label {
  font-size: 18px;
}
.markScore_diyTit {
        color: #000000;
        width: calc(100% - 50px);
        display: flex;
        height: 24px;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;

    }
    .TName{
        color: #fff;
        font-weight: 600;
        width: 185px;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 12px 12px 0 0;
        height: 28px;
        padding: 6px 17px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .con{
        color: #000000E5;
        border-radius: 0 0 12px 12px;
        border: 1px solid #E7E7E7;
        padding: 16px;
        box-sizing: border-box;
        box-shadow: 0px 4px 20px 0px #0000001A;
    }
    .left{
        display: flex;
        flex-direction: column;
        font-size: 16px !important;
        justify-content: flex-start;
        line-height: 25px;
    }
    .BodyCon{
        background: #FFFFFF;
        border: 0.5px solid #E7E7E7;
        border-radius: 12px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    .BodyConTit{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #000;
    }
    .BodyConChat{
        display: flex;
        flex-direction: column;
    }

    /* 图片预览对话框样式 */
    .image-preview-dialog >>> .el-dialog__body {
        padding: 20px;
        /* background: rgba(0, 0, 0, 0.8); */
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 90%;
    }

    .image-preview-dialog >>> .el-dialog {
        background: transparent;
        box-shadow: none;
    }

    .image-preview-dialog >>> .el-dialog__header {
        background: transparent;
        border: none;
        display: block;
    }

    .image-preview-dialog >>> .el-dialog__close {
        color: #fff;
        font-size: 24px;
    }

    .image-preview-dialog >>> .el-dialog__close:hover {
        color: #409EFF;
    }

</style>
