<template>
  <div class="app-container">
    <div style="margin-top:10px">
      <el-cascader
            v-model="questioncatC"
            :options="questioncatData"
            clearable
            style="width: 400px"
            @change="handleFilter"
          ></el-cascader>
      <el-select
        v-model="listQuery.type"
        placeholder="题型"
        clearable
        style="width: 120px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="search"
        placeholder="输入题干进行搜索"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >搜索</el-button>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-refresh-left"
            @click="resetFilter"
          >刷新重置</el-button>
          <div style="margin-top:10px">
    <el-popover
  placement="top"
  width="160"
  v-if="checkPermission(['consumer_import'])"
  v-model="popovervisible"
  >
  <p>导入题目前,请下载模板并按格式录入.</p>
  <div style="text-align: left; margin: 0;">
    <el-link href="/media/muban/question.xlsx" target="_blank" @click="popovervisible = false" type="primary">下载模板</el-link>
    <el-upload
  :action="uploadUrl"
  :on-success="handleUploadSuccess"
  accept=".xlsx"
  :headers="myHeaders"
  :show-file-list ="false"
  >
  <el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button>
</el-upload>
  </div>
  <el-button slot="reference">Excel导入</el-button>
</el-popover>
</div>
    </div>
<el-table
      :data="tableData"
      style="width: 100%;margin-top:10px;"
      border
      stripe
      fit
      v-loading="listLoading"
      highlight-current-row
      max-height="600"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="left" label="题干">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="left" label="所属题库">
        <template slot-scope="scope">{{ scope.row.questioncat_name }}</template>
      </el-table-column>
      <el-table-column align="left" label="题型">
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column align="left" label="难易度">
        <template slot-scope="scope">{{ scope.row.level }}</template>
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleDetail(scope)"
            icon="el-icon-more"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope)"
            icon="el-icon-delete"
            :disabled="!checkPermission(['questioncat_delete'])"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
<el-dialog
  title="题目详情"
  :visible.sync="dialogVisible"
  width="30%">
  <div>{{question.type}}</div>
  <div>{{question.name}}</div>
  <ul id="repeat">
  <li v-for="(value,key,index) in question.options">
    {{ key }}:{{value}}
  </li>
  </ul>
  <div>正确答案{{question.right}}</div>
  <div>{{question.resolution}}</div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {
  getQuestioncatAll,
  getQuestionList,
  createQuestion,
  deleteQuestion,
  importQuestion
} from "@/api/question";
import { genTree, deepClone } from "@/utils";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination";
import { uploadUrl, myHeaders } from "@/api/file";
import { getToken } from "@/utils/auth";

const defaultObj = {
  id: "",
  name: ""
};
const listQuery = {
  page: 1,
  limit: 20,
  search:''
};
export default {
  components: { Pagination },
  data() {
    return {
      popovervisible:false,
      uploadUrl: uploadUrl(),
      myHeaders: myHeaders(),
      questioncat: {
        id: "",
        name: ""
      },
      total: 0,
      listQuery: listQuery,
      search:"",
      tableData: [],
      questioncatData:[],
      listLoading: true,
      dialogVisible: false,
      dialogType: "new",
      rule1: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      typeOptions: [
        { key: 1, label: "单选", value: "单选" },
        { key: 2, label: "多选", value: "多选"},
        { key: 3, label: "判断", value: "判断" }
      ],
      question:{},
      questioncatC:[],
    };
  },
  computed: {},
  created() {
    this.getList();
    this.getQuestioncatAll();
  },
  methods: {
    checkPermission,
    handleUploadSuccess(res, file) {
      if (res.code == 200) {
        const loading = this.$loading({text:"正在导入中..."})
        importQuestion(res.data).then(response => {
          loading.close()
          if(response.code==200){
          this.$message({
          message: '导入成功',
          type: 'success'
        });
        this.getList(listQuery)
          }else if(response.code==206){
            this.$message({
          message: '部分未成功' + response.data,
          type: 'success'
        });
        this.getList(listQuery)
          }else{
            this.$message.error(response.msg);
          }
        
      });
      }else{
        this.$message.error("Excel上传失败!");
      }
    },
    getList(query = this.listQuery) {
      this.listLoading = true;
      getQuestionList(query).then(response => {
        this.tableData = response.data.results;
        this.total = response.data.count;
        this.listLoading = false;
      });
    },
    getQuestioncatAll() {
      getQuestioncatAll().then(response => {
        this.questioncatData = genTree(response.data);
      });
    },
    handleFilter() {
      if(this.questioncatC.length) {
      this.listQuery.questioncat = this.questioncatC[this.questioncatC.length-1]
    }else{
      this.listQuery.questioncat = ''
    }
      this.listQuery.page = 1;
      this.getList();
    },
    resetFilter() {
      this.search = ""
      this.listQuery = listQuery
      this.getList();
    },
    handleSearch() {
      this.getList({ search: this.search });
    },
    handleDetail(scope) {
      this.dialogVisible = true
      this.question = scope.row
    },
    handleDelete(scope) {
      this.$confirm("确认删除该题目吗?将丢失数据!", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(async () => {
          await deleteQuestion(scope.row.id);
          this.getList();
          this.$message({
            type: "success",
            message: "成功删除!"
          });
        })
        .catch(err => {
          // console.error(err);
        });
    },
  }
};
</script>
