<template>
  <el-drawer
    title="详情"
    :visible.sync="drawer"
    size="60%"
    @close="drawer = false"
  >
    <div class="main h-full w-full p-[20px]">
      <el-descriptions
        :column="3"
        border
        size="medium"
        labelClassName="label-name"
      >
        <el-descriptions-item
          v-for="(v, i) in detailsList"
          :key="i"
          :label="v.title"
        >
          {{ v.content }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      detailsList: [
        {
          title: "预约编号",
          content: "测试",
        },
        {
          title: "叫号状态",
          content: "测试",
        },
        {
          title: "业务名称",
          content: "测试",
        },
        {
          title: "窗口名称",
          content: "测试",
        },
        {
          title: "窗口编号",
          content: "测试",
        },
        {
          title: "流水编号,当天的第xxx号",
          content: "测试",
        },
        {
          title: "呼叫转移号",
          content: "测试",
        },
        {
          title: "姓名",
          content: "测试",
        },
        {
          title: "身份证号",
          content: "测试",
        },
        {
          title: "性别",
          content: "测试",
        },
        {
          title: "手机号",
          content: "测试",
        },
        {
          title: "工作人员姓名",
          content: "测试",
        },
        {
          title: "工作人员工号",
          content: "测试",
        },
        {
          title: "取号时间",
          content: "测试",
        },
        {
          title: "结束时间",
          content: "测试",
        },
        {
          title: "等待时间",
          content: "测试",
        },
        {
          title: "办理时间",
          content: "测试",
        },
        {
          title: "取号设备类型",
          content: "测试",
        },
        {
          title: "取号设备名称",
          content: "测试",
        },
        {
          title: "呼叫设备",
          content: "测试",
        },
        {
          title: "事项名称",
          content: "测试",
        },
        {
          title: "排号队列ID，唯一",
          content: "测试",
        },
        {
          title: "大厅名称",
          content: "测试",
        },
        {
          title: "站点ID",
          content: "测试",
        },
        {
          title: "站点编码",
          content: "测试",
        },
        {
          title: "站点名称",
          content: "测试",
        },
        {
          title: "扩展编号",
          content: "测试",
        },
      ],
    };
  },
  computed: {
    drawer: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.label-name) {
  width: 180px !important;
}
</style>
