<template>
  <partial-view v-ref:pv>
    <div class="row">
      <label class="col-sm-4">客户名称:</label>
      <span class="col-sm-8" style="text-align:left">{{model.f_user_name}}</span>
    </div>
    <div class="row">
      <label class="col-sm-4">表编号:</label>
      <span class="col-sm-8" style="text-align:left">{{model.f_user_id}}</span>
    </div>
    <div class="row">
      <label class="col-sm-4">启用原因:</label>
      <pre style="padding:0" class="col-sm-8">{{model.f_comments}}</pre>
    </div>
    <div class="row">
      <label class = "col-sm-4">备注:</label>
      <pre style="padding:0" class = "col-sm-8">{{model.f_othereason}}</pre>
    </div>
    <div class="row">
    <div class="row">
      <label class="col-sm-4">操作人:</label>
      <span class="col-sm-8" style="text-align:left">{{model.f_operator}}</span>
    </div>
    <div class="row">
      <label class="col-sm-4">操作时间:</label>
      <span class="col-sm-8" style="text-align:left">{{data.f_operate_date}}</span>
    </div>
    <div class="row">
      <button class="button_search" style="margin-left:9%" @click="fileUpload()">附件查看</button>
    </div>

    <!-- 弹窗组件 -->
    <div v-if="showUpload" class="modal">
      <div class="modal-content">
        <span class="close" @click="showUpload = false">&times;</span>
        <upload-img :blodid="data.f_userinfo_id"  :businessid="data.id" isremark="true"  fusetype="表具启用"></upload-img>
      </div>
    </div>
  </partial-view>
</template>

<script>
export default {
  title: '表具启用详情',
  props: ['data'],
  data () {
    return {
      model: {},
      showUpload: false
    }
  },
  mounted () {
    console.log('组件已挂载')
    console.log('初始 model:', this.model)
  },
  ready () {
    console.log('this.data', this.data)
    let sql = 'getEnable'
    let condition = {
      id: this.data.id,
      f_userinfo_id: this.data.f_userinfo_id
    }
    this.$info(`加载数据, sql:${sql}`)
    this.$refs.pv.load('rs/logic/getOneData', {data: {sql: sql, params: condition}}).then((a) => {
      this.model = a.data
    }).catch((error) => {
      if (error.status) {
        this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
        return
      }
      throw error
    })
  },
  methods: {
    fileUpload () {
      this.showUpload = true
      console.log('文件上传按钮被点击')
      console.log('客户名称:', this.model.f_user_name) // 打印 model.f_user_name
      console.log('客户名称:', this.model) // 打印 model.f_user_name
    }
  }
}
</script>

<style>
/* 样式可根据需要调整 */
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
