<template>
  <MOSTY.PageTree :pageTitle="'收购人员配置列表'" :oldTree="true" :searchType="'05'" @getDeptId="getdeptId">
    <template #table>
      <section class="tabsel3">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true">
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="收购线选择" width="30%" :before-close="handleClose">
    <MOSTY.Table :table-columns="PzColumns" :tableData="PztableData" :tableloading="tableloading">
      <template #zt="{ row }">
        <dict-tag :options="D_DBZ_YHDJ" :value="row.zt" :tag="false"></dict-tag>
      </template>
      <template #actions="{ row }">
        <span class="operesee" @click="choooseFn(row)">
          <el-icon>
            <EditPen />
          </el-icon>
          选择
        </span>
      </template>
    </MOSTY.Table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
// 数据
//查询条件
const { proxy } = getCurrentInstance();

const { D_DBZ_YHDJ } = proxy.$dict("D_DBZ_YHDJ");
const dialogVisible = ref(false);
const total = ref(0);
// const username = ref(localStorage.getItem("USERNAME"))//当前登录用户
const PzColumns = ref([
  {
    title: "收购线",
    prop: "sgx"
  },
  {
    title: "地址",
    prop: "dz"
  },
  {
    title: "状态",
    prop: "zt",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);
const PztableData = ref([
  {
    sgx: "111",
    dz: "四川省宜宾市",
    zt: "A"
  }
]);
const tableColumns = reactive([
  {
    title: "人员姓名",
    prop: "postusername"
  },
  {
    title: "所属购物线",
    prop: "placename"
  },
  {
    title: "修建时间",
    prop: "builddate"
  },
  {
    title: "面积",
    prop: "area"
  }
]);
const tableData = ref([]);
const tableloading = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  orgCode: "",
  year: new Date().getFullYear()
});

// 选择
const choooseFn = (row) => { };
//获取列表数据
function getDataList() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/deptCheck/sgx/getPageList")
    .then((res) => {
      if (res.records) {
        tableData.value = res.records;
        listQuery.total = res.total;
      }
    })
    .finally((err) => {
      tableloading.value = false;
    });
}

const getdeptId = (val) => {
  listQuery.orgCode = val.id;
  listQuery.pageCurrent = 1;
  getDataList();
};
onMounted(() => {
  getDataList();
});
function handleClose() {
  dialogVisible.value = false;
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.tabsel3 {
  height: calc(100vh - 240px);
}
</style>
