<template>
  <up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
    <uni-section titleFontSize="20px" type="line" title="设备检定/校准信息"> </uni-section>
    <scroll-view scroll-y="true" class="content">
      <up-row class="flex-wrap">
        <up-col :span="gridCol"
          >仪器设备名称：
          <text class="value">{{ detailInfo.deviceName }}</text>
        </up-col>
        <up-col span="4"
          >别名：
          <text class="value">{{ detailInfo.alias }}</text>
        </up-col>
        <up-col span="4"
          >生产厂家：
          <text class="value">{{ detailInfo.manufacturer }}</text>
        </up-col>
        <up-col :span="gridCol"
          >规格型号：
          <text class="value">{{ detailInfo.modelNo }}</text>
        </up-col>
      </up-row>
      <up-row class="flex-wrap">
        <up-col :span="gridCol"
          >设备编号：
          <text class="value">{{ detailInfo.deviceCode }}</text>
        </up-col>
        <up-col :span="gridCol"
          >统一编号：
          <text class="value">{{ detailInfo.deviceCode }}</text>
        </up-col>
        <up-col :span="gridCol"
          >检定/校准单位：
          <text class="value">{{ detailInfo.agent }}</text>
        </up-col>
      </up-row>
      <up-row class="flex-wrap">
        <up-col :span="gridCol"
          >检定/校准日期：
          <text class="value">{{ detailInfo.checkDate }}</text>
        </up-col>
        <up-col :span="gridCol"
          >证书编号：
          <text class="value">{{ detailInfo.certificateCode }}</text>
        </up-col>
        <up-col :span="gridCol"
          >确认结果：
          <text class="value">{{ detailInfo.checkResult }}</text>
        </up-col>
      </up-row>
      <up-row>
        <up-col span="12"
          >确认情况(理由)：
          <up-parse style="background: #f3f4f6" :content="processedContent"></up-parse>
        </up-col>
      </up-row>
      <up-row>
        <up-col span="12"
          >备注：
          <text class="value">{{ detailInfo.checkRemark }}</text>
        </up-col>
      </up-row>
      <wf-comment :commentWf="commentWf" />
    </scroll-view>
  </up-popup>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { getImgBaseUrl } from '@/defaultBaseUrl'
import { useGridCol } from '@/nx/hooks/useGridCol'
const { gridCol } = useGridCol([700], [6, 4])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  checkInfo: {
    type: Object
  }
})
const visible = ref(props.show)
// 监听外部传入的show属性变化
watch(
  () => props.show,
  newVal => {
    visible.value = newVal
  }
)
let detailInfo = ref({})

const emit = defineEmits(['close', 'open'])
function handleClose() {
  emit('close')
}
// / 处理富文本内容
const processedContent = computed(() => {
  if (!detailInfo.value.checkContent) {
    return ''
  }
  return detailInfo.value.checkContent.replace(
    /<img([^>]+?)src="((?!http)[^"]*?)(file\/[^"]*)"/gi,
    (match, attributes, prefix, filePath) => {
      return `<img${attributes}src="${getImgBaseUrl()}/${filePath}"`
    }
  )
})
let commentWf = ref([])
function handleOpen() {
  detailInfo.value = props.checkInfo
  if (props.checkInfo.commentJson) {
    try {
      commentWf.value = JSON.parse(props.checkInfo.commentJson)
    } catch (error) {
      uni.showToast({
        title: '解析数据错误',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  font-size: 18px;
  height: 80vh;
  width: 90vw;
  padding: 10px;
  .u-row {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
  }

  .value {
    color: #666;
    font-size: 16px;
  }
}
:deep(.uicon-close) {
  font-size: 22px !important;
}
</style>
