<template>
  <div>
    <div class="top">
      <div>
        <el-button type="primary" plain @click="viewJsonFunc"> 查看JSON </el-button>
        <el-button v-if="flowDetail.status != '2'" type="primary" :loading="saveLoading" @click="saveFunc"> 保存 </el-button>
      </div>
      <!-- <div class="top">
        <SvgIcon icon-class="logo" class="logo" @click="logoClick" />
      </div> -->
    </div>
    <!-- 查看JSON -->
    <viewJson v-if="showViewJson" :graphData="graphData" @closed="showViewJson = false"></viewJson>

    <!-- 计划添加弹窗 -->
    <el-dialog v-model="centerDialogVisible" title="保存计划" width="500" :rules="rules" center>
    <div>
      <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 500px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="描述" prop="content">
          <el-input v-model="form.content" type="textarea"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePlan">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import viewJson from './view-json.vue';
import { ref, onMounted, reactive } from 'vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { createPageData } from '@/api/main/system/system';
import { ElMessage } from 'element-plus'

const props = defineProps({
  lf: Object,
  //标题
  title: {
    type: String,
    default: '',
  },
  //详情
  flowDetail: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

let saveLoading = ref(false);
let graphData = reactive({});
let showViewJson = ref(false);
let debugDisabled = ref(false);

let logoClick = () => {
  window.location.href = 'https://github.com/xoobom/logicflow-vue3';
};


const centerDialogVisible = ref(false);

const form = reactive({
  name: '',
  content: '',
});

let rules = reactive({
    name: [
      { required: true, message: '名称不能为空' },
      {
        max: 50,
        message: '最大50字符',
      },
    ],
    content: [
      {
        max: 100,
        message: '最大100字符',
      },
    ],
  });

const formRef = ref(null);

//保存
const saveFunc = () => {
  const graphData = props.lf.getGraphData();
  if (!graphData.nodes.length) {
    ElMessage.error('请先绘制流程图');
    return;
  }
  centerDialogVisible.value = true
  
  console.log(props.lf.getGraphData(), 'graphData')
};

const savePlan = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      saveLoading.value = true;
      const graphData = props.lf.getGraphData();
      createPageData('/call/ivr', {
        name: form.name,
        content: form.content ?? '',
        json: JSON.stringify({
          flowName: form.name,
          flowJson: graphData,
        }),
      }).then((res) => {
        saveLoading.value = false;
        centerDialogVisible.value = false;
        if (res.state === 'success') {
          ElMessage.success('保存成功');
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(() => {
        saveLoading.value = false;
        centerDialogVisible.value = false;
      });
    } else {
      return false;
    }
  })
}

//查看JSON
const viewJsonFunc = () => {
  graphData = props.lf.getGraphData();
  showViewJson.value = true;
};

onMounted(() => {
  if (!props.flowDetail.flowJson) {
    debugDisabled.value = true;
  }
});
</script>

<style lang="scss" scoped>
.top {
  // display: flex;
  bottom: 15px;
  right: 15px;
  z-index: 10000;
  justify-content: space-between;
  margin-bottom: 5px;
  position: absolute;
}
</style>
