<template>
  <div>
    <el-dialog title='代办任务详情' width="1400px" top="10%" v-model="props.modelValue" :before-close="handleClose">
      <div class="config">
        <section style="height: 40vh;">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #rwlx="{ row }">
              <dict-tag :options="D_BZ_RWLX" :value="row.rwlx" :tag="false" />
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChanges" @changeNo="handleCurrentChanges">
          </MOSTY.Pages>
        </div>

      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_BZ_RWLX } = proxy.$dict("D_BZ_RWLX");
const loading = ref(false); //新增保存按钮截流
// 数据
const tableData = ref([]);
const tableloading = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 8,
  userid: null,
  type: null
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  userid: String,
  type: String,
});
const tableColumn = ref([
  {
    title: "姓名",
    prop: "username",
    sortable: true
  },
  {
    title: "任务类别",
    prop: "rwlx",
    slot: true,
    sortable: true
  },
  {
    title: "代办详情",
    prop: "info",
    sortable: true
  },

])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      listQuery.userid = props.userid
      listQuery.type = props.type
      getDataList()
    }
  }, { deep: true, immediate: true }
);

const emits = defineEmits(["update:modelValue", "changeAddVi"]);
//ALL_查询安全投入列表
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/miniapp/getRwPage').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    } else {
      tableData.value = []
    }
  })
}
// 关闭
const handleClose = () => {
  emits("update:modelValue", false);
};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
  emits("update:modelValue", false);
};
//分页
const handleSizeChanges = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChanges = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.fenye {
  margin-top: 10px;
}
</style>