<template>
  <div class="workflow-drawer-node">
    <el-tabs type="border-card" v-model="state.tabsActive">
      <!-- 节点编辑 -->
      <el-tab-pane label="节点编辑" name="1">
        <el-scrollbar>
          <el-form :model="state.node" :rules="state.nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
            <el-form-item label="数据id" prop="id">
              <el-input v-model="state.node.id" placeholder="请输入数据id" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="节点id" prop="nodeId">
              <el-input v-model="state.node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-input v-model="state.node.type" placeholder="请输入类型" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="left坐标" prop="left">
              <el-input v-model="state.node.left" placeholder="请输入left坐标" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="top坐标" prop="top">
              <el-input v-model="state.node.top" placeholder="请输入top坐标" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="icon图标" prop="icon">
              <el-input v-model="state.node.icon" placeholder="请输入icon图标" clearable></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="state.node.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="mb15" @click="onNodeRefresh">
                <SvgIcon name="ele-RefreshRight" />
                重置
              </el-button>
              <el-button type="primary" class="mb15" @click="onNodeSubmit">
                <SvgIcon name="ele-Check" />
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </el-tab-pane>

      <!-- 扩展表单 -->
      <el-tab-pane label="扩展表单" name="2">
        <el-scrollbar>
          <el-form :model="state.form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
            <el-form-item
              :label="val.label"
              :prop="val.prop"
              v-for="(val, key) in state.node.from"
              :key="key"
              :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
            >
              <el-input
                v-model="state.form[val.prop]"
                :placeholder="val.placeholder"
                clearable
                v-if="val.type === 'input'"
                :disabled="val.disabled"
              ></el-input>
              <el-select v-model="state.form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
                <el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <el-checkbox-group v-model="state.form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
                <el-checkbox label="美食推荐" name="type"></el-checkbox>
                <el-checkbox label="统计分析" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button class="mb15" @click="onExtendRefresh">
                <SvgIcon name="ele-RefreshRight" />
                重置
              </el-button>
              <el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="state.loading.extend">
                <SvgIcon name="ele-Check" />
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </el-tab-pane>

      <!-- 图表可视化 -->
      <el-tab-pane label="图表可视化" name="3">
        <el-scrollbar>
          <div class="flex-content-right">
            <div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="example/pagesWorkflowDrawerNode">
import { reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 定义子组件向父组件传值/事件
const emit = defineEmits(['submit', 'close'])

// 定义变量内容
const nodeFormRef = ref()
const extendFormRef = ref()
const chartsMonitorRef = ref()
const state = reactive<WorkflowDrawerNodeState>({
  node: {},
  nodeRules: {
    id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
    nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
    type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
    left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
    top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
    icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  },
  form: {
    module: [],
  },
  tabsActive: '1',
  loading: {
    extend: false,
  },
})

// 获取父组件数据
const getParentData = (data: object) => {
  state.tabsActive = '1'
  state.node = data
  initChartsMonitor()
}
// 节点编辑-重置
const onNodeRefresh = () => {
  state.node.icon = ''
  state.node.name = ''
}
// 节点编辑-保存
const onNodeSubmit = () => {
  nodeFormRef.value.validate((valid: boolean) => {
    if (valid) {
      emit('submit', state.node)
      emit('close')
    } else {
      return false
    }
  })
}
// 扩展表单-重置
const onExtendRefresh = () => {
  extendFormRef.value.resetFields()
}
// 扩展表单-保存
const onExtendSubmit = () => {
  extendFormRef.value.validate((valid: boolean) => {
    if (valid) {
      state.loading.extend = true
      setTimeout(() => {
        state.loading.extend = false
        ElMessage.success('保存成功')
        emit('close')
      }, 1000)
    } else {
      return false
    }
  })
}
// 图表可视化-初始化
const initChartsMonitor = () => {
  const myChart = echarts.init(chartsMonitorRef.value)
  const numsOne = []
  const numsTwo = []
  for (let i = 0; i < 7; i++) {
    numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`)
    numsTwo.push(Math.floor(Math.random() * 52 + 1))
  }
  const option = {
    grid: {
      top: 50,
      right: 30,
      bottom: 30,
      left: 50,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: numsOne,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: numsTwo,
        type: 'line',
        areaStyle: {},
      },
    ],
  }
  myChart.setOption(option)
  nextTick(() => {
    myChart.resize()
  })
}

// 暴露变量
defineExpose({
  getParentData,
})
</script>

<style scoped lang="scss">
.workflow-drawer-node {
  :deep() {
    .el-tabs {
      box-shadow: unset;
      border: unset;
      .el-tabs__nav {
        display: flex;
        width: 100%;
        .el-tabs__item {
          flex: 1;
          padding: unset;
          text-align: center;
          &:first-of-type.is-active {
            border-left-color: transparent;
          }
          &:last-of-type.is-active {
            border-right-color: transparent;
          }
        }
      }
      .el-tabs__content {
        padding: 0;
        height: calc(100vh - 90px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
