<template>
  <div class="usermanage">
    <div class="right">
      <div class="head">
        <div class="title">物流中心车管员列表</div>
      </div>
      <el-divider />
      <section class="button">
        <el-button type="primary" @click="back">
          <span>返回</span>
        </el-button>
      </section>
      <section class="eltab4">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template #car3typedm="{ row }">
            <dict-tag v-if="row.car3typedm" :options="D_TB_CLSJLX" :value="row.car3typedm" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
          </template>
        </MOSTY.Table>

      </section>

    </div>
  </div>
  <ToDetails v-if="shownewwb" :shownewwb="shownewwb" :saveBtnShow='saveBtnShow' :type="'wl'" :wbobjtitle="wbobjtitle"
    :obj="fromData" @changeclose='closeaddwb' />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import ToDetails from "../ToDetails/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { reactive, ref, watch, watchEffect, onMounted } from "vue";
const emit = defineEmits("changePage");
const fromData = ref({})
const shownewwb = ref(false)
const saveBtnShow = ref(false)
const tableloading = ref(false)
const wbobjtitle = ref('')
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const data = reactive({
  tableData: [],
  tableColumn: [
    {
      title: "部门",
      prop: "orgname"
    },
    {
      title: "部门车管员",
      prop: "cgyname"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],


});
onMounted(() => {
  if (props.editObj.orgid) {
    getTableData(props.editObj.orgid);
  }
});
function getTableData(orgcode) {
  tableloading.value = true;
  getApi({ orgcode }, `/mosty-jcgl/sprole/querySproleWlzx`).then((res) => {
    if (res) {
      data.tableData = res;
      tableloading.value = false;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  });

}

const editInfo = (row) => {
  shownewwb.value = true
  saveBtnShow.value = true
  wbobjtitle.value = '车管员修改'
  fromData.value = row
  fromData.value.fgldname = row.fgname;
  fromData.value.orgcode = props.editObj.orgid;
  fromData.value.fgldid = row.fgid;
  fromData.value.principalheadname = row.fzrname;
  fromData.value.principalheadid = row.fzrid;
};
function closeaddwb() {
  shownewwb.value = false
  saveBtnShow.value = false
  wbobjtitle.value = ''
}
function back() {
  emit("changePage", "Main");
}
</script>

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

.usermanage {
  background-color: #fff;
  display: flex;

  .left {
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);
    // width: 300px;
    padding: 0 10px;
    box-sizing: border-box;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    height: calc(100%);
    width: calc(100%);
    padding: 0 10px;
    box-sizing: border-box;

    .head {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}
</style>