<template>
  <div>
    <a-modal v-model:visible="visible" width="50%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <div class="box-text">
        <img v-for="item in formState" :key="item" class="box-img" :src="item" alt="" />
      </div>
      <div class="btn-box">
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import safetyProductionApi from '@/api/security.info/riskLedgerApi.js'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const visible = ref(false)
const titleText = ref('')
const emit = defineEmits(['isVisible'])

const formState = ref(null)
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formState.value = null
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.recognizetDetail({ id: id }).then((res) => {
    formState.value = res.videoImage.split(',')
  })
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    detailData(newValue.id)
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.title-box {
  width: 91.7%;
}

.from-input {
  width: 101.4%;
}

::v-deep.ant-modal-footer {
  display: none !important;
}

.box-text {
  width: 94%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  /* 关键属性 */
  margin-left: 6%;
  margin-bottom: 16px;
}

.box-img {
  width: 320px;
  height: 220px;
  margin: 12px;
  flex: 0 0 auto;
}

.btn-box {
  text-align: center;
}
</style>