<template>
  <div>
    <div>
      <el-form :inline="true" class="orderform" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="tag" style="width: 250px" placeholder="请输入..." class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addQuestion">添加</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="quesionIndex"
          label="显示序号"/>
        <el-table-column
          prop="title"
          label="题目标题"/>
        <el-table-column
          :formatter="formatType"
          prop="type"
          label="题目类型"/>
        <el-table-column
          prop="questionOptions"
          label="题目选项"/>
        <el-table-column
          :formatter="formatStatus"
          prop="requiredAnswer"
          label="是否必答"/>
        <el-table-column
          prop="create_date"
          label="添加时间"/>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editQuestion(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteQuestionConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
    <!--弹出框-->
    <el-dialog :visible.sync="dialogFormVisiable" title="添加题目">
      <el-form :rules="rules" :model="addForm" label-width="100px" >
        <el-form-item label="题目序号" prop="quesionIndex">
          <el-input v-model="addForm.quesionIndex" placeholder="请输入题目序号" size="mini"/>
        </el-form-item>
        <el-form-item label="题目标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入题目标题" size="mini" />
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="题目是否必答">
          <el-select v-model="addForm.requiredAnswer" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in domains"
          :label="'题目选项' + (index+1) "
          :key="domain.key"
        >
          <el-input
            v-model="domain.info"
            placeholder="请输入题目选项"
            size="mini"/>
          <br><el-button @click.prevent="removeDomain(domain)">删除选项</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">增加项目</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addQuestionCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="addQuestionSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogModifyVisiable" title="修改题目">
      <el-form :rules="rules" :model="modifyForm" label-width="100px">
        <el-form-item label="题目序号" prop="quesionIndex">
          <el-input v-model="modifyForm.quesionIndex" placeholder="请输入题目序号" size="mini"/>
        </el-form-item>
        <el-form-item label="题目标题" prop="title">
          <el-input v-model="modifyForm.title" placeholder="请输入题目标题" size="mini" />
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="modifyForm.type" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="题目是否必答">
          <el-select v-model="modifyForm.requiredAnswer" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in domains"
          :label="'题目选项' + (index+1) "
          :key="domain.key"
        >
          <el-input
            v-model="domain.info"
            placeholder="请输入题目选项"
            size="mini"/>
          <br><el-button @click.prevent="removeDomain(domain)">删除选项</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">增加项目</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="updateQuestionCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateQuestion">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击删除按钮，删除确认框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的题目? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Index',
  data() {
    return {
      rules: {
        quesionIndex: [{ required: true, message: '请输入题目显示序号', trigger: 'blur' }],
        title: [{ required: true, message: '请输入题目标题', trigger: 'blur' }],
        type: [{ required: true, message: '请选择题目类型', trigger: 'blur' }]
      },
      tag: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '100px', // 弹出框form宽
      dialogFormVisiable: false,
      dialogModifyVisiable: false,
      deleteDialogVisible: false,
      types: [
        {
          value: 1,
          label: '单选'
        },
        {
          value: 2,
          label: '多选'
        },
        {
          value: 3,
          label: '问答输入'
        }
      ],
      options: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      addForm: {
        quesionIndex: '',
        title: '',
        type: '',
        requiredAnswer: '',
        questionOptions: ''
      },
      modifyForm: {
        id: '',
        quesionIndex: 0,
        title: '',
        type: '',
        requiredAnswer: '',
        questionOptions: ''
      },
      domains: [
        {
          info: ''
        }]
    }
  },
  created() {
    this.btn_search()
  },
  mounted() {
  },
  methods: {
    formatStatus(ob) {
      if (ob.requiredAnswer === undefined) {
        return '否'
      } else if (ob.requiredAnswer === 0) {
        return '否'
      } else if (ob.requiredAnswer === 1) {
        return '是'
      } else {
        return '否'
      }
    },
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/question/list', {
        params: {
          tag: this.tag
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.total)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data
            vm.tableData = obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.btn_search()
    },
    handleCurrentChange() {
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    addQuestion() {
      this.domains = []
      this.dialogFormVisiable = true
    },
    addQuestionCancel() {
      this.dialogFormVisiable = false
      this.clearForm()
    },
    clearForm() {
      this.addForm.quesionIndex = ''
      this.addForm.title = ''
      this.addForm.type = ''
      this.addForm.questionOptions = ''
    },
    addQuestionSubmit() {
      const vm = this
      var params = new URLSearchParams()
      if (vm.addForm.quesionIndex === '') {
        this.$message.error('请输入题目序号')
        return
      }
      if (vm.addForm.title === '') {
        this.$message.error('请输入题目标题')
        return
      }
      if (vm.addForm.type === '') {
        this.$message.error('请选择题目类型')
        return
      }
      params.append('quesionIndex', vm.addForm.quesionIndex)
      params.append('title', vm.addForm.title)
      params.append('type', vm.addForm.type)
      params.append('requiredAnswer', vm.addForm.requiredAnswer)
      vm.addForm.questionOptions = JSON.stringify(vm.domains)
      params.append('questionOptions', vm.addForm.questionOptions)
      axios.post(process.env.BASE_API + '/question/create', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.clearForm()
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.dialogFormVisiable = false
    },
    editQuestion(row) {
      this.dialogModifyVisiable = true
      this.modifyForm = row
      this.domains = []
      this.domains = JSON.parse(row.questionOptions)
      if (this.domains === null) {
        this.domains = []
      }
    },
    updateQuestionCancel() {
      this.dialogModifyVisiable = false
      this.modifyForm = ''
      this.btn_search()
    },
    updateQuestion() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.modifyForm.id)
      params.append('quesionIndex', vm.modifyForm.quesionIndex)
      params.append('title', vm.modifyForm.title)
      params.append('type', vm.modifyForm.type)
      params.append('requiredAnswer', vm.modifyForm.requiredAnswer)
      vm.modifyForm.questionOptions = JSON.stringify(vm.domains)
      params.append('questionOptions', vm.modifyForm.questionOptions)
      axios.post(process.env.BASE_API + '/question/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.dialogModifyVisiable = false
    },
    deleteQuestionConfirm(row) {
      this.deleteQuestionId = row.id
      this.deleteQuestionName = row.questionName
      this.deleteDialogVisible = true
    },
    handleClickDelete() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.deleteQuestionId)
      axios.post(process.env.BASE_API + '/question/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    },
    formatType(ob) {
      if (ob.type === undefined) {
        return ''
      } else if (ob.type === 1) {
        return '单选题'
      } else if (ob.type === 2) {
        return '多选题'
      } else if (ob.type === 3) {
        return '输入题'
      } else {
        return '未知'
      }
    },
    submitForm(items) {
      for (var i = 0; i < this.domains.length; i++) {
        console.log(this.domains[i].info)
      }
    },
    removeDomain(item) {
      var index = this.domains.indexOf(item)
      if (index !== -1) {
        this.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.domains.push({
        info: ''
      })
    }
  }
}
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
