<template>
  <super-dialog
    v-model="dialogVisible"
    :title="title"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
    v-on="$listeners"
  >
    <div class="detail-box">
      <div class="detail-title">
        <el-form ref="addEditForm" :model="addEditForm" :rules="addEditRules" class="edit-add-form"
                 label-position="left"
                 label-width="80px">
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="6">
              <el-form-item class="file-form-item" label="上传" prop="drivingLicenseF">
                <img-dialog :imgId="addEditForm.drivingLicenseF" :imgType="'drivingLicenseF'"
                            @updateFile="updateFile"></img-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="time"></div>
      <div class="detail-content">

      </div>
      <div class="detail-source-time"></div>
    </div>

    <template v-slot:footer>
      <el-button :loading="saveLoading" type="primary" @click="handleSave">
        {{ $t('domestic.save') }}
      </el-button>
      <el-button
        plain
        title="关闭消息通知"
        type="primary"
        @click="dialogVisible = false"
      >关闭
      </el-button
      >
    </template>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {attachment, unloads} from '@/api/MessageReminder'
import imgDialog
  from '@/views/patrolAndRescue/infoMgmtPatrolsRescues/PatrolAndRescueVehicleMgmt/components/EditAddPage/components/imgDialog/index.vue'

export default {
  name: 'DetailDialog',
  components: {imgDialog, SuperDialog},
  props: {
    isShowDetail: {
      default: false,
      type: Boolean
    },
    rowInfo: {
      default() {
        return {}
      },
      type: Object
    },
    companyId: {
      type: String,
      default: null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.isShowDetail
      },
      set(val) {
        this.$emit('update:isShowDetail', val)
      }
    }
  },
  data() {
    return {
      saveLoading: false, // 上传loading
      title: '二维码管理',
      addEditForm: {
        drivingLicenseF: '' // 初始化二维码字段
      },
      addEditRules: {
        drivingLicenseF: [
          {required: true, message: '请上传附件', trigger: ['change', 'blur']}
        ]
      },
      fileId: ''
    }
  },
  created() {

  },
  methods: {
    // 弹层打开
    open() {
      this.aaa(this.companyId)
    },
    async aaa(id) {
      try {
        const response = await attachment(id)
        if (response.state) {
          // 如果接口返回二维码数据，更新 imgId
          // this.addEditForm.drivingLicenseF = response.value[0].fileId
          this.$nextTick(() => {
            this.addEditForm.drivingLicenseF = response.value[0].fileId
          })
          console.log(this.addEditForm, '----')
        } else {
          // 如果没有二维码数据，提示用户
          this.$message.warning('暂无二维码，需要上传二维码')
        }
      } catch (error) {
        // this.$message.error('获取二维码数据失败，请稍后重试')
      }
    },
    updateFile(id, type) {
      this.fileId = id
      this.addEditForm.drivingLicenseF = id
    },
    // 弹层关闭
    closed() {
      this.addEditForm.drivingLicenseF = ''
      this.$refs.addEditForm.clearValidate()
    },
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(`有${Object.keys(object).length}个字段未通过校验，请正确填写表单内容。`)
        } else {
          try {
            const {state} = await unloads({commonId: this.companyId, fileId: this.fileId})
            if (state) {
              this.$message.success(`保存成功`)
              this.dialogVisible = false
            }
          } finally {
            this.saveLoading = false
          }

        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }

  .time {
    color: #b4b4b4;
    font-size: 14px;
  }

  .detail-content {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    text-indent: 32px;
    margin: 10px 0 20px 0;
  }

  .detail-source-time {
    color: #fff;
    font-size: 16px;
  }
}
</style>
