<template>
  <el-dialog
    :title="'输出节点'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="160px"
    >
      <!-- <div class="sub-title"> 参数型输出</div> -->
      <el-form-item name="paraoutput"></el-form-item>
      <el-table :data="outputsparameters" :key="outputparakey" border style="width: 100%">
        <el-table-column label="参数型输出" align="center">
          <el-table-column
            prop="paraname"
            header-align="center"
            align="center"
            label="输出参数名称"
          >
          </el-table-column>
          <el-table-column
            prop="paratype"
            header-align="center"
            align="center"
            label="参数类型"
          >
          </el-table-column>
          <el-table-column
            prop="paradesc"
            header-align="center"
            align="center"
            label="描述"
          >
          </el-table-column>
          <el-table-column
            prop="paravalue"
            header-align="center"
            align="center"
            label="结果"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <div class="sub-title"> 文件型输出</div> -->
      <el-form-item name="fileoutput" label="" label-width="50%"></el-form-item>
      <el-table :data="outputsartifacts" border style="width: 100%">
        <el-table-column label="文件型输出" align="center">
          <el-table-column
            prop="paraname"
            header-align="center"
            align="center"
            label="输出文件名称"
          >
          </el-table-column>
          <el-table-column
            prop="paratype"
            header-align="center"
            align="center"
            label="参数类型"
          >
          </el-table-column>
          <el-table-column
            prop="paradesc"
            header-align="center"
            align="center"
            label="描述"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="previewfile(scope.row.paraname, scope.row.valuefrom)"
              >预览
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="
                downloadoutputresult(scope.row.paraname, scope.row.valuefrom)
              "
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        modelName: "",
        // 本模板的类别
        categoryId: 1,
        form: null,
        remark: "",
        datasetName: "",
        st_dataListurl: [{ datasetName: "" }],
        dy_dataListurl: [{ datasetName: "" }],
        outputsparameters: null, //输出参数
        outputsartifacts: null, //输出文件
      },

      outputsparameters: [], //输出参数
      outputsartifacts: [], //输出文件
      sourcealgocell: null, //与输出节点连接的算法节点
      workflowName: "", //提交后的工作流名称
      wftemplateName: "", //节点对应的工作流内的template  dagtask 名称
      //包含所有文件
      cell: null,
      workflowStatus: "",
      outputparakey: 1,//outputparameters table key 

    };
  },
  methods: {
    init1(cell, celldata, workflowName) {
      this.visible = true;
      this.workflowName = workflowName;
      // this.wftemplateName = celldata.wftemplatename;
      //此时celldata.sourcealgocell == null
    },
    init(cell, celldata, sourcealgocelldata, workflowName,workflowStatus) {
      this.visible = true;
      this.workflowName = workflowName;

      if (celldata.sourcealgocell != null) {
        this.outputsparameters = sourcealgocelldata.outputsparameters;
        this.outputsartifacts = sourcealgocelldata.outputsartifacts;
        this.sourcealgocell = celldata.sourcealgocell;
        // console.log("更新输出");
        // console.log(this.outputsparameters);
        // console.log(this.outputsartifacts);

        this.wftemplateName = sourcealgocelldata.wftempname;
        // console.log(this.wftemplateName);
      }
      this.workflowStatus = workflowStatus;
      this.getOutputparavalue();//获取输出参数结果
    },


    // 新建边是 输出节点获取 算法节点输出相关
    changeoutputsourcealgo(
      currentcell,
      currentcelldata,
      source,
      sourcecelldata
    ) {
      //
      currentcelldata.sourcealgocell = source;
      this.sourcealgocell = source;
      currentcell.setData({ sourcealgocell: source }); //可能无用

      this.outputsparameters = sourcecelldata.outputsparameters;
      this.outputsartifacts = sourcecelldata.outputsartifacts;
      this.dataForm.outputsparameters = sourcecelldata.outputsparameters;
      this.dataForm.outputsartifacts = sourcecelldata.outputsartifacts;
      // console.log("改变输出节点的  源节点");
      // console.log(this.outputsparameters);
      // console.log(this.outputsartifacts);
    },

    //下载  output  数据
    downloadoutputresult(paraname, valuefrom) {
      this.$http({
        url: this.$http.adornUrl("/visi/visinodeidtemplatemap/downloadoutput"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
          wftemplateName: this.wftemplateName,
          outputartiparaName: paraname,
          outputartiparapath: valuefrom,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("输出节点  下载数据集");
          // console.log(data.outputfileUrl);
          // window.location.href = data.outputfileUrl;
          // window.location.href=data.downloadUrl;
          window.open(data.outputfileUrl)

          // var a = document.createElement("a"); //创建a标签
          // a.download = data.artipath; //设置下载名称
          // a.style.display = "none"; //将a标签设置为不可见
          // // var blob = new Blob([data.outputfileUrl]); //创建blob对象，字符内容转变成blob地址
          // // a.href = URL.createObjectURL(blob);
          // a.href = data.outputfileUrl;
          // document.body.appendChild(a);
          // a.click(); //出发点击事件

          // document.body.removeChild(a); //最后移除a标签
        } else {
          this.$message.error("下载失败");
        }
      });
    },

    //预览  output  数据
    previewfile(paraname, valuefrom) {
      //pdf可预览
      //图片可预览   解压后直接存储 返回url
      //csv txt 转存为pdf
      // window.open("http://112.126.68.148:9000/visiarguartifact/argoworkflow/DY_1019.csv?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2FDY_1019.csv%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T093258Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=7989373a4c74fcf5beae7ce7c73305ee47313ccb639d0a7dd4d7f9e67548fa56");

      //如果 结果为图片形式和 pdf,直接调用 window.open,如果 为txt,
      //判断如果 结果为csv ,则调用该方式预览，
      //   let routeData = this.$router.resolve({
      //  　　path:'/visi-previewcsv',
      //  　　query:{csvurl: 'http://182.92.79.148:32206/my-bucket/algorithm-visual-whw9s/algorithm-visual-whw9s-205472464/demo.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20220227%2F%2Fs3%2Faws4_request&X-Amz-Date=20220227T081114Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a9241f12f28c3983d6148fc51c0e5f2820270826a9e0af08b20ef5cc42f1da25'}
      //  });
      //  window.open(routeData.href, '_blank');

      this.$http({
        url: this.$http.adornUrl("/visi/visinodeidtemplatemap/downloadoutput"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
          wftemplateName: this.wftemplateName,
          outputartiparaName: paraname,
          outputartiparapath: valuefrom,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("输出节点  下载数据集");
          // console.log(data.outputfileUrl);
          const artifiletype = data.artifiletype;
          const artifileurl = data.outputfileUrl;
          // console.log("文件类型");
          // console.log(artifileurl);
          // console.log(artifileurl);
          // window.location.href=data.outputfileUrl;
          // window.location.href=data.downloadUrl;
          if (artifiletype == "csv") {
            // console.log("csvl类型");
            let routeData = this.$router.resolve({
              path: "/visi-previewcsv",
              query: {
                csvurl: artifileurl,
              },
            });
            window.open(routeData.href, "_blank");
          } else {
            // console.log("其他");
            window.open(artifileurl);
          }
        } else {
          this.$message.error("下载失败");
        }
      });
    },

    //预览  output  数据
    previewfile1(paraname) {
      // window.open("http://112.126.68.148:9000/visiarguartifact/argoworkflow/DY_1019.pdf?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2FDY_1019.pdf%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T091649Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=cce5c3a929ff0fd07109691760de1ac81d089737c3f4775a480b27c445ad1052",paraname)

      // window.open("https://view.officeapps.live.com/op/view.aspx?src="+"http://112.126.68.148:9000/visiarguartifact/argoworkflow/DY_1019.pdf?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2FDY_1019.pdf%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T091649Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=cce5c3a929ff0fd07109691760de1ac81d089737c3f4775a480b27c445ad1052")

      // window.open(encodeURIComponent(base64Encode("http://112.126.68.148:9000/visiarguartifact/argoworkflow/DY_1019.pdf?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2FDY_1019.pdf%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T091649Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=cce5c3a929ff0fd07109691760de1ac81d089737c3f4775a480b27c445ad1052")));
      // window.open("http://112.126.68.148:9000/visiarguartifact/argoworkflow/%E7%9A%AE%E5%B8%A6%E5%A4%A7%E6%95%B0%E6%8D%AE.xls?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2F%E7%9A%AE%E5%B8%A6%E5%A4%A7%E6%95%B0%E6%8D%AE.xls%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T135743Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=2d1bac31b10262e9a747120ff73da6a499c9ac228fe22d5262fa920f0dde5ecf");
      // window.open("http://112.126.68.148:9000/visiarguartifact/argoworkflow/DY_1019.csv?Content-Disposition=attachment%3B%20filename%3D%22argoworkflow%2FDY_1019.csv%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220226%2F%2Fs3%2Faws4_request&X-Amz-Date=20220226T093258Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=7989373a4c74fcf5beae7ce7c73305ee47313ccb639d0a7dd4d7f9e67548fa56");

      // myWindow=window.open('','',);
      // myWindow.document.write(Papa.parse(
      //   'http://182.92.79.148:32206/my-bucket/algorithm-visual-whw9s/algorithm-visual-whw9s-205472464/demo.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20220227%2F%2Fs3%2Faws4_request&X-Amz-Date=20220227T081114Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a9241f12f28c3983d6148fc51c0e5f2820270826a9e0af08b20ef5cc42f1da25',
      //   {
      //     download: true,
      //     complete: function (results) {
      //       console.log('results :', results);
      //       Heiho(results.data);
      //     }
      //   }
      // ));
      let routeData = this.$router.resolve({
        path: "/visi-previewcsv",
        query: {
          csvurl:
            "http://182.92.79.148:32206/my-bucket/algorithm-visual-whw9s/algorithm-visual-whw9s-205472464/demo.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20220227%2F%2Fs3%2Faws4_request&X-Amz-Date=20220227T081114Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a9241f12f28c3983d6148fc51c0e5f2820270826a9e0af08b20ef5cc42f1da25",
        },
      });
      window.open(routeData.href, "_blank");
    },

    // 输出参数页面tab 选中时，获取参数类型输出值-----已改为  节点 init处调用
    getOutputparavalue() {
      //如果工作流状态为 succeed 时，调用该方法获取值
      if (
        this.outputsparameters &&
        this.outputsparameters.length != 0 &&
        this.workflowStatus == "Succeeded"
      ) {
        this.$http({
          url: this.$http.adornUrl(
            "/visi/visinodeidtemplatemap/getoutputparavalue"
          ),
          method: "get",
          params: this.$http.adornParams({
            workflowName: this.workflowName,
          wftemplateName: this.wftemplateName,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            var outparavalueJson = JSON.stringify(data.outparavalueJson);
            var jsonObj = JSON.parse(outparavalueJson); //转换为json对象
            console.log(jsonObj);
            for (var i = 0; i < jsonObj.length; i++) {
              // alert(jsonObj[i].name); //取json中的值
              for (var j = 0; j < this.outputsparameters.length;j++) {
                if(jsonObj[i].name == this.outputsparameters[j].paraname){
                  this.outputsparameters[j].paravalue = jsonObj[i].value;
                }
              }
            }
            this.outputparakey = Math.random();
          } else {
            Message.error("输出参数结果获取失败");
          }
        });

        
      }
    },
  },
};
</script>
<style>
.el-form-item .el-select {
  width: 100%;
}
.el-form-item .el-input {
  width: 100%;
}
</style>
