<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1">
      <el-tab-pane key="1" label="节点设置">
        <el-form label-position="top" label-width="auto">
          <el-form-item label="节点名称" class="form">
            <el-input placeholder="请输入节点名称" v-model="nodeName" />
          </el-form-item>
          <el-form-item label="使用方法" class="form">
            <el-input
              placeholder="选择输入文件数据集预览数据，获取表头信息，通过设置新的行列范围创建新数据集"
              type="textarea"
              :disabled="true"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-button type="primary" @click="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="2" label="参数设置">
        <el-form label-position="top" label-width="auto">
          <el-form-item label="获取数据集" class="form">
            <el-select v-model="fileitem" placeholder="请选择" value-key="name" clearable>
              <el-option v-for="item in inputnodefilemap" :key="item.name" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-button type="primary" @click="getCSVHeader">
              获取表头
            </el-button>
            <el-button type="primary" @click="previewfile">预览</el-button>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-table :data="allStringinfo" style="width: 100%" border>
              <el-table-column v-for="(item, index) in headerinfo" :key="index" :label="item">
                <template slot-scope="scope">{{ scope.row[index] }}</template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <span>
              当前文件共有 {{ rownum == 0 ? 0 : rownum + 1 }} 行 {{ colnum == 0 ? colnum : colnum + 1 }} 列数据
            </span>
          </el-form-item>
          <el-form-item label="行" class="form">
            <el-input-number v-model="rowminnum" controls-position="right" :min="0" :max="rownum"></el-input-number>
            <el-input-number
              v-model="rowmaxnum"
              controls-position="right"
              :min="0"
              :max="rownum"
              style="margin-top: 10px"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="列" class="form">
            <el-input-number v-model="colminnum" controls-position="right" :min="0" :max="colnum"></el-input-number>
            <el-input-number
              v-model="colmaxnum"
              controls-position="right"
              :min="0"
              :max="colnum"
              style="margin-top: 10px"
            ></el-input-number>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-button type="primary" @click="getnewfile">创建</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="3" label="新文件">
        <el-form label-position="top" label-width="auto">
          <el-form-item label="文件名" class="form">
            <el-input placeholder="暂无新文件" :disabled="true" v-model="newFileItem.newfilename" />
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-button type="primary" @click="getnewCSVHeader">
              获取表头
            </el-button>
            <el-button type="primary" @click="previewnewfile">预览</el-button>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-table :data="newallStringinfo" style="width: 100%" border>
              <el-table-column width="100" v-for="(item, index) in newheaderinfo" :key="index" :label="item">
                <template slot-scope="scope">{{ scope.row[index] }}</template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <span>
              当前文件共有 {{ newrownum == 0 ? 0 : newrownum + 1 }} 行 {{ newcolnum == 0 ? 0 : newcolnum + 1 }} 列数据
            </span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      isMakenewfile: false,
      // 输入节点输入的文件
      inputnodefilemap: [],
      // 选中的文件信息
      inputnodefilevalue: [],
      filename: null,
      bucketname: null,
      cell: null,
      nodeName: "",
      rownum: 0,
      colnum: 0,
      headerinfo: null,
      allStringinfo: null,
      rowminnum: null,
      rowmaxnum: null,
      colminnum: null,
      colmaxnum: null,
      // 包含所有文件
      allfilemap: [{}],
      // 当前创建的文件
      fileitem: {},
      // 新文件
      newFileItem: {},
      newrownum: 0,
      newcolnum: 0,
      newheaderinfo: null,
      newallStringinfo: null,
      newfilename: null,
      newbucketname: null,
      newfileurl: null
    };
  },
  methods: {
    init(cell) {
      this.cell = cell;
      const data = this.cell.getData();
      this.nodeName = data.nodeName;

      this.inputnodefilemap = data.inputnodefilemap || [];
      this.inputnodefilevalue = data.inputnodefilevalue || [];
      if (data.isMakenewfile) {
        this.newFileItem = data.allfilemap[data.allfilemap.length - 1];
      }
    },
    primary() {
      if (["", null, undefined].includes(this.nodeName)) {
        Message.error("节点名称不能为空");
        this.nodeName = this.cell.getData().nodeName;
        return;
      }
      this.cell.setData({
        nodeName: this.nodeName
      });
      Message.success("保存成功");
    },
    // 新建边时，源节点为输入节点，节点内部获取输入节点对应的文件 name及url
    changeinputnodemap(celldata, cell, sallfilemap) {
      celldata.inputnodefilemap = sallfilemap;
      cell.setData({ inputnodefilemap: sallfilemap });
      this.inputnodefilemap = sallfilemap;
    },
    // 获取CSV文件表头信息
    async getCSVHeader() {
      if (!Object.keys(this.fileitem).length) {
        Message.error("未选择文件");
        return;
      }
      const { data } = await this.$http({
        url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
        method: "get",
        params: this.$http.adornParams({
          bucketname: this.fileitem.bucketname,
          filename: this.fileitem.name
        })
      });
      if (data && data.code === 0) {
        this.rownum = Number(data.index) - 1;
        this.colnum = Number(data.col) - 1;
        this.headerinfo = data.headerinfo;
        this.allStringinfo = data.allstring;
      }
    },

    // 预览输入文件
    previewfile() {
      if (!Object.keys(this.fileitem).length) {
        Message.error("未选择文件");
        return;
      }
      let routeData = this.$router.resolve({
        path: "/visi-previewcsv",
        query: {
          csvurl: this.fileitem.fileurl
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 创建新文件
    async getnewfile() {
      if (!Object.keys(this.fileitem).length) {
        Message.error("未选择文件");
        return;
      }
      if (this.rowminnum == null || this.rowmaxnum == null || this.colminnum == null || this.colmaxnum == null) {
        Message.error("输入有误");
        return;
      }
      const { data } = await this.$http({
        url: this.$http.adornUrl("/visi/visiworkflow/getnewfile"),
        method: "get",
        params: this.$http.adornParams({
          bucketname: this.fileitem.bucketname,
          filename: this.fileitem.name,
          rowminnum: this.rowminnum,
          rowmaxnum: this.rowmaxnum,
          colminnum: this.colminnum,
          colmaxnum: this.colmaxnum
        })
      });
      if (data && data.code === 0) {
        this.fileitem["name"] = data.newfilename;
        this.fileitem["bucketname"] = "visiarguartifact";
        this.fileitem["fileurl"] = data.newfileurl;
        this.newFileItem = this.fileitem;
        this.inputnodefilemap.push(this.fileitem);
        this.cell.setData({
          inputnodefilemap: this.inputnodefilemap
        });
        Message.success("创建新文件成功");
      } else {
        Message.error("创建失败");
      }
    },
    // 获取新创建的文件的CSV文件表头信息
    async getnewCSVHeader() {
      if (!Object.keys(this.newFileItem).length) {
        Message.error("未创建新文件");
        return;
      }
      const { data } = await this.$http({
        url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
        method: "get",
        params: this.$http.adornParams({
          bucketname: this.newFileItem.newbucketname,
          filename: this.newFileItem.newfilename
        })
      });
      if (data && data.code === 0) {
        this.newrownum = Number(data.index) - 1;
        this.newcolnum = Number(data.col) - 1;
        this.newheaderinfo = data.headerinfo;
        this.newallStringinfo = data.allstring;
      }
    },

    // 预览新创建的文件
    previewnewfile() {
      if (!Object.keys(this.newFileItem).length) {
        Message.error("未创建新文件");
        return;
      }
      let routeData = this.$router.resolve({
        path: "/visi-previewcsv",
        query: {
          csvurl: this.newFileItem.newfileurl
        }
      });
      window.open(routeData.href, "_blank");
    }
  }
};
</script>
<style scope>
.form {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
}
.ant-tabs-tab {
  flex: 1 1 50px;
  padding: 7px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.el-select .el-input {
  /* width: 130px; */
  width: 100%;
  /* width: 0px; */
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-form-item.el-input {
  width: 150px;
}
</style>
