<template>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :title="$t('expressDataList.dialogHead')"
                 width="800px" :api="api" :form="form" :footerVisible="false" :appendToBody="true">
      <div>
          <search-form :formValue.sync="queryParas"
                       searchPerms="search"
                       @handleFilter="handleFilter"
                       @clearParam="clearParam"
                       slot="query"
                       resetPerms="reset"
                       :componentList="componentList"></search-form>
            <data-table :api="api" :deleteApi="api"
                        :handleFlag.sync="handleFlag"
                        :queryParas="queryParas"
                        :sourceData.sync="sourceData"
                        :loadCount.sync="loadCount"
                        loadPage="getSurplus"
                        :columns="columns"
                        :showPage ="false"
                        operateBtnLayout="">
                <el-table-column align="center" :label="$t('common.operate')" width="160px">
                  <template slot-scope="scope">
                        <auth-button class="iconCircle" size="small" icon="iconfont iconview"
                                     :title="$t('common.preview')" @click="handleClick(scope.row)">
                        </auth-button>
                        <auth-button class="iconCircle" size="small" icon="iconfont iconxiazai"
                                     :title="$t('common.downLoad')" @click="handleClick(scope.row)">
                        </auth-button>
                  </template>
                </el-table-column>
              <template slot="headButton">
              </template>
            </data-table>
      </div>
      <div align="center">
        <auth-button class="upButton" type= "primary" size="" label="关 闭" @click="dialogVisible = false"></auth-button>
      </div>
    </dialog-edit>
</template>

<script>
import { searchForm, DataTable, authButton, DialogEdit } from 'newepoch-components'
import expressDataApi from '@/api/expressDataApi'
import BasePage from '@/pages/baseEditPage'

export default {
  extends: new BasePage(),
  components: {
    searchForm,
    DialogEdit,
    DataTable,
    authButton
  },
  data () {
    return {
      loadCount: 0,
      handleFlag: true,
      queryParas: {
        fileName: ''
      },
      componentList: [
        {
          // 文件名称
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.fileName,
          disabled: false,
          value: 'fileName',
          prop: 'fileName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '101px',
          clearable: true,
          componentName: 'el-input'
        }
      ],
      columns: [
        {
          // 文件名称
          prop: 'fileName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.fileName
        }
      ],
      sourceData: [{}]
    }
  },
  computed: {
    api () {
      return expressDataApi.expressDataFileApi
    }
  },
  mounted () {
    this.loadCount = this.loadCount + 1
  }
}
</script>
<style scoped>
  .upButton {
    margin-top: 30px;
  }
</style>
