<template>
  <div>
    <ContentWrap>
      <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="100px">
        <el-form-item label="模式名称" prop="name">
          <el-input style="width: 300px" v-model="formData.modeName" placeholder="请输入模式名称" />
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input style="width: 300px" v-model="formData.modeTitle" placeholder="请输入标题" />
        </el-form-item>

        <el-form-item label="支持共锁" prop="isColockSupport">
          <el-checkbox v-model="formData.isColockSupport" :value="true" :disabled="formData.isPreset"/>
        </el-form-item>

        <el-form-item label="描述" prop="modeDescription">
          <el-input
            style="width: 550px"
            v-model="formData.modeDescription"
            type="textarea"
            :rows="4"
            placeholder="请输入描述内容"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
        <el-button type="primary" style="margin-left: 500px" @click="SaveWorkflowMode"
          >保 存
        </el-button>
        <el-button @click="goBack">取 消</el-button>
      </el-form>
      <el-form-item label="模式步骤" prop="step" style="margin-left: 30px" />
      <el-radio-group v-model="tabPosition" class="mb-15px" @change="handleTabChange">
        <el-radio-button label="first">表格视图</el-radio-button>
        <el-radio-button label="second">流程视图</el-radio-button>
      </el-radio-group>
      <ContentWrap>
        <TableView
          v-if="tabPosition == 'first'"
          :enableStepTable="enableStepTable"
          :isPreset="formData.isPreset"
        />
        <WorkflowView v-else :enableStepTable="enableStepTable" :isPreset="formData.isPreset" />
      </ContentWrap>
    </ContentWrap>
  </div>
</template>
<script setup lang="ts">
import TableView from './TableView.vue'
import WorkflowView from './WorkFlowView.vue'
import * as ModeApi from '@/api/custonWorkflow/index'
import {useTagsViewStoreWithOut} from "@/store/modules/tagsView";

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const route = useRoute()
const router = useRouter()
const formLoading = ref(false) // 表单的加载中
const tabPosition = ref('first')
const formData = ref({
  modeName: undefined,
  modeTitle: undefined,
  isColockSupport: false,
  modeDescription: undefined,
  isPreset: undefined
})
const enableStepTable = ref(true) //新增控制表格新增 模板导入 删除不能点击或者出现 修改不用改变此值

// 方法定义
const handleTabChange = (newTab: string) => {
  tabPosition.value = newTab
}

//修改先获取原本保存的内容
const getInfo = async () => {
  const data = await ModeApi.selectWorkflowModeById(route.query.id)
  formData.value = data
}
const SaveWorkflowMode = async () => {
  const data = await ModeApi.updateWorkflowMode(formData.value)
  if (data) {
    message.success(t('common.updateSuccess'))
  }
}

const goBack = () => {
  // 获取 tagsView store
  const tagsViewStore = useTagsViewStoreWithOut()

  // 获取当前路由对象
  const currentRoute = router.currentRoute.value

  // 方法1：精确删除当前标签（推荐）
  tagsViewStore.delVisitedView(currentRoute)
  router.push('/CustomWorkflow/CW')
}
onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss"></style>
