<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>
            <el-select placeholder="类型" size="small" v-model="search.style" clearable
                       @change="page.current=1,getList()">
              <el-option
                  v-for="(item,index) in dict.getDict('partyEducationType')"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue">
              </el-option>
            </el-select>
            <el-select placeholder="发布状态" size="small" clearable v-model="search.status"
                       @change="page.current=1,getList()">
              <el-option
                  v-for="(item,index) in dict.getDict('newsCenterStatus')"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue">
              </el-option>
            </el-select>
          </template>
          <template slot="right">
            <el-input placeholder="标题" size="small" suffix-icon="iconfont iconSearch" v-model="search.title"></el-input>
            <el-button type="primary" icon="iconfont iconSearch" size="small" @click="page.current=1,getList()">查询
            </el-button>
            <el-button icon="el-icon-refresh-right" size="small" @click="page.current=1,search={},getList()">重置</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="handleChange(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.id)"/>
            </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 partyAdd from "./components/partyAdd";
import {mapState} from "vuex";

export default {
  name: "AppPartyHistoryEducation",
  label: "党史教育",
  components: {partyAdd},
  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>{this.dict.getLabel('partyEducationType', row.style)}</span>]},
        {label: "标题", prop: "title"},
        {label: "发布状态", render: (h, {row}) => [<span>{this.dict.getLabel('newsCenterStatus', row.status)}</span>]},
        {label: "发布时间", prop: "createDate"},
        {label: "发布人", prop: "createUser"},
        {label: "发布组织", prop: "organizationName"},
        {slot: "options"}
      ];
    }
  },
  methods: {
    handleDetail(row) {
      this.row = row;
      this.showList = false;
      this.comp = "partyAdd";
    },
    changeParty(e) {
      if (!e.length) return
      this.organizationName = e[0]?.name;
      this.resetSearch();
    },
    handleEdit(row) {
      this.row = row;
      this.showList = false;
      this.isEdit = true;
      this.comp = "partyAdd";
    },
    resetSearch() {
      this.page.current = 1;
      this.getList();
    },
    handleDelete(id) {
      this.$confirm("是否确定要删除？").then(_ => {
        this.instance.post("/app/apppartyeducation/delete", null, {
          params: {
            ids: id,
          }
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getList();
          }
        })
      })
    },
    handleChange(row) {
      this.$confirm(`是否确定要${row.status == 0 ? '发布' : '取消发布'}？`).then(_ => {
        this.instance.post("/app/apppartyeducation/updateCountYardstatus", {
          id: row.id,
          status: row.status == 0 ? 1 : 0
        }).then(res => {
          if (res.code == 0) {
            this.$message.success(`${row.status == 0 ? '发布' : '取消发布'}成功`);
            this.getList();
          }
        })
      })
    },
    back() {
      this.comp = "";
      this.showList = true;
      this.isEdit = false;
      this.getList();
    },
    handleAdd() {
      this.comp = "partyAdd";
      this.showList = false;
      this.isEdit = true;
      this.row = {};
    },
    // 查询所有单位 树形结构
    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;
    },
    getList() {
      this.instance.post("/app/apppartyeducation/list", null, {
        params: {
          ...this.page,
          ...this.search,
        }
      }).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.dict.load("newsCenterStatus", "partyEducationType");
    this.getList();
  }
}
</script>

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

}
</style>
