<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"
      >
        <template v-for="(v, i) in dataInfo">
          <el-descriptions-item
            v-if="
              (v.prop == 'photoautograph' || v.prop == 'picture') && v.content
            "
            :key="i"
            :label="v.title"
          >
            <el-image
              style="width: 50px"
              :src="v.content"
              :preview-src-list="[v.content]"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item v-else :key="i" :label="v.title">
            {{ v.content }}
          </el-descriptions-item>
        </template>
      </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: "peopleIdcard",
          content: "",
        },
        {
          title: "姓名",
          prop: "peopleName",
          content: "",
        },
        {
          title: "性别",
          prop: "peopleSex",
          content: "",
        },
        {
          title: "手机号",
          prop: "peoplePhone",
          content: "",
        },
        {
          title: "评价选项",
          prop: "pjOption",
          content: "",
        },
        {
          title: "评价标签",
          prop: "contentTag",
          content: "",
        },
        {
          title: "评价人图片地址",
          prop: "picUrl",
          content: "",
        },
        {
          title: "部门",
          prop: "sectionName",
          content: "",
        },
        {
          title: "大厅名称",
          prop: "hallName",
          content: "",
        },
        {
          title: "评价来源",
          prop: "pjSource",
          content: "",
        },
        {
          title: "手输意见",
          prop: "opinion",
          content: "",
        },
        {
          title: "窗口名称",
          prop: "windowName",
          content: "",
        },
        {
          title: "窗口编号",
          prop: "windowFromnum",
          content: "",
        },
        {
          title: "排队编号",
          prop: "flounum",
          content: "",
        },
        {
          title: "窗口评价",
          prop: "pjxt",
          content: "",
        },
        {
          title: "工作人员姓名",
          prop: "workmanName",
          content: "",
        },
        {
          title: "工作人员工号",
          prop: "workmanNumber",
          content: "",
        },
        {
          title: "评价器MAC地址",
          prop: "devicenum",
          content: "",
        },
        {
          title: "评价状态",
          prop: "evaluatestatus",
          content: "",
        },
        {
          title: "截图还是评价",
          prop: "evaluatetype",
          content: "",
        },
        {
          title: "截图地址",
          prop: "photobefor",
          content: "",
        },
        {
          title: "签字图片",
          prop: "photoautograph",
          content: "",
        },
        {
          title: "抓拍评价人照片",
          prop: "picture",
          content: "",
        },
        {
          title: "音视频地址",
          prop: "process",
          content: "",
        },
        {
          title: "评价标记",
          prop: "eyevaluate",
          content: "",
        },
        {
          title: "评价指向",
          prop: "pjType",
          content: "",
        },
        {
          title: "评价时间",
          prop: "pjTime",
          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: 120px !important;
}
</style>
