<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogTableVisible"
      :before-close="cancel"
      width="800px"
    >
      <el-descriptions :column="2" border :content-style="CS" :label-style="LS">
        <el-descriptions-item label="实名照片">
          <el-image
            v-if="row.photo"
            style="width: 200px; height: 200px"
            fit="cover"
            :src="row.photo"
            :preview-src-list="[row.photo]"
          />
        </el-descriptions-item>
        <el-descriptions-item label="实名照片">
          <el-image
            v-if="row.xp"
            style="width: 200px; height: 200px"
            fit="cover"
            :src="row.xp"
            :preview-src-list="[row.xp]"
          />
        </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.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
            v-if="row.isSignOut"
            effect="plain"
            type="success"
          >是</el-tag>
          <el-tag
            v-if="!row.isSignOut"
            effect="plain"
            type="primary"
          >否</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="来访记录类型">
          <el-tag
            v-if="row.visitingType === 0"
            effect="plain"
            type="primary"
          >访客线上申请</el-tag>
          <el-tag
            v-if="row.visitingType === 2"
            effect="plain"
            type="success"
          >访客线下申请</el-tag>
          <el-tag
            v-if="row.visitingType === 1"
            effect="plain"
            type="danger"
          >常客线上{{
            `${
              row.invitationWay === 1
                ? "短信"
                : row.invitationWay == 0
                  ? "微信"
                  : ""
            }邀请`
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag
            v-if="row.reviewStatus === 2"
            type="success"
            effect="dark"
          >已同意</el-tag>
          <el-tag
            v-else-if="row.reviewStatus === 1"
            type="warning"
            effect="dark"
          >已拒绝</el-tag>
          <el-tag
            v-else-if="row.reviewStatus === 0"
            type="info"
            effect="dark"
          >待审核</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="人员类型">
          <el-tag
            v-if="row.personnelType === 0"
            type="success"
            effect="dark"
          >访客</el-tag>
          <el-tag
            v-else-if="row.personnelType === 1"
            type="warning"
            effect="dark"
          >同事</el-tag>
          <el-tag
            v-else-if="row.personnelType === 2"
            type="info"
            effect="dark"
          >亲属</el-tag>
        </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.machineId
        }}</el-descriptions-item>
        <el-descriptions-item label="登记地点">{{
          row.registerAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="签离时间">{{
          row.signOutTime
        }}</el-descriptions-item>
        <el-descriptions-item label="签离设备">{{
          row.signOutSn
        }}</el-descriptions-item>
        <el-descriptions-item label="签离地点">{{
          row.signOutAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          row.createTime
        }}</el-descriptions-item>
      </el-descriptions>
      <template v-if="visitToJetList.contentStatus == 1 &&visitToJetList.contents.length>0">
        <h3>自定义字段内容</h3>
        <el-descriptions
          :column="2"
          border
          :content-style="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]"
            />
            <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: '',
  filters: {
    noList(str) {
      return str || '暂无'
    }
  },
  components: {},
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    visitToJetList: {
      type: Object
    },
    row: {
      type: Object
    },
    type: {
      type: String
    }
  },
  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
    }
  },
  computed: {
    sysQueryConfigurationStatus() {
      return this.$store.getters.sysQueryConfigurationStatus === 0
    },
    sysQueryConfiguration() {
      return this.$store.getters.sysQueryConfiguration === 1
    }
  },
  watch: {
    row(n, o) {
    },
    notShowData() {
    }
  },
  created() {},
  mounted() {},
  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: '已取消查询'
          })
        })
    }
  }
}
</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>
