<template>
  <!-- 表单弹出框 -->
  <div>
    <dialog-edit ref="dialogEdit" :visible.sync="dialogVisible" :form="queryParas" :autoSave="autoSave" :formRules="formRules" :saveLabel="isExport ? $t('feedBackMain.exportDownLoad'): saveLabel" :editModel="editModel" :api="xhr"
      :appendToBody="appendToBody" :title="isExport ? $t('feedBackMain.exportResult'): headerTitle" @onSaved="handleSubmit" v-bind="attr">
        <!-- 表单 -->
        <dym-form v-if="componentList.length>0" :formValue.sync="queryParas" :componentList="componentList" @selectChanged="selectRowChange"></dym-form>
        <!-- 导出结果 -->
        <div v-if="isExport" class="export-box">
          <div class="box-column-margin-bottom">{{$t('feedBackMain.newResult')}}：{{form[exportAttrs.total] || 0}}</div>
          <div class="box-column-margin-bottom">{{$t('feedBackMain.ignoreResult')}}：{{form[exportAttrs.ignore] || 0}}</div>
          <div class="box-column-margin-bottom">{{$t('feedBackMain.errorResult')}}：{{form[exportAttrs.fail] || 0}}</div>
          <div class="box-column-margin-bottom">{{$t('feedBackMain.successResult')}}：{{form[exportAttrs.success] || 0}}</div>
        </div>
        <slot></slot>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import {
  DialogEdit,
  dymForm
} from 'newepoch-components'
import fileApi from '@/api/fileApi.js'
import {
  downFile
} from '@/utils/devUtils'
export default {
  extends: new BaseEdit(),
  name: 'dialogForm',
  components: {
    DialogEdit,
    dymForm
  },
  props: {
    attr: {
      type: [Object],
      default () {
        return null
      }
    },
    // 是否自动保存
    autoSave: {
      type: [Boolean],
      default: false
    },
    // 是否导出
    isExport: {
      type: [Boolean],
      default: false
    },
    // // 导出结果
    // exportResult: {
    //   type: [Object],
    //   default () {
    //     return null
    //   }
    // },
    // 导出结果键名
    exportAttrs: {
      type: [Object],
      default () {
        return {
          total: 'total', // 总数
          fail: 'fail', // 失败数
          success: 'success', // 成功数
          file: 'fileId', // 文件Id
          ignore: 'ignore' // 文件Id
        }
      }
    },
    // 表单组件
    componentList: {
      type: [Array],
      default () {
        return []
      }
    },
    // 表单校验规则
    rules: {
      type: [Array],
      default () {
        return []
      }
    },
    // 保存按钮
    saveLabel: {
      type: [String],
      default () {
        return '保存'
      }
    },
    // 标题
    headerTitle: {
      type: [String],
      default () {
        return ''
      }
    },
    xhr: {
      type: [Object],
      required: false
    }
  },
  data () {
    return {
      appendToBody: true,
      toolMenuFlag: false,
      queryParas: {},
      selectRows: [], // 选中项
      forms: {}
    }
  },
  methods: {
    // 选中行
    selectRowChange (selectRows) {
      this.$emit('selectRowChange', selectRows)
    },
    // 提交回调
    handleSubmit (e) {
      if (this.isExport) {
        fileApi.file.download({
          keyId: this.form[this.exportAttrs.file]
        }).then(ress => {
          downFile(ress)
        })
      }
      // 提交表单
      this.$emit('onSaved', e)
    }
  },
  watch: {
    visible (val) {
      if (val) {
        let $this = this
        $this.clearParam()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/assetoutfeedback/common.scss';
</style>
