
<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="请输入模式名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input
            style="width: 300px"
            v-model="formData.modeTitle"
            placeholder="请输入标题"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="支持共锁" prop="isColockSupport">
          <el-checkbox v-model="formData.isColockSupport" :value="true" :disabled="true" />
        </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
            :disabled="true"
          />
        </el-form-item>
        <el-button type="primary" style="margin-left: 500px" :disabled="true">保 存</el-button>
        <el-button :disabled="true">取 消</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'" :drag-enabled="false" :read-only="true" />
        <WorkflowView v-else :read-only="true" />
      </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 { useI18n } from 'vue-i18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useRoute } from 'vue-router'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const route = useRoute()

const formLoading = ref(false)
const tabPosition = ref('first')

const formData = ref({
  modeName: undefined,
  modeTitle: undefined,
  isColockSupport: false,
  modeDescription: undefined
})

// 切换标签页（其实现在也禁用了）
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.createSuccess'))
//   }
// }

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss">

</style>
