<template>
  <MOSTY.PageTree :pageTitle="null" :isShowLeftTree="false">

    <template #table>
      <el-divider />
      <div class="btnBox">
        <el-button @click="addInfo('add', null)" v-if='props.isEdit'><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </div>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width: 100%;">
          <template #zslx="{ row }">
            <dict-tag :options="D_TB_XGFZSLB" :value="row.zslx" :tag="false" />
          </template>
          <template #startDate="{ row }">
              <span>{{row.startDate }}</span>
            </template>
            <template #endDate="{ row }">
<span>{{ row.endDate==='2099-12-31'?"长期有效":row.endDate }}</span>
            </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" v-if='props.isEdit' @click="addInfo('exit', row.id)" size="small"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm v-if='props.isEdit' confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="comprehensiveShow" class="dialog-box">
    <Addzs :saveBtnShow="saveBtnShow" :id="editObj.id" :relatedUserId="listQuery.relatedUserId" @changeAddVi="close"
      :title="editObj.title" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, getCurrentInstance,watch } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getAuth } from "@/utils/tools.js";
import Addzs from "./Addzs.vue";
const comprehensiveShow = ref(false);
const { proxy } = getCurrentInstance();
const { D_TB_XGFZSLB } = proxy.$dict("D_TB_XGFZSLB");
const props = defineProps({
  obj: {
    type: Object,
    default: {}
  },
  isEdit: {
    type: Boolean,
    default: true
  }
})
const editObj = reactive({
  title: "",
  savebtn: true,
  seeimg: true,
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 5,
  orgcode: "",
  relatedUserId: '',
});
const tableColumn = ref([
  {
    title: "证书名称",
    prop: "name",
    sortable: true
  },
  {
    title: "证书类别",
    prop: "zslx",
    sortable: true,
    slot: true
  },
  {
    title: "发证日期始",
    prop: "startDate",
    slot: true,
    sortable: true
  },
  {
    title: "发证日期止",
    prop: "endDate",
    slot: true,
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 5,
  pageCurrent: 1,
  total: 0
})
//获取部门数据
onMounted(() => {
  // getListData()
});
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/relatedUserAtta/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 close = () => {
  comprehensiveShow.value = false;
  getListData();
};
watch(
    () => props.obj.id,
    (newVal) => {
      listQuery.relatedUserId=props.obj.id
        getListData()
    },
    { immediate: true }
);
const saveBtnShow = ref(true);
//新增
function addInfo(type, id) {
  if (type == 'add') {
    editObj.id = null;
    saveBtnShow.value = true;
    editObj.title = "证书新增";
  } else if (type == 'exit') {
    editObj.title = "证书修改";
    editObj.id = id
    saveBtnShow.value = true;
  } else {
    editObj.title = "证书详情";
    editObj.id = id
    saveBtnShow.value = false;
  }
  comprehensiveShow.value = true;
}
//删除
function delInfo(row) {
  postApi({}, "/mosty-jcgl/relatedUserAtta/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>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
