<template>
  <div class="script-manager">
    <!-- 应用版本选择 -->
    <!-- <div class="item-box">
      <div class="title">应用版本</div>
      <el-select v-model="appVersion" placeholder="请选择" class="select-version">
        <el-option
          v-for="version in versions"
          :key="version.value"
          :label="version.label"
          :value="version.value"
        />
      </el-select>
    </div> -->
    <div class="item-box">
      <div class="title">
        <span>
          前置条件
          <el-tooltip
            class="box-item"
            effect="dark"
            content="前置节点是否全部完成才能开展当前节点工作"
            placement="top-start"
          >
            <el-icon color="#606266"><QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </div>
      <el-radio-group :disabled="readonly" v-model="nodeCondition">
        <el-radio value="and">与</el-radio>
        <el-radio value="or">或</el-radio>
      </el-radio-group>
    </div>
    <div class="item-box">
      <div class="title">
        <span>
          执行方式
          <el-tooltip
            class="box-item"
            effect="dark"
            content="节点的执行方式，是后台自动执行或者手动执行"
            placement="top-start"
          >
            <el-icon color="#606266"><QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </div>
      <el-radio-group :disabled="readonly" v-model="exeMethod">
        <el-radio value="serviceTask">自动</el-radio>
        <el-radio value="userTask">手动</el-radio>
      </el-radio-group>
    </div>
    <div class="item-box">
      <div class="title">
        <span>节点前脚本</span>
        <el-upload
          v-if="!readonly"
          class="upload-btn"
          :multiple="true"
          :auto-upload="false"
          :show-file-list="false"
          @change="(val: any) => changeFileFun('pre', val)"
        >
          <img src="@/assets/imgs/dragFlow/add-script.svg" alt="">
        </el-upload>
      </div>
      <div class="script-box" v-for="(item,index) in nodeAttribute.preScripts" :key="item.id">
        <div class="s-name">脚本名称</div>
        <div class="operation">
          <el-input v-model="item.name" class="el-input"></el-input>
          <span class="code-view-btn">
            <img src="@/assets/imgs/dragFlow/open-code.svg" v-if="!item.isPreview" @click="changeReviewFun('pre',index)" alt="">
            <img class="select-ing" src="@/assets/imgs/dragFlow/close-code.png" v-else @click="changeReviewFun('pre',index)" alt="">
          </span>
          <el-popconfirm title="确认删除？" @confirm="removeFileFun('pre', index)">
            <template #reference>
              <img src="@/assets/imgs/dragFlow/lessen.svg" alt="">
            </template>
          </el-popconfirm>
        </div>
        <div class="code-box" v-if="item.isPreview">
          <div class="code-header">
            <span class="s-name">脚本代码</span>
            <div class="edit-code" @click="openCodeDialogFun(item.fileId)">在IDE中{{ readonly?'查看':'编辑' }}</div>
          </div>
          <div class="code-text">
            <MonacoEditor :idIndex="item.fileId + item.name" readonly :file-id="item.fileId"></MonacoEditor>
            <!-- <img src="@/assets/imgs/dragFlow/code.png" alt=""> -->
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <div class="title">
        <span>节点后脚本</span>
        <el-upload
          v-if="!readonly"
          class="upload-btn"
          :multiple="true"
          :auto-upload="false"
          :show-file-list="false"
          @change="(val: any) => changeFileFun('post', val)"
        >
          <img src="@/assets/imgs/dragFlow/add-script.svg" alt="">
        </el-upload>
      </div>
      <div class="script-box" v-for="(item,index) in nodeAttribute.postScripts" :key="item.id">
        <div class="s-name">脚本名称</div>
        <div class="operation">
          <el-input v-model="item.name" class="el-input"></el-input>
          <span class="code-view-btn" v-if="!readonly">
            <img src="@/assets/imgs/dragFlow/open-code.svg" v-if="!item.isPreview" @click="changeReviewFun('post',index)" alt="">
            <img class="select-ing" src="@/assets/imgs/dragFlow/close-code.png" v-else @click="changeReviewFun('post',index)" alt="">
          </span>
          <el-popconfirm title="确认删除？" @confirm="removeFileFun('post', index)">
            <template #reference>
              <img src="@/assets/imgs/dragFlow/lessen.svg" alt="">
            </template>
          </el-popconfirm>
        </div>
        <div class="code-box" v-if="item.isPreview">
          <div class="code-header">
            <span class="s-name">脚本代码</span>
            <div class="edit-code" @click="openCodeDialogFun(item.fileId)">在IDE中{{ readonly?'查看':'编辑' }}</div>
          </div>
          <div class="code-text">
            <MonacoEditor :idIndex="item.fileId + item.name" readonly :file-id="item.fileId"></MonacoEditor>
            <!-- <img src="@/assets/imgs/dragFlow/code.png" alt=""> -->
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <div class="title">前脚本执行命令</div>
      <el-input :disabled="readonly" v-model="preExeCommand" placeholder="请输入执行命令" class="select-version">
      </el-input>
    </div>
    <div class="item-box">
      <div class="title">后脚本执行命令</div>
      <el-input :disabled="readonly" v-model="postExeCommand" placeholder="请输入执行命令" class="select-version">
      </el-input>
    </div>
    <div class="item-box">
      <div class="title">输入文件格式</div>
      <el-input :disabled="readonly" v-model="inputFormat" placeholder="请输入正则表达式" class="select-version">
      </el-input>
    </div>
    <div class="item-box">
      <div class="title">输出文件格式</div>
      <el-input :disabled="readonly" v-model="outputFormat" placeholder="请输入正则表达式" class="select-version">
      </el-input>
    </div>
  </div>
  <FleEdit :readonly="readonly" v-model:showDialog="showCodeEdit" :file-id="editFileId" :idIndex="editFileId+'dialog'"></FleEdit>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import FleEdit from '@/components/common/fileEdit/fileEditDialog/fileEdit.vue';
import { ElMessage } from 'element-plus';
import { upload } from '@/api/request';
import { updateNodeAttribute } from './nodeEvents';
import MonacoEditor from '@/components/common/fileEdit/monacoEditor/index.vue';

const props = defineProps({
  nodeAttribute: {
    type: Object,
    default: () => ({}),
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});

const env = import.meta.env;
const PREFIX = env.VITE_API_PREFIX_DATA;

// const appVersion = computed({
//   get() {
//     return props.nodeAttribute.appVersion;
//   },
//   set(val) {
//     updateNodeAttribute({ appVersion: val });
//   },
// });

const inputFormat = computed({
  get() {
    return props.nodeAttribute.inputFormat || '';
  },
  set(val) {
    updateNodeAttribute({ inputFormat: val });
  },
});

const outputFormat = computed({
  get() {
    return props.nodeAttribute.outputFormat || '';
  },
  set(val) {
    updateNodeAttribute({ outputFormat: val });
  },
});

const preExeCommand = computed({
  get() {
    return props.nodeAttribute.preExeCommand || '';
  },
  set(val) {
    updateNodeAttribute({ preExeCommand: val });
  },
});

const postExeCommand = computed({
  get() {
    return props.nodeAttribute.postExeCommand || '';
  },
  set(val) {
    updateNodeAttribute({ postExeCommand: val });
  },
});

const nodeCondition = computed({
  get() {
    return props.nodeAttribute.nodeCondition || 'and';
  },
  set(val) {
    updateNodeAttribute({ nodeCondition: val });
  },
});

const exeMethod = computed({
  get() {
    return props.nodeAttribute.exeMethod || 'serviceTask';
  },
  set(val) {
    updateNodeAttribute({ exeMethod: val });
  },
});

const showCodeEdit = ref(false);

// 应用版本数据
// const versions = ref<any[]>([]);

const changeFileFun = async (type:string, file:any) => {
  console.log('file', file);
  const isRepeat = props.nodeAttribute[type === 'pre' ? 'preScripts' : 'postScripts'].some((item:any) => item.name === file.name);
  if (isRepeat) {
    ElMessage.warning('文件名重复！');
  }
  const form = new FormData();
  // form.append('fileType', String(FILE_TYPE.FLOW_PYTHON));
  // form.append('fileName ', file.name);
  form.append('script ', file.raw);
  const res = await upload(`${PREFIX}data/uploadScriptFile`, form);

  const preScripts = props.nodeAttribute.preScripts;
  const postScripts = props.nodeAttribute.postScripts;
  if (type === 'pre') {
    preScripts.push({
      name: file.name,
      isPreview: false,
      fileId: res.data,
    });
  } else if (type === 'post') {
    postScripts.push({
      name: file.name,
      isPreview: false,
      fileId: res.data,
    });
  }

  if (preScripts.length === 1) {
    preScripts[0].isPreview = true;
  }
  if (postScripts.length === 1) {
    postScripts[0].isPreview = true;
  }
  updateNodeAttribute({ preScripts, postScripts });
};

const changeReviewFun = (type:string, index:number) => {
  const preScripts = props.nodeAttribute.preScripts;
  const postScripts = props.nodeAttribute.postScripts;
  if (type === 'pre') {
    preScripts[index].isPreview = !preScripts[index].isPreview;
  }
  if (type === 'post') {
    postScripts[index].isPreview = !postScripts[index].isPreview;
  }
  updateNodeAttribute({ preScripts, postScripts });
};

const removeFileFun = (type:string, index:number) => {
  const preScripts = props.nodeAttribute.preScripts;
  const postScripts = props.nodeAttribute.postScripts;
  if (type === 'pre') {
    preScripts.splice(index, 1);
  }
  if (type === 'post') {
    postScripts.splice(index, 1);
  }
  updateNodeAttribute({ preScripts, postScripts });
};

const editFileId = ref('');
const openCodeDialogFun = (fileId:string) => {
  showCodeEdit.value = true;
  editFileId.value = fileId;
};

// const getAppVersion = async () => {
//   const res:any = await queryApplicationConfigApi({ appId: props.nodeAttribute.uuid });
//   if (res.code === 200) {
//     versions.value = res.data.map((item:any) => {
//       return {
//         label: item.configName,
//         value: item.id,
//       };
//     });
//   }
// };

onMounted(() => {
  // downLoadScript();
});

// watch(
//   () => props.nodeAttribute.uuid,
//   (val) => {
//     if (props.nodeAttribute.uuid) {
//       getAppVersion();
//     }
//   },
//   {
//     immediate: true,
//     deep: true,
//   }
// );

</script>

<style lang="scss" scoped>
.script-manager {
  padding: 0 var(--padding-medium);
  padding-top: var(--padding-medium);
  height: 100%;
  overflow-y: auto;
}
.item-box {
  padding-bottom: var(--padding-medium);
  margin-bottom: var(--margin-medium);
  border-bottom: 1px solid var(--el-disabled-border-color);
  .title {
    font-size: var(--font-size-text-normal);
    // color: ;
    font-weight: bold;
    margin-bottom: var(--margin-medium);
    display: flex;
    justify-content: space-between;
    img {
      width: 20px;
    }
  }
  .select-version {
    width: 100%;
  }
  .script-box {
    .s-name {
      font-size: var(--font-size-text-small);
      color:#999999;
      margin-bottom: var(--margin-small);
    }
    .operation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .code-view-btn {
        img {
          width: 14px;
        }
        .select-ing {
          width: 20px;
          // background-color: red;
        }
      }
      .el-input {
        // width: 85%;
      }
      img {
        width: 20px;
        margin-left: var(--margin-small);
        cursor: pointer;
      }
    }
    .code-box {
      margin-bottom: var(--margin-small);
      .code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--margin-small);

        .edit-code {
          font-size: var(--font-size-text-small);
          color:#0366FF;
          margin-bottom: var(--margin-small);
          background-color: #EDF4FF;
          padding: var(--padding-tiny);
          border-radius: var(--border-radius-small);
          cursor: pointer;
        }
      }
      .code-text {
        width: 100%;
        height: 200px;
        overflow: hidden;
          border-radius: var(--border-radius-normal);
      }
    }
  }
}
</style>
