<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogTableVisible"
      :before-close="cancel"
      width="800px"
    >
      <el-descriptions :column="2" border :contentStyle="CS" :label-style="LS">
        <el-descriptions-item label="实名照片">
          <el-image
            style="width: 200px; height: 200px"
            :src="row.photo"
            :preview-src-list="[row.photo]"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="	姓名">{{ row.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          row.phone
        }}</el-descriptions-item>

        <el-descriptions-item label="身份证号">{{
          row.idNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{
          row.company
        }}</el-descriptions-item>
        <el-descriptions-item label="车牌号">{{
          row.carno | noList
        }}</el-descriptions-item>
        <el-descriptions-item label="	访问事由">{{
          row.reason
        }}</el-descriptions-item>
        <el-descriptions-item label="受访人姓名">{{
          row.visiteeXm
        }}</el-descriptions-item>
        <el-descriptions-item label="受访人电话">{{
          row.visiteePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="受访人单位">{{
          row.visiteeCompany
        }}</el-descriptions-item>
        <el-descriptions-item label="来访记录类型">
          <el-tag type="success" effect="dark" v-if="row.visitingType === 0"
            >申请记录</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            v-else-if="row.visitingType === 1"
            >邀请记录</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag type="success" effect="dark" v-if="row.reviewStatus === 2"
            >已同意</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            v-else-if="row.reviewStatus === 1"
            >已拒绝</el-tag
          >
          <el-tag type="info" effect="dark" v-else-if="row.reviewStatus === 0"
            >待审核</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="人员类型">
          <el-tag type="success" effect="dark" v-if="row.personnelType === 0"
            >访客</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            v-else-if="row.personnelType === 1"
            >同事</el-tag
          >
          <el-tag type="info" effect="dark" v-else-if="row.personnelType === 2"
            >亲属</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="邀请方式 ">
          <el-tag type="success" effect="dark" v-if="row.invitationWay === 0"
            >微信</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            v-else-if="row.invitationWay === 1"
            >短信</el-tag
          >
        </el-descriptions-item>
        <!-- <el-descriptions-item label="现场照片">
          <el-image
            style="width: 200px; height: 200px"
            :src="row.avatar"
            :preview-src-list="[row.avatar]"
          >
          </el-image>
        </el-descriptions-item> -->

        <el-descriptions-item label="开始时间">{{
          row.startTime
        }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{
          row.endTime
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          row.createTime
        }}</el-descriptions-item>
      </el-descriptions>
      <template v-if="visitToJetList.contentStatus == 1"
        >
        <h3>自定义字段内容</h3>
        <el-descriptions
          :column="2"
          border
          :contentStyle="CS"
          :label-style="LS"
        >
          <el-descriptions-item
            v-for="item in visitToJetList.contents"
            :key="item.id"
            :label="item.customName"
          >
            <el-image
              v-if="item.customType == '图片'"
              style="width: 200px; height: 200px"
              :src="item.customNameVal"
              :preview-src-list="[item.customNameVal]"
            >
            </el-image>
            <span v-else>{{ item.customNameVal }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWhiteListFrom,
  getVisitorListFrom,
  getUserListFrom,
} from "@/api/user_manage.js";
import { checkRole } from "@/utils/checkRole";
import { getDetails } from "@/api/old_api_pengwenbing";

export default {
  name: "",
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false,
    },
    visitToJetList: {
      type: Object,
    },
    row: {
      type: Object,
    },
    type: {
      type: String,
    },
  },
  filters: {
    noList(str) {
      return str ? str : "暂无";
    },
  },
  components: {},
  data() {
    return {
      visitToJet_loading: false,
      CS: {
        // "text-align": "center", //文本居中
        "min-width": "250px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      LS: {
        // color: "#000",
        "text-align": "center",
        // "font-weight": "600",
        height: "40px",
        // "background-color": "rgba(255, 97, 2, 0.1)",
        "min-width": "110px",
        "word-break": "keep-all",
      },
      // 脱敏数据信息详情
      dialogContent: null,
      notShowData: true,
    };
  },
  methods: {
    checkRole,
    cancel() {
      this.$emit("dialog", false);
      this.notShowData = true;
    },
    // 查看脱敏数据
    searchContent() {
      this.$prompt("请输入查询密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          getDetails({ id: this.row.logId, password: value }).then((res) => {
            this.dialogContent = res.data;
            this.notShowData = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消查询",
          });
        });
    },
  },
  computed: {
    sysQueryConfigurationStatus() {
      return this.$store.getters.sysQueryConfigurationStatus === 0;
    },
    sysQueryConfiguration() {
      return this.$store.getters.sysQueryConfiguration === 1;
    },
  },
  watch: {
    row(n, o) {
    },
    notShowData() {
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.icon {
  margin-right: 7px;
}
.margintop {
  margin-top: 20px;
}
.el-button {
  margin-left: 10px;
}
.marginbottom {
  margin-bottom: 20px;
}
.maxHeight {
  max-height: 500px;
  overflow-y: auto;
}
.el-descriptions {
  margin-bottom: 20px;
}
h3 {
  margin-bottom: 5px;
}

</style>
