<template>
  <div>

    <MOSTY.PageTree :pageTitle="'责任书签订情况'" :isShowLeftTree="false">
      <template #serach>
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="CloseEvent">返回 </el-button>
        </div>
      </template>
      <template #table>
        <section class="eltab8">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">

            <template #zrslx="{ row }">
              <dict-tag :options="D_TB_ZRSLX" :value="row.zrslx" :tag="false" />
            </template>
            <template #qdfs="{ row }">
              <span v-if="row.qdfs == '1'">网签</span>
              <span v-else-if="row.qdfs == '2'">线下签</span>
              <span v-else>--</span>
            </template>
            <template #qdzt="{ row }">
              <span v-if="row.qdzt == '未制定'" style="color: red  !important" size="small">未制定</span>
              <dict-tag v-else :options="D_TB_ZRSQDZT" :value="row.qdzt" :tag="false" />
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineEmits, getCurrentInstance, reactive, defineProps, watch } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { useRouter } from 'vue-router';
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_TB_ZRSLX, D_TB_ZRSQDZT } = proxy.$dict("D_TB_ZRSLX", "D_TB_ZRSQDZT");
const router = useRouter()
const emits = defineEmits(["close"]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  orgCode: '',
  year: new Date().getFullYear()
});
const tableloading = ref(false)
const total = ref(0);
const props = defineProps({
  listQuery: {
    type: Object,
    default: {}
  },
});
const tableColumns = ref([
  {
    title: "签订人",
    prop: "qdrxm",
  },
  {
    title: "责任书名称",
    prop: "zrsmc"
  },
  {
    title: "责任书类型",
    prop: "zrslx",
    slot: true
  },
  {
    title: "发起单位",
    prop: "fqdw"
  },
  {
    title: "被签订单位/部门",
    prop: "qddw"
  },
  {
    title: "审批人",
    prop: "spr"
  },
  {
    title: "签订方式",
    prop: "qdfs",
    slot: true
  },
  {
    title: "签订状态",
    prop: "qdzt",
    slot: true
  },

])
const pageConfiger = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})
watch(
  () => props.listQuery,
  (val) => {
    listQuery.year = val.year;
    listQuery.ssbmid = val.ssbmid;
    getDataList()
  },
  {
    deep: true,
  }
)
const tableData = ref([]);

const CloseEvent = () => {
  emits("close");
};
//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/zrs/getListByDeptid').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  })
}
onMounted(() => {
  listQuery.year = props.listQuery.year;
  listQuery.ssbmid = props.listQuery.ssbmid;
  getDataList()
});
//分页
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>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>