<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="false" @search="list1">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="3"><label class="search-label">id</label></el-col>
              <el-col :span="5">
                <el-input v-model.number="searchForm.id" placeholder="请输入id" clearable></el-input>
              </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"  style="width: 100%;" >
            <el-table-column prop="id" label="标识" width="180"></el-table-column>
            <el-table-column prop="name" label="试卷名" width="180"></el-table-column>
            <el-table-column prop="gradeName" label="年级分类" width="100"></el-table-column>
            <el-table-column prop="groupName" label="年级" width="100"></el-table-column>
            <el-table-column prop="subject" label="学科"  width="100"></el-table-column>


          </el-table>
        </el-row>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="sizes, prev, pager, next"
          >
          </el-pagination>
        </div>
      </white-board>
    </el-row>

    <el-drawer
      :title="previewTitle"
      :visible.sync="drawerVisible"
      :direction="direction"
    >
      <template>
        <el-table
          :data="previewData"
          style="width: 100%">
          <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.length }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="题目内容"
            prop="name">
          </el-table-column>

        </el-table>
      </template>
    </el-drawer>


    <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="name">
              <el-input v-model.trim="form.name" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="年级分类" prop="groupName">
              <el-select v-model.trim="form.groupName" placeholder="" clearable @change="typeChanged">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级" prop="gradeName">
              <el-select v-model.trim="form.gradeName" placeholder="" clearable @change="gradeChanged">
                <el-option v-for="item in gradeOption" :key="item.value" :label="item.label" :value="item.label"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="学科" prop="subject">
              <el-select v-model.trim="form.subject" placeholder="" clearable @change="subjectChanged">
                <el-option v-for="item in subjectOption" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="数量" prop="number">
              <el-input v-model.trim="form.number" placeholder=""  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-row>
</template>

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

  export default {
    name: 'paper',
    components: {
    },
    data () {
      return {
        currentPage: 1,
        previewTitle: '',
        direction: 'ltr',
        defaultProps: {
          label: 'name',
          children: 'child',
        },
        searchForm: {
          id : 1,
          start: 1,
          limit: 10
        },
        tableData: [],
        uploadData: {
          tree: null,
          treeNode: null,
          resolve: null
        },
        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: '英语'
        }
        ],


        dialogTitle: '',
        dialogVisible: false,
        dialogdelVisible: false,
        drawerVisible: false,
        currentSelectRow: {}, // 当前选中行
        form: {
          groupName: '',
          gradeName: '',
          name: '',
          subject: '',
          number:'0'
        },


        formRules: {
          name: [{required: true, message: '请输入名称', trigger: 'blur'}],
          type: [{required: true, message: '请选择年级分类', trigger: 'blur'}],
          group: [{required: true, message: '请选择年级', trigger: 'blur'}],
          subject: [{required: true, message: '请选择学科', trigger: 'blur'}],
        },
        result: {
        },
        previewData: [],
        a: {}


      }
    },
    mounted () {

      this.list()
    },
    methods: {
      handleSizeChange(val) {
        this.searchForm['start']=val;
        this.list()
      },
      handleCurrentChange(val) {
        this.searchForm['start']=val+1
        this.list()
      },
      filterNode (value, data) {
        if (!value) {
          return true
        }

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

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

          //this.total = data.total

          this.tableData = data.data

        })
      },
      list1(){
        this.currentSelectRow = {}
        this.tableData = []
        console.log("id:")
        console.log(typeof this.searchForm.id)
       paperApi.update2(this.searchForm.id).then(data => {
      
          //this.total = data.total

          this.tableData = data.data

        })

      },
      rowClick (row, event, column) {
        this.currentSelectRow = row
      },
      typeChanged (value) {
        console.log(value)
        if (value === "小学") {
          this.gradeOption = this.primaryOption
        } else {
          this.gradeOption = this.middleOption
        }
      },
      numberChanged(value){
        console.log("fff:::")
        this.form.number=parseInt(value,10)
        console.log(typeof this.form.number)

      },

      gradeChanged (value) {
        console.log(value)
      },
      subjectChanged (value) {
        console.log(value)
      },
      handleAdd () {
        /* 重置表单 */

        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
      },

      handleDel (index,row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          paperApi.deleteByPaperId(row.paperId).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
        resolve(data)

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

            console.log(form.gradeName+"ff")

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

          })
        })
      },
      handleUpdate () {
        console.log("update1")

        console.log(this.form.name)
        console.log(this.form.groupName)
        console.log(this.form.gradeName)
        console.log(this.form.subject)
        console.log(typeof this.form.number)
        console.log(this.form.number)

        paperApi.Update(this.form).then(data => {
          console.log(form.gradeName+"ff")
          this.dialogVisible = false
          //this.$refs['form'].resetFields()
          this.list()


        })
      },

      handleAddStem () {

      },
      async handlePreview (index,row) {
        this.previewData=[]
        this.result=await paperApi.preview(row.paperId)
        this.result=this.result.topics
        for (let i=0;i<this.result.length;i++){
          this.a = await paperApi.showStem(this.result[i])
          this.previewData.push(this.a)
        }



        this.drawerVisible = true
        this.previewTitle = row.paperName

      }
    }
  }
</script>

<style scoped>
</style>
