<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogTableVisible"
      :before-close="cancel"
      width="800px"
    >
      <el-descriptions
        :column="2"
        border
        :contentStyle="CS"
        :label-style="LS"
        v-if="row"
      >
        <el-descriptions-item label="设备编号" v-if="type === 'pass_records'">{{
          row.deviceSn
        }}</el-descriptions-item>
        <el-descriptions-item label="设备地点" v-if="type === 'pass_records'">{{
          row.deviceName
        }}</el-descriptions-item>

        <el-descriptions-item label="用户姓名">{{
          notShowData ? row.name : dialogContent.name
        }}</el-descriptions-item>

        <el-descriptions-item label="身份证号" v-if="type === 'pass_records'"
          >{{ notShowData ? row.cardid : dialogContent.cardid }}
          <el-button
            type="primary"
            size="small"
            @click="searchContent()"
            v-if="sysQueryConfiguration"
            :disabled="sysQueryConfigurationStatus"
            >查看脱敏数据</el-button
          ></el-descriptions-item
        >
        <el-descriptions-item label="身份证号" v-else>{{
          row.idNumber
        }}</el-descriptions-item>

        <el-descriptions-item label="手机号">{{
          notShowData ? row.phone : dialogContent.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="所属账号" v-if="type === 'pass_records'">{{
          row.username
        }}</el-descriptions-item>
        <el-descriptions-item label="健康码状态" v-if="type === 'pass_records'">
          <el-tag type="success" effect="dark" v-if="row.jkmStatus === '00'"
            >绿码</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            v-else-if="row.jkmStatus === '01'"
            >黄码</el-tag
          >
          <el-tag type="danger" effect="dark" v-else-if="row.jkmStatus === '10'"
            >红码</el-tag
          >
          <el-tag type="info" effect="plain" v-else>未知</el-tag>
        </el-descriptions-item>

        <el-descriptions-item
          label="省-市-区-街道"
          v-if="type != 'pass_records'"
        >
          {{ row.provinceName }}-{{ row.cityName }}-{{ row.areaName }}-{{
            row.streetName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址" v-if="type != 'pass_records'">
          {{ row.address }}
        </el-descriptions-item>
        <el-descriptions-item label="认证状态" v-if="type === 'white_list'">
          <el-tag effect="plain" type="success" v-if="row.status === 1"
            >已认证</el-tag
          >
          <el-tag effect="plain" type="info" v-else-if="row.status === 2"
            >未认证</el-tag
          >
          <el-tag effect="plain" type="info" v-else>未知</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="认证状态" v-if="type === 'pass_records'">
          <el-tag type="" effect="plain" v-if="row.rightno === 104"
            >访客</el-tag
          >
          <el-tag type="success" effect="plain" v-else-if="row.rightno === 105"
            >员工</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="现场照片">
          <el-image
            style="width: 200px; height: 200px"
            :src="row.avatar ? row.avatar : row.photo"
            :preview-src-list="[row.avatar ? row.avatar : row.photo]"
          >
          </el-image>
        </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, index) in visitToJetList.contents"
            :key="index"
            :label="item.customName"
          >
            <el-tooltip
              class="item"
              effect="dark"
              content="是否可编辑"
              placement="top-start"
            >
              <i
                class="el-icon-edit icon"
                :style="
                  item.isEditable === 1 ? { color: '#409eff' } : { color: '' }
                "
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="是否在小程序端显示"
              placement="top-start"
            >
              <i
                class="el-icon-star-on icon"
                :style="
                  item.isShow === 1 ? { color: '#409eff' } : { color: '' }
                "
              ></i>
            </el-tooltip>
            <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 ? item.customNameVal : "未填写"
            }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </template>

      <!-- 三码 -->
      <template
        v-if="visitToJetList.threeCodeList&&visitToJetList.threeCodeList.length > 0"
      >
        <h3>三码内容</h3>
        <el-descriptions
          class="marginbottom"
          :column="2"
          border
          :contentStyle="CS"
          :label-style="LS"
        >
        <!-- 健康码  -->
          <template v-if="visitToJetList.threeCodeList.indexOf('1') > -1">
            <el-descriptions-item label="健康码" v-if="visitToJetList.userVisitorListDetailHealth.jkm">
              {{ visitToJetList.userVisitorListDetailHealth.jkm | noList }}
            </el-descriptions-item>
            <el-descriptions-item
              label="健康码截图"
              v-if="visitToJetList.userVisitorListDetailHealth.jkmPhoto"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="visitToJetList.userVisitorListDetailHealth.jkmPhoto"
                :preview-src-list="[visitToJetList.userVisitorListDetailHealth.jkmPhoto]"
              >
              </el-image>
            </el-descriptions-item>
          </template>
          <!-- 核酸 -->
          <template v-if="visitToJetList.threeCodeList.indexOf('2') > -1">
            <el-descriptions-item label="核酸" v-if="visitToJetList.userVisitorListDetailHealth.hs">
              <p>【采样】{{ visitToJetList.userVisitorListDetailHealth.hsCheckTime | noList }}</p>
              <p>【报告】{{ visitToJetList.userVisitorListDetailHealth.hsResultTime | noList }}</p>
              <p>{{ visitToJetList.userVisitorListDetailHealth.hs | noList }}</p>
            </el-descriptions-item>
            <el-descriptions-item
              label="核酸截图"
              v-if="visitToJetList.userVisitorListDetailHealth.hsPhoto"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="visitToJetList.userVisitorListDetailHealth.hsPhoto"
                :preview-src-list="[visitToJetList.userVisitorListDetailHealth.hsPhoto]"
              >
              </el-image>
            </el-descriptions-item>
          </template>
          <!-- 行程码 -->
          <template v-if="visitToJetList.threeCodeList.indexOf('3') > -1">
            <el-descriptions-item label="行程信息" v-if="visitToJetList.userVisitorListDetailHealth.xc">
              {{
                visitToJetList.userVisitorListDetailHealth.xc == 1
                  ? "未过高风险地区"
                  : visitToJetList.userVisitorListDetailHealth.xc == 2
                  ? "去过高风险地区"
                  : "未知"
              }}
            </el-descriptions-item>
            <el-descriptions-item
              label="行程信息截图"
              v-if="visitToJetList.userVisitorListDetailHealth.xcPhoto"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="visitToJetList.userVisitorListDetailHealth.xcPhoto"
                :preview-src-list="[visitToJetList.userVisitorListDetailHealth.xcPhoto]"
              >
              </el-image>
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </template>
      <!-- 访客机字段 -->
      <template class="maxHeight" v-if="visitToJetList.visitorStatus==1">
        <h3>访客机字段内容</h3>
        <el-descriptions
          class="marginbottom"
          :column="2"
          border
          :contentStyle="CS"
          :label-style="LS"
        >
          <el-descriptions-item label="来访人单位">
            {{ visitToJetList.userVisitorListDetailVisitor.company | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="来访人体温">
            {{ visitToJetList.userVisitorListDetailVisitor.temperature | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="来访人车牌号码">
            {{ visitToJetList.userVisitorListDetailVisitor.carno | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="访问事由">
            {{ visitToJetList.userVisitorListDetailVisitor.reason | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="来访时间">
            {{ visitToJetList.userVisitorListDetailVisitor.time | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="设备所在单位">
            {{ visitToJetList.userVisitorListDetailVisitor.org | noList }}
          </el-descriptions-item>
          <el-descriptions-item
            label="标准比对照片"
            v-if="visitToJetList.userVisitorListDetailVisitor.sceneXp && type === 'pass_records'"
          >
            <el-image
              style="width: 200px; height: 200px"
              :src="visitToJetList.userVisitorListDetailVisitor.sceneXp"
              :preview-src-list="[visitToJetList.userVisitorListDetailVisitor.sceneXp]"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item label="身份证照片" v-if="visitToJetList.userVisitorListDetailVisitor.xp">
            <el-image
              style="width: 200px; height: 200px"
              :src="visitToJetList.userVisitorListDetailVisitor.xp"
              :preview-src-list="[visitToJetList.userVisitorListDetailVisitor.xp]"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item label="受访人单位">
            {{ visitToJetList.userVisitorListDetailVisitor.visiteeCompany | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="受访人部门">
            {{ visitToJetList.userVisitorListDetailVisitor.visiteeBm | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="受访人房间号">
            {{ visitToJetList.userVisitorListDetailVisitor.visiteeRoom | noList }}
          </el-descriptions-item>
          <el-descriptions-item label="受访人姓名"
            >{{ visitToJetList.userVisitorListDetailVisitor.visiteeXm | noList }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "",
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false,
    },
    // detailsList: {
    //   type: Array,
    // },
    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: {
    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: {
    visitToJetList(n) {
      // console.log(n);
    },
  },
  created() {},
  mounted() {},
};
</script>

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