<template>
  <div class="import-button" :class="wrapperClassObject">
    <a-button
      type="type"
      ref="importExcelButton"
      @click="importData">
      <a-icon :style="iconStyle" type="import"/>{{ this.label }}
    </a-button>
    <x-front-import-excel
      ref="importExcel"
      :title="title"
      :extraData="extraData"
      :service-name="serviceName"
      :import-type="importType"
      :env="env"
      @frontImport="fronImport"
      :query-params-name="crudQueryParamsName"
    >
    </x-front-import-excel>
  </div>
</template>

<script>

import { getConfigByName } from '@vue2-client/services/api/common'
import XFrontImportExcel from './XFrontImportExcel.vue'

export default {
  name: 'XImportExcelButton',
  props: {
    queryParamsName: {
      type: Object,
      default: null
    }
  },
  inject: ['getComponentByName'],
  components: {
    XFrontImportExcel
  },
  computed: {
    // 参考 HForm 的 wrapperClassObject 规则，支持通过组件属性动态控制样式
    wrapperClassObject () {
      const a = this.$attrs || {}
      const classes = {}
      // 多个布尔型样式开关（存在且为真则生效）
      const booleanStyleKeys = [
        'fill-container'
      ]
      booleanStyleKeys.forEach(key => {
        const val = a[key]
        const truthy = val === true || val === '' || val === 'true'
        if (truthy) classes[`x-import-button-${key}`] = true
      })
      return classes
    }
  },
  data () {
    return {
      // 图标样式
      iconStyle: {
        position: 'relative',
        top: '1px'
      },
      type: 'primary',
      label: '导入',
      title: '',
      extraData: '',
      serviceName: '',
      env: 'dev',
      crudQueryParamsName: '',
      importType: undefined,
      fronImportEvent: 'fronImport'
    }
  },
  created () {
    this.getData(this.queryParamsName)
  },
  methods: {
    // 获取配置
    async getData (queryParamsName) {
      getConfigByName(queryParamsName, 'af-his', res => {
        if (res != null) {
          this.crudQueryParamsName = res.queryParamsName
          this.env = res.env || 'dev'
          this.serviceName = res.serviceName || ''
          this.title = res.title || ''
          this.extraData = res.extraData || ''
          this.label = res.label || '导入'
          this.importType = res.importType
          this.fronImportEvent = res.fronImportEvent || 'fronImport'
          this.type = res.type || 'primary'
        }
      })
    },
    // 导入业务
    importData () {
      this.$refs.importExcel.importExcelHandleOpen()
    },
    // 导入操作
    fronImport (dataList, callback) {
      console.log('条件事件', dataList)
      console.log('条件事件', this.fronImportEvent)
      if (this.$listeners[this.fronImportEvent]) {
        // 交由父级处理
        this.$emit(this.fronImportEvent, dataList, callback)
      } else {
        this.defaultAction(this.fronImportEvent, { key: '导入' }, callback)
      }
    },
    defaultAction (clickEventName, item, callback) {
      setTimeout(() => {
        this.$message.warn(`已触发按钮 [${item.key}]，注册事件名 [${clickEventName}]，未实现事件函数`)
        callback()
      }, 200)
    },
  },
}
</script>
<style scoped lang="less">
.import-button {
  // 基础样式
  :deep(.ant-btn) {
      border-radius: 6px;
      background-color: #FFFFFF;
      //border: 1px solid #9499A0;
      //color: #313131;
      font-weight: normal;
      letter-spacing: 0em;
      width: 110px;
      font-size: 16px;
      font-family: "Source Han Sans";
      line-height: normal;
      margin-right: 25px;
      height: 32px;
      border: 1px solid #CDCDCD;
      color: #5D5C5C;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  }
}
.x-import-button-fill-container {
  :deep(.ant-btn) {
    width: 100%;
    margin-right: 0px
  }
}
</style>
