<template>
  <div>
    <el-dialog :title="titleTxt + '-' + dialogTitle" width="1200px" v-model="modelValue" :before-close="closed">

      <div v-if="!isHideExportBtn" class="aqy-header">
        <!-- <div>{{ titleTxt }}安全员</div> -->
        <el-button type="primary" v-loading="props.exportLoading" @click="exportClick">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>导出</span>
        </el-button>
      </div>
      <!-- 组织机构信息 -->
      <div class="flex just-between treeBox2 ww100 mt10">
        <div class="tabBox" style="margin-top: 0px;height: 100%;">
          <el-table stripe ref="multipleUserRef" v-loading="tableloading" :data="tableData" border :row-key="keyid"
            v-model="currentRow" :height="`calc(84vh - 190px - ${isHideExportBtn ? 0 : 30}px)`"
            style="border:1px solid red;">
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column v-for="item in colArr" :prop="item.prop" align="center"
              :label="item.title"></el-table-column>

          </el-table>
        </div>


      </div>
      <template #footer>
        <div class="flex just-end">

          <el-button @click="closed" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>

        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, watch, ref, defineEmits, nextTick, onMounted, computed } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { anQuanYuanSheet } from "@/views/dutyBook/jgryandzz/commponents/comjs/gljgTool.js"
import { getValByDic } from "@/utils/tools.js"
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { get } from "lodash";

// 该组件
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  orgcode: {
    type: String,
    defalut: ''
  },
  /**导出按钮loading */
  exportLoading: {
    type: Boolean,
    defalut: false
  },
  dict: {
    type: Object,
    default: {
      D_BZ_PYYYLX: [],
      D_BZ_RCLX: [],
      D_BZ_AQRYWHCD: [],
      D_BZ_XB: [],
      D_BZ_AQRYZZMM: [],
      D_BZ_AQRYSCLY: []
    }
  },
  /** 隐藏导出按钮 */
  isHideExportBtn: {
    type: Boolean,
    default: false
  }
})

/** 弹框标题 */
const dialogTitle = ref('安全员列表');

const currentRow = ref();
/** 弹框展示状态 ，外面用vif控制，这里设置为true */
const modelValue = ref(true);
/** table表格数据 */
const tableData = ref([]);
/** table表格loading */
const tableloading = ref([]);
/** 列数据 */
const colArr = ref(anQuanYuanSheet[0].column);

const emits = defineEmits(["close", "export"]);
const closed = () => {
  emits("close")
};
const keyid = (row) => {
  return row.id;
};
const exportClick = () => {
  emits("export", props.type)
}
/** 标题 */
const titleTxt = computed(() => {
  const obj = {
    'all': '专职/兼职',
    '0': '专职',
    '1': '兼职',
  }
  return obj[props.type] || ''
})
/**获取安全员表格数据 */
const getListData = async () => {
  let aqrylxType = props.type == 'all' ? '' : props.type
  tableloading.value = true
  return getApi({ orgcode: props.orgcode, aqrylx: aqrylxType }, '/mosty-jcgl/aqy/exportExcel')
    .then((res) => {
      tableloading.value = false
      if (res) {
        let resArr = Array.isArray(res) ? res : []
        if (!res.length) return ElMessage.console.warn("无数据");
        for (let index = 0; index < resArr.length; index++) {
          const item = resArr[index];
          item.index = index + 1
          item["highestFullTimeEducation"] = getValByDic(item["highestFullTimeEducation"], props.dict.D_BZ_AQRYWHCD)
          item["xb"] = getValByDic(item["xb"], props.dict.D_BZ_XB)
          item["politicalStatus"] = getValByDic(item["politicalStatus"], props.dict.D_BZ_AQRYZZMM)
          item["expertise"] = getValByDic(item["expertise"], props.dict.D_BZ_AQRYSCLY)
        }
        tableData.value = resArr
      }
    }).catch(() => {
      tableloading.value = false
    })
}

onMounted(() => {
  getListData()
})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

:v-deep .el-tree-node {
  .is-leaf+el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
}

::v-deep .el-overlay-dialog {
  overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
  display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
  display: none;
}

.aqy-header {
  display: flex;
  justify-content: end;
}

.el-form {
  margin-top: 10px;
  display: flex;
  //   flex-wrap: wrap;
  justify-content: space-between;
}



.listbox {
  border: 1px solid var(--el-color-primary);
  width: 45%;
  overflow-y: scroll;

  ul>li {
    padding: 4px 10px;
    box-sizing: border-box;
  }

  .activ {
    background: var(--el-color-primary);
    color: #fff
  }
}

.bot_font {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #ffff;
  margin-top: 10px;
}

.fenye {
  margin-top: 10px;
}

// ::v-deep .el-dialog__body {
//   overflow: auto !important;
//   height: calc(100% - 100px) !important;
//   border: 1px solid red;
// }

.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>
