<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 dataInfo"
          :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,
    },
    info: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      detailsList: [
        {
          title: "预约编号",
          prop: "ordernumber",
          content: "",
        },
        {
          title: "叫号状态",
          prop: "style",
          content: "",
        },
        {
          title: "业务名称",
          prop: "business",
          content: "",
        },
        {
          title: "窗口名称",
          prop: "windowName",
          content: "",
        },
        {
          title: "窗口编号",
          prop: "windowFromnum",
          content: "",
        },
        {
          title: "流水编号,当天的第xxx号",
          prop: "flownum",
          content: "",
        },
        {
          title: "呼叫转移号",
          prop: "formernum",
          content: "",
        },
        {
          title: "姓名",
          prop: "peopleName",
          content: "",
        },
        {
          title: "身份证号",
          prop: "peopleIdcard",
          content: "",
        },
        {
          title: "性别",
          prop: "peopleSex",
          content: "",
        },
        {
          title: "手机号",
          prop: "peoplePhone",
          content: "",
        },
        {
          title: "工作人员姓名",
          prop: "workmanName",
          content: "",
        },
        {
          title: "工作人员工号",
          prop: "workmanNumber",
          content: "",
        },
        {
          title: "取号时间",
          prop: "taketime",
          content: "",
        },
        {
          title: "结束时间",
          prop: "endtime",
          content: "",
        },
        {
          title: "等待时间",
          prop: "waitTime",
          content: "",
        },
        {
          title: "办理时间",
          prop: "handleTime",
          content: "",
        },
        {
          title: "取号设备类型",
          prop: "deviceType",
          content: "",
        },
        {
          title: "取号设备名称",
          prop: "deviceName",
          content: "",
        },
        {
          title: "呼叫设备",
          prop: "callName",
          content: "",
        },
        {
          title: "事项名称",
          prop: "matterName",
          content: "",
        },
        {
          title: "排号队列ID，唯一",
          prop: "queueid",
          content: "",
        },
        {
          title: "大厅名称",
          prop: "hallName",
          content: "测试",
        },
        {
          title: "站点ID",
          prop: "siteId",
          content: "",
        },
        {
          title: "站点编码",
          prop: "siteCode",
          content: "",
        },
        {
          title: "站点名称",
          prop: "siteName",
          content: "",
        },
        {
          title: "扩展编号",
          prop: "extNum",
          content: "",
        },
      ],
    };
  },
  computed: {
    drawer: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
    dataInfo() {
      this.detailsList.forEach((v) => {
        v.content = this.info[v.prop];
      });
      return this.detailsList;
    },
  },
  methods: {},
};
</script>

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