<template>
  <el-dialog v-model="visible" title="查看">
    <el-descriptions border :column="2">
      <el-descriptions-item label="名称">
        {{ info.NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="自定义周期">
        {{ info.ISCUSTOM === "0" ? "否" : "是" }}
      </el-descriptions-item>
      <template v-for="(item, index) in periodList" :key="index">
        <el-descriptions-item label="上班天数">
          {{ item.ONDAY }}
        </el-descriptions-item>
        <el-descriptions-item label="休班天数">
          {{ item.OFFDAY }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  info: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  periodList: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>

<style scoped lang="scss"></style>
