<template>
  <el-row>


    <el-row>
      <white-board>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>题库管理</el-breadcrumb-item>
          <el-breadcrumb-item>题库·试卷</el-breadcrumb-item>
        </el-breadcrumb>
      </white-board>
    </el-row>



    <el-row>
      <el-form ref="searchForm" :model="searchForm">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="3"><label class="search-label">试卷名</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.dictKey" placeholder="请输入试卷名" clearable></el-input>
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">年级</label></el-col>
              <el-col :span="5">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>

              <el-col :span="3"><label class="search-label">学科</label></el-col>
              <el-col :span="5">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>



            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row style="line-height: 40px; text-align: right;">
          <el-col :span="6" :offset="18" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增试卷</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <!--       <el-table :data="tableData" row-key="id"  ref="ttable"  style="width: 100%;" highlight-current-row stripe>
               -->
          <el-table
            :data="tableData"
            highlight-current-row stripe
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
          >

            <el-table-column prop="id" label="标识" width="180"></el-table-column>
            <el-table-column prop="gradeName" label="年级" width="150"></el-table-column>
            <el-table-column prop="subject" label="学科" width="200"></el-table-column>
            <el-table-column prop="name" label="试卷名"  width="200"></el-table-column>
            <el-table-column prop="groupName" label="年级分类"  width="200"></el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handlePaper(scope.row.id)">预览</el-button>
                <el-button type="danger" plain @click="handleDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination class="fy"
                         layout="prev, pager, next"
                         @current-change="current_change"
                         :total="total"
                         background
          >
          </el-pagination>

        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" ref="form">
      <el-divider></el-divider>
      <label slot="title" style="float: left;">{{dialogTitle}}</label>

      <el-row>
        <el-col :span="18" :offset="3">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
            <el-form-item label="标识" prop="id" hidden="hidden">
              <el-input v-model.trim="form.id" v-bind:disabled="form.id !== ''" hidden="hidden" clearable></el-input>
            </el-form-item>
            <el-form-item label="父级标识" prop="parentId" hidden="hidden">
              <el-input v-model.trim="form.parentId" placeholder="请输入父级标识" clearable></el-input>


            </el-form-item>
            <el-form-item label="年级" prop="gradeName">
              <el-input v-model.trim="form.gradeName" placeholder="字典唯一标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="年级分类" prop="groupName">
              <el-input v-model.trim="form.groupName" placeholder="字典编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="试卷名" prop="name">
              <el-input v-model.trim="form.name" placeholder="字典值" clearable></el-input>
            </el-form-item>
            <el-form-item label="题目数量 " prop="name" >
              <el-input v-model.trim="form.number" placeholder="拓展字段" clearable></el-input>
            </el-form-item>
            <el-form-item label="学科" prop="subject">
              <el-input v-model.trim="form.subject" placeholder="备注" clearable></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort" >
              <el-input v-model.trim="form.sort" placeholder="排序" type="number" clearable></el-input>
            </el-form-item>
          </el-form>

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider></el-divider>
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleUpdate" size="mini">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogVisible2" ref="form2" >
      <el-divider></el-divider>
      <label slot="title" style="float: left;">{{dialogTitle2}}</label>

      <el-row>


        <el-row style="padding: 10px 0px;">
          <!--       <el-table :data="tableData" row-key="id"  ref="ttable"  style="width: 100%;" highlight-current-row stripe>
               -->
          <el-table
            :data="tableData2"
            highlight-current-row stripe
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">

                  <el-form-item label="题目选项:   ">
                    <span>{{ props.row.optionList[0].content }}</span><el-form-item label="   "></el-form-item>
                    <span>{{ props.row.optionList[1].content }}</span><el-form-item label="   "></el-form-item>
                    <span>{{ props.row.optionList[2].content }}</span><el-form-item label="   "></el-form-item>
                    <span>{{ props.row.optionList[3].content }}</span><el-form-item label="   "></el-form-item>
                    <el-form-item label="题目解析:">
                      <span>{{ props.row.analysis }}</span>
                    </el-form-item>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>


            <el-table-column prop="name" label="题干"  width="600"></el-table-column>



          </el-table>
        </el-row>


      </el-row>
      <el-divider></el-divider>
    </el-dialog>




  </el-row>
</template>

<script>
  import dataDictionaryApi from "@/api/mypaperApi"
  import stemApi from "@/api/stemApi"
  import paperApi from "@/api/mypaperApi"


  export default {
    name: 'dataDict',
    components: {
    },


    data () {
      return {




        defaultProps: {
          label: 'name',
          children: 'child',
        },
        options1: [{
          value: '选项1',
          label: '语文'
        }, {
          value: '选项2',
          label: '数学'
        }, {
          value: '选项3',
          label: '英语'
        }],
        options2: [{
          value: '选项1',
          label: '一年级'
        }, {
          value: '选项2',
          label: '二年级'
        }, {
          value: '选项3',
          label: '三年级'
        },{
          value: '选项4',
          label: '四年级'
        },{
          value: '选项5',
          label: '五年级'
        },{
          value: '选项6',
          label: '六年级'
        }],

        typeOption: [{
          value : '1',
          label: '小学'
        }, {
          value : '2',
          label: '初中'
        }, {
          value : '3',
          label: '高中'
        }
        ],
        gradeOption: [],

        primaryOption: [{
          value : '1',
          label: '一年级'
        }, {
          value : '2',
          label: '二年级'
        }, {
          value : '3',
          label: '三年级'
        }, {
          value : '4',
          label: '四年级'
        }, {
          value : '5',
          label: '五年级'
        }, {
          value : '6',
          label: '六年级'
        }
        ],
        middleOption: [{
          value : '1',
          label: '一年级'
        }, {
          value : '2',
          label: '二年级'
        }, {
          value : '3',
          label: '三年级'
        }
        ],
        subjectOption: [{
          value : '1',
          label: '语文'
        }, {
          value : '2',
          label: '数学'
        }, {
          value : '3',
          label: '英语'
        }
        ],




        searchForm: {
          start: 1,
          limit: 10
        },
        tableData: [],

        form2: {
          gradeName: '',
          groupName: '',
          isAudited: '',
          knowledgePointId: '',
          name: '',
          subject: '',
          tenantId: '',
          type: '',
          optionList: '',
          page: '',
          size: ''
        },
        tableData2: [{
          analysis:'',
          name:'',
          optionList:[{
            content:'',
          }],
          answer:[]
        }],

        uploadData: {
          tree: null,
          treeNode: null,
          resolve: null
        },

        dialogTitle: '',
        dialogVisible: false,
        dialogdelVisible: false,

        dialogTitle2: '',
        dialogVisible2: false,
        dialogdelVisible2: false,

        currentSelectRow: {}, // 当前选中行
        form: {
          id: '',
          gradeName: '',
          groupName: '',
          name: '',
          subject: ''

        },
        formRules: {
          dictKey: [{required: true, message: '请输入字典唯一标识', trigger: 'blur'}],
          code: [{required: true, message: '请输入字典编码', trigger: 'blur'}],
          value: [{required: true, message: '请输入字典值', trigger: 'blur'}],
        }
      }
    },
    mounted () {
      this.list()
    },
    methods: {
      filterNode (value, data) {
        if (!value) {
          return true
        }

        return data.name.indexOf(value) !== -1
      },

      current_change(val){

        this.searchForm['start']=val
        this.list()
      },
      created:function(){
        this.total=this.tableData.length;
      },


      list () {

        this.currentSelectRow = {}
        this.tableData = []
        paperApi.page1(this.searchForm).then(data => {

          this.total = data.total

          this.tableData = data.data

        })
      },
      rowClick (row, event, column) {
        this.currentSelectRow = row
      },
      handleAdd () {
        /* 重置表单 */
        this.form['id'] = ''
        this.form['parentId'] = this.currentSelectRow['id']
        this.form['dictKey'] = ''
        this.form['code'] = ''
        this.form['value'] = ''
        this.form['attr'] = ''
        this.form['remarks'] = ''
        this.form['sort'] = ''
        this.dialogTitle = '新增'
        this.dialogVisible = true
      },
      handleEdit (index,row) {

        this.form['id'] = row.paperId
        this.form['group'] = row.group
        this.form['name'] = row.name
        this.form['subject'] = row.subject
        this.form['type'] = row.type
        this.dialogTitle = '编辑'
        this.dialogVisible = true

        this.dialogTitle = '预览'
        this.dialogVisible = true
      },

      handleUpdate () {


        dataDictionaryApi.Update(this.form).then(data => {

          this.dialogVisible = false
          this.$refs['form'].resetFields()
          this.list()

        })
        console.log("fds")
      },



      handlePaper (id) {




        //this.tableData2 = []
        console.log(id)
        paperApi.getExamById(id).then(stems => {

          this.tableData2 = data.stems

        })
        console.log(this.tableData2.length)
        console.log(id)
        this.dialogTitle2 = '预览2'

        this.dialogVisible2 = true



      },


      handleView (index,row) {

        this.dialogTitle2 = '预览1'
        this.dialogVisible2 = true
      },

      handleDel (index,row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dataDictionaryApi.deleteDataDictPoint(row.id).then(data => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })

            this.list()
            this.load(this.uploadData.tree, this.uploadData.treeNode, this.uploadData.resolve)
          })
        })
      },
      load(tree, treeNode, resolve) {
        this.uploadData.tree = tree
        this.uploadData.treeNode = treeNode
        this.uploadData.resolve = resolve
        let value = tree.id

        dataDictionaryApi.findDataDictById(value).then(data => {
          data.forEach(item => {
            //判断是否有子节点
            if (item.size > 0) {
              item.hasChildren = []
            }
          })

          resolve(data)

        })
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return
          }

          dataDictionaryApi.saveOrUpdate(this.form).then(data => {
            this.dialogVisible = false
            this.$refs['form'].resetFields()
            this.list()
          })
        })
      }
    }
  }
</script>

<style scoped>
</style>
