<template>
  <div>
    <MOSTY.PageTree :pageTitle="null" :searchType="'03'" @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">
          <!-- activeTab -->
          <el-button type="primary" @click="addgzzd">
            <!-- v-if="isShowAddBtn()" -->
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
          <el-button type="primary" @click="onloadExcel" v-loading="exportLoading">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <section class="eltab9">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" actionsW="250" @SortChange="SortChange" style="width: 100%;">
            <template #sign="{ row }">
              <p style=" width: 12px; height: 12px;border-radius: 50%;margin: 0 auto"
                 :style="{'background-color': row?.sign ? '#33CC00' : '#FC5F76'}"
              ></p>
            </template>
            <template #cancelFlag="{ row }">
              <!-- 默认不作废 -->
              <span :class="row.cancelFlag == 1 ? 'cancel-flag-red' : 'cancel-flag-green'">{{ row.cancelFlag == 1 ? '是'
                : '否' }}</span>
            </template>
            <template #actions="{ row }">
              <span style="margin-left:0;" class="operedit" @click="xglist(row)"><el-icon>
                  <!-- v-if="isAuth(row.orgcode)" -->
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="dellist(row)">
                <template #reference>
                  <span span class="operdel" size="small">
                    <!-- v-if="isAuth(row.orgcode)" -->
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="seeInfo(row)"><el-icon>
                  <Compass />
                </el-icon>查看
              </span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red"
                :title="`确定${row.cancelFlag == '1' ? '生效' : '作废'}此规章制度?`"
                @confirm="cancelClick(row, row.cancelFlag == '1' ? '生效' : '作废')">
                <template #reference>
                  <span class="operedown" size="small">
                    {{ row.cancelFlag == '1' ? '生效' : '作废' }}</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">
      <regulStoreinfo @close="closefram" :saveBtnShow="saveBtnShow" :title="title" :id="rowId" :gzzdType="activeTab" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, computed, getCurrentInstance } from "vue";
import regulStoreinfo from "./commponents/regulStoreinfo.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { getItem } from "@/utils/storage"
import { filterqx } from "@/utils/auth.js"
import { arrayFiltering } from "@/utils/tools"


const { proxy } = getCurrentInstance()
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const addplanShow = ref(false);
const tableloading = ref(false);
const saveBtnShow = ref(true);
const rowId = ref(null);
const title = ref(null);
const tableData = ref([]);
const exportLoading = ref(false)
const activeTab = ref("00");
const isLead = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  type: "1", //规章制度
  gzzdType: '00',
});
const tabs = [
  {
    label: "国家",
    value: "00"
  },
  {
    label: "省局",
    value: "10"
  },
  {
    label: "市局",
    value: "20"
  },
  {
    label: "县局",
    value: "30"
  },
];
let sign = ['filename', 'shortid', 'quotefile', 'depid', 'implementtime', 'revisetime', ]
// 省级安全
const isProvinces = computed(() => {
  return filterqx("isSgs") == "1"
})
// 是否是市账号
const isCity = computed(() => {
  return filterqx("isgs") == "1"
})
//县级账号
const isTown = computed(() => {
  return filterqx("isgs") != "1" && filterqx("isSgs") != "1"
})
// 安全科
const isShowAddBtn = () => {
  return (
    (isLead.value || filterqx("isaqbm") == "1") &&
    (isProvinces.value ?
      ["00", "10"].includes(activeTab.value) : isCity.value ?
        activeTab.value == "20" : isTown.value ? activeTab.value == "30" :
          false)
  )
}
const isLeader = () => {
  getApi({}, "/mosty-jcgl/securitychild/isAqyOrLeader").then(_res => {
    isLead.value = _res
  })
}
//安全科并且是当前登录账号
const isAuth = (_id) => {
  return filterqx("isaqbm") == "1" && getItem("deptId").ssdwid == _id
}
const searchArr = reactive([
  {
    showType: "input",
    prop: "filename",
    label: "文件名称",
    width: '250px',
    placeholder: '请输入标准名称'
  },
  {
    showType: "select",
    prop: "cancelFlag",
    label: "是否作废",
    width: '250px',
    placeholder: '请选择是否作废',
    options: D_BZ_SF
  },
]);
const tableColumn = ref([
  {
    title: "标记",
    prop: "sign",
    sortable: false,
    slot: true
  },
  {
    title: "文件名称",
    prop: "filename",
    sortable: true
  },
  {
    title: "文件编号",
    prop: "shortid",
    sortable: true
  },
  {
    title: "引用文件",
    prop: "quotefile",
    sortable: true
  },
  {
    title: "归口部门",
    prop: "depname",
    sortable: true
  },
  {
    title: "是否作废",
    prop: "cancelFlag",
    sortable: true,
    slot: true,
  },
  {
    title: "实施时间",
    prop: "implementtime",
    sortable: true
  },
  {
    title: "修订时间",
    prop: "revisetime",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
function onTabClick(val) {
  listQuery.pageCurrent = 1
  listQuery.gzzdType = val.props.name
  pageConfiger.pageCurrent = 1
  getDataList()
}
// 初始化
onMounted(() => {
  isLeader()
});
// 方法
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.orgname = val.orgname
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getDataList();
};
//搜索
function onSearch(obj) {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.filename = obj.filename;
  listQuery.cancelFlag = obj.cancelFlag;
  getDataList();
}
function getDataList() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/gzzdlibrary/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      // tableData.value = res.records;
      tableData.value = arrayFiltering(res.records, sign);
      console.log('列表数据')
      console.log(tableData.value)
      pageConfiger.total = res.total;
    }
  }).catch(() => {
    tableData.value = [];
    tableloading.value = false;
  }).finally(() => {
    tableloading.value = false;
  });
}
const addgzzd = () => {
  tableloading.value = false;
  title.value = "规章制度新增";
  saveBtnShow.value = true;
  addplanShow.value = true;
};

//修改
const xglist = (row) => {
  addplanShow.value = true;
  saveBtnShow.value = true;
  title.value = "规章制度修改";
  rowId.value = row.id;
};
//详情
function seeInfo(row) {
  addplanShow.value = true;
  saveBtnShow.value = false;
  title.value = "规章制度查看";
  rowId.value = row.id;
}
//删除
function dellist(row) {
  postApi({}, `/mosty-jcgl/gzzdlibrary/del/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
  });
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getDataList();
}
/** 作废,取消作废 */
function cancelClick(row, txt) {
  const cancelFlag = row.cancelFlag == '1' ? '2' : '1';//是否作废 1 是 2 否
  postApi({ id: row.id, cancelFlag }, `/mosty-jcgl/gzzdlibrary/cancelGzzdInfo`).then((res) => {
    ElMessage.success(txt + "成功");
  });
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getDataList();
}
//关闭弹窗
function closefram() {
  rowId.value = null;
  addplanShow.value = false;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getDataList();
}

//导出Excel
function onloadExcel() {
  exportLoading.value = true
  let title = {
    filename: "文件名称",
    shortid: "文件编号",
    quotefile: "引用文件",
    depname: "归口部门",
    implementtime: "实施时间",
    revisetime: "修订时间",
    filedescribe: "文件描述",
    revise: "制定修订情况"
  };
  getApi(listQuery, "/mosty-jcgl/gzzdlibrary/exportData").then((res) => {
    if (res) {
      let data = res;
      if (data) {
        let tablename = `${listQuery.orgname}规章制度库.xlsx`;
        exportXlsx(title, data, `${listQuery.orgname}规章制度库`, tablename);
        exportLoading.value = false
      }
      exportLoading.value = false
    }
  }).finally(() => {
    exportLoading.value = false
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

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

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;
  }
}

.cancel-flag-red {
  color: red;
}

.cancel-flag-green {
  color: green;
}

::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>
