<template>
  <el-dialog v-model="visible" width="70%" append-to-body draggable :close-on-click-modal = "false">
    <template #header>
      <div class="dialog-title-container">
        <span class="title-label" style="color: #fff">
          <el-icon>
            <Document />
          </el-icon>
          人员信息</span
        >
        <i class="el-icon-close" @click="close" />
      </div>
    </template>
    <div class="dialog-list-container">
      <el-table
        :data="list"
        size="small"
        border
        height="400px"
        header-row-class-name="list-header-row"
        row-class-name="list-row"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="46" align="center" />
        <el-table-column label="姓名" width="80" align="center">
          <template #default="scope">
            <div>
              {{ scope.row.employeeName }}
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
        <el-table-column label="电话号" width="130" align="center">
          <template #default="scope">
            <div>
              {{ scope.row.phone }}
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
        <el-table-column label="身份证正面" width="120" align="center">
          <template #default="scope">
            <div
              class="show-image"
              style="display: flex; justify-content: center"
            >
              <img
                class="img"
                :src="baseUrl + '/' + scope.row.idCardImage"
                alt=""
                @click="handleImageView(scope.row.idCardImage)"
              />
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
        <el-table-column label="身份证反面" width="120" align="center">
          <template #default="scope">
            <div
              class="show-image"
              style="display: flex; justify-content: center"
            >
              <img
                class="img"
                :src="baseUrl + '/' + scope.row.idCardImageBack"
                alt=""
                @click="handleImageView(scope.row.idCardImageBack)"
              />
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
        <el-table-column label="基数" width="100" align="center">
          <template #default="scope">
            <div>
              {{ rowNum(scope.row.cardinalNumber) }}
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
        <el-table-column label="医疗基数" width="100" align="center">
          <template #default="scope">
            <div>
              {{ rowNum(scope.row.medicalCardinalNumber) }}
            </div>
            <span
              style="
                color: red;
                position: absolute;
                z-index: 10;
                top: 4px;
                right: 6px;
              "
              >*</span
            >
          </template>
        </el-table-column>
      <el-table-column label="取暖费" width="100" align="center">
        <template #default="scope">
          <div>
            {{ rowNum(scope.row.heatingFee) }}
          </div>
          <span
            style="
              color: red;
              position: absolute;
              z-index: 10;
              top: 4px;
              right: 6px;
            "
            >*</span
          >
        </template>
      </el-table-column>
        <!-- <el-table-column label="签名" width="100" header-align="center" required>
                  </el-table-column> -->
        <el-table-column label="备注" header-align="center">
          <template #default="scope">
            <div>
              {{ scope.row.remark }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :url-list="currentFileList"
      @close="closeImages"
      :initial-index="showIndex"
    />
  </el-dialog>
</template>
<script setup>
import { toRef } from "vue";
import { getMembers,getMembersNoDelete } from "@/api/business/production/socialSecurityDeclare";
import { rowNum } from "@/utils/index";
const props = defineProps({
  width: {
    type: String,
    default: "800px",
  },
  multiple: {
    type: Boolean,
    default: () => false,
  },
});
const query = ref({});
const emit = defineEmits(["choice"]);
const showViewer = ref(false);
const currentFileList = ref([]);
const showIndex = ref(0);
const { width, multiple } = toRefs(props);
const data = reactive({
  visible: false,
  list: [],
  selections: [],
});
const { visible, list, selections } = toRefs(data);
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);

function open(options) {
  visible.value = true;
  query.value = options;
  getList();
}
function close() {
  visible.value = false;
}

const getList = () => {
  getMembersNoDelete(query.value)
    .then((res) => {
      list.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const handleSelectionChange = (choiceSelections) => {
  selections.value = choiceSelections;
};

function handleImageView(fileUrl) {
  window.open(`${baseUrl.value}${fileUrl}`);
  // currentFileList.value = [`${baseUrl.value}${fileUrl}`];
  // showViewer.value = true;
}

function closeImages() {
  showViewer.value = false;
}

// getList()
defineExpose({
  open,
  close,
});
</script>
<style scoped>
.img {
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep(.el-upload) {
  display: flex;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  outline: 0;
}

.required::after {
  content: "*";
  color: red;
}
</style>
  