<template>
  <div class="content-box">
    <div v-if="pageIndex == 1">
      <div class="left">
        <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
        <span class="cameratxt">教师综合素质评价</span>
      </div>
      <div class="scroll">
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <el-input
                :clearable="true"
                @clear="searchBtn"
                v-model.trim="searchInput.keyWord"
                class="sel"
                placeholder="请输入教师姓名或学工号"
              /><el-button
                color="rgba(0, 97, 255, 1)"
                type="primary"
                class="search"
                @click="searchBtn"
                >查询</el-button
              >
            </div>
            <div class="condition">
              <span class="title">学期 :</span>
              <el-select
                v-model="searchInput.semester"
                class="sel"
                placeholder="请选择学期"
              >
                <el-option label="全部" value="1" />
                <el-option label="2019-2020秋季学期（下学期）" value="2" />
              </el-select>
            </div>
            <div class="condition">
              <span class="title">教学学科 :</span>
              <el-select
                v-model="searchInput.subject"
                class="sel"
                placeholder="请选择学期"
              >
                <el-option label="全部" value="1" />
                <el-option label="语文" value="2" />
                <el-option label="数学" value="2" />
              </el-select>
            </div>
            <div class="condition">
              <span class="title">班级 :</span>
              <el-select
                v-model="searchInput.class"
                class="sel"
                placeholder="请选择学期"
              >
                <el-option label="全部" value="1" />
                <el-option label="一班" value="2" />
                <el-option label="二班" value="2" />
              </el-select>
            </div>
          </div>
          <!-- 按钮列表 -->
          <div class="gongneng">
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              plain
              @click="scoringItemsClick"
              >评分项管理</el-button
            >
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="importExcel"
              plain
              >导出</el-button
            >
          </div>
        </div>
        <div class="footer" v-loading="loading">
          <el-table
            :row-class-name="tableRowClassName"
            :data="tableData.list"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column align="center" type="selection" width="80" />
            <el-table-column
              align="center"
              prop="type"
              width="200"
              label="学期"
            />
            <el-table-column align="center" prop="name" label="教师姓名">
              <template #default="scope">
                <span class="normal" @click="teacherInfoClick(scope.row)"
                  >教师姓名</span
                >
              </template>
            </el-table-column>
            <el-table-column align="center" prop="link" label="职工号" />
            <el-table-column align="center" prop="status" label="教学学科" />
            <el-table-column align="center" prop="status" label="带教班级" />
            <el-table-column align="center" prop="status" label="“德”评分" />
            <el-table-column align="center" prop="status" label="“能”评分" />
            <el-table-column align="center" prop="status" label="“勤”评分" />
            <el-table-column align="center" prop="status" label="“绩”评分" />
            <el-table-column align="center" prop="status" label="“扣分”评分" />
            <el-table-column align="center" prop="status" label="最终评分" />
            <!-- <el-table-column align="center" prop="status" label="教学学科">
            <template #default="scope">
              <span class="normal">正常</span>
            </template>
          </el-table-column> -->
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <div class="edit">
                  <div class="look" @click="goScore(scope.row)">去评分</div>
                  <!-- <el-popconfirm
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="是否删除此房型?"
                  @confirm="del(scope.row)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <div class="del">删除</div>
                  </template>
                </el-popconfirm> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper, slot"
            :total="total"
            @update:current-page="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div v-if="pageIndex == 2" class="teacherInfo">
      <div class="left">
        <img
          src="@/assets/images/close.png"
          alt=""
          @click="teacherInfoConcel"
        />
        <span class="cameratxt">教师综合素质评价/详情</span>
      </div>
      <div class="scroll_score">
        <div class="semester">
          <div class="title">2019-2020秋季学期（下学期）</div>
          <div class="score">
            <div class="score_left">
              <img src="" alt="" />
              <div class="info">
                <div class="info_name">张三</div>
                <div class="info_object">
                  教学学科: 数学&nbsp;&nbsp;&nbsp;职工号: 2210
                </div>
                <div class="info_object">所带班级: 七年一班、七年三班</div>
              </div>
            </div>
            <div class="score_right"><span class="num">93</span>分</div>
          </div>
        </div>
        <div class="scoreList">
          <div class="title">
            <img src="@/assets/images/basicInfo.png" alt="" />
            <span>评分列表</span>
            <el-button
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="goScore"
              @click="searchBtn"
              >去评分</el-button
            >
          </div>
          <div class="table">
            <table class="table">
              <tr>
                <th colspan="3" class="th_border">德 (12分)</th>
                <th colspan="4">能 (12分)</th>
                <th class="qin">勤 (12分)</th>
                <th colspan="4">绩 (12分)</th>
                <th>扣分项</th>
              </tr>
              <tr>
                <td>
                  <div class="row2">
                    <span class="normal">为人师表</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">关爱学生</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">爱岗敬业</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">基础能力</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">教学能力</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">学习能力</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">创新能力</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">考勤</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">工作量</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">教学成绩</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">教研成果</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">专业成长</span>
                    <span class="normal">(3分)</span>
                  </div>
                </td>
                <td>
                  <div class="row2">
                    <span class="normal">总扣分</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td v-for="i in 13">
                  <div class="row2">
                    <el-input v-model.trim="input" placeholder="请打分" />
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="score_footer">
          <div class="footer_left">
            <div class="title">
              <img src="@/assets/images/basicInfo.png" alt="" />
              <span>评分对比</span>
            </div>
            <div id="scoreEcharts"></div>
          </div>
          <div class="footer_right">
            <div class="title">
              <div class="title_ranking">
                <img src="@/assets/images/basicInfo.png" alt="" />
                <span>评分排行榜</span>
              </div>
              <el-select v-model="value" class="m-2" placeholder="Select">
                <el-option label="全学科" value="1" />
                <el-option label="数学" value="2" />
              </el-select>
            </div>
            <el-table
              :row-class-name="tableRowClassName"
              :data="tableData.list"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '40px',
                border: 0,
              }"
            >
              <el-table-column
                align="center"
                type="index"
                width="100"
                label="排名"
              />
              <el-table-column align="center" prop="status" label="姓名" />
              <el-table-column align="center" prop="status" label="教学学科" />
              <el-table-column align="center" prop="status" label="最终得分" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 去评分按钮 -->
    <el-dialog
      class="scoreDialog"
      v-model="scoreVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="评分"
      align-center
      width="1150"
      :before-close="cancelScore"
    >
      <div class="table">
        <table class="table">
          <tr>
            <th colspan="3" class="th_border">德 (12分)</th>
            <th colspan="4">能 (12分)</th>
            <th class="qin">勤 (12分)</th>
            <th colspan="4">绩 (12分)</th>
            <th>扣分项</th>
          </tr>
          <tr>
            <td>
              <div class="row2">
                <span class="normal">为人师表</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">关爱学生</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">爱岗敬业</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">基础能力</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">教学能力</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">学习能力</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">创新能力</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">考勤</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">工作量</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">教学成绩</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">教研成果</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">专业成长</span>
                <span class="normal">(3分)</span>
              </div>
            </td>
            <td>
              <div class="row2">
                <span class="normal">总扣分</span>
              </div>
            </td>
          </tr>
          <tr>
            <td v-for="i in 13">
              <div class="row2">
                <el-input v-model.trim="input" placeholder="请打分" />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <!-- <el-table
          :data="scoreData.list"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <el-table-column align="center" label="德 (12分)">
            <el-table-column prop="a">
              <template #header>
                <div class="row2">
                  <span class="normal">为人师表</span>
                  <span class="normal">(3分)</span>
                </div>
              </template>
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >Edit</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >Delete</el-button
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="能 (12分)" />
          <el-table-column align="center" label="勤 (12分)" />
          <el-table-column align="center" label="绩 (12分)" />
          <el-table-column align="center" label="扣分项" />
        </el-table> -->
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmScore"
        >
          确认
        </el-button>
        <el-button @click="cancelScore">取消</el-button>
      </div>
    </el-dialog>

    <!-- 评分项管理 -->
    <el-dialog
      class="scoringItems"
      v-model="scoringItemsVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="评分项管理"
      align-center
      width="1200"
      :before-close="cancelScoringItems"
    >
      <div class="btn">
        <el-button
          type="primary"
          color="rgba(0, 97, 255, 1)"
          plain
          @click="bigItemClick"
          >添加项</el-button
        >
      </div>
      <div :key="resetTableIndex">
        <el-table
          ref="resetTable"
          :row-class-name="tableRowClassName"
          :data="scoringItemsData.list"
          :span-method="objectSpanMethod"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
          }"
        >
          <el-table-column fixed align="center" prop="pf" label="评分项" />
          <el-table-column align="center" prop="pfz" label="评分子项" />
          <el-table-column align="center" prop="fz" label="分值" />
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <div class="edit">
                <el-popconfirm
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon-color="#f89626"
                  title="是否删除此子项?"
                  @confirm="delScoringItems(scope.row)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <div class="look">删除</div>
                  </template>
                </el-popconfirm>
                <div class="look" @click="editScoringItems(scope.row)">
                  编辑
                </div>
                <div
                  v-if="scope.row.index == 1"
                  class="look"
                  @click="secondaryItemClick(scope.row)"
                >
                  添加子项
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="option">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmSelDel"
        >
          保存
        </el-button>
        <el-button @click="cancelScoringItems">返回</el-button>
      </div>
    </el-dialog>

    <!-- 添加项弹窗 -->
    <el-dialog
      class="addItemDialog"
      v-model="addItemVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="addItemTitle"
      align-center
      width="550"
      :before-close="cancelAddItem"
    >
      <el-form
        ref="addItemRef"
        :model="addItemRuleForm"
        :rules="addItemRules"
        label-width="100px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item
          v-if="addItemTitle == '添加评分项'"
          label="评分项 :"
          prop="bigitem"
        >
          <el-input
            v-model.trim="addItemRuleForm.bigitem"
            placeholder="请输入评分项"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="评分子项 :" prop="subitem">
          <el-input
            v-model.trim="addItemRuleForm.subitem"
            placeholder="请输入评分子项"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="分值 :" prop="score">
          <el-input
            v-model.trim="addItemRuleForm.score"
            placeholder="请输入分值"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item class="options">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmAddItem(addItemRef)"
          >
            确认
          </el-button>
          <el-button @click="cancelAddItem">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { markRaw } from "vue";
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onMounted,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [
    {
      type: "2019-2020秋季学期（下学期）",
      name: "消息平台",
      link: "2020152",
      status: 1,
      describe: "消息平台",
    },
    {
      type: "2019-2020秋季学期（下学期）",
      name: "学工数据库",
      link: "456952",
      status: 1,
      describe: "学工数据库",
    },
    {
      type: "2019-2020秋季学期（下学期）",
      name: "教务中间库",
      link: "9879845665",
      status: 1,
      describe: "教务中间库",
    },
    {
      type: "2019-2020秋季学期（下学期）",
      name: "新认证正式库",
      link: "6665156156",
      status: 1,
      describe: "新认证正式库",
    },
    {
      type: "2019-2020秋季学期（下学期）",
      name: "迎新系统",
      link: "56922",
      status: 1,
      describe: "迎新系统",
    },
  ],
});

const searchInput = reactive({
  keyWord: "",
  semester: "1", // 学期
  subject: "1", // 学科
  class: "1", // 班级
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(5); // 当前总数
const selectData = reactive({
  list: [
    { a: 1, b: 2, c: 1, d: 1, e: 1, f: 1, g: 1, h: 1, i: 1, j: 1, k: 1, l: 1 },
  ],
}); // 表格勾选的数据

// 去评分弹窗 (----------------------------------------------------)
const scoreVisible = ref(false);
const scoreData = reactive({ list: [] });

// 评分项管弹窗 (----------------------------------------------------)
const scoringItemsVisible = ref(false);
const resetTable = ref(); // 表格ref
const scoringItemsData = reactive({
  list: [
    { pf: "德", index: 1, pfz: "", fz: "15" },
    { pf: "德", pfz: "为人师表", fz: "15" },
    { pf: "德", pfz: "关爱学生", fz: "15" },
    { pf: "德", pfz: "爱岗敬业", fz: "15" },
    { pf: "能", index: 1, pfz: "", fz: "15" },
    { pf: "能", pfz: "基础能力", fz: "15" },
    { pf: "能", pfz: "教学能力", fz: "15" },
    { pf: "能", pfz: "学习能力", fz: "15" },
    { pf: "能", pfz: "创新能力", fz: "15" },
    { pf: "智", index: 1, pfz: "", fz: "15" },
    { pf: "智", pfz: "基础能力", fz: "15" },
    { pf: "智", pfz: "教学能力", fz: "15" },
  ],
});
const resetTableIndex = ref(); // 表格ref
const mergeArr = reactive({ list: [] }); // 合并的表格规律

// 添加项功能弹窗 (----------------------------------------------------)
const addItemTitle = ref("");
const addItemVisible = ref(false);
const addItemRef = ref();
const addItemRuleForm = reactive({
  bigitem: "", // 评分项
  subitem: "", // 评分子项
  score: "", // 分值
  id: "",
});
const validateScore = (rule, value, callback) => {
  if (/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的分值"));
  }
};
// 表单验证
const addItemRules = reactive({
  bigitem: [{ required: true, message: "评分项不能为空", trigger: "blur" }],
  subitem: [
    {
      required: true,
      message: "评分子项不能为空",
      trigger: "blur",
    },
  ],
  score: [
    {
      required: true,
      message: "分值不能为空",
      trigger: "blur",
    },
    { validator: validateScore, trigger: "blur" },
  ],
});

// 教师综合素质评价/详情 页面 (----------------------------------------------------)
const pageIndex = ref(1); // 切换到详情页面
const scoreEcharts = ref(); // 评分对比统计图

// 查看房型列表
const getList = async () => {
  arrTable();
  //   loading.value = true;
  //   let data = {
  //     page: currentPage.value,
  //     rows: pageSize.value,
  //     hName: searchInput.keyWord, // 房型名称
  //     managerId: sessionStorage.getItem("token"),
  //   };
  //   let res = await axios({
  //     method: "post",
  //     url: api.value + "/mhotel/housequeryPage.action",
  //     headers: {
  //       // token: sessionStorage.getItem("token"),
  //       // user_head: sessionStorage.getItem("userhead"),
  //     },
  //     params: data,
  //   });
  //   console.log(res, "房型管理");
  //   if (res.data.code == 200) {
  //     loading.value = false;
  //     tableData.list = res.data.data.pageList;
  //     total.value = res.data.data.total;
  //     // ElMessage({
  //     //   type: "success",
  //     //   showClose: true,
  //     //   message: res.data.message,
  //     //   center: true,
  //     // });
  //   } else {
  //     loading.value = false;
  //     ElMessage({
  //       type: "error",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

const handleSelectionChange = () => {};

//导出功能 (-------------------------------------------------)
const importExcel = async () => {
  // if (searchInput.createTime == null) {
  //   searchInput.createTime = "";
  // }
  // let data = new FormData();
  // data.set("car_number", searchInput.carnumber);
  // data.set("create_time", searchInput.createTime);
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/carBook/cinfotoExcel.action",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //   },
  //   data: data,
  // });
  // // console.log(res, "导出账号");
  // if (res.data.code == 200) {
  //   // const elt = document.createElement("a");
  //   // elt.setAttribute(
  //   //   "href",
  //   //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
  //   // );
  //   // elt.setAttribute("download", "file.png");
  //   // elt.style.display = "none";
  //   // document.body.appendChild(elt);
  //   // elt.click();
  //   var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
  //   console.log("获得地址数据:", downloadPath);
  //   var downloadLink = document.createElement("a");
  //   downloadLink.style.display = "none"; // 使其隐藏
  //   downloadLink.href = downloadPath;
  //   downloadLink.download = "";
  //   downloadLink.click();
  //   document.body.appendChild(downloadLink);
  //   document.body.removeChild(downloadLink);
  //   ElMessage({
  //     type: "success",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
};

// 点击老师查看老师详情 （---------------------------------------------）
const teacherInfoClick = (row) => {
  pageIndex.value = 2;
  nextTick(() => {
    scoreEchart();
  });
};
// 取消查看老师详情
const teacherInfoConcel = () => {
  pageIndex.value = 1;
};
// 评分对比统计图
const scoreEchart = () => {
  scoreEcharts.value = markRaw(
    echarts.init(document.getElementById("scoreEcharts"))
  );
  scoreEcharts.value.setOption({
    legend: {
      // orient: "",
      top: "5%",
      right: "8%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
      data: ["所得评分", "平均得分"],
      color: ["red", "black"],
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },

    grid: {
      show: false,
      top: "22%", // 一下数值可为百分比也可为具体像素值
      right: "8%",
      bottom: "12%",
      left: "10%",
    },
    dataZoom: [
      {
        type: "slider",
        realtime: true,
        start: 0,
        end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, // 组件高度
        left: 5, // 左边的距离
        right: 5, // 右边的距离
        bottom: 2, // 下边的距离
        show: false, // 是否展示
        fillerColor: "rgba(180, 226, 251, 1)", // 滚动条颜色
        borderColor: "rgba(180, 226, 251, 0.12)",
        handleSize: 0, // 两边手柄尺寸
        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        zoomLock: true, // 是否只平移不缩放
        moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
        zoomOnMouseWheel: true, // 鼠标移动能触发数据窗口缩放
      },
      {
        type: "inside", // 支持内部鼠标滚动平移
        start: 0,
        end: 100,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
      },
    ],
    xAxis: [
      {
        // type: "category",
        axisLine: {
          show: true,
          //这是x轴文字颜色
          lineStyle: {
            color: "rgba(108, 128, 151, 1)",
          },
        },
        axisTick: {
          show: false,
        },
        data: ["德", "能", "勤", "绩", "扣"],
      },
    ],
    yAxis: {
      // name: "吨/度",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisLine: {
        //这是x轴文字颜色
        show: true,
        lineStyle: {
          color: "##5B5B5B",
        },
      },
      splitLine: {
        //x轴的网格 样式
        lineStyle: {
          color: "#F0EEEE",
          width: 1,
          type: "dashed",
        },
      },
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        name: "所得评分",
        type: "bar",
        data: [120, 200, 150, 80, 70, 110, 130, 60],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(197, 211, 246, 0.8)" },
            { offset: 1, color: "rgba(21, 154, 255, 1)" },
          ]),
          borderWidth: 1,
          borderColor: "rgba(21, 154, 255, 1)",
        },
        barGap: "0%", // 同一列柱子的间距
        barWidth: 20, // 柱子的宽度
        emphasis: {
          focus: "series",
        },
        label: {
          normal: {
            show: true,
            lineHeight: 10,
            formatter: "{c}",
            position: "top",
            textStyle: {
              color: "#000",
              fontSize: 10,
            },
          },
        },
      },
      {
        name: "平均得分",
        type: "bar",
        data: [52, 20, 15, 68, 97, 11, 93, 6],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(255, 233, 168, 1)" },
            { offset: 1, color: "rgba(222, 123, 2, 1)" },
          ]),
          borderWidth: 1,
          borderColor: "rgba(222, 123, 2, 1",
        },
        barWidth: 20, // 柱子的宽度
        emphasis: {
          focus: "series",
        },
        label: {
          normal: {
            show: true,
            lineHeight: 10,
            formatter: "{c}",
            position: "top",
            textStyle: {
              color: "#000",
              fontSize: 10,
            },
          },
        },
      },
    ],
  });
};
//去评分按钮  （-------------------------------------------）
const goScore = async () => {
  scoreVisible.value = true;

  //   let data = {
  //     linkId: row.id,
  //   };
  //   let res = await axios({
  //     method: "post",
  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
  //     headers: {},
  //     params: data,
  //   });
  //   console.log(res, "编辑中查找图片");
  //   if (res.data.code == 200) {
  //     // res.data.data.fileInfoList.forEach((item) => {
  //     //   item.uid = item.id;
  //     // });
  //     // fileList.list = res.data.data.fileInfoList;
  //     // ruleForm.fileListJson = fileList.list;
  //     res.data.data.forEach((item) => {
  //       item.uid = item.id;
  //     });
  //     fileList.list = res.data.data;
  //     ruleForm.fileListJson = fileList.list;
  //     // ElMessage({
  //     //   type: "success",
  //     //   showClose: true,
  //     //   message: res.data.message,
  //     //   center: true,
  //     // });
  //   } else {
  //     ElMessage({
  //       type: "error",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   }
};

const cancelScore = () => {
  scoreVisible.value = false;
};

// 确定去评分
const confirmScore = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
    }
  });
};

// 评分项管理 (------------------------------------------------------)
const scoringItemsClick = async () => {
  scoringItemsVisible.value = true;

  // let data = {
  //   id: row.id,
  // };
  //   let res = await axios({
  //     method: "post",
  //     url: api.value + "/mhotel/housedelHouser.action",
  //     headers: {
  //       // token: sessionStorage.getItem("token"),
  //       // user_head: sessionStorage.getItem("userhead"),
  //     },
  //     params: data,
  //   });
  //   if (res.data.code == 200) {
  //     if (tableData.list.length == 1 && currentPage.value != 1) {
  //       currentPage.value = currentPage.value - 1;
  //     }
  //     getList();
  //     ElMessage({
  //       type: "success",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   } else {
  //     ElMessage({
  //       type: "error",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   }
  // console.log(res);
};
// 将表格数据转换成合并表格所需要的格式
const arrTable = () => {
  let arrType = [];
  scoringItemsData.list.forEach((item, index) => {
    if (!arrType.includes(item.pf)) {
      arrType.push(item.pf);
    }
  });
  console.log(arrType, "获取评分项有几种类型");
  let arr = [];
  arrType.forEach((item, index) => {
    arr[index] = [];
    scoringItemsData.list.forEach((i, ind) => {
      if (item == i.pf) {
        arr[index].push(ind);
      }
    });
  });
  console.log(arr, "将同一评分项的数据归纳到一个数组里面");
  mergeArr.list = [];
  arr.forEach((item, index) => {
    item.forEach((i, ind) => {
      if (ind == 0) {
        mergeArr.list.push(item.length);
      } else {
        mergeArr.list.push(0);
      }
    });
  });
  console.log(mergeArr.list, "融合后的融合数组");
};
// 合并表格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const _row = mergeArr.list[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
};
const cancelScoringItems = () => {
  scoringItemsVisible.value = false;
};
// 添加项按钮 （-------------------------------------------）
const bigItemClick = async () => {
  // let arr={ pf: "", pfz: "", fz: "" }
  addItemVisible.value = true;
  addItemTitle.value = "添加评分项";
};
// 取消添加项
const cancelAddItem = () => {
  addItemVisible.value = false;
};
// 确定添加项
const confirmAddItem = (formEl) => {
  if (addItemTitle.value == "添加评分项") {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
      if (valid) {
        let arr = {
          pf: addItemRuleForm.bigitem,
          pfz: addItemRuleForm.subitem,
          fz: addItemRuleForm.score,
        };
        scoringItemsData.list.push(arr);
        arrTable();
      }
      addItemVisible.value = false;
    });
  } else if (addItemTitle.value == "添加评分子项") {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
      if (valid) {
        let ind = "";
        scoringItemsData.list.forEach((item, index) => {
          if (addItemRuleForm.bigitem == item.pf) {
            ind = index;
          }
        });
        let arr = {
          pf: addItemRuleForm.bigitem,
          pfz: addItemRuleForm.subitem,
          fz: addItemRuleForm.score,
        };
        scoringItemsData.list.splice(ind + 1, 0, arr);
        console.log(scoringItemsData.list, "添加子项后的表格数据");
        arrTable();
      }
      addItemVisible.value = false;
    });
  }
};

// 添加子选项 （\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\）
const secondaryItemClick = (row) => {
  addItemVisible.value = true;
  addItemTitle.value = "添加评分子项";
  addItemRuleForm.bigitem = row.pf;
};

// 删除功能（-----------------------------------------------------------）
const delScoringItems = (row) => {};
const cancelEvent = () => {};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  getList();
  window.addEventListener("resize", function () {
    scoreEcharts.value.resize();
  });
});
onMounted(() => {});
onUnmounted(() => {
  // scoreEcharts.value.dispose();
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      display: block;
      height: 60px;
      line-height: 60px;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }
  .scroll {
    height: calc(100% - 61px);
    overflow: auto;
  }
  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0 0 0;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;
        .title {
          padding-right: 5px;
        }
        .sel {
          margin-right: 10px;
        }
        :deep(.el-input .el-input__inner) {
          font-size: 14px;
        }
      }
    }

    .gongneng {
      margin: 10px 0 20px 0;

      span {
        color: #fff;
      }
      .el-button {
        margin-right: 10px;
      }
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }
  }
  .footer {
    width: 96%;
    // height: 550px;
    margin: 10px auto 30px;

    .el-table--fit {
      // height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 14px;
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 14px;
        // color: #000;

        &:hover {
          td {
            background-color: rgba(223, 236, 254, 1);
          }
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        .normal {
          cursor: pointer;
          color: rgba(0, 97, 255, 1);
        }
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.edit) {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(111, 182, 184, 1);
      }

      :deep(.look) {
        padding: 0 10px;
        cursor: pointer;
        color: rgba(30, 125, 251, 1);
      }

      .del {
        padding: 0 10px;
        color: rgba(212, 48, 48, 1);
        cursor: pointer;
      }

      // :deep(.look):hover {
      //   color: red;
      // }
      // :deep(.del):hover {
      //   color: red;
      // }
    }
  }

  // 教师综合素质评价
  .teacherInfo {
    height: 100%;
    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 18px;
      font-weight: 600;
      img {
        width: 18px;
        height: 18px;
        cursor: pointer;
        margin-right: 10px;
      }
      .add {
        margin-left: 20px !important;
        font-size: 20px !important;
        color: rgba(0, 0, 0, 1) !important;
      }
    }
    .scroll_score {
      width: calc(100% - 60px);
      height: calc(100% - 61px);
      margin: 0 auto;
      overflow: auto;
      .semester {
        .title {
          font-size: 20px;
          margin: 15px 0;
          text-align: center;
          color: rgba(0, 0, 0, 1);
        }
        .score {
          height: 141px;
          border-radius: 8px;
          background: rgba(240, 244, 250, 1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .score_left {
            display: flex;
            align-items: center;
            img {
              width: 80px;
              height: 80px;
              margin: 0 20px;
              border-radius: 50%;
              border: 1px solid rgba(0, 97, 255, 1);
            }
            .info {
              .info_name {
                font-size: 20px;
                color: #000;
              }
              .info_object {
                color: rgba(128, 128, 128, 1);
                font-size: 16px;
                margin-top: 5px;
              }
            }
          }
          .score_right {
            color: #000;
            margin-right: 30px;
            .num {
              display: inline-block;
              font-size: 60px;
              color: rgba(0, 97, 255, 1);
            }
          }
        }
      }
      .scoreList {
        margin: 10px 0;
        .title {
          display: flex;
          align-items: center;
          height: 60px;
          color: rgb(0, 0, 0);
          font-size: 20px;
          font-weight: 600;
          img {
            width: 29px;
            height: 20px;
            margin-right: 8px;
          }
          .goScore {
            margin-left: 20px;
          }
        }
        .table {
          width: 100%;
          overflow: auto;
          table {
            border-collapse: collapse;
            font-size: 13px;
            height: 24px;
            line-height: 24px;
            color: #000;
            text-align: center;
            tr {
              height: 50px;
            }
            .qin {
              width: 80px;
            }
          }

          table tr th {
            background: #f0f3f7;
            color: #000;
            font-size: 13px;
            height: 24px;
            line-height: 24px;
            border-right: solid 1px #e6e6e6;
          }
          table tr th.th_border {
            border-right: solid 1px #e6e6e6;
            border-left: solid 1px #e6e6e6;
          }
          table tr td {
            border: solid 1px rgb(245, 245, 245);

            .row2 {
              width: 80px;
              display: flex;
              flex-direction: column;

              .el-input {
                width: 80px;
                :deep(.el-input__wrapper) {
                  box-shadow: none;
                  .el-input__inner {
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        .table::-webkit-scrollbar-track {
          background-color: #daeeff;
        }

        .table::-webkit-scrollbar {
          background-color: rgba(0, 97, 255, 1);
          height: 3px;
          width: 2px;
        }
      }
      .score_footer {
        width: 100%;
        display: flex;
        .footer_left {
          width: 40%;
          .title {
            display: flex;
            align-items: center;
            height: 60px;
            color: rgb(0, 0, 0);
            font-size: 20px;
            font-weight: 600;
            img {
              width: 29px;
              height: 20px;
              margin-right: 8px;
            }
          }
          #scoreEcharts {
            width: 100%;
            height: 240px;
          }
        }
        .footer_right {
          width: 60%;
          .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title_ranking {
              display: flex;
              align-items: center;
              height: 60px;
              color: rgb(0, 0, 0);
              font-size: 20px;
              font-weight: 600;
              img {
                width: 29px;
                height: 20px;
                margin-right: 8px;
              }
            }
          }

          .el-table--fit {
            height: 240px;
            :deep(.el-table__header-wrapper) {
              font-size: 14px;
              .cell {
                color: #000;
              }
            }

            :deep(.el-table__row) {
              height: 40px;
              font-size: 14px;
              color: #000;
              td {
                padding: 0;
              }
              &:hover {
                td {
                  background-color: rgba(223, 236, 254, 0.6);
                }
              }
            }
          }
        }
      }
    }
  }
  // 去评分按钮
  :deep(.scoreDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      // padding: 30px 30px 10px 30px;
      .table {
        width: 1080px;
        overflow: auto;
        margin: 0 auto;
      }
      table {
        border-collapse: collapse;
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        color: #000;
        text-align: center;
        tr {
          height: 50px;
        }
        .qin {
          width: 80px;
        }
      }

      table tr th {
        background: #f0f3f7;
        color: #000;
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        border-right: solid 1px #e6e6e6;
      }
      table tr th.th_border {
        border-right: solid 1px #e6e6e6;
        border-left: solid 1px #e6e6e6;
      }
      table tr td {
        border: solid 1px rgb(245, 245, 245);

        .row2 {
          width: 80px;
          display: flex;
          flex-direction: column;
          .el-input {
            width: 80px;
          }
          .el-input__wrapper {
            box-shadow: none;
            .el-input__inner {
              text-align: center;
            }
          }
        }
      }
      .options {
        margin: 30px 20px 0 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  // 评分项管弹窗
  :deep(.scoringItems) {
    overflow: hidden;
    border-radius: 11px;
    min-width: 1100px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 10px 20px;
      .btn {
        margin: 15px 0;
      }
      .el-table--fit {
        height: calc(60vh);
        // height: 550px;
        // border: 1px solid #ebeef5;
        .el-table__body-wrapper {
          .el-table__row {
            height: 50px;
            font-size: 14px;
            td {
              border-right: 1px solid #ebeef5;
            }
            td:nth-child(1) {
              border-left: 1px solid #ebeef5;
            }
            .edit {
              display: flex;
              justify-content: center;
              .look {
                padding: 0 10px;
                cursor: pointer;
                color: rgba(30, 125, 251, 1);
              }
            }
            &:hover {
              td {
                // background-color: rgba(223, 236, 254, 1);
                background-color: transparent;
              }
            }
          }
        }
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 20px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
  :deep(.addItemDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 30px 10px 30px;
      .el-form-item__content {
        width: 200px;
        .el-input-group__append {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
          cursor: pointer;
          user-select: none;
        }
      }
      .el-form {
        .typeTitle {
          display: block;
          color: red;
          margin: 0 0 6px 100px;
        }
        .account {
          display: flex;
          justify-content: space-between;
          .el-form-item {
            .el-form-item__content {
              width: 300px;
            }
            .el-input {
              width: 300px;
            }
          }
        }
      }

      .options {
        margin: 50px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
