<template>
  <div class="import">
    <normal-page-index>
      <template v-slot:headerdataarea>
        <el-form
          :model="mainPageObj.queryParams"
          ref="queryForm"
          v-show="showSearch"
          :inline="true"
        >
          <el-form-item label="添加日期">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleImport">导入</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getMainPageTableListData"></right-toolbar>
        </el-row>
      </template>

      <template v-slot:maindataarea>
        <el-table v-loading="mainPageObj.loading" :data="mainPageObj.tableList" border>
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column
            label="添加日期"
            prop="writeTime"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="上传用户"
            prop="createBy"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="新增数量" prop="newNum" align="center" :show-overflow-tooltip="true" />
          <el-table-column
            label="操作"
            align="center"
            prop="url"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-zoom-in"
                @click="handleView(scope.row)"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-download"
                @click="handleDownload(scope.row)"
              >下载</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="mainPageObj.total > 0"
          :total="mainPageObj.total"
          :page.sync="mainPageObj.queryParams.pageNum"
          :limit.sync="mainPageObj.queryParams.pageSize"
          @pagination="getMainPageTableListData"
        />
      </template>
    </normal-page-index>

    <!-- 查看弹框对话框 -->
    <el-dialog
      :title="viewDialogObj.title"
      :visible.sync="viewDialogObj.open"
      width="800px"
      @close="handleCloseClick"
      append-to-body
      class="infoadd-dialog"
    >
      <el-table :data="viewDialogObj.tableList" border height="485">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="店铺名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
        <el-table-column
          label="法人/负责人"
          align="center"
          prop="legalPerson"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="联系人" align="center" prop="contact" :show-overflow-tooltip="true" />
        <el-table-column label="联系电话" align="center" prop="phone" :show-overflow-tooltip="true" />
      </el-table>

      <pagination
        v-show="viewDialogObj.total > 0"
        :total="viewDialogObj.total"
        :page.sync="viewDialogObj.queryParams.pageNum"
        :limit.sync="viewDialogObj.queryParams.pageSize"
        @pagination="getViewDialogTableList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseClick">关&nbsp;&nbsp;闭</el-button>
      </div>
    </el-dialog>

    <!-- 导入数据弹框对话框 -->
    <el-dialog
      :title="uploadObj.title"
      :visible.sync="uploadObj.open"
      width="400px"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="importupload-dialog"
    >
      <el-form ref="dialogUploadformRef" label-width="80px">
        <el-upload
          ref="dialogUploadRef"
          drag
          :limit="1"
          accept=".xlsx, .xls"
          class="upload-demo"
          :headers="uploadObj.headers"
          :action="uploadObj.url + '?updateSupport=' + uploadObj.updateSupport"
          :disabled="uploadObj.isUploading"
          :on-progress="handleUploadOnprogress"
          :on-success="handleUploadOnsuccess"
          :auto-upload="false"
          :on-change="handleUploadOnchange"
          :on-remove="handleUploadOnremove"
          :on-exceed="handleUploadOnexceed"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入一个“xls”或“xlsx”格式文件！</div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitFileForm"
          :disabled="uploadObj.isVisbleSubmitBtn"
        >确 定</el-button>
        <el-button @click="uploadObj.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  importListData,
  importImportTemplate,
  importViewData,
  importDownloadData
} from "@/api/excle/import";

export default {
  name: "import",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 日期范围
      dateRange: [],
      /**主页面对象 */
      mainPageObj: {
        // 遮罩层
        loading: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          market: ''
        },
        // 表格数据
        tableList: [],
        // 总条数
        total: 0,
      },
      /** 编辑弹框界面对象 */
      viewDialogObj: {
        open: false,
        title: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          recordId: null
        },
        tableList: [],
        total: 0
      },
      /** 数据导入对象 */
      uploadObj: {
        // 是否显示弹出层（产品导入）
        open: false,
        // 弹出层标题（产品导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        isVisbleSubmitBtn: true,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + this.getToken() },
        // 上传的地址
        url: this.baseApiUrl + "/system/UploadDocument/import",
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    initData() {
      this.getMainPageTableListData();
    },
    /** 获取主页面表格数据 */
    getMainPageTableListData() {
      this.mainPageObj.loading = true;
      importListData(this.addDateRange(this.mainPageObj.queryParams, this.dateRange)).then((response) => {
        this.mainPageObj = {
          ...this.mainPageObj,
          tableList: response.rows || [],
          total: response.total || 0,
          loading: false
        };
      });
    },
    /** 搜索按钮事件 */
    handleQuery() {
      this.mainPageObj.queryParams.pageNum = 1;
      this.getMainPageTableListData();
    },
    /** 重置按钮事件 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm('queryForm');
      this.handleQuery();
    },
    /** 查看按钮事件 */
    handleView(row) {
      this.viewDialogObj = {
        ...this.viewDialogObj,
        title: '',
        open: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          recordId: row.recordId
        },
        tableList: [],
        total: 0
      };
      this.getViewDialogTableList();
    },
    /** 获取查看弹框表格数据 */
    getViewDialogTableList() {
      importViewData({ ...this.viewDialogObj.queryParams }).then((response) => {
        this.viewDialogObj = {
          ...this.viewDialogObj,
          tableList: response.rows || [],
          total: response.total || 0,
          title: '查看',
          open: true
        };
      });
    },
    /** 查看弹框页面关闭按钮事件 */
    handleCloseClick() {
      this.viewDialogObj.open = false;
    },
    /** 下载按钮事件 */
    handleDownload(row) {
      importDownloadData(row.recordId).then((response) => {
        window.location.href = this.baseApiUrl + response.rows[0].url;
      });
    },
    /** 导入按钮事件 */
    handleImport() {
      this.uploadObj = {
        ...this.uploadObj,
        title: '数据导入',
        open: true,
        isUploading: false,
        isVisbleSubmitBtn: true,
      };
    },
    /** 文件上传中处理 */
    handleUploadOnprogress(event, file, fileList) {
      this.uploadObj.isUploading = true;
    },
    /** 文件上传成功处理 */
    handleUploadOnsuccess(response, file, fileList) {
      this.uploadObj.open = false;
      this.uploadObj.isUploading = false;
      this.$refs.dialogUploadRef.clearFiles();
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true });
      this.getMainPageTableListData();
    },
    /** 文件状态改变 */
    handleUploadOnchange(file, fileList) {
      this.uploadObj.isVisbleSubmitBtn = false;
    },
    /** 文件列表移除文件 */
    handleUploadOnremove(file, fileList) {
      this.uploadObj.isVisbleSubmitBtn = true;
      this.msgInfo('您从文件列表移除上传文件。');
    },
    /** 上传文件超出个数限制 */
    handleUploadOnexceed(files, fileList) {
      this.msgWarning('Sorry，上传文件个数已经达到最大！');
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$confirm('确定导入数据操作吗？', '提示', {
        confirmButtonText: '确定 ',
        cancelButtonText: '取消 ',
        type: 'info'
      }).then(() => {
        this.$refs.dialogUploadRef.submit();
      }).catch(() => {
        this.msgInfo('您已取消导入数据操作！');
      });
    },
    /** 下载模板操作 */
    importTemplate() {
      importImportTemplate().then((response) => {
        this.download(response.msg);
      });
    }
  }
};
</script>
