<template>
  <div id="tiku">
    <el-row>
      <el-col class="add" :span="24">
        <el-select v-model="type" placeholder="请选择题目类型">
          <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="status" placeholder="请选择题目状态">
          <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-button size="mini" type="primary" @click="search" style="margin-left:10px;">查询</el-button>
        <el-button size="mini" type="primary" @click="add">添加</el-button>
      </el-col>
      <el-col :span="24"
        ><el-table :data="list" border style="width: 100%">
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row.type == '0' ? '单选' : scope.row.type == '1' ? '多选' : scope.row.type == '2' ? '问答' : '未识别' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="topic" label="题目" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status == '0' ? '弃用' : scope.row.status == '1' ? '正常' : '未识别' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="detailBtn(scope.row)">查看</el-button>
              <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="page">
        <el-pagination background layout="prev, pager, next,total" :total="total" @current-change="handleCurrentChange"> </el-pagination>
      </el-col>
      <el-dialog title="添加题目" :visible.sync="dialogFormVisible">
        <el-form size="mini" :model="form" ref="form" label-width="100px" class="demo-dynamic" :rules="rules">
          <el-form-item prop="type" label="类型">
            <el-radio-group v-model="form.type">
              <el-radio :label="'0'">单选</el-radio>
              <el-radio :label="'1'">多选</el-radio>
              <el-radio :label="'2'">问答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="status" label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="'0'">弃用</el-radio>
              <el-radio :label="'1'">正常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="topic" label="题目">
            <el-input v-model="form.topic"></el-input>
          </el-form-item>
          <el-col class="option" v-if="form.type != '2'">
            <p>选项</p>
            <el-form-item v-for="(item, index) in form.option" :label="sortNumber(index)" :key="index">
              <el-input v-model="item.opname"></el-input><el-button @click.prevent="removeDomain(item)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="addDomain">新增选项</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFrom">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex';
const { mapActions: question } = createNamespacedHelpers('question');
export default {
  name: 'tiku',
  props: {},
  components: {},
  data: () => ({
    list: [], //列表
    total: 0, //总数
    dialogFormVisible: false, //控制dialog是否显示
    form: {
      option: [],
    }, //表单
    type: null, //选择的类型
    typeoptions: [
      { value: '0', label: '单选' },
      { value: '1', label: '多选' },
      { value: '2', label: '问答' },
    ], //类型选择数组
    status: null, //选择的状态
    statusoptions: [
      { value: '0', label: '弃用' },
      { value: '1', label: '正常' },
    ], //状态选择数组
    rules: {
      type: { required: true, message: '类型不能为空', trigger: 'blur' },
      topic: { required: true, message: '题目不能为空', trigger: 'blur' },
      status: { required: true, message: '状态不能为空', trigger: 'blur' },
    }, //表单验证规则
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...question(['create', 'query', 'update', 'delete']),
    //查询列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      info = { type: this.type, status: this.status };
      const list = await this.query({ skip, limit, ...info });
      this.$set(this, `list`, list.data);
      this.$set(this, `total`, list.total);
    },
    //查看详情
    detailBtn(item) {
      this.$set(this, `form`, item);
      this.dialogFormVisible = true;
    },
    //删除
    async deleteBtn(id) {
      let res = await this.delete(id);
      if (res.errcode == 0) this.search();
    },
    //分页
    handleCurrentChange(val) {
      this.search({ skip: (val - 1) * 10, limit: val * 10 });
    },
    //提交表单
    async submitFrom() {
      let index = 0;
      for (const option of this.form.option) {
        option.number = this.sortNumber(index);
        index++;
      }
      if (this.form.type == '2') {
        delete this.form.option;
      }
      let res;
      if (this.form.id) res = await this.update(this.form);
      else res = await this.create(this.form);
      if (res.errcode == 0) {
        this.dialogFormVisible = false;
        this.search();
      }
    },
    //删除选项
    removeDomain(item) {
      var index = this.form.option.indexOf(item);
      if (index !== -1) {
        this.form.option.splice(index, 1);
      }
    },
    //新增选项
    addDomain() {
      this.form.option.push({
        opname: '',
      });
    },
    //根据index生成选项number
    sortNumber(index) {
      return String.fromCharCode(65 + index);
    },
    //添加
    add() {
      this.dialogFormVisible = true;
      this.form = { status: '1', option: [] };
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  margin: 0 0 10px 0;
}
.add .el-button:last-child {
  float: right;
}
/deep/.el-dialog {
  width: 70%;
}
.option p {
  width: 85px;
  text-align: right;
  padding: 0 20px 5px 0;
}
/deep/.option .el-input {
  width: 70%;
  margin: 0 5px 0 0;
}
</style>
