<template>
  <div>
    <MOSTY.PageTree :pageTitle="'操作规程库'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="addgzzd">
            <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" @SortChange="SortChange" actionsW="250" 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 #level="{ row }">
              <dict-tag :options="D_BZ_LWJB" :value="row.level" :tag="false" />
            </template>
            <template #cancelFlag="{ row }">
              <!-- 默认不作废 -->
              <dict-tag :options="D_BZ_SF" :value="row.cancelFlag||'2'" :tag="false" />
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="xglist(row)"><el-icon>
                  <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">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="seeInfo(row)"><el-icon>
                  <View />
                </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" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref,getCurrentInstance } from "vue";
import regulStoreinfo from "../regulations/commponents/regulStoreinfo.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { arrayFiltering } from "@/utils/tools.js";
const {proxy} = getCurrentInstance()
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const searchArr = reactive([

  {
    showType: "input",
    prop: "filename",
    width: '250px',
    label: "文件名称",
    placeholder: '请输入文件名称查询'
  },
  {
    showType: "select",
    prop: "cancelFlag",
    label: "是否作废",
    width: '250px',
    placeholder: '请选择是否作废',
    options: D_BZ_SF
  },
]);
const bigHeight = ref(); //整个高度
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 listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  type: '2',//规章制度
});
let sign =['filename', 'shortid','quotefile', 'depid', 'implementtime', 'revisetime']
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: "filedescribe",
    sortable: true,

  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})

// 方法
const getdeptId = (val) => {
  listQuery.orgname = val.orgname
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getDataList();
}
//搜索
function onSearch(obj) {
  listQuery.filename = obj.filename
  listQuery.cancelFlag = obj.cancelFlag;
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  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);
      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;
};
/** 作废,取消作废 */
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();
}
//修改
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 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;

  }
}
</style>
