<template>
  <div>
    <div class="button-box clearflex">
      <el-button @click="dialogFormVisible=true" type="primary">新增</el-button>
    </div>

    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
			<el-form-item  label="标题" prop="phone">
			  <el-input placeholder="请输入标题" v-model="searchInfo.title" type="text" class="user-form-item" clearable></el-input>
			</el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData"  border stripe>
      <el-table-column label="ID" width="70" prop="answerId">
      </el-table-column>
	  
	  <el-table-column label="题型" width="70" prop="type">
		<template slot-scope="{row}">
		    <span>{{typeOption[row.type]}}</span>
		 </template>
	  </el-table-column>
	  
      <el-table-column label="题目"  prop="name" min-width="200">
        <template slot-scope="{row}">  
          <el-input v-if="row.edit" class="edit-input" size="small" v-model="row.title" />
          <span v-else>{{row.title}}</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="1选项"  prop="marks" >
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit" type="textarea" size="small" v-model="row.answer1" />
	      <span v-else>{{row.answer1}}</span>
	    </template>
	  </el-table-column>

      <el-table-column label="2选项"  prop="marks" >
        <template slot-scope="{row}">  
          <el-input v-if="row.edit" type="textarea" size="small" v-model="row.answer2" />
          <span v-else>{{row.answer2}}</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="3选项"  prop="marks" >
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit " type="textarea" size="small" v-model="row.answer3" />
	      <span v-else>{{row.answer3}}</span>
	    </template>
	  </el-table-column>
	  
	  <el-table-column label="4选项"  prop="marks" >
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit" type="textarea" size="small" v-model="row.answer4" />
	      <span v-else>{{row.answer4}}</span>
	    </template>
	  </el-table-column>
	  
	  <el-table-column label="5选项"  prop="marks" >
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit" type="textarea" size="small" v-model="row.answer4" />
	      <span v-else>{{row.answer5}}</span>
	    </template>
	  </el-table-column>
	  
	  <el-table-column label="答案"  prop="marks" width="60">
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit" type="textarea" size="small" v-model="row.result" />
	      <span v-else>{{row.result}}</span>
	    </template>
	  </el-table-column>
	  
	  
	  <el-table-column label="解答"  prop="content" width="90" align="center">
	    <template slot-scope="{row}">  
	      <el-input v-if="row.edit" type="textarea" size="small" v-model="row.content" />
		  <el-button v-else type="text" size="small"
		    @click="showDetail(row)" >题目解答</el-button>
	    </template>
	  </el-table-column>
      
      <el-table-column
        align="center"
        width="160px"
        label="操作"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row, $index}">
            <el-button
              v-if="row.edit"
              type="success"
              size="small"
              icon="el-icon-circle-check"
              @click="confirmEdit(row, $index)"
            >提交</el-button>
            <el-button
              v-if="row.edit"
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row, $index)"
            >取消</el-button>
            <el-button
              v-if="!row.edit"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="initEdit(row, $index)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="size"
      :page-sizes="[10, 30, 50, 100]"
      :style="{float:'right',padding:'20px'}"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog title="新增题库" center :visible.sync="dialogFormVisible"  >
      <el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
        <el-form-item  label="选择题型" prop="type" >
			<el-select v-model="form.type" class="input_select" clearable>
				<el-option v-for="(item,index) in typeOption" :key="index" :label="item" :value="index"></el-option>
			</el-select>
        </el-form-item>
		
        <el-form-item  label="题目" prop="title">
			<el-input  v-model="form.title" type="textarea"  clearable></el-input>
        </el-form-item>
		
		<el-form-item  label="答案1" prop="answer1">
			<el-input  v-model="form.title" type="textarea"  clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="答案2" prop="answer2">
			<el-input  v-model="form.title" type="textarea"  clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="答案3" prop="answer3" v-if="form.type<3">
			<el-input  v-model="form.title" type="textarea"  clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="答案4" prop="answer4"  v-if="form.type<3">
			<el-input  v-model="form.title" type="textarea"  clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="结果" prop="result" >
			<el-input  v-model="form.result" type="number"  clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="解答" prop="content" >
			<el-input  v-model="form.content" type="textarea"  clearable></el-input>
		</el-form-item>
		
		
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button @click="doAddAction" type="primary">确 定</el-button>
      </div>
    </el-dialog>
	
	<el-dialog
	  align="center"
	  title="题目解答"
	  :close-on-click-modal="false"
	  :visible.sync="msgDialog"
	   :show-close='false'
	  width="80%"
	  style="padding:0px;"
	  @close="msgDialog=false"
	>
	<div class="tl">
		<codemirror :value="form.content" :options="options"></codemirror>
		
	</div>
	<div slot="footer" class="dialog-footer tc">
		<el-button @click="msgDialog=false">取消编辑</el-button>
		<el-button type="primary" @click="updateContent">提交详解 </el-button>
	</div>
	
	</el-dialog>
	
  </div>
</template>

<script>
import { getWxAnswerList, postData} from "@/api/exam.js";
import {toDatetime} from "@/utils/date"
import infoList from "@/mixins/infoList";
import { time2str, str2time} from "@/utils/index.js";
import rules from "@/utils/rules.js";
import DropSearch from '@/components/select/DropSearch.vue';


import {codemirror} from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/rubyblue.css'
import 'codemirror/mode/python/python.js'
	

export default {
  name: "Api",
  data() {
    return {
	  listApi: getWxAnswerList,
      dialogFormVisible: false,
	  msgDialog: false,
      dialogTitle: "新增广告",
      form: {
		type:'',
		result:1,
		title:'',
		answer1:'',
		answer2:'',
		answer3:'',
		answer4:'',
		content:'',
		temp:{}
      },
	  options: {
	  	tabSize: 2, // 缩进格式
	  	theme: 'monokai', // 主题，对应主题库 JS 需要提前引入
	  	lineNumbers: true, // 显示行号
	  	line: true,
	  	lineWrapping: true,
	  	styleActiveLine: true, // 高亮选中行
	  	hintOptions: {
	  		completeSingle: true // 当匹配只有一项的时候是否自动补全
	  	}
	  },
	  typeOption:{1:'单选',2:'多选',3:'判断'},
      rules: {
        title: rules.defaultFun( "请输入标题"),
		type: rules.defaultFun( "请选择题型"),
		result: rules.defaultFun( "请输入答案"),
		answer1: rules.defaultFun( "请输入选项1"),
		answer2: rules.defaultFun( "请输入选项2"),
		answer3: rules.defaultFun( "请输入选项3"),
		answer4: rules.defaultFun( "请输入选项4"),
		content: rules.defaultFun( "请输入解答"),
      }
    };
  },
  watch:{
	"searchInfo.title"(val){
		this.page = 1
		this.getTableData()
	} 
  },
  components:{DropSearch,codemirror},
  mixins: [infoList],
  methods: { 
    doAddAction(){
		let param = Object.assign( {}, this.form )
		param.result = +param.result;
		param.type = +param.type
        postData("addWxAnswer", param).then((res) => {
          if( res.code == 200){
        	this.$message.successMsg("编辑成功", 1);
			this.getTableData()
          }
        });
    },
	showDetail( row ){
		this.form = Object.assign({}, row)
		this.form.temp = row
		this.msgDialog = true;
	},
	cancelEdit(row, index) {
	  row = Object.assign(row, row.temp);
	  row.edit = false;
	  delete( row["temp"] );
	},
	initEdit(row, index) {
	  let form = Object.assign({}, row);
	  row.edit = true;
	  row.temp = form;
	},
	confirmEdit( row ) {
	  let param = Object.assign( {}, row )
	  param.result = +param.result;
	  param.type = +param.type
	  delete( param["temp"] )
	  postData("addWxAnswer", param).then((res) => {
	    if( res.code == 200){
			row.edit = false;
			delete( row["temp"] )
			this.$message.successMsg("编辑成功", 1);
	    }
	  });
	},
	updateContent( ){
		this.confirmEdit( this.form )
	},
	okPhone( item){
		this.form.groupId = +item.group_id
	},
	deleteRow(row, index){
		let param= {id: row.id}
		postData('delWxUserGroup', param).then((res) => {
			if( res.code == 200){
				this.$message.successMsg("删除成功", 1)
				this.tableData.splice( index, 1)
			}
		})
	}
  },
  filters: {
    toDatetime
  },
  created() {
    this.getTableData();
  }
};
</script>
<style scoped lang="scss">
.el-tag--mini {
  margin-left: 5px;
}
.warning {
  color: #dc143c;
}
</style>
