<template>
  <section class="AppFoundingHundred">
    <ai-list v-if="showList">
      <template #title>
        <ai-title title="党史题库" isShowBottomBorder>
          <template #rightBtn>
            <ai-party :instance="instance" v-model="organizationId" :topOrgId="topOrgId" size="small"
                      @origin="changeParty"/>
          </template>
        </ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template slot="left">
            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
          </template>
          <!--          <template slot="right">-->
          <!--            <el-input placeholder="标题" size="small" suffix-icon="iconfont iconSearch"></el-input>-->
          <!--            <el-button type="primary" icon="iconfont iconSearch" size="small">查询</el-button>-->
          <!--            <el-button icon="el-icon-refresh-right" size="small">重置</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">
            <div slot-scope="{row}">
              <!--              <el-button type="text" icon="iconfont iconChange" :title="row.status==1?'取消发布':'发布'"-->
              <!--                         @click="handleUpdateCountYardstatus(row)"/>-->
              <el-button type="text" icon="iconfont iconShow" title="详情"
                         @click="handleDetail(row)"/>
              <el-button type="text" icon="iconfont iconEdit" title="编辑"
                         @click="handleEdit(row)"/>
              <el-button type="text" icon="iconfont iconDelete" title="删除"
                         @click="handleDelete(row)"/>
            </div>
          </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" :organizationId="organizationId" :organizationName="organizationName"></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,
      topOrgId: "",
      partyList: [],
      treeData: [],
      organizationId: "",
      organizationName: "",
      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.topOrgId = this.user.info.organizationId;
    this.searchSysAll(this.user.info.organizationId);
    this.organizationId = this.user.info.organizationId;
    this.organizationName = this.user.info.organizationName;
    this.getList();
  }
}
</script>

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