<template>
  <div id="tklb">
    <div v-if="shows">
      <div class="top-div">
        <el-input placeholder="请输入科目代码名称" v-model="input" clearable>
        </el-input>
        <!-- <el-select v-model="value" clearable placeholder="请选择启动状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <div class="button-discuss" @click="handleCurrentChange_qw(1)">搜索</div>
        <div class="button-discuss" @click="add_tk()" style="float: right;margin-right: 10px;">
          <i class="el-icon-document-add"></i>&nbsp;&nbsp;新建
        </div>
      </div>
      <div class="bottom-div">
        <div class="table-div">
          <el-table :data="tableData" height="100%" border style="width: 100%">
            <el-table-column type="index" width="100" label="序号"></el-table-column>
            <el-table-column prop="questionsName" label="科目代码名称"> </el-table-column>
            <el-table-column prop="createBy" label="创建人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="updateBy" label="修改人">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间">
            </el-table-column>
            <!-- <el-table-column prop="zt" label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.zt"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                  active-text="启动"
                  inactive-text="关闭"
                >
                </el-switch>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <!-- <el-button type="primary" size="mini" @click="handleView()"
                  >题库中心</el-button
                > -->
                <i class="el-icon-edit" @click="handleEdit(scope.row)" title="编辑"></i>
                &nbsp;
                <i class="el-icon-delete" @click="handleDelete(scope.row)" title="删除"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-div">
          <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" :total="totals" :page-size="pageRow" :current-page="current_page_qw"
            @current-change="handleCurrentChange_qw" :page-sizes="[10, 20, 50, 100]">
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-if="!shows" class="tm_lb">
      <img class="back-img" :src="back" alt="" @click="goBack()" />

      <div class=""></div>
    </div>
    <el-dialog title="新增科目代码" :visible.sync="centerDialogVisible_add" width="30%" center>
      <el-form :model="form_add" label-width="120px" style="margin-bottom: 0px" ref="numberValidateForm">
        <el-form-item label="科目代码名称" prop="name" :rules="[
          { required: true, message: '请输入科目代码名称', trigger: 'blur' }
        ]">
          <el-input v-model.trim="form_add.name" maxlength="20" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="submit_add()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑科目代码" :visible.sync="centerDialogVisible_edit" width="30%" center>
      <el-form :model="form_edit" label-width="120px" style="margin-bottom: 0px" ref="numberValidateForm1">
        <el-form-item label="科目代码名称" prop="name" :rules="[
          { required: true, message: '请输入科目代码名称', trigger: 'blur' }
        ]">
          <el-input v-model.trim="form_edit.name" maxlength="20" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="submit_edit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { post, startLoading, endLoading } from "../../util/http_util";
import back from "../../assets/img/setting/back.png";
import { addQuestionBank, updateQuestionBankById, deleteQuestionBankById, listQuestionBank } from '../../api/xxxl/llkh';
export default {
  data() {
    return {
      back: back,
      shows: true,
      centerDialogVisible_add: false,
      centerDialogVisible_edit: false,
      options: [
        {
          value: "1",
          label: "启动",
        },
        {
          value: "0",
          label: "关闭",
        },
      ],
      value: "",
      input: "",
      tableData: [],
      form_add: {
        name: "",
      },
      form_edit: {
        name: "",
        id: "",
      },
      totals: 0,
      current_page_qw: 1,
      pageRow: 10,
    };
  },
  methods: {
    goBack() {
      let _this = this;
      _this.shows = true;
    },
    //题库弹出框新增
    add_tk() {
      let _this = this;
      _this.form_add = {
        name: "",
      };
      _this.centerDialogVisible_add = true;
      setTimeout(function () {
        _this.$refs.numberValidateForm.resetFields();
      }, 200)
    },
    //题库新增确定
    submit_add() {
      let _this = this;
      this.$refs['numberValidateForm'].validate((valid) => {
        if (valid) {
          let form_datas = {
            questionsName: _this.form_add.name,
            createBy: "admin",
          };
          addQuestionBank(form_datas).then((data) => {
            if (data == 1) {
              this.$message({
                type: "success",
                message: "科目代码新增成功",
              });
              _this.centerDialogVisible_add = false;
              _this.handleCurrentChange_qw(1);
            }
          });
        }
      });
    },
    //题库修改确定
    submit_edit() {
      let _this = this;
      this.$refs['numberValidateForm'].validate((valid) => {
        if (valid) {
          let form_datas = {
            questionsName: _this.form_edit.name,
            id: _this.form_edit.id,
            updateBy: "admin",
          };
          updateQuestionBankById(form_datas).then((data) => {
            if (data == 1) {
              this.$message({
                type: "success",
                message: "科目代码修改成功",
              });
              _this.centerDialogVisible_edit = false;
              _this.handleCurrentChange_qw(1);
            }
          });
        }
      });
    },
    //题库修改弹出框
    handleEdit(item) {
      let _this = this;

      _this.centerDialogVisible_edit = true;
      setTimeout(function () {
        _this.$refs.numberValidateForm1.resetFields();
        _this.form_edit = {
          name: item.questionsName,
          id: item.id,
        };
      }, 200)
    },
    //题库删除
    handleDelete(item) {
      let _this = this;
      let paramDatas = {
        id: item.id,
      };
      this.$confirm("此操作将永久删除该科目代码及其以下关联的所有题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteQuestionBankById(paramDatas)
            .then((data) => {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              _this.handleCurrentChange_qw(1);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pageRow = val;
      this.current_page_qw = 1;
      this.handleCurrentChange_qw(1);
    },
    //列表分页
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      let paramDatas = {
        questionsName: _this.input == "" ? null : _this.input,
        pageNum: pageNum,
        pageRow: _this.pageRow,
      };
      // startLoading();
      _this.tableData = [];
      listQuestionBank(paramDatas)
        .then((data) => {
          if (data.list.length > 0) {
            _this.tableData = data.list;
            _this.totals = data.total;
            _this.current_page_qw = pageNum;
          }
          // endLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.handleCurrentChange_qw(1);
  },
};
</script>
<style lang="scss">
#tklb {
  // width: calc(100% - 55px);
  // height: calc(100% - 75px);
  // margin: 20px;
  width: calc(100% - 0px);
  height: calc(100% - 10px);
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("../../assets/img/xxxl/01.png");
  background-size: 100% 100%;
  color: white;

  .top-div {
    width: calc(100% - 40px);
    height: 80px;
    margin-left: 20px;
    margin-right: 20px;

    .el-select {
      float: left;
      margin-left: 20px;
      width: 150px !important;

      .el-input {
        width: unset !important;
      }
    }

    .el-input {
      float: left;
      width: 225px;
      margin-left: 0px;
      margin-top: 30px;

      .el-input__inner {
        background: none;
        color: #ffff;
        border: 1px solid #146a80 !important;
        box-shadow: 0 0 10px #1b6097;
      }
    }

    .button-discuss {
      margin-top: 35px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-left: 20px;
    }

    .el-button--primary {
      margin-top: 30px;
      border: 1px solid #146a80 !important;
      background-color: #1d2d46;
      box-shadow: 0 0 10px #1b6097;
      margin-left: 20px;
    }

    .xjzt-div {
      margin-top: 30px;
      float: right;
      width: 130px;
      height: 50px;
      line-height: 50px;
      background: none;
      font-size: 14px;
      text-align: center;
      color: #ffffffc7;
      cursor: pointer;
      background-image: url("../../assets/img/xxxl/02.png");
      background-size: 100% 100%;
    }
  }

  .bottom-div {
    width: calc(100% - 40px);
    height: calc(100% - 115px);
    // box-shadow: 0 0 10px #1b6097;
    margin-left: 20px;
    margin-right: 20px;

    .table-div {
      width: 100%;
      height: calc(100% - 50px);
      margin-top: 20px;
      margin-left: 0px;

      .el-table tr {
        background-color: transparent !important;
        color: #ffffffc7;
      }

      .el-table thead tr {
        height: 40px;
        background: url(../../assets/img/setting/tr1.png) no-repeat;
        background-size: 100% 100%;
      }

      .el-table th {
        background-color: transparent;
      }

      tbody tr {
        border-bottom: 1px solid #252631;
      }

      .el-table td {
        border-bottom: 1px solid #252631;
        border-right: unset;
      }

      .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #82848a78;
      }

      .el-table th {
        border: unset;
        // background-color: #263b5d !important;
      }

      .el-table--fit {
        background: none !important;
        border: unset;
      }

      .el-icon-delete-solid {
        color: red;
        cursor: pointer;
        font-size: 18px;
      }

      .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }

      .el-icon-view {
        color: #00ffff;
        font-size: 20px;
        cursor: pointer;
      }

      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }
  }

  .el-dialog {
    width: 600px;
    background-color: #1d2d47;

    .el-dialog__title {
      color: #ffff;
    }

    .el-form-item__label {
      color: #ffff;
    }

    .el-input__inner {
      background: none;
      color: #ffff;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }

    .el-textarea__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }

    .el-input__count {
      color: #229dbd;
      background: #1d2d4600;
    }

    .el-radio-group {
      margin-top: 12px;
    }

    .el-radio {
      color: #ffff;
    }
  }

  .tm_lb {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    position: relative;

    .back-img {
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: absolute;
      right: 40px;
    }
  }
}
</style>