<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" lazy :load="load" ref="ttable" @row-click="rowClick" style="width: 100%;" highlight-current-row stripe>
-->
<el-table
        :data="tableData"

        >
            <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.name }}</span>
                      </el-form-item>
                      <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>
                    </el-form>
                  </template>
                </el-table-column>

            <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="analysis" label="题目解析"  width="200"></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="dictKey">
              <el-input v-model.trim="form.dictKey" placeholder="字典唯一标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="字典编码" prop="code">
              <el-input v-model.trim="form.code" placeholder="字典编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="字典值" prop="value">
              <el-input v-model.trim="form.value" placeholder="字典值" clearable></el-input>
            </el-form-item>
            <el-form-item label="拓展字段">
              <el-input v-model.trim="form.attr" placeholder="拓展字段" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model.trim="form.remarks" 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="handleSave" size="mini">确 定</el-button>
      </div>
    </el-dialog>




  </el-row>
</template>

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



  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: '六年级'
                  }],


        searchForm: {

          page: 1,
          size: 10
        },
        tableData: [],
        uploadData: {
          tree: null,
          treeNode: null,
          resolve: null
        },

        dialogTitle: '',
        dialogVisible: false,
        dialogdelVisible: false,
        currentSelectRow: {}, // 当前选中行
        form: {
                  gradeName: '',
                  groupName: '',
                  isAudited: '',
                  knowledgePointId: '',
                  name: '',
                  subject: '',
                  tenantId: '',
                  type: '',
                  optionList: [[], [], [], []],
                  page: 1,
                  size: 10

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


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

      handleSizeChange(val) {
        this.searchForm['limit']=val;
        this.list()
      },
      handleCurrentChange(val) {

        this.searchForm['start']=val+1
        this.list()
      },

           current_change(val){

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


      list () {
        this.currentSelectRow = {}
        this.tableData = []
        stemApi.page(this.searchForm).then(data => {
          this.total = data.total
          data.data.forEach(item => {
            item.hasChildren = []
          })
          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.id
        this.form['parentId'] = row.parentId
        this.form['dictKey'] = row.dictKey
        this.form['code'] = row.code
        this.form['value'] = row.value
        this.form['attr'] = row.attr
        this.form['remarks'] =row.remark
        this.form['sort'] = row.sort
        this.dialogTitle = '编辑'
        this.dialogVisible = 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>
