<template>
  <MOSTY.PageTree :pageTitle="null" :searchType="'01'" @getDeptId="getDeptId">
    <template #header>
      <div class="header">
        <div class="bottom">
          <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
            <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
          </el-tabs>
        </div>
      </div>
    </template>
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="addInfo">
          <!-- v-if='showAddbtn' -->
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab4">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #type="{ row }">
            <dict-tag :options="D_BZ_WHSCLX" :value="row.type" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <!--  v-if='showAddbtn' -->
                <EditPen />
              </el-icon>修改</span>
            <span class="operesee" @click="seeInfo(row)"><el-icon>
                <Compass />
              </el-icon>查看</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <!-- v-if='showAddbtn' -->
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

      </div>
    </template>

  </MOSTY.PageTree>
  <!-- 新增信息列表 -->
  <div v-if="addplanShow" class="dialog-box">
    <whjsinfo @close="close" :saveBtnShow="saveBtnShow" :zdlist='zdlist' :title="title" :RowId="RowId" :rwid="rwid"
      :category="activeTab" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, reactive, ref, watch, getCurrentInstance } from "vue";
import whjsinfo from "./commponents/whjsinfo.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const { D_BZ_WHSCLX } = proxy.$dict("D_BZ_WHSCLX");
const addplanShow = ref(false);
const searchArr = reactive([
  {
    showType: "input",
    prop: "manualname",
    width: '250px',
    placeholder: '请输入名称查询'
  }
]);
const showAddbtn = ref(false);
const zdlist = reactive({ D_BZ_WHSCLX })
const saveBtnShow = ref(true);
const tableloading = ref(false);
const title = ref("");
const tableData = ref([]);
const orgLevel = ref(JSON.parse(
  window.localStorage.getItem("deptId")
).orgLevel.substring(0, 1))
const RowId = ref(null)
const orgBizType = ref(getItem("deptId").orgBizType);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  ssdwid: '',
});
const tableColumn = ref([
  {
    title: "名称",
    prop: "manualname",
    sortable: true
  },
  {
    title: "类型",
    prop: "type",
    slot: true,
    sortable: true
  },
  {
    title: "登记人",
    prop: "registername",
    sortable: true
  },
  {
    title: "发布时间",
    prop: "publishtime",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})

const rwid = ref("");
const tabs = [
  {
    label: "文化手册",
    value: "01"
  },
  {
    label: "视频",
    value: "02"
  },
];
const activeTab = ref("01");
function onSearch(obj) {
  listQuery.manualname = obj.manualname
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData();
}

onMounted(() => {
  // 登录人为省级和市级且为安全部门人员才有新增、修改、删除。其余只有查看
  if (['1', '2'].includes(orgLevel.value) && ['04', '52'].includes(orgBizType.value)) {
    showAddbtn.value = true
  } else {
    showAddbtn.value = false
  }
  getListData();
});
function onTabClick(val) {
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData()
}
//排序
function SortChange(prop, order) {
  listQuery.sortField = prop
  listQuery.sortOrder = order
  getListData()
}
const close = () => {
  addplanShow.value = false;
  RowId.value = null;
  getListData();
};
function getDeptId(val) {
  listQuery.orgcode = val.id
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData()

}
//获取列表数据
function getListData() {
  listQuery.ssdwid = getItem("deptId").ssdwid
  listQuery.category = activeTab.value
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/cultureManual/getPageList").then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
//增加
const addInfo = () => {
  tableloading.value = false;
  title.value = activeTab.value == '01' ? "文化手册新增" : '文化手册视频新增';
  RowId.value = null;
  addplanShow.value = true;
  saveBtnShow.value = true;
};

//修改
const editInfo = (row) => {
  title.value = activeTab.value == '01' ? "文化手册编辑" : '文化手册视频编辑';
  RowId.value = row.id;
  addplanShow.value = true;
  saveBtnShow.value = true;
};
//查看
const seeInfo = (row) => {
  title.value = activeTab.value == '01' ? "文化手册详情" : '文化手册视频详情';
  RowId.value = row.id;
  addplanShow.value = true;
  saveBtnShow.value = false;
};
//删除
const handledelete = (row) => {
  postApi({}, `/mosty-jcgl/cultureManual/del/${row.id}`).then(
    (res) => {
      ElMessage.success("删除成功");
      getListData();
    }
  );
};

const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};

</script>

<style lang="scss" scoped>
.eltab4 {
  height: calc(100vh - 397px)
}


.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.topper {
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 13px;
  position: relative;

  &::before {
    content: "";
    top: 1px;
    left: 1px;
    width: 0;
    height: 0;
    border-top: 9px solid #006e4a;
    border-right: 9px solid transparent;
    z-index: 9;
    position: absolute;
  }

  .base {
    font-weight: bold;
    margin-right: 20px;
    display: inline-block;

    .el-icon {
      color: #777;
    }
  }
}

.bottom {
  height: 48px;
  padding: 8px 63px 0 13px;
  position: relative;
  overflow: hidden;

}

::v-deep .el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      background: var(--el-table-cell-bmx-backgroundcolor) !important;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      line-height: 38px;
      margin: 0 1px;

      &.is-active {
        background: var(--el-color-primary) !important;
        color: #fff;
        border-top: 2px solid var(--el-color-primary) !important;
        border-bottom: 2px solid var(--el-color-primary) !important;
      }
    }
  }
}
</style>