<template>
  <div class="content">
    <!-- 标题 -->
    <div class="title-content">
      <div class="title-contentIcon">
        <el-image class="zsIcon" :src="require('../../../../assets/images/zsicon.png')" fit="contain"></el-image>
        病历智审结果
      </div>
      <i class="el-icon-close" @click="closeClick"></i>
    </div>
    <!-- tab选项卡 -->
    <el-tabs v-model="activeName" :stretch="true">
      <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.label" :name="item.name">
        <span slot="label">
          {{ item.label }}
          <span v-if="item.hasMessage && item.medical && item.medical !== '0'" class="dot">{{ item.medical }}</span>
        </span>
        <template>
          <!-- 病案首页 -->
          <div class="first-content" v-if="item.name === 'first'">
            <div
              class="score-box score-box_bl"
              :class="{
                scoreLevel_1_1: scoreLevel_ylzc == '优',
                scoreLevel_2_2: scoreLevel_ylzc == '良',
                scoreLevel_3_3: scoreLevel_ylzc == '中',
                scoreLevel_4_4: scoreLevel_ylzc == '差',
              }"
            >
              <span>首页评分</span>
              <span class="score">{{ resultsList.score.score }}</span>
              <el-image v-if="scoreLevel_ylzc == '优'" class="level" style="width: 47px; height: 41px" :src="require('../../../../assets/images/you.png')" fit="contain"></el-image>
              <el-image
                v-if="scoreLevel_ylzc == '良'"
                class="level"
                style="width: 47px; height: 41px"
                :src="require('../../../../assets/images/liang.png')"
                fit="contain"
              ></el-image>
              <el-image
                v-if="scoreLevel_ylzc == '中'"
                class="level"
                style="width: 47px; height: 41px"
                :src="require('../../../../assets/images/zhong.png')"
                fit="contain"
              ></el-image>
              <el-image v-if="scoreLevel_ylzc == '差'" class="level" style="width: 47px; height: 41px" :src="require('../../../../assets/images/cha.png')" fit="contain"></el-image>
            </div>
            <div class="legend-box">
              <span class="qz">强制</span>
              <span class="jy">建议</span>
            </div>
            <div class="suggest-content" v-for="(items, index) in resultsList.list" :key="index">
              <div class="cont-reight-bottom" @click="toJump(items.basis[0], items, index)">
                <div :class="items.level == 1 ? 'cont-reight-bottom-title-null' : 'cont-reight-bottom-title'">
                  <span v-if="items.category == 0">A类</span>
                  <span v-if="items.category == 1">B类</span>
                  <span v-if="items.category == 2">C类</span>
                  <span v-if="items.category == 3">D类</span>
                  <span v-if="items.category == 4">其他</span>
                  <span>-{{ items.down }}</span>
                </div>
                <div class="cont-reight-bottom-conter">
                  <div class="cont-reight-bottom-conter-flex">
                    <p>
                      <span class="bold">字段：</span>
                      {{ items.error_name }}
                    </p>
                    <el-image class="zsIcon" v-if="items.is_artificial == 0" :src="require('../../../../assets/images/zsicon.png')" fit="contain"></el-image>
                    <el-image class="ysIcon" v-if="items.is_artificial == 1" :src="require('../../../../assets/images/ysicon.png')" fit="contain"></el-image>
                  </div>
                  <p>
                    <span class="bold">提示：</span>
                    {{ items.desc }}
                  </p>
                </div>
              </div>
              <div class="btn-content">
                <div v-if="items.type === 3" class="rebuttal" @click="fetchAppealInfo('appeal', items, 3, MEDRECID)">驳回</div>
                <div class="btn-right">
                  <div v-if="items.type === 0" class="appeal" @click="openAppealDialog('reject', items, 2)">申诉</div>
                  <div v-if="items.type === 0 || items.type === 3" @click="handleIgnore(items, MED_REC_ID, 1, index)" class="ignore">忽略</div>
                  <div v-if="items.type === 2" class="appeal_in_progress">申诉中</div>
                </div>
              </div>
              <div class="hz"></div>
            </div>
          </div>
          <!-- 编码员 -->
          <div class="first-content" v-if="item.name === 'third'">
            <div
              class="score-box score-box_bl"
              :class="{
                scoreLevel_1_1: scoreLevel_ylzc == '优',
                scoreLevel_2_2: scoreLevel_ylzc == '良',
                scoreLevel_3_3: scoreLevel_ylzc == '中',
                scoreLevel_4_4: scoreLevel_ylzc == '差',
              }"
            >
              <span>首页评分</span>
              <span class="score">{{ controls.score.score }}</span>
              <el-image v-if="scoreLevel_ylzc == '优'" class="level" style="width: 47px; height: 41px" :src="require('../../../../assets/images/you.png')" fit="contain"></el-image>
              <el-image
                v-if="scoreLevel_ylzc == '良'"
                class="level"
                style="width: 47px; height: 41px"
                :src="require('../../../../assets/images/liang.png')"
                fit="contain"
              ></el-image>
              <el-image
                v-if="scoreLevel_ylzc == '中'"
                class="level"
                style="width: 47px; height: 41px"
                :src="require('../../../../assets/images/zhong.png')"
                fit="contain"
              ></el-image>
              <el-image v-if="scoreLevel_ylzc == '差'" class="level" style="width: 47px; height: 41px" :src="require('../../../../assets/images/cha.png')" fit="contain"></el-image>
            </div>
            <div class="legend-box">
              <span class="qz">强制</span>
              <span class="jy">建议</span>
            </div>
            <div class="suggest-content" v-for="(items, index) in controls.list" :key="index">
              <div class="cont-reight-bottom" @click="toJump(items.basis[0], items, index)">
                <div :class="items.level == 1 ? 'cont-reight-bottom-title-null' : 'cont-reight-bottom-title'">
                  <span v-if="items.category == 0">A类</span>
                  <span v-if="items.category == 1">B类</span>
                  <span v-if="items.category == 2">C类</span>
                  <span v-if="items.category == 3">D类</span>
                  <span v-if="items.category == 4">其他</span>
                  <span>-{{ items.down }}</span>
                </div>
                <div class="cont-reight-bottom-conter">
                  <div class="cont-reight-bottom-conter-flex">
                    <p>
                      <span class="bold">字段：</span>
                      {{ items.field_name }}
                    </p>
                    <!-- <el-image class="zsIcon" :src="require('../../../../assets/images/zsicon.png')"
                      fit="contain"></el-image> -->
                    <el-image class="zsIcon" v-if="items.is_artificial == 0" :src="require('../../../../assets/images/zsicon.png')" fit="contain"></el-image>
                    <el-image class="ysIcon" v-if="items.is_artificial == 1" :src="require('../../../../assets/images/ysicon.png')" fit="contain"></el-image>
                  </div>
                  <p>
                    <span class="bold">提示：</span>
                    {{ items.basises }}
                  </p>
                </div>
              </div>
              <div class="btn-content">
                <div v-if="items.type === 3" class="rebuttal" @click="fetchAppealInfo('appeal', items, 3, MEDRECID)">驳回</div>
                <div class="btn-right">
                  <div v-if="items.type === 0" class="appeal" @click="openAppealDialog('reject', items, 2)">申诉</div>
                  <div v-if="items.type === 0 || items.type === 3" @click="handleIgnore(items, MED_REC_ID, 3, index)" class="ignore">忽略</div>
                  <div v-if="items.type === 2" class="appeal_in_progress">申诉中</div>
                </div>
              </div>
              <div class="hz"></div>
            </div>
          </div>
          <!-- 住院病历 -->
          <div class="second-content" v-if="item.name === 'second'">
            <div class="score-box" :class="scoreLevel == '甲' ? 'scoreLevel_1' : scoreLevel == '乙' ? 'scoreLevel_2' : scoreLevel == '丙' ? 'scoreLevel_3' : ''">
              <span style="margin-top: -10px">
                病案评分
                <span class="score-f">{{ data.score }}</span>
              </span>
            </div>
            <div class="suggest-content" v-for="(items, index) in medicalRecord" :key="index">
              <div class="cont-reight-bottom">
                <div class="list-left-score" :class="items.level == 1 ? 'hover-1' : 'hover-2'">
                  <div>{{ items.level == 1 ? '必改' : '建议' }}</div>
                  <div>-{{ items.score }}</div>
                </div>
                <div class="cont-reight-bottom-conter">
                  <div class="cont-reight-bottom-conter-flex">
                    <p>
                      <span class="bold">字段：</span>
                      {{ items.error_field }}
                    </p>
                    <el-image class="zsIcon" v-if="items.is_artificial == 0" :src="require('../../../../assets/images/zsicon.png')" fit="contain"></el-image>
                    <el-image class="ysIcon" v-if="items.is_artificial == 1" :src="require('../../../../assets/images/ysicon.png')" fit="contain"></el-image>
                  </div>
                  <p>
                    <span class="bold">提示：</span>
                    {{ items.desc }}
                  </p>
                </div>
              </div>
              <div class="gist" @click="clickListItem(index)">
                <div class="gist-zkyj">质控依据&gt;&gt;</div>
              </div>
              <div class="gist-center" v-if="items.show">
                {{ items.notice ? items.notice : '' }}
              </div>
              <div class="btn-content">
                <div v-if="items.appeal_type === 3" class="rebuttal" @click="fetchAppealInfo('appeal', items, 3, MEDRECID)">驳回</div>
                <div class="btn-right">
                  <div v-if="items.appeal_type === 0" class="appeal" @click="openAppealDialog('reject', items, 2)">申诉</div>
                  <div v-if="items.appeal_type === 0 || items.appeal_type === 3" @click="handleIgnore(items, MED_REC_ID, 2, index)" class="ignore">忽略</div>
                  <div v-if="items.appeal_type === 2" class="appeal_in_progress">申诉中</div>
                </div>
              </div>
              <div class="hz"></div>
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogVisible" custom-class="my-dialog" :modal="false" :title="dialogTitle" width="40%">
      <div class="medical-record" style="margin-top: 30px">
        <el-descriptions>
          <el-descriptions-item label="病案号">{{ MED_REC_ID }}</el-descriptions-item>
          <el-descriptions-item label="床号">{{ CWH }}</el-descriptions-item>
          <el-descriptions-item label="住院次数">{{ AAA29 }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="reason" style="margin-top: 20px">
        <el-form :model="appealForm" :rules="appealRules" ref="appealFormRef" label-width="80px">
          <el-form-item :label="formLabels.doctor" prop="doctor">
            <el-input v-model="appealForm.doctor" :placeholder="formPlaceholders.doctor" :disabled="dialogType === 'appeal'"></el-input>
          </el-form-item>
          <el-form-item :label="formLabels.reason" prop="reason">
            <el-input type="textarea" v-model="appealForm.reason" :placeholder="formPlaceholders.reason" :disabled="dialogType === 'appeal'" :rows="2"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="cont-reight-bottom-conter" style="color: #606266 !important">
        <p>
          <span class="bold" style="color: #606266 !important">字段：</span>
          {{ zd_field_name }}
        </p>
        <p style="margin-top: 10px">
          <span class="bold" style="color: #606266 !important">提示：</span>
          {{ ts_desc }}
        </p>
      </div>
      <template #footer>
        <el-button type="primary" @click="submitAppeal(MED_REC_ID)">{{ buttonText }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { examineAppeal, getCaseQualityBazb, getAppealData, getNumberInfo } from '@/api/qc';
export default {
  props: {
    caseShow: {
      type: Boolean,
      required: true,
    },
    resultsList: {
      type: Object,
      default() {
        return {
          list: [],
        };
      },
    },
    MED_REC_ID: {
      type: [String, Number], // 根据实际类型定义
      required: true, // 是否必传
    },
    CWH: {
      type: [String, Number], // 根据实际类型定义
      required: true,
    },
    AAA29: {
      type: [String, Number], // 根据实际类型定义
      required: true,
    },
  },
  data() {
    return {
      activeName: 'first',
      tabList: [
        {
          label: '病案首页',
          name: 'first',
          hasMessage: true,
          medical: '',
        },
        {
          label: '住院病历',
          name: 'second',
          hasMessage: true,
          medical: '',
        },
        {
          label: '编码员',
          name: 'third',
          hasMessage: true,
          medical: '',
        },
      ],
      dialogVisible: false,
      dialogType: '',
      dialogTitle: '',
      appealForm: {
        reason: '',
        phone: '',
      },
      appealRules: {
        doctor: [{ required: true, message: '请输入医师姓名及工号', trigger: 'blur' }],
        reason: [{ required: true, message: '请输入原因', trigger: 'blur' }],
      },
      formLabels: {
        reason: '', // 动态设置
        doctor: '', // 动态设置
      },
      formPlaceholders: {
        reason: '', // 动态设置
        doctor: '', // 动态设置
      },
      localCaseShow: this.caseShow,
      data: {
        score: 100, // 示例数据
        data: [], // 示例数据
      },
      tableData: [], // 初始化 tableData
      resultsData: [],
      value1: null, // 初始化 value1
      is_show: false,
      appeal_document: '',
      appeal_docter: '',
      controls: {
        ZYH: '',
        score: {
          score: 100,
        },
        list: [],
      },
      zkcodeIndex: 0,
      zk_codes: {
        qz: [],
        jy: [],
      },
      active_zk_index: 0,
      currentId: '',
      MEDRECID: '',
      caseHistory: [],
      medicalRecord: [],
      messageStatus: {
        first: true,
        second: false,
        third: false,
      },
      buttonText: '提交',
      zd_field_name: '',
      ts_desc: '',
      cate_type: '',
      ssIndex: '',
      savedItems: null,
      savedIndex: null
    };
  },
  computed: {
    scoreLevel() {
      /**
       * 甲＞90分
       * 乙75-90分
       * 丙＜75分
       * */
      let str;
      const { score } = this.data;
      console.log(score, 'score12');

      if (score > 90) {
        str = '甲';
      } else if (score < 75) {
        str = '丙';
      } else {
        str = '乙';
      }
      return str;
    },
    scrollHeight() {
      return `100%`;
    },
    scoreLevel_ylzc() {
      /**
       * 优＞=97分
       * 良90-96分
       * 中75~89分
       * 差＜75分
       * */
      let str;
      const { score } = this.controls.score;

      if (score >= 97) {
        str = '优';
      } else if (score < 97 && score >= 90) {
        str = '良';
      } else if (score < 90 && score >= 75) {
        str = '中';
      } else {
        str = '差';
      }
      return str;
    },
  },
  watch: {
    MED_REC_ID(newVal) {
      if (newVal) {
        this.MEDRECID = newVal;
        console.log('MED_REC_ID 已更新:', newVal);
        this.qualityBazb(newVal);
        this.getData(newVal);
        this.getMessageNum(newVal);
      }
    },
  },
  created() {
  },
  mounted() {
    this.getTableData();
    this.controlData.ZYH = this.$route.query.ZYH;
  },
  methods: {
    getMessageNum(newVal){
      getNumberInfo({ZYH: newVal}).then(res => {
        this.tabList[0].medical = res.data.errorV2;
        this.tabList[1].medical = res.data.medicalRecord;
        this.tabList[2].medical = res.data.homeQuality;
      });
    },
    hasMessage(tabName) {
      return this.messageStatus[tabName];
    },
    // 跳转锚点及高亮
    toJump(item, pItem, pIndex) {
      if (this.active_zk_index !== pIndex) {
        this.zkcodeIndex = 0;
        this.active_zk_index = pIndex;
      }
      const { user, zd, ss } = item.location;
      const arr = [];
      const { level } = pItem;
      const level_arr = {
        qz: [],
        jy: [],
      };
      if (user && user.length) {
        user.map(uItem => {
          const obj = {
            field: uItem,
            key: 'user',
          };
          arr.push(obj);

          if (level) {
            // 建议
            level_arr.jy.push(uItem);
          } else {
            // 强制
            level_arr.qz.push(uItem);
          }
        });
      }

      if (zd && zd.length) {
        zd.map(zItem => {
          zItem.key = 'zd';
          arr.push(zItem);

          var index;
          if (zItem.ZZPB) {
            index = 0;
          } else {
            index = zItem.DIA_ORDER;
          }
          if (level) {
            // 建议
            level_arr.jy.push(`zd-${index}-${zItem.field}`);
          } else {
            // 强制
            level_arr.qz.push(`zd-${index}-${zItem.field}`);
          }
        });
      }
      if (ss && ss.length) {
        ss.map(sItem => {
          sItem.key = 'ss';
          arr.push(sItem);

          var index;
          if (sItem.ZZPB) {
            index = 0;
          } else {
            index = sItem.OPE_ORDER;
          }
          if (level) {
            // 建议
            level_arr.jy.push(`ss-${index}-${sItem.field}`);
          } else {
            // 强制
            level_arr.qz.push(`ss-${index}-${sItem.field}`);
          }
        });
      }
      const maxIndex = arr.length - 1;
      this.$emit('zk', { level: 0, anchor: arr[this.zkcodeIndex], codes: level_arr });
      if (this.zkcodeIndex === maxIndex) {
        this.zkcodeIndex = 0;
      } else {
        this.zkcodeIndex++;
      }
    },
    // 获取编码员数据
    getData(newVal) {
      const params = {
        ZYH: newVal,
      };
      this.$axios.post('/home_bmy_quality/bmyQualityResult', params).then(res => {
        console.log('编码员数据', res.data);
        const { qz, jy } = res.data;
        const list = [...qz, ...jy];
        this.$set(this, 'controls', { ...res.data, list });

        list.map(item => {
          item.basis.map(bItem => {
            const { user, zd, ss } = bItem.location;
            if (user && user.length) {
              user.map(uItem => {
                if (item.level) {
                  // 建议
                  this.zk_codes.jy.push(uItem);
                } else {
                  // 强制
                  this.zk_codes.qz.push(uItem);
                }
              });
            }
            if (zd && zd.length) {
              zd.map(zItem => {
                var index;
                if (zItem.ZZPB) {
                  index = 0;
                } else {
                  index = zItem.DIA_ORDER;
                }
                if (item.level) {
                  // 建议
                  this.zk_codes.jy.push(`zd-${index}-${zItem.field}`);
                } else {
                  // 强制
                  this.zk_codes.qz.push(`zd-${index}-${zItem.field}`);
                }
              });
            }
            if (ss && ss.length) {
              ss.map(sItem => {
                var index;
                if (sItem.ZZPB) {
                  index = 0;
                } else {
                  index = sItem.OPE_ORDER;
                }
                if (item.level) {
                  // 建议
                  this.zk_codes.jy.push(`ss-${index}-${sItem.field}`);
                } else {
                  // 强制
                  this.zk_codes.qz.push(`ss-${index}-${sItem.field}`);
                }
              });
            }
          });
        });
        this.$emit('codes', this.zk_codes);
      });
    },
    openAppealDialog(type, items, index) {
      console.log(items, index, 'items');
      this.zd_field_name = items.error_name || items.field_name || items.error_field;
      if (items.cate === 3) {
        this.ts_desc = items.basises;
      } else {
        this.ts_desc = items.desc;
      }

      this.cate_type = items.cate;
      this.dialogType = type;
      this.currentId = items.error_rule || items.rule_id;
      this.ssIndex = index;
      this.savedItems = items;
      this.savedIndex = index;

      if (type === 'reject') {
        this.dialogTitle = '申诉';
        this.formLabels = {
          doctor: '申诉医师',
          reason: '申诉原因',
        };
        this.formPlaceholders = {
          doctor: '请输入申诉医师姓名及工号',
          reason: '请输入申诉原因',
        };
        this.buttonText = '提交';
        // 初始化 appealForm 的值
        this.appealForm = {
          doctor: '',
          reason: ''
        };
      }
      this.dialogVisible = true;
    },
    async fetchAppealInfo(type, items, index, MEDRECID) {
      this.zd_field_name = items.error_name || items.field_name || items.error_field;
      if (items.cate === 3) {
        this.ts_desc = items.basises;
      } else {
        this.ts_desc = items.desc;
      }
      this.savedItems = items;
      this.savedIndex = index;
      this.dialogType = type;

      try {
        const params = {
          id: items.rule_id || items.error_rule,
          cate: items.cate,
          ZYH: MEDRECID,
        };
        const res = await getAppealData(params);
        console.log(res, 'getAppealData 接口返回');
        this.dialogVisible = true;

        if (type === 'appeal') {
          this.dialogTitle = '驳回';
          this.formLabels = {
            doctor: '驳回医师',
            reason: '驳回原因',
          };
          this.formPlaceholders = {
            doctor: '请输入驳回医师姓名及工号',
            reason: '请输入驳回原因',
          };
          this.buttonText = '申诉';
          this.appealForm.doctor = res.data.case_docter; // 驳回医师
          this.appealForm.reason = res.data.reject_content; // 驳回原因
        }
        // 将接口返回的数据渲染到表单中
      } catch (error) {
        console.error('获取驳回信息失败:', error);
      }
    },
    submitAppeal(MEDRECID) {
      console.log(MEDRECID, this.appealForm.reason, this.appealForm.doctor, 'MEDRECID99999999');

      if (this.buttonText === '提交') {
        // 申诉逻辑
        const pramse = {
          id: this.currentId,
          describe: this.appealForm.reason, // 使用 appealForm 中的原因
          case_docter: this.appealForm.doctor, // 使用 appealForm 中的医师
          statusY: 1, // 申诉状态
          type: this.cate_type,
          cate: this.ssIndex,
          ZYH: MEDRECID,
        };
        console.log(pramse, 'pramse');

        examineAppeal(pramse).then(res => {
          this.$message({
            message: '提交申诉成功',
            type: 'success',
          });
          this.qualityBazb(MEDRECID);
        });
        // 提交后关闭弹框
        this.dialogVisible = false;
      } else if (this.buttonText === '申诉') {
        this.openAppealDialog('reject', this.savedItems, this.savedIndex);
      }
    },
    handleIgnore(items, MEDRECID, type, index) {
      const pramse = {
        id: items.error_rule || items.rule_id,
        type: type,
        cate: 1,
        ZYH: MEDRECID,
      };

      examineAppeal(pramse).then(res => {
        console.log(res, 'examineAppeal for ignore');
        this.$message({
          message: '忽略成功',
          type: 'success',
        });
      });

      if (type == 1) {
        this.resultsList.list.splice(index, 1);
      } else if (type == 2) {
        this.medicalRecord.splice(index, 1);
      } else if (type == 3) {
        this.controls.list.splice(index, 1);
      }
    },
    clickListItem(idx) {
      let tableData = this.medicalRecord;
      tableData[idx].show = !tableData[idx].show;
      this.$nextTick(() => {
        this.medicalRecord = tableData;
      });
    },
    qualityBazb(newVal) {
      const params = {
        id: newVal,
      };
      getCaseQualityBazb(params).then(res => {
        if (res && res.data) {
          this.data.score = res.data.score;
          for(let i=0; i<res.data.data.length; i++) {
            res.data.data[i].show = true;
          }
          this.$nextTick(() => {
            this.medicalRecord = res.data.data;
          });
        }
      });
    },
    getTableData() {
      let data = this.data.data;
      for (let i = 0; i < data.length; i++) {
        data[i].show = true;
      }
      this.tableData = data;
    },
    closeClick() {
      this.$emit('close'); // 触发 close 事件
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: hsl(205.32deg 43.43% 49.22%);
}

::v-deep .el-dialog__close {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
}

::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-descriptions-item__label {
  font-weight: bold;
  font-size: 15px;
}

::v-deep .el-tabs__item {
  padding: 0 15px;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;

  .btn-right {
    width: 95%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 10px;
    margin-top: 10px;

    .appeal {
      width: 64px;
      height: 30px;
      line-height: 20px;
      border-radius: 4px;
      background-color: rgba(27, 100, 176, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      font-family: -regular;
      cursor: pointer;
    }

    .appeal_in_progress {
      width: 64px;
      height: 30px;
      line-height: 20px;
      border-radius: 4px;
      background-color: rgba(229, 229, 229, 1);
      color: rgba(238, 138, 12, 1);
      font-size: 14px;
      text-align: center;
      font-family: -regular;
      border: none;
    }

    .ignore {
      width: 64px;
      height: 30px;
      line-height: 20px;
      border-radius: 4px;
      background-color: rgba(229, 229, 229, 1);
      color: #666666;
      font-size: 14px;
      text-align: center;
      font-family: -regular;
      border: none;
      cursor: pointer;
    }

    div {
      padding: 4px 6px;
      font-size: 12px;
      margin-left: 10px;
      color: #000;
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 20px;
      border-radius: 5px;
      border: 1px solid #999;
      cursor: pointer;
      background-color: #fff;
    }
  }

  .rebuttal {
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: rgba(240, 31, 58, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    text-align: center;
    font-family: -regular;
    cursor: pointer;
    border-radius: 20px;
  }

  .disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

.hz {
  height: 20px;
}

.flow {
  margin: 15px 10px;

  span {
    width: 20px;
    height: 20px;
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: blue;
  }
}

.gist {
  width: 93%;
  display: flex;
  font-size: 14px;
  cursor: pointer;
  padding: 0px 3px;
  color: #ed3028;
  line-height: 20px;
  align-items: center;
  justify-content: space-between;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;

  span {
    margin-left: 10px;
  }
}

.zsIcon {
  width: 35px;
  height: 35px;
}

.ysIcon {
  width: 30px;
  height: 30px;
}

.gist-center {
  width: 93%;
  font-size: 14px;
  padding: 0px 3px;
  line-height: 25px;
  align-items: center;
  justify-content: space-between;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
}

.second-content {
  padding: 10px 10px;

  .score-second {
    width: 300px;
    height: 60px;
    margin: 0 auto;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(152, 112, 20);
  }

  .suggest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-left {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      line-height: -20px;
      align-content: center;
      border-right: 3px solid #409eff;
      flex-wrap: wrap;

      div {
        color: #409eff;
      }
    }

    .card-right {
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      height: 40px;
      width: 80%;
      align-content: space-around;

      div {
        width: 100%;
      }
    }
  }

  .score-box {
    width: 100%;
    margin-bottom: 16px;
    padding: 30px 50px 18px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    div {
      font-size: 20px;
    }

    .ban {
      font-size: 20px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      vertical-align: middle;
    }

    .score-f {
      padding-left: 20px;
      font-size: 20px;
    }

    .score-dj,
    .score-f {
      font-weight: bold;
      font-size: 40px;
    }
  }

  .score-box.scoreLevel_1 {
    background: rgb(11, 133, 63);
    background-image: url('../../../../assets/images/icon-jia.png');
    background-repeat: no-repeat;
    background-size: 47px 41px;
    background-position: 80% 50%;
  }

  .score-box.scoreLevel_2 {
    background: rgb(152, 112, 20);
    background-image: url('../../../../assets/images/icon-yi.png');
    background-repeat: no-repeat;
    background-size: 47px 41px;
    background-position: 80% 50%;
  }

  .score-box.scoreLevel_3 {
    background: rgb(199, 54, 13);
    background-image: url('../../../../assets/images/icon-bing.png');
    background-repeat: no-repeat;
    background-size: 47px 41px;
    background-position: 80% 50%;
  }
}

.title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  font-size: 14px;

  .title-contentIcon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: -15px;

    .zsIcon {
      width: 30px;
      height: 30px;
    }
  }

  .title-contentIcon span {
    margin-left: 10px;
  }

  .title-contentIcon .el-icon-close {
    cursor: pointer;
  }

  .title-contentIcon .el-icon-close:hover {
    color: red;
  }

  .el-icon-close {
    cursor: pointer;
  }
}

.score-content {
  width: 300px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 1px solid #000;
  position: relative;

  .triangle {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 30px solid transparent;
    border-top: 30px solid red;
  }

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: absolute;
    top: 2px;
    right: 2px;
    color: #fff;
    z-index: 99;
  }
}

.control-box {
  position: fixed;
  top: 106px;
  // top: 70px;
  right: 13px;
  width: 400px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  overflow-x: hidden;
  transition: all 0.5s;
}

::v-deep .el-dialog__body {
  padding-top: 10px;
}

.dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 23px;
  background-color: red;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  margin: -10px 5px;
}

.first-content {
  padding: 10px 10px;

  .message-tip {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 23px;
    color: #fff;
    text-align: center;
    background-color: red;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    position: absolute;
    top: 0px;
  }
}

.score-box {
  width: 100%;
  margin-bottom: 16px;
  padding: 30px 51px 18px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.score-box div {
  font-size: 20px;
}

.score-box .score-f {
  padding-left: 20px;
  font-size: 20px;
  font-weight: bold;
}

.score-box .score-dj {
  font-weight: bold;
}

.score-box span {
  font-size: 20px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 40px;
  vertical-align: middle;
}

.score-box .score {
  font-size: 40px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 40px;
  vertical-align: middle;
  margin-left: 20px;
}

.score-box .level {
  float: right;
}

/* score-box 不同等级的背景颜色（旧的等级样式） */
.score-box.scoreLevel_1_1 {
  background: #328240;
}

.score-box.scoreLevel_2_2 {
  background: #8ac410;
}

.score-box.scoreLevel_3_3 {
  background: #ef8a0d;
}

.score-box.scoreLevel_4_4 {
  background: #f0203a;
}

/* score-box 另一种样式 */
.score-box_bl {
  padding: 20px 50px 20px 20px;
}

.score-box_bl .score {
  margin-left: -30px;
}

.suggest-content {
  width: 346px;
  // height: 182px;
  line-height: 20px;
  background-color: #f1f5fe;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: -regular;
}

.legend-box {
  text-align: center;
  margin: 10px 0 10px;

  span {
    position: relative;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 20px;

    &:nth-child(1) {
      margin-right: 40px;
    }

    &::before {
      position: absolute;
      top: 5px;
      left: -20px;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 5px;
    }

    &.qz {
      &::before {
        background: #ed3028;
      }
    }

    &.jy {
      &::before {
        background: #78b2f1;
      }
    }
  }
}

.bag-code {
  background-color: hsl(200deg 37.5% 96.86%);
  height: 32%;
}

.cont-reight-bottom {
  margin: 24px 0 15px;
  display: flex;
  cursor: pointer;

  .list-left-score {
    width: 70px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;

    &.hover-1 {
      background: rgb(254, 240, 240);
      color: rgb(238, 14, 14);
      border-right: 3px solid rgb(238, 14, 14);
    }

    &.hover-2 {
      background: rgb(236, 245, 255);
      color: rgb(52, 140, 235);
      border-right: 3px solid rgb(52, 140, 235);
    }

    & > div {
      font-size: 14px;
    }
  }

  .list-right-tips {
    flex: 1;
    font-size: 12px;
    padding-left: 10px;

    .notice-box {
      margin-top: 8px;
    }
  }
}

.cont-reight-bottom div span {
  font-size: 14px;
  margin-top: 10px;
}

.cont-reight-bottom-title {
  border-right: 3px solid #ed3028;
  width: 90px;
  height: 80px;
  line-height: 20px;
  background-color: rgba(254, 240, 240, 1);
  color: #ed3028;
  font-size: 14px;
  text-align: center;
  font-family: -regular;
  font-weight: bold;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-reight-bottom-title-null {
  width: 90px;
  height: 80px;
  background-color: rgba(254, 240, 240, 1);
  border-right: 3px solid #78b2f1;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #78b2f1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-reight-bottom-conter {
  margin-left: 8px;
  min-height: 70px;
  width: 100%;
  margin-top: 7px;
  line-height: 30px;

  .cont-reight-bottom-conter-flex {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  p {
    font-size: 14px;
    color: #666666;
  }
}

.zkyj {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  color: #ed3028;
  line-height: 20px;
  cursor: pointer;
  padding: 0px 10px;
}

.bold {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #202020 !important;
}

.zsIcon {
  width: 35px;
  height: 35px;
}

.states-content {
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;

  .states-box {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;

    span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: red;
      margin-right: 8px;
    }
  }
}

.first-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 300px;
  margin: 0 auto;
  height: 60px;
  margin-bottom: 20px;

  .card-left {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: -20px;
    align-content: center;
    background: rgba(255, 0, 0, 0.4);
    border-right: 3px solid red;
    flex-wrap: wrap;

    div {
      width: 60px;
      text-align: center;
    }
  }

  .card-right {
    font-size: 14px;
    // display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    height: 60px;
    line-height: 24px;
    align-content: space-around;
  }
}
</style>
