<template>
  <a-card :bordered="false">
    <x-form-table
      title="过户查询"
      :queryParamsName="queryParamsName"
      :fixedQueryForm="fixedQueryForm"
      service-name="af-revenue"
      :fixedAddForm="fixedAddForm"
      @action="action"
      @getimg="getimg"
      ref="xFormTable">
    </x-form-table>
    <a-drawer
      title="详情信息"
      placement="right"
      :destroy-on-close="true"
      width="85vw"
      :closable="false"
      :visible="detailVisible"
      @close="onClose">
      <span>
        详情表单内容
      </span>
    </a-drawer>
    <a-modal :zIndex="9999" :visible="showFilesModel" :footer="null" @cancel="handleCancel">
      <div v-if="transferImages.length > 0">
        <span
          v-for="img in transferImages"
          :key="img.id"
          class="picture-card"
          style="width: 150px; height: 150px ">
          <img
            :src="img"
            width="100%"
            :alt="img"
          />
          <span class="picture-action">
            <a-icon type="eye" class="picture-preview-icon" @click="preview(img)"/>
          </span>
        </span>
      </div>
      <div v-if="transferImages.length === 0">
        <a-empty/>
      </div>
    </a-modal>
    <a-modal
      :visible="previewVisible"
      :dialogStyle="{maxWidth: '1200px'}"
      :footer="null"
      :z-index="10000"
      width="80%"
      @cancel="previewHandleCancel">
      <img :src="previewImageSrc" style="width: 100%;" />
    </a-modal>
  </a-card>
</template>

<script>
import { mapState } from 'vuex'
import { post } from '@vue2-client/services/api'
import { getRealKeyData } from '@vue2-client/utils/formatter'
export default {
  name: 'TransferQuery',
  components: {
    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable.vue')
  },
  data () {
    return {
      // 查询配置名称
      queryParamsName: 'transferQueryCRUD',
      // 新增表单固定值
      fixedQueryForm: { uf_f_userfiles_id: this.currUserInfo.f_userfiles_id },
      transferImages: [],
      showFilesModel: false,
      previewVisible: false,
      previewImageSrc: '',
      // 是否显示详情抽屉
      detailVisible: false,
      // 当前记录
      record: {}
    }
  },
  props: {
    currUserInfo: {
      type: Object,
      default: () => undefined
    }
  },
  created () {
  },
  mounted () {
    console.log('==当前登录人', this.currUser)
  },
  methods: {
    previewHandleCancel () {
      this.previewVisible = false
      this.previewImageSrc = ''
    },
    preview (val) {
      console.log(val)
      this.previewImageSrc = val
      this.previewVisible = true
    },
    handleCancel () {
      this.showFilesModel = false
    },
    getimg (record) {
      console.log(record)
      record = getRealKeyData(record)
      console.log(record)
      let  condition = `f_blobid = '${record.f_userinfo_id}'  and fusetype like '%过户%' `
      if(record.id){
        condition = `f_businessid = '${record.id}'  and fusetype like '%过户%' `
      }
      const data = {
        condition: condition
      }
      post('/api/af-revenue/sql/getFiles', { data: data }, null).then(res => {
        if (res.length > 0) {
          if (this.$refs.xFormTable.realQueryConfig?.$globalProp?.tenantAlias === 'aode') {
            this.transferImages = res.map(item => 'http://192.168.11.160:31467/' + item.f_downloadpath.substring(item.f_downloadpath.lastIndexOf(':\\') + 2))
          } else {
            this.transferImages = res.map(item => item.f_downloadpath)
          }
          console.log(' this.disableImages', this.transferImages)
        } else {
          this.transferImages = []
        }
      })
      this.showFilesModel = true
    },
    action (record, id, actionType) {
      this.detailVisible = true
      console.log('触发了详情操作', record, id, actionType)
    },
    onClose () {
      this.detailVisible = false
      // 关闭详情之后重新查询表单
      this.$refs.xFormTable.refreshTable(true)
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', { isMobile: 'isMobile' })
  },
}
</script>

<style scoped>
.picture-card {
  position: relative;
  display: inline-block;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 10px;
  margin: 0 10px 10px 0;
  overflow: hidden;
}
.picture-card img {
  width: 100%;
  height: 100%;
  display: block;
}
.picture-action {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s;
}
.picture-action:hover {
  background: rgba(0, 0, 0, 0.4);
}
.picture-preview-icon {
  font-size: 22px;
  color: transparent;
  transition: color 0.3s;
}
.picture-action:hover .picture-preview-icon {
  color: #fff;
}
</style>
