<template>
  <div id="xdzylb">
    <div class="top-div">
      <el-input v-model="wd_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
      <div class="block sjxz">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="sc_time" type="daterange" range-separator="至"
          start-placeholder="上传起始时间" end-placeholder="上传结束时间" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <div class="button-discuss" @click="searchs()">搜索</div>
    </div>
    <div class="bottom-div">
      <div class="table-div">
        <el-table :data="tableData" height="calc(100% - 0px)" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="题目名称"> </el-table-column>
          <el-table-column prop="content" label="题目内容">
            <template slot-scope="scope">
              <span class="span-div" @click="xq_div(scope.row)">{{
                scope.row.content
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="cz" label="操作" width="200">
            <template slot-scope="scope">
              <div class="dt pub-xdzy" @click="dt_div(scope.row)" title="答题"></div>
              <div class="lsjl pub-xdzy" title="历史记录" @click="history_div(scope.row)"></div>
            </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" :page-size="pageSize" :current-page="current_page" :total="total"
          @current-change="handleCurrentChange_lb" :page-sizes="[10, 20, 50, 100]">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="题目内容详情" :visible.sync="centerDialogVisible_xq" width="40%" center>
      <el-input v-model="tm_nr" type="textarea" :rows="10" show-word-limit disabled></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_xq = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="答题简述" :visible.sync="centerDialogVisible_dt" width="40%" center>
      <el-form ref="form" label-width="80px">
        <el-form-item label="题目名称">
          <el-input v-model="questionName" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目内容">
          <el-input v-model="tm_nr" type="textarea" :rows="10" show-word-limit disabled></el-input>
        </el-form-item>
        <el-form-item label="情况分析">
          <el-select v-model="value_qkfx.label" placeholder="请选择" multiple :multiple-limit="4" @change="selectChangeQkfx"
            style="width: 100%">
            <el-option :value="qkfxValue" style="height: auto">
              <el-tree :data="options_qkfx" show-checkbox node-key="id" ref="treeQkfx" highlight-current
                :props="defaultProps" @check-change="handleCheckChangeQkfx">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :title="node.label">{{ node.label }}</span>
                </span>
              </el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处置措施">
          <el-select v-model="value_czcs.label" placeholder="请选择" multiple :multiple-limit="4" @change="selectChangeCzcs"
            style="width: 100%">
            <el-option :value="czcsValue" style="height: auto">
              <el-tree :data="options_czcs" show-checkbox node-key="id" ref="treeCzcs" highlight-current
                :props="defaultProps" @check-change="handleCheckChangeCzcs">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :title="node.label">{{ node.label }}</span>
                </span>
              </el-tree>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAnswer_bc()">下一步</el-button>
        <!-- <el-button type="primary" @click="exportDoc()">导 出</el-button> -->
      </span>
    </el-dialog>
    <el-dialog title="补充答题简述" :visible.sync="centerDialogVisible_dt_bc" width="40%" center>
      <el-form ref="form" label-width="80px">
        <el-form-item label="题目名称">
          <el-input v-model="questionName" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目内容">
          <el-input v-model="tm_nr" type="textarea" :rows="10" show-word-limit disabled></el-input>
        </el-form-item>
        <el-form-item label="情况分析">
          <el-input v-model="value_qkfx.full_label"></el-input>
        </el-form-item>
        <el-form-item label="处置措施">
          <el-input v-model="value_czcs.full_label"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAnswer()">生 成</el-button>
        <el-button type="primary" @click="exportDoc()">导 出</el-button>
      </span>
    </el-dialog>
    <el-dialog title="历史答题记录" :visible.sync="dialogVisible_lsjl" width="60%" id="_plscs">
      <!-- <el-input placeholder="请输入内容" style="width:200px;margin-right:20px"></el-input>
        <el-button type="primary">查询</el-button> -->
      <el-table style="width: 100%" class="table-div" :data="tableData_history">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="qkfx" label="情况分析"></el-table-column>
        <el-table-column prop="czcs" label="处置措施"></el-table-column>
        <el-table-column prop="create" label="答题者" width="250"></el-table-column>
        <el-table-column prop="time" label="答题时间" width="250"></el-table-column>
        <el-table-column prop="qkfxScore" label="情况分析得分"></el-table-column>
        <el-table-column prop="czcsScore" label="处置措施得分"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_lsjl = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryQuestion,
  answerQuestion,
  queryQuestionOptions,
  queryAnswerQuestionRecord,
  queryQuestionOptionsTree,
} from "../../api/resource";
import export_doc_util from "../../util/export_doc_util";
export default {
  data() {
    return {
      answeringQuesiton: null,
      treeId: null,
      tableData: [],
      total: 0,
      pageSize: 10,
      current_page: 1,
      // tableData_znjsfx: [],
      centerDialogVisible_xq: false,
      tm_nr: "",
      centerDialogVisible_dt: false,
      centerDialogVisible_dt_bc: false,
      wd_name: "",
      sc_time: "",
      paramData: {},
      clientDetails_type: "4", //默认查询id为21的方案预案
      // module_name:'辅助决策文档',
      options_qkfx: [],
      value_qkfx: { label: [], id: [], full_label: "" },
      value_czcs: { label: [], id: [], full_label: "" },
      options_czcs: [],
      tableData_history: [],
      dialogVisible_lsjl: false,
      questionName: "",
      qkfxValue: [],
      czcsValue: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    //历史记录弹框
    history_div(row) {
      this.dialogVisible_lsjl = true;
      queryAnswerQuestionRecord(row.id, 1, 10).then((res) => {
          this.tableData_history = res.list.map((e) => {
            return {
              qkfx: e.fullAnalysis,
              czcs: e.fullMeasure,
              create: e.answerer,
              time: e.createTime,
              qkfxScore: e.score1 * 100,
              czcsScore: e.score2 * 100,
            };
          });
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    //答题弹框
    dt_div(row) {
      this.questionName = row.name;
      (this.value_qkfx = { label: [], id: [], full_label: "" }),
        (this.value_czcs = { label: [], id: [], full_label: "" }),
        (this.tm_nr = row.content);
      this.answeringQuesiton = row;
      this.centerDialogVisible_dt = true;
      this.$nextTick(() => {
        this.$refs.treeQkfx.setCheckedNodes([]);
        this.$refs.treeCzcs.setCheckedNodes([]);
      });
    },
    //提交答题
    handleAnswer() {
      let body = {
        questionId: this.answeringQuesiton.id,
        analysis: this.value_qkfx.id.join(),
        measure: this.value_czcs.id.join(),
        answerer: this.userInfo.account,
        fullAnalysis: this.value_qkfx.full_label,
        fullMeasure: this.value_czcs.full_label,
      };
      answerQuestion(body)
        .then((res) => {
          res && this.$message.success("完成答题");
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
      this.centerDialogVisible_dt_bc = false;
      this.centerDialogVisible_dt = false;
    },
    handleAnswer_bc() {
      this.value_qkfx.full_label = this.value_qkfx.label.join();
      this.value_czcs.full_label = this.value_czcs.label.join();
      this.centerDialogVisible_dt_bc = true;
    },
    //题目详情弹框
    xq_div(row) {
      this.tm_nr = row.content;
      this.centerDialogVisible_xq = true;
    },
    //搜索table数据
    searchs(treeId) {
      this.treeId = treeId;
      let _this = this;
      _this.handleCurrentChange_lb(1);
    },
    //pageSize改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.current_page = 1;
      this.handleCurrentChange_lb(1);
    },
    //列表分页
    handleCurrentChange_lb(pageNum) {
      let _this = this;
      let startTime = "";
      let endTime = "";
      if (_this.sc_time != null && _this.sc_time != "") {
        startTime = _this.sc_time[0];
        endTime = _this.sc_time[1];
      }
      _this.paramData = {
        beginTime: startTime == "" ? null : startTime,
        endTime: endTime == "" ? null : endTime,
        name: _this.wd_name == "" ? null : _this.wd_name,
      };

      queryQuestion(pageNum, this.pageSize, this.wd_name, this.treeId)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.totals;
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    exportDoc() {
      let exportData = {};
      exportData.name = this.questionName;
      exportData.tm = this.tm_nr;
      exportData.qkfx = this.value_qkfx.full_label;
      exportData.czcs = this.value_czcs.full_label;
      export_doc_util(
        "static/word/题目.docx",
        exportData,
        "想定作业答题情况",
        1
      );
      this.$message.success("导出成功！");
      this.centerDialogVisible_dt = false;
    },
    //select框值改变时候触发的事件
    selectChangeQkfx(e) {
      var arrNew = [];
      var dataLength = this.qkfxValue.length;
      var eleng = e.length;
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.qkfxValue[i].label) {
            arrNew.push(this.qkfxValue[i]);
          }
        }
      }
      this.$refs.treeQkfx.setCheckedNodes(arrNew); //设置勾选的值
    },
    selectChangeCzcs(e) {
      var arrNew = [];
      var dataLength = this.czcsValue.length;
      var eleng = e.length;
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.czcsValue[i].label) {
            arrNew.push(this.czcsValue[i]);
          }
        }
      }
      this.$refs.treeCzcs.setCheckedNodes(arrNew); //设置勾选的值
    },
    handleCheckChangeQkfx() {
      let res = this.$refs.treeQkfx.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      let arrLabel = [],
        arr = [],
        arrId = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arrId.push(item.id);
        arr.push(item);
      });
      this.qkfxValue = arr;
      this.value_qkfx.label = arrLabel;
      this.value_qkfx.id = arrId;
    },
    handleCheckChangeCzcs() {
      let res = this.$refs.treeCzcs.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      let arrLabel = [],
        arr = [],
        arrId = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arrId.push(item.id);
        arr.push(item);
      });
      this.czcsValue = arr;
      this.value_czcs.label = arrLabel;
      this.value_czcs.id = arrId;
    },
  },
  mounted() {
    let _this = this;
    //默认查询数据
    // _this.searchs(1);
  },
  // watch: {
  //   clientDetails: function (val) {
  //     this.clientDetails_type = val.type;
  //     this.searchs();
  //   },
  // },
  activated() {
    queryQuestionOptionsTree("情况分析")
      .then((res) => {
        this.options_qkfx = res;
      })
      .then((res) => {
        this.searchs();
        queryQuestionOptionsTree("处置措施")
          .then((res) => {
            this.options_czcs = res;
          })
          .catch((err) => {
            this.$message.warning(err.message);
          });
      })
      .catch((err) => {
        // this.$message.warning(err.message);
      });

    // queryQuestionOptions().then(res => {
    //     let a = "情况分析", b = "处置措施";
    //     this.options_qkfx = [{
    //         label: a,
    //         options: res.reduce((before, cur) => {
    //             cur.type == a && before.push({ label: cur.label, value: cur.id });
    //             return before;
    //         }, [])
    //     }];

    //     this.options_czcs = [{
    //         label: b,
    //         options: res.reduce((before, cur) => {
    //             cur.type == b && before.push({ label: cur.label, value: cur.id });
    //             return before;
    //         }, [])
    //     }];
    // }).catch(err => {
    //     this.$message.warning(err.message);
    // });
  },
  computed: {
    userInfo() {
      if (this.$store.getters.userInfo) {
        return this.$store.getters.userInfo;
      } else {
        return { account: "" };
      }
    },
  },
};
</script>
<style lang="scss">
#xdzylb {
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  color: white;
  .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #146a80;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 1px solid #146a80;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #3b9cff;
  }

  .el-tabs__item {
    color: #656565;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: 1px solid #146a80;
  }

  .el-tabs__item.is-active {
    color: #409eff !important;
  }

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

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

  .top-div {
    width: 100%;
    height: 60px;

    .el-button {
      float: left;
      margin-left: 10px;
      margin-top: 3px;
    }

    .el-input {
      float: left;
      width: 200px;
      margin-right: 30px;

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

    .el-select {
      float: left;
    }

    .sjxz {
      width: 350px;
      float: left;

      .el-date-editor {
        background: none;

        span {
          color: white;
        }

        .el-range-input {
          color: white;
          background: none;
        }
      }

      .el-input__inner {
        border: 1px solid #3a5f94c9 !important;
        box-shadow: 0 0 10px #3a5f94c9;
      }
    }

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

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

    .toggle-switch {
      float: left;
      margin-top: 10px;
      margin-left: 20px;

      .el-switch__label.is-active {
        color: #409eff !important;
      }

      .el-switch__label {
        display: unset;
        color: #5a5a5a;

        span {
          font-size: 15px;
        }
      }
    }
  }

  .bottom-div {
    width: 100%;
    height: calc(100% - 55px);

    .table-div {
      width: 100%;
      height: calc(100% - 50px);

      .el-table tr {
        background-color: #1d2d46 !important;
        color: #ffffff;
      }

      .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;
      }

      .span-div:hover {
        // font-weight: bold;
        color: #0dada7;
        text-decoration: underline;
        cursor: pointer;
      }

      .span-div {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }

      .pub-xdzy {
        width: 35px;
        height: 35px;
        float: left;
        cursor: pointer;
      }

      .dt {
        background-image: url(../../assets/img/xxxl/new/dt.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .lsjl {
        background-image: url(../../assets/img/xxxl/new/lsjl.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 20px;
      }

      .dt:hover {
        background-image: url(../../assets/img/xxxl/new/dt1.png);
      }

      .lsjl:hover {
        background-image: url(../../assets/img/xxxl/new/lsjl1.png);
      }
    }

    .bottom-content {
      width: 100%;
      height: calc(100% - 50px);

      .content-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background: #263b5d;

        .new-num {
          color: #09c69c;
        }
      }
    }
  }

  .el-dialog {
    // background: #1d2d46 !important;
    background-color: #1d2d4700 !important;
    background-image: url(../../assets/img/xxxl/new/tk.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .el-dialog__header {
      padding: 45px 0px 0px 40px;

      .el-dialog__headerbtn {
        top: 40px;
      }
    }

    .el-dialog__title {
      color: #ffffff;
    }

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

    .el-dialog__body {
      padding: 25px 25px 0px;
    }

    .el-dialog__footer {
      padding: 4px 0px 84px;

      .el-button {
        border-radius: 20px;
        background: linear-gradient(to right, #c36a00, #e99e28);
        border: none;
        color: white;
      }
    }

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

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

    .el-upload-list__item-name [class^="el-icon"] {
      color: #2870ff;
      height: unset !important;
    }

    .el-upload__tip {
      color: #c7c7c7;
    }

    .el-upload-list__item-name {
      color: #4382ff;
    }

    .audio-class {
      margin-left: 75px;
    }
  }

  /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }

  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }

  /deep/ .el-upload-list {
    height: 40px;
  }

  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter,
  .slide-fade-leave-to

  /* .slide-fade-leave-active for below version 2.1.8 */
    {
    transform: translateX(10px);
    opacity: 0;
  }

  .xzwd {
    .el-dialog__body {
      padding: 25px 25px 0px;
    }
  }

  .el-dialog {
    .el-input__inner {
      color: white !important;
      background: #0d1420 !important;
      border: 1px solid #6f6c5c !important;
      box-shadow: none;
    }

    .el-textarea__inner {
      color: white !important;
      background: #0d1420 !important;
      border: 1px solid #6f6c5c !important;
      box-shadow: none;
    }

    .el-table__body tr:hover>td {
      background-color: unset;
    }

    .table-div {
      width: 100%;
      height: 500px;
      margin-top: 20px;
      margin-left: 0px;
      background: #e6e6e600;

      tr {
        background-color: unset;
        color: #ffffff;
      }

      .el-table__header-wrapper tr {
        background-image: url(../../assets/img/flfg/new/4.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: 0px 0px 10px #292929;
        color: #ffffff;
        font-size: 14px;
      }

      th {
        border: unset;
        color: #ffffff;
        font-size: 14px;
        background-color: unset;
      }

      td {
        border-bottom: 1px solid #252631 !important;
        border-right: unset;
      }

      .el-table__body-wrapper {
        height: 452px;
        overflow-y: auto;
      }

      .cell {
        text-align: center;
      }
    }
  }
}
</style>
  