<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: "评价标签",
          content: "测试",
        },
        {
          title: "评价人图片地址",
          content: "测试",
        },
        {
          title: "部门",
          content: "测试",
        },
        {
          title: "大厅名称",
          content: "测试",
        },
        {
          title: "评价来源",
          content: "测试",
        },
        {
          title: "手输意见",
          content: "测试",
        },
        {
          title: "窗口名称",
          content: "测试",
        },
        {
          title: "窗口编号",
          content: "测试",
        },
        {
          title: "排队编号",
          content: "测试",
        },
        {
          title: "窗口评价",
          content: "测试",
        },
        {
          title: "工作人员姓名",
          content: "测试",
        },
        {
          title: "工作人员工号",
          content: "测试",
        },
        {
          title: "评价器MAC地址",
          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: "测试",
        },
      ],
    };
  },
  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>
