<template>
  <el-dialog title="执行" v-model="isShowDialog" width="600px">
    <el-form>
      <el-form-item>
        <p>标题：{{ currentPolicy.title }}</p>
        <p class="ml30">执行类型：{{ typesText[currentPolicy.types] }}</p>
      </el-form-item>
      <el-form-item>
        <div style="width: 100%">
          <p>参数配置</p>
          <div class="param-wrap" v-for="(item, index) in currentPolicy.paramData" :key="index">
            <p class="mr6 label">{{ item.title }}：</p>
            <!-- int、long、float、double、string、boolean、date、timestamp -->
            <el-input v-if="item.types === 'string'" clearable :placeholder="`请输入${item.title}`" v-model="item.value" />
            <el-input-number v-if="['int', 'long'].indexOf(item.types) > -1" :placeholder="`请输入${item.title}`" v-model="item.value" :step="1" step-strictly />
            <el-input-number v-if="['float', 'double'].indexOf(item.types) > -1" :placeholder="`请输入${item.title}`" v-model="item.value" :precision="2" />
            <el-radio-group v-if="item.types === 'boolean'" v-model="item.value">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
            <el-date-picker v-if="item.types === 'date'" v-model="item.value" type="datetime" :placeholder="`请选择${item.title}`" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s" />
            <el-date-picker v-if="item.types === 'timestamp'" v-model="item.value" type="datetime" :placeholder="`请选择${item.title}`" format="YYYY/MM/DD hh:mm:ss" value-format="x" />
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="form-btn-wrap">
      <el-button @click="onSubmit('handle')">手动执行 </el-button>
      <el-button type="primary" @click="onSubmit('auto')"> 开始执行 </el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import api from "/@/api/modules/policy";
import axios from "axios";
import { getToken } from "/@/utils/auth";
import { getRuleServerOrigin } from "/@/utils/origin";

const isShowDialog = ref(false);
const typesText = {
  1: "手动",
  2: "自动",
};
const headers = {
  Authorization: "Bearer " + getToken(),
};
const currentPolicy = ref<any>({});

const emit = defineEmits(["getList"]);

// 手动执行/开始执行
const onSubmit = async () => {
  const params: any = {};
  currentPolicy.value.paramData.forEach((item: any) => {
    params[item.key] = item.value;
  });
  await api.saveParam({
    id: currentPolicy.value.id,
    param: {
      ...params,
    },
  });
  (await axios.post(getRuleServerOrigin(`/api/v1/rules/${currentPolicy.value.flowId}/execute/${currentPolicy.value.types}`), params, { headers }).catch(() => {
    ElMessage.error("规则不存在");
  })) as any;

  ElMessage.success("操作成功");
  isShowDialog.value = false;
  emit("getList");
};

// 打开弹窗
const openDialog = (row?: any) => {
  if (row) {
    api.detail(row.id).then((res: any) => {
      currentPolicy.value = res.data;
    });
  }
  isShowDialog.value = true;
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.param-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  .label {
    width: 120px;
    text-align: right;
  }
}
.el-input-number,
.el-input {
  width: 260px !important;
}
::v-deep .el-date-editor.el-input {
  width: 260px !important;
}

::v-deep .el-dialog__body {
  position: relative;
}
.form-btn-wrap {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
</style>
