<template>
  <el-card>
    <template slot="header" class="flex-1">
      <span>配置管理</span>
    </template>
    <el-row>
      <el-col>
        <PageTable @selection-change="handleSelectionChange" :data="table.data" ref="dataTable" @load-data="dataTableLoad" title="配置导入导出管理" highlight-current-row stripe border>
          <template slot="buttons">
            <el-row>
              <el-col :span="12">
                <el-upload style="margin-right:10px;" :show-file-list="false" @on-success="files()" action="http://localhost:8080/api/nodesys/backupmgr/import">
                  <el-button type="primary" plain icon="el-icon-fa-download">配置导入</el-button>
                </el-upload>
              </el-col>
              <el-col :span="12">
                <el-button type="success" icon="el-icon-fa-upload" plain @click="exportconf()">配置导出</el-button>
              </el-col>
            </el-row>
          </template>
          <el-table-column type="selection" align='center' width="50" fixed='left'></el-table-column>
          
          <el-table-column label="终端标识" prop="tl_defn"></el-table-column>
          <el-table-column label="终端名称" prop="tl_name"></el-table-column>
          <!-- <el-table-column label="发送配置">
            <template slot-scope="scope">
              <el-button icon="el-icon-fa-eye" @click="sendConf(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="接收配置">
            <template slot-scope="scope">
              <el-button icon="el-icon-fa-eye" @click="receConf(scope.row)">查看</el-button>
            </template>
          </el-table-column> -->
        </PageTable>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import BackupApi from "../../@/api/base/sysm/BackupAPI.js";
export default {
  name: "BackupMgr",
  data() {
    return {
      table: {
        data: []
      },
      queryForm: {
        tl_name: "",
        tl_defn: "",
        tl_status: "",
        startTL_SQDATE: "",
        endTL_SQDATE: "",
        startTL_SPDATE: "",
        endTL_SPDATE: ""
      },

      multipleSelection: [] // 批量操作数组
    };
  },
  mounted() {
    this.$refs.dataTable.load(this.queryForm);
  },
  methods: {
    dataTableLoad(params, resolve) {
      BackupApi.queryTrmlList(params)
        .then(resolve) // 让表格解析你提供的数据 (主要解析页码等)
        .then(respData => {
          this.table.data = respData.datas;
          console.log(this.table);
        }); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    files(response, file, fileList) {
      this.dataTableLoad();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    sendConf(row) {
      this.senderlist.uuid = row.uuid;
      this.senderlist.show = true;
    },
    receConf(row) {
      this.receiverlist.uuid = row.uuid;
      this.receiverlist.show = true;
    },
    editSend(val) {
      this.sender.ai_uuid = this.senderlist.uuid;
      this.sender.info = val.row;
      this.sender.show = true;
    },
    editRece(val) {
      this.receiver.ai_uuid = this.receiverlist.uuid;
      this.receiver.info = val.row;
      this.receiver.show = true;
    },
    exportconf() {
      if (this.multipleSelection.length !== 0) {
        this.$confirm("确认导出该条配置?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let array = [];
            this.multipleSelection.forEach((value, index) => {
              array.push(value.uuid);
            });
            // var uuids = JSON.stringify(array);
            // BackupApi.backup(array);
            // this.$ajax.defaults.headers.post["Content-Type"] =
            //   "application/json; charse=UTF-8";
            // this.$ajax({
            //   //几个参数需要注意一下
            //   method: "post", //方法类型
            //   dataType: "json", //预期服务器返回的数据类型
            //   url: "/api/nodesys/backupmgr/backup", //url
            //   data: uuids
            // });
            var url = "/api/nodesys/backupmgr/backup?uuids=" + array;
            var temp = document.createElement("form");
            temp.action = url;
            temp.method = "get";
            var opt = document.createElement("input");
            opt.name = "uuids";
            opt.value = array;
            temp.appendChild(opt);
            temp.style.display = "none";
            document.body.appendChild(temp);
            temp.submit();
            document.body.removeChild(temp);
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "请选择数据！",
          type: "warning"
        });
      }
    }
  }
};
</script>
