<template>
  <MOSTY.PageTree :pageTitle="null" :searchType="'03'" @getDeptId="getdeptId">
    <template #header>
      <div class="header-container">
        <div class="bottom">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item, i) in tabs" :key="i" />
          </el-tabs>
        </div>
        <el-button style="margin-top: 4px;height: 32px;" type="primary" @click="add">双随机考试新增</el-button>
      </div>
    </template>
    <template #serach>
      <el-divider v-if="activeName == 'first'" />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" v-if="activeName == 'first'" />
    </template>
    <template #table>
      <section class="eltab7" v-if="activeName == 'first'">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width: 100%;" actionsW="250px">
          <template #type="{ row }">
            <dict-tag :options="D_TB_YWLX" :value="row.type" :tag="false" />
          </template>
          <template #examState="{ row }">
            <dict-tag :options="D_BZ_KSZT" :value="row.examState" :tag="false" />
          </template>
          <template #actions="{ row }">
            <div>
              <span class="operesee" @click="handleShow(row)"><el-icon>
                  <Compass />
                </el-icon>考试详情</span>
              <span class="operedit" @click="addExamMan(row)" v-if="getItem('USERID') == '000000'">
                <el-icon>
                  <Compass />
                </el-icon>
                添加人员</span>

              <el-popconfirm v-if="isShowDel(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="确定要删除?" @confirm="handleDelete(row)">
                <template #reference>
                  <span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
            </div>

          </template>
        </MOSTY.Table>
      </section>
      <section style="height: calc(100vh - 240px);" v-else>
        <MOSTY.Table :table-columns="tableColumn1" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #type="{ row }">
            <div style="display: flex;flex-wrap: wrap;width: 80%;justify-content: center;">
              <el-tag v-for="(item, index) in (row.typeDetail && row.typeDetail.split(','))" :key="index" :label="item"
                style="margin: 5px;">
                {{ item }}
              </el-tag>
            </div>
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="issue(row)"><el-icon>
                <EditPen />
              </el-icon>发布</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="searchobj" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <div v-if="qwjcxqShow" class="dialog-box">
    <wcydks v-if="qwjcxqShow" @changeVi2="changeVi2" :listId="listId" :sjRow='sjRow' />
  </div>

  <div v-if="addplanShow" class="dialog-box">
    <addks @close="close" :title="title" :editObj="editObj" />
  </div>
  <!-- 双随机考试新增 弹框 -->
  <div v-if="ssjksAddShow" class="dialog-box">
    <ssjksAdd :editObj="ssjkObj" @close="ssjksAddShow = false" @ok="getTableData" />
  </div>
  <addExamTC ref="addExamTCRef" :row="currRow" @ok="addExamTcOk" />
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import wcydks from "@/views/safety/components/wcydks.vue";
import addks from "@/views/safety/components/addks.vue";
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_KSZT, D_TB_YWLX, D_BZ_ABCD } = proxy.$dict("D_BZ_KSZT", "D_TB_YWLX", "D_BZ_ABCD");
import ssjksAdd from './ktglCom/ssjksAdd.vue'
import { filterqx } from "@/utils/auth.js";// isSgs,isgs,isxgs,isaqbm,isldbz
import { getItem } from "@/utils/storage"
import addExamTC from "./sjkCom/addExamTC.vue";

const total = ref(0);
const sjRow = ref({})
const currRow = ref({})
const addExamTCRef = ref(null)
const tabs = ref([{
  name: "first"
  , label: "已发布的考试信息"
}, { name: "second", label: "待发布的考试信息" }])
const tableColumn = ref([{
  title: "试卷名",
  width: '350',
  prop: "name",
},
{ title: "开始时间", prop: "startTime", },
{ title: "结束时间", prop: "endTime", }, {
  title: "总考试时间",
  prop: "examTime",
},
{ title: "试卷总分", prop: "examScore", },
{
  title: "判断题 题/分", prop: "trueOrFalseQuestions",
}, { title: "单选题 题/分", prop: "singleChoice", },
{ title: "多选题 题/分", prop: "multipleChoice", }, {
  title: "状态",
  prop: "examState", slot: true
}, { title: "操作", prop: "actions", slot: true }])
const tableColumn1 = ref([{
  title: "试卷名", prop: "name",
}, { title: "所属部门", prop: "deptname", },
{ title: "题目数量", prop: "count", },
{
  title: "试卷类型", prop: "type", slot: true
}, { title: "操作", prop: "actions", slot: true }])
const searchobj = ref({
  pageCurrent: 1, pageSize: 20, keyword: "", total: 0
}); // 数据
const tableData = ref([]); //表格数据
const listId = ref("");
const activeName = ref("first");
const qwjcxqShow = ref(false);
const addplanShow = ref(false);
const editObj = ref({}); /**
    双随机考试新增 */
const ssjksAddShow = ref(false); /** 双随机考试新增 :obj */
const ssjkObj = ref({});
const tableloading = ref(false);
const SortChange = (val) => {

}
const searchArr = reactive([
  {
    showType: "input",
    prop: "name",
    width: '250px',
    placeholder: '请输入试卷名称'
  },
  {
    showType: "select",
    prop: "examState",
    width: '250px',
    options: D_BZ_KSZT,
    placeholder: '请选择考试状态'
  },
  {
    showType: "date",
    prop: "startTime",
    width: '250px',
    placeholder: '请选择开始时间'
  },
  {
    showType: "date",
    prop: "endTime",
    width: '250px',
    placeholder: '请选择结束时间'
  }
])

onMounted(() => {

});
//搜索
function onSearch(obj) {
  searchobj.value.pageCurrent = 1;
  searchobj.value.name = obj.name;
  searchobj.value.examState = obj.examState;
  searchobj.value.startTime = obj.startTime;
  searchobj.value.endTime = obj.endTime;
  getTableData();
}
// 切换单位
const getdeptId = (val) => {
  searchobj.value.ssdwid = val.id;
  searchobj.value.orgcode = val.id;
  searchobj.value.pageCurrent = 1;
  getTableData();
};

// 方法
const close = () => {
  addplanShow.value = false;
  getTableData();
};
/** 双随机考试新增click */
const add = () => {
  ssjksAddShow.value = true;
}
// 修改试题
const edit = (row) => {
  getApi({}, "/mosty-jcgl/exampaper/getInfo?id=" + row.examId).then((res) => {
    if (res) {
      let arr = {
        type: 'edit',
        title: "修改试题",
        id: res.id,
        qclass: res.type,
        paperId: row.id
      };
      editObj.value = arr;
      addplanShow.value = true;
    } else {
      ElMessage.success("数据异常");
    }
  })

}
// 发布考试
const issue = (row) => {
  let arr = {
    type: 'add',
    title: "发布考试",
    id: row.id,
    qclass: row.type
  };
  editObj.value = arr;
  addplanShow.value = true;
};
const changeVi2 = (val) => {
  qwjcxqShow.value = val;
};
// 查看详情
function handleShow(row) {
  qwjcxqShow.value = true;
  listId.value = row.id;
  sjRow.value = row
}

//获取查询考题列表
function getTableData() {
  tableData.value = []
  // 已发布
  if (activeName.value == 'first') {
    postApi(searchobj.value, "/mosty-jcgl/paper/listExamPapers").then((res) => {
      total.value = res.total;
      searchobj.value.total = res.total
      if (res.records) {
        tableData.value = res.records;
      }
    });
  } else {
    // 待发布
    postApi(searchobj.value, "/mosty-jcgl/exampaper/getPageList").then((res) => {
      total.value = res.total;
      searchobj.value.total = res.total
      if (res.records) {
        tableData.value = res.records;
      }
    });
  }
}
const isShowDel = (row) => {
  return filterqx('isaqbm') == '1';
};
//删除数据
const handleDelete = (row) => {
  getApi({ id: row.id }, `/mosty-jcgl/paper/deleteExamPaper`).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
// 点击切换tab
function handleClick() {
  searchobj.value.pageCurrent = 1
  getTableData();
}

//页码发生变化
const handleCurrentChange = (val) => {
  searchobj.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  searchobj.value.pageSize = val;
  getTableData();
};
const addExamTcOk = (row) => {
  getTableData();
}
const addExamMan = (row) => {
  currRow.value = row
  addExamTCRef.value?.open()
}
</script>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;

      .titlemain {
        display: flex;
      }

      .btnBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

::v-deep .el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      background: var(--el-table-cell-bmx-backgroundcolor) !important;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      line-height: 38px;
      margin: 0 1px;

      &.is-active {
        background: var(--el-color-primary) !important;
        color: #fff;
        border-top: 2px solid var(--el-color-primary) !important;
        border-bottom: 2px solid var(--el-color-primary) !important;
      }
    }
  }
}
</style>
