<template>
  <section class="AppFoundingHundred">
    <ai-list v-if="showList">
      <template #title>
        <ai-title title="党史题库" isShowBottomBorder></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template slot="left">
            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            stripe
            :total="total"
            :current.sync="page.current"
            :size.sync="page.size"
            style="margin-top: 10px;"
            @getList="getList">
          <el-table-column slot="options" label="操作" align="center" width="220px" fixed="right">
            <template slot-scope="{row}">
              <div class="table-options">
                <el-button type="text" title="详情" @click="handleDetail(row)">详情</el-button>
                <el-button type="text" title="编辑" @click="handleEdit(row)">编辑</el-button>
                <el-button type="text" title="删除" @click="handleDelete(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <component :is="comp" v-else :row="row" :instance="instance" :dict="dict" :permissions="permissions" @back="back"
               :isEdit="isEdit"></component>
  </section>
</template>

<script>
import questionBankAdd from "./components/questionBankAdd";
import {mapState} from "vuex";

export default {
  name: "AppQuestionBank",
  label: "党史题库",
  components: {questionBankAdd},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      comp: "",
      tableData: [],
      total: 0,
      row: {},
      showList: true,
      search: {},
      isEdit: false,
      partyList: [],
      treeData: [],
      page: {
        current: 1,
        size: 10
      }
    }
  },
  computed: {
    ...mapState(["user"]),
    colConfigs() {
      return [
        {label: "类型", render: (h, {row}) => [< span> {row.type == 1 ? '单选题' : '多选题'} < /span>]},
        {label: "题目", prop: "title"},
        {label: "创建时间", prop: "createDate"},
        {slot: "options"}
      ];
    }
  },
  methods: {
    handleDetail(row) {
      this.comp = "questionBankAdd";
      this.showList = false;
      this.isEdit = false;
      this.row = row;
    },
    changeParty(e) {
      if (!e.length) return
      this.organizationName = e[0]?.name;
      this.search.current = 1;
      this.getList();
    },
    // 查询所有单位 树形结构
    searchSysAll(id) {
      this.instance.post('/admin/partyOrganization/queryAllChildren', null, {
        params: {
          id: id
        }
      }).then((res) => {
        if (res?.data) {
          res.data = res.data.map(a => {
            return {...a, label: a.name}
          });
          this.treeData = res.data.filter(e => e.id == this.user.info.organizationId);
          this.treeData.map(t => this.addChild(t, res.data));
        }
      })
    },
    // 点击树节点
    handleNodeClick(data) {
      this.partyList = data;
    },
    handleDelete({id}) {
      this.$confirm("是否确定要删除？").then(_ => {
        this.instance.post("/app/apppartyquestion/delete", null, {
          params: {
            ids: id
          }
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getList();
          }
        })
      })
    },
    handleEdit(row) {
      this.comp = "questionBankAdd";
      this.showList = false;
      this.isEdit = true;
      this.row = row;
    },
    back() {
      this.comp = "";
      this.showList = true;
      this.isEdit = false;
      this.row = {};
      this.getList();
    },
    handleAdd() {
      this.comp = "questionBankAdd";
      this.showList = false;
      this.isEdit = true;
      this.row = {};
    },
    getList() {
      this.instance.post("/app/apppartyquestion/list", null, {
        params: {
          ...this.page
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      })
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.AppFoundingHundred {
  height: 100%;
}
</style>
