<template>
  <MOSTY.PageTree :pageTitle="'法律法规标准库'" :flfgType="true" :searchType="'01'" @getDeptId="getdeptData">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <div class="btnBox">
        <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要变动提醒?"
          @confirm="handleWarn">
          <template #reference>
            <el-button class="mr10" type="primary" v-loading="warnLoading">
              <el-icon>
                <Bell />
              </el-icon>
              <span>变动提醒</span>
            </el-button>
          </template>
        </el-popconfirm>

        <el-button class="mr10" type="primary" @click="addInfo">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="primary" @click="exports" v-loading="loading">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出台账</span>
        </el-button>
        <!-- <el-button class="mr10" type="primary" @click="downloadTemplate('01', '甘肃省烟草专卖局（公司）安全/环境适用法律法规及其他要求清单')">
          <el-icon>
            <Download />
          </el-icon>
          <span>模板下载</span>
        </el-button>
        <div class="mr10">
          <label class="btns">
            <el-icon>
              <Download />
            </el-icon>
            批量上传
            <input type="file" @click="uploadFile" @change="changeFile" ref="fileBtn" style="display: none" />
          </label>
        </div> -->
      </div>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;" :actionsW="'300'">
          <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 #lawLevel="{ row }">
            <dict-tag :options="LAW_LEVEL" :value="row.lawLevel" :tag="false" :isTree="true" />
          </template>
          <template #lawType="{ row }">
            <dict-tag :options="LAW_TYPE" :value="row.lawType" :tag="false" :isTree="true" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="handlissue(row)"><el-icon>
                <View />
              </el-icon>发布</span>
            <span class="operesee" @click="handlissueInfo(row)"><el-icon>
                <View />
              </el-icon>记录</span>
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="del(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>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 发布学习 -->
  <el-dialog v-model="addAndEditShow" title="法律法规学习任务" :show-close="false">
    <AddAndEdit v-if="addAndEditShow" style="height: 750px;" :title="title" :type="type" @close="handleClose"
      :id="detailId" />
  </el-dialog>
  <!-- 学习记录 -->
  <el-dialog v-model="addStudyShow" title="法律法规学习记录" :show-close="true">
    <lawStoreStudyinfo v-if="addStudyShow" style="height: 780px;" @close="handleStudyClose" :id="detailStudyId" />
  </el-dialog>
  <!-- 新增信息列表 -->
  <div v-if="addplanShow" class="dialog-box">
    <lawStoreinfo @close="close" :orgData="orgData" :saveBtnShow="saveBtnShow" :title="title"
      :editObj="editObj.editObj" />
  </div>
</template>

<script setup>
// 引入
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import lawStoreinfo from "./commponents/lawStoreinfo.vue";
import * as MOSTY from "@/components/MyComponents/index";
import AddAndEdit from "./commponents/AddAndEdit.vue"
import lawStoreStudyinfo from "./commponents/detailCom/lawStoreStudyinfo.vue"
import { getApi, postApi, uploadfilApi } from "@/api/tobAcco_api.js";
import { downloadTemplate, arrayFiltering } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage"
const { proxy } = getCurrentInstance();
const { LAW_LEVEL, LAW_TYPE } = proxy.$dict("LAW_LEVEL", "LAW_TYPE");
const loading = ref(false)
const fileBtn = ref()
const searchArr = reactive([
  {
    showType: "input",
    prop: "lawName",
    width: '250px',
    placeholder: '请输入法律名称'
  },
  {
    showType: "selectTree",
    prop: "lawLevel",
    width: '250px',
    options: 'LAW_LEVEL',
    placeholder: '请选择法律法规等级'
  },
  {
    showType: "selectTree",
    prop: "lawType",
    width: '250px',
    options: 'LAW_TYPE',
    placeholder: '请选择法律法规类型'
  },
]);
const tableColumn = ref([
  {
    title: "标记",
    prop: "sign",
    sortable: false,
    slot: true
  },
  {
    title: "法律法规名称",
    prop: "lawname",
    sortable: true
  },
  {
    title: "发布日期",
    prop: "promulgationdate",
    sortable: true
  },
  {
    title: "生效日期",
    prop: "implementationdate",
    sortable: true
  },
  {
    title: "发布单位",
    prop: "promulgationcompany",
    sortable: true
  },
  {
    title: "文号",
    prop: "documentNumber",
    sortable: true
  },
  {
    title: "法律法规等级",
    prop: "lawLevel",
    slot: true,
    sortable: true
  },
  {
    title: "法律法规类型",
    prop: "lawType",
    slot: true,
    sortable: true
  },
  {
    title: "录入单位",
    prop: "orgName",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})

let sign = ['lawname', 'promulgationdate', 'implementationdate', 'promulgationcompany', 'documentNumber', 'lawLevel',
  'lawType', 'bz', 'fileid']
const warnLoading = ref(false);
const addplanShow = ref(false);
// 表格数据
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
const total = ref(0);
let editObj = reactive({
  editObj: null
});
const onSearch = (obj) => {
  listQuery.lawName = obj.lawName
  listQuery.lawType = obj.lawType
  listQuery.lawLevel = obj.lawLevel
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData();
};

const exports = () => {
  loading.value = true
  let title = {
    lawname: "法律法规名称",
    promulgationcompany: "发布单位",
    promulgationdate: "发布日期",
    implementationdate: "生效日期",
    documentNumber: "文号",
    lawLevel: "法律法规等级",
    lawType: "法律法规类型",
  };
  postApi(listQuery, "/mosty-jcgl/lawRegulations/exportData").then(async (res) => {
    if (res) {
      let data = res;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].lawLevel) {
            data[i].lawLevel = proxy.$getDictVal(data[i].lawLevel, LAW_LEVEL);
          }
          if (data[i].lawType) {
            data[i].lawType = proxy.$getDictVal(data[i].lawType, LAW_TYPE);
          }
        }
        let tablename = `法律法规标准库.xlsx`;
        exportXlsx(title, data, `法律法规标准库`, tablename);
        loading.value = false
      }
      loading.value = false
    }
  }).finally(() => {
    loading.value = false
  });
};
const handleWarn = () => {
  warnLoading.value = true;
  postApi({}, "/mosty-jcgl/gzzdlibrary/message").then(() => {
    ElMessage.success("提醒成功");
  }).finally(() => {
    warnLoading.value = false;
  })
};
const orgData = ref({
  orgId: getItem("deptId").ssdwdm,
  orgName: getItem("deptId").ssdwmc,
})
//选择右侧部门
function getdeptData(val) {
  listQuery.orgId = val.id;
  listQuery.orgName = val.orgname;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData()
}
const close = () => {
  addplanShow.value = false;
  editObj.editObj = {};
  getListData();
};
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/lawRegulations/getLawRegulaList`).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;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

const title = ref("");
const saveBtnShow = ref(false);
const addInfo = () => {
  editObj.editObj = {};
  title.value = "法律法规新增";
  addplanShow.value = true;
  saveBtnShow.value = true;
};
const seeInfo = (row) => {
  let params = {
    id: row.id
  };
  getApi(params, `/mosty-jcgl/lawRegulations/getLawRegulaById`).then((res) => {
    editObj.editObj = res;
    title.value = "法律法规详情";
    addplanShow.value = true;
    saveBtnShow.value = false;
  });
};
const addAndEditShow = ref(false)
const addStudyShow = ref(false)
const detailStudyId = ref("")
const detailId = ref("")
const type = ref("")
// 发布学习
const handlissue = (row) => {
  detailId.value = row.id
  title.value = '发布学习'
  type.value = 'add'
  addAndEditShow.value = true;
}
const handlissueInfo = (row) => {
  detailStudyId.value = row.id
  addStudyShow.value = true;
}
// 关闭学习记录弹窗
const handleStudyClose = val => {
  addStudyShow.value = false
}
// 关闭发布学习弹窗
const handleClose = val => {
  addAndEditShow.value = false
}
const editInfo = (row) => {
  let params = {
    id: row.id
  };
  getApi(params, `/mosty-jcgl/lawRegulations/getLawRegulaById`).then((res) => {
    editObj.editObj = res;
    title.value = "法律法规修改";
    addplanShow.value = true;
    saveBtnShow.value = true;
  });
};
const del = (row) => {
  postApi({}, "/mosty-jcgl/lawRegulations/lawLawRegulaDel/" + row.id).then(() => {
    ElMessage.success("删除成功");
    getListData();
  });
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
onMounted(() => {
  getListData();
});
// 导入模板数据
const uploadFile = () => {
  nextTick(() => {
    fileBtn.value.click()
  })
}
// 获取文件
const changeFile = () => {
  nextTick(() => {
    let file = fileBtn.value.files[0]
    if (!file) { return; }
    let data = new FormData()
    data.append('file', file);
    uploadfilApi(data, `/mosty-jcgl/lawRegulations/batchUpload`).then(() => {
      ElMessage.success("批量上传成功");
      listQuery.pageCurrent = 1;
      getListData();
    }).finally(() => {
      fileBtn.value.value = ''
    })
  })
}
</script>

<style lang="scss" scoped>
.bigBox {
  background: #fff;
}

.title {
  line-height: 42px !important;
  // margin-left:10px;
}

.titleBox {
  padding: 10px;
  background: #fff;
}



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

.searchBox {
  width: 600px;
  display: flex;
  justify-content: space-between;
  border: 0;

  .el-input {
    width: 250px;
  }
}

.tabBox {
  background: #fff;
}
::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;
        }
      }
      }
      }
.btns {
  height: 31px;
  width: 113px;
  background-color: var(--el-color-primary);
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #666666;
}

.fenye {
  background: #fff;
}
</style>
