@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/AdvancedForm.vue

@@ -1,542 +1,542 @@
-<script lang="ts" setup>
-import * as R from 'remeda'
-// import ChannelConfigForm from './ConfigForm.vue'
-// import ChannelTargetOutputType from './TargetOutputType.vue'
-// import ChannelTargetForm from './TargetForm.vue'
-// import ChannelTargetList from './TargetList.vue'
-// import ChannelMediaProfileModify from './MediaProfileModify.vue'
-import type { components } from '#nuxt-api-party/transcodeApi'
-
-const emit = defineEmits<{
-  submit: [payload: components['schemas']['CreateChannelDto']]
-  back: []
-}>()
-
-const { defaultValue: channelValueDefault } = definePropsRefs<{
-  defaultValue: components['schemas']['CreateChannelDto']
-}>()
-
-const { t } = useI18n()
-const isCreateQuick = ref(true)
-
-const initialValues = ref({
-  ...klona(channelValueDefault.value),
-  channelConfig: {
-    ...klona(channelValueDefault.value.channelConfig),
-    nameModifier: channelValueDefault.value.channelConfig.nameModifier || channelValueDefault.value.name,
-  },
-})
-
-const { getOutputDefault } = useParamsChannelDefault()
-
-// // SECTION: form
-// const isEditMode = computed(() => !!channelId.value && action.value !== 'clone')
-// const submitCommand = ref('')
-// const { addMutation, editMutation, addQuickMutation } = useChannelMutation()
-
-// function normalizeChannel(value: CreateChannelDto) {
-//   // handle source index
-//   value.profiles = value?.profiles?.map(profile => ({
-//     ...profile,
-//     presets: profile.presets?.map(preset => ({ ...preset, sourceIndex: profile.sourceIndex })),
-//   }))
-
-//   value.channelConfig.watermark = value?.channelConfig?.watermark?.map((item) => {
-//     delete item._id
-//     return item
-//   })
-//   return value
-// }
-
-const { formRef, formValue, handleSubmit, handleValidate, formErrors, register, registerArray } = useElForm<components['schemas']['CreateChannelDto']>({
-  initialValues,
-  async onSubmit(values) {
-    emit('submit', values)
-  },
-})
-const serverConfig = computed(() => {
-  return formValue.value.channelConfig.machineConfig
-})
-useProvideServerConfigStore(serverConfig)
-
-const [targetsValue, targetsAttrs, { remove }] = registerArray<any[]>(getProp('targets'), [])
-const [profilesValue, profilesAttrs, { remove: removeP, add: addP }] = registerArray<any[]>(getProp('profiles'), [])
-const selectProfiles = ref<TargetProfileDto[]>(profilesValue.value || [])
-provide('profilesValue', profilesValue)
-
-const [encoderIdValue] = registerArray<any[]>(getProp('channelConfig.machineConfig.encoderId'), [])
-provide('encoderIdValue', encoderIdValue)
-
-const activeName = ref('configs')
-const activeItem = ref(null)
-const activeIndex = ref(-1)
-
-// // SECTION: server
-
-// // SECTION: profile
-const isShowProfileSetList = ref(false)
-
-// target output
-const isShowOutputSetList = ref(false)
-
-onBeforeRouteLeave((to, from, next) => {
-  const pass = to.query.pass
-  if (pass) {
-    next()
-    return
-  }
-
-  ElMessageBox.confirm(
-    t('channel.are_you_sure_to_leave_the_whole_data_will_be_lost'),
-    'Warning',
-    {
-      confirmButtonText: 'OK',
-      cancelButtonText: 'Cancel',
-      type: 'warning',
-    },
-  )
-    .then(() => {
-      next()
-    })
-})
-
-const isBlockEdit = ref(false)
-provide('isBlockEdit', isBlockEdit)
-
-const sampleWatermark = {
-  enable: false,
-  x: 0,
-  y: 0,
-  mediaScale: 1,
-  delay: 0,
-  assetId: '',
-  assetSrc: logoOnFastLink,
-  width: 120,
-  height: 88,
-}
-
-function addCustomProfile(profile: any) {
-  profile.nameModifier = profile.name
-  addP({ ...profile, watermark: klona(sampleWatermark) })
-
-  selectProfiles.value = profilesValue.value
-
-  activeName.value = 'profile-item'
-  activeItem.value = profile
-  activeIndex.value = formValue.value.profiles.length - 1
-  isShowProfileSetList.value = false
-}
-
-function addMultipleSelectProfile(profile: any) {
-  const idsNotIn = profilesValue.value.filter(item => !selectProfiles.value.some(el => el.id === item.id)).map(item => item.id)
-
-  idsNotIn.map(el => removeP(el))
-  selectProfiles.value.forEach((item) => {
-    const exists = profilesValue.value.some(el => el.id === item.id)
-    if (!exists) {
-      item.nameModifier = item.name
-      addP({ ...item, watermark: klona(sampleWatermark) })
-    }
-  })
-
-  activeName.value = 'profile-item'
-  activeItem.value = profile
-  activeIndex.value = formValue.value.profiles.length - 1
-}
-
-function selectProfile(profile: any) {
-  selectProfiles.value = profile
-
-  if (selectProfiles.value?.length)
-    addMultipleSelectProfile(profile)
-}
-
-function selectTarget(output: TargetDataDtoFormatEnum) {
-  isShowOutputSetList.value = false
-  // TODO: please check the edit case
-  const outputDefault = { ...getOutputDefault(output), id: genUUID() }
-  formValue.value.targets.push(outputDefault)
-
-  activeName.value = 'target-item'
-  activeItem.value = outputDefault
-  activeIndex.value = formValue.value.targets.length - 1
-}
-
-const isShowModifierForm = ref(false)
-
-const isAllowEditingTarget = ref(false)
-provide('isAllowEditingTarget', isAllowEditingTarget)
-const dataSource = computed(() => {
-  return [
-    {
-      id: 'configs',
-      label: 'Config',
-      active: activeName.value === 'configs',
-      icon: 'i-carbon:settings',
-      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
-    },
-    {
-      id: 'ai',
-      label: 'AI Advanced Config',
-      active: activeName.value === 'ai',
-      icon: 'i-carbon:ai-launch',
-      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
-    },
-    {
-      id: 'profiles',
-      label: 'Profiles',
-      active: activeName.value === 'profiles',
-      addable: (() => {
-        if (formValue.value.profiles.length < 10)
-          return true
-        else return false
-      })(),
-      addOption: true,
-      onClick: () => {
-      },
-      icon: 'i-ep:set-up',
-      error: hasError(formErrors.value, ['profiles']) ? 'Profile error' : '',
-      children: formValue.value.profiles?.map((item, idx) => {
-        return {
-          id: 'profile-item',
-          label: item.name,
-          item,
-          idx,
-          deletable: true,
-          error: hasError(formErrors.value?.profiles, [`${idx}`]) ? 'Error' : '',
-          active: activeName.value === 'profile-item' && activeItem.value?.id === item.id,
-        }
-      }),
-    },
-    {
-      id: 'targets',
-      label: 'Targets',
-      icon: 'i-ep:finished',
-      addable: formValue.value?.targets?.length < 10,
-      onClick: () => {
-        if (formValue.value.targets.length < 10)
-          isShowOutputSetList.value = true
-      },
-      active: activeName.value === 'targets',
-      error: hasError(formErrors.value, ['targets']) ? 'Target error' : '',
-      children: formValue.value.targets?.map((item, idx) => {
-        return {
-          id: 'target-item',
-          enable: !item.enable,
-          label: `${idx + 1}_${item.data?.format}`,
-          item,
-          idx,
-          deletable: true,
-          error: hasError(formErrors.value.targets, [`${idx}`]) ? 'Error' : '',
-          active: activeName.value === 'target-item' && activeItem.value?.id === item.id,
-        }
-      }),
-    },
-  ]
-})
-
-function addProfile(action: string) {
-  if (action === 'select')
-    isShowProfileSetList.value = true
-  else
-    isShowModifierForm.value = true
-}
-
-function handleNodeClick(data: any) {
-  activeName.value = data.id
-  activeItem.value = data.item
-  activeIndex.value = data.idx
-}
-
-function handleRemoveProfile(id: string) {
-  isAllowEditingTarget.value = true
-  formValue.value.profiles = formValue.value.profiles.filter(item => item.id !== id)
-  activeName.value = 'profiles'
-  activeItem.value = null
-  activeIndex.value = -1
-  const index = formValue.value.profiles?.findIndex(item => item.id === id)
-  if (index !== -1) {
-    formErrors.value?.profiles?.splice(index, 1)
-    cleanEmptyObjectAndArray(formErrors.value)
-  }
-
-  selectProfiles.value = formValue.value.profiles
-  // selectProfile(profilesValue.value)
-}
-
-function getProp(path: string) {
-  return () => path
-}
-
-function handleRemoveOutput(id: string) {
-  activeName.value = 'targets'
-  activeItem.value = null
-  activeIndex.value = -1
-  remove(id)
-}
-
-function handleCommand(command: string) {
-  submitCommand.value = command
-  handleSubmit()
-}
-
-function deleteProfile(idx: number) {
-  ElMessageBox.confirm(
-    t('SSConfig.are_you_sure_you_want_to_delete'),
-    'Warning',
-    {
-      confirmButtonText: t('Actions.confirm'),
-      cancelButtonText: t('Actions.cancel'),
-      type: 'warning',
-    },
-  )
-    .then(() => {
-      isAllowEditingTarget.value = true
-      formValue.value.profiles.splice(idx, 1)
-      selectProfiles.value = formValue.value.profiles
-      // selectProfile(profilesValue.value)
-    })
-}
-
-function onBack() {
-  if (!R.equals(formValue.value, channelValueDefault.value)) {
-    ElMessageBox.confirm(
-      t('channel.are_you_sure_you_want_to_go_back_this_will_discard_any_unsaved_changes'),
-      'Warning',
-      {
-        confirmButtonText: t('Actions.confirm'),
-        cancelButtonText: t('Actions.cancel'),
-        type: 'warning',
-      },
-    )
-      .then(() => {
-        emit('back')
-      })
-  }
-  else {
-    emit('back')
-  }
-}
-
-const isEvent = ref(inject('isEvent'))
-const isPlayout = ref(inject('isPlayout'))
-const [pteValue] = register('channelConfig.pte')
-const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent, isPlayout })
-const configPte = computed(() => {
-  if (!isPlayout.value) {
-    return {
-      machineId: transcodeInput.value?.machineConfig?.machineId,
-      machineType: transcodeInput.value?.machineConfig?.machineType,
-      pte: pteValue.value,
-    }
-  }
-  else {
-    return {
-      machineId: formValue.value?.channelConfig?.machineConfig?.machineId,
-      machineType: formValue.value?.channelConfig?.machineConfig?.machineType,
-      pte: pteValue.value,
-    }
-  }
-})
-provide('configPte', configPte)
-</script>
-
-<template>
-  <el-scrollbar class="[&_.el-scrollbar\_\_view]:flex-1">
-    <div class="min-h-[calc(100%-40px)] flex gap-24px">
-      <div class="relative w-200px pr-12px">
-        <div class="sticky top-0">
-          <el-tree
-            class="w-200px [&_.el-tree-node\_\_content]:h-[var(--el-tree-height,36px)]"
-            :data="dataSource"
-            default-expand-all
-            :expand-on-click-node="false"
-            :props="{
-              class: (data, node) => {
-                if (data.error) {
-                  return 'error-item'
-                }
-                if (data.active) {
-                  return 'active-item'
-                }
-              },
-            }"
-            @node-click="handleNodeClick"
-          >
-            <template #default="{ node, data }">
-              <div class="w-full flex flex-col">
-                <div class="group flex flex-1 items-center justify-between pr-8px text-14px">
-                  <div class="flex items-center gap-6px">
-                    <el-icon :size="18" :class="data.icon" />
-                    <div
-                      class="min-w-120px flex justify-between text-16px font-semibold"
-                      :class="{ 'font-bold': data.active, 'opacity-40': data.id === 'target-item' && data.enable }"
-                    >
-                      {{ node.label }}
-                    </div>
-                  </div>
-                  <el-dropdown v-if="data.addOption && data.addable" placement="bottom-start" trigger="click">
-                    <el-button
-                      type="primary"
-                      plain
-                      circle
-                      size="small"
-                      @click.stop="data.onClick(data)"
-                    >
-                      <template #icon>
-                        <div class="i-ep:plus" />
-                      </template>
-                    </el-button>
-
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item
-                          @click="() => {
-                            isShowModifierForm = true
-                            isAllowEditingTarget = true
-                          }"
-                        >
-                          {{ t('SSConfig.new_profile') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                          @click="() => {
-                            isShowProfileSetList = true
-                            isAllowEditingTarget = true
-                          }"
-                        >
-                          {{ t('SSConfig.template') }}
-                        </el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                  <el-button
-                    v-else-if="!data.addOption && data.addable"
-                    type="primary"
-                    plain
-                    circle
-                    size="small"
-                    @click.stop="() => {
-                      data.onClick(data)
-                      isAllowEditingTarget = true
-                    }"
-                  >
-                    <template #icon>
-                      <div class="i-ep:plus" />
-                    </template>
-                  </el-button>
-                  <el-button
-                    v-else-if="data.changable"
-                    type="primary"
-                    circle
-                    plain
-                    size="small"
-                    @click.stop="() => {
-                      data.onClickChange(data)
-                      isAllowEditingTarget = true
-                    }"
-                  >
-                    <template #icon>
-                      <div class="i-ep:switch" />
-                    </template>
-                  </el-button>
-                </div>
-                <span class="text-12px text-danger">{{ data.error }}</span>
-              </div>
-            </template>
-          </el-tree>
-        </div>
-      </div>
-      <el-card class="mr-12px w-full">
-        <el-form
-          ref="formRef"
-          :model="formValue"
-          label-width="120px"
-          label-position="top"
-          class="mr-12px w-full"
-          @validate="handleValidate"
-        >
-          <SSChannelConfigForm v-show="activeName === 'configs'" v-model="formValue" />
-          <SSChannelAIConfig v-show="activeName === 'ai'" v-model="formValue" />
-          <LazySSChannelProfileList
-            v-show="activeName === 'profiles'"
-            @add-profile="addProfile"
-            @delete-profile="deleteProfile"
-          />
-          <template v-for="(profile, idx) in formValue.profiles" :key="profile.id">
-            <LazySSChannelProfileForm
-              v-show="activeName === 'profile-item' && activeItem && activeIndex === idx"
-              :idx="idx"
-              @remove-profile="handleRemoveProfile(profile.id)"
-            />
-          </template>
-
-          <LazySSChannelTargetList
-            v-show="activeName === 'targets'"
-            @add-target="isShowOutputSetList = true"
-            @remove-target="handleRemoveOutput"
-          />
-          <template v-for="(_target, idx) in targetsValue" :key="_target.id">
-            <LazySSChannelTargetForm
-              v-show="activeName === 'target-item' && activeItem && activeIndex === idx"
-              :idx="idx"
-              @remove-target="handleRemoveOutput(_target.id)"
-            />
-          </template>
-        </el-form>
-      </el-card>
-    </div>
-    <DevOnly>
-      <VueJsonPretty :data="formValue" />
-    </DevOnly>
-  </el-scrollbar>
-  <div class="flex items-center justify-end border-t-1px border-$el-fill-color-light pt-4">
-    <el-button @click="onBack">
-      {{ $t('Actions.back') }}
-    </el-button>
-    <el-button type="primary" @click="handleSubmit">
-      {{ $t('general.save') }}
-    </el-button>
-  </div>
-
-  <!-- SECTION: Profile dialog -->
-  <SSChannelMultipleSelectProfile
-    v-model:selected-profiles="selectProfiles"
-    :is-show-profile-set-list="isShowProfileSetList"
-    @select-multiple-profile="selectProfile"
-    @close="isShowProfileSetList = false"
-  />
-
-  <!-- SECTION: Targets: Output -->
-  <el-dialog
-    v-model="isShowOutputSetList"
-    :title="t('EventChannel.form.label.selectOutput')"
-    width="500px"
-    align-center
-    destroy-on-close
-    append-to-body
-  >
-    <SSChannelTargetOutputType @submit="selectTarget" @cancel="isShowOutputSetList = false" />
-  </el-dialog>
-
-  <!-- Add new profile -->
-  <SSChannelMediaProfileModify
-    v-if="isShowModifierForm"
-    v-model:visible="isShowModifierForm"
-    modify-title="Create Profile"
-    mode="custom"
-    @new-custom="addCustomProfile"
-    @close="isShowModifierForm = false"
-    @added="isShowModifierForm = false"
-  />
-</template>
-
-<style lang="scss">
-.active-item > .el-tree-node__content {
-  @apply text-primary bg-$el-fill-color-light rounded-1;
-}
-
-.error-item > .el-tree-node__content {
-  @apply text-danger bg-$el-color-danger-light-7 rounded-1;
-  --el-tree-height: 52px;
-}
-</style>
+<script lang="ts" setup>
+import * as R from 'remeda'
+// import ChannelConfigForm from './ConfigForm.vue'
+// import ChannelTargetOutputType from './TargetOutputType.vue'
+// import ChannelTargetForm from './TargetForm.vue'
+// import ChannelTargetList from './TargetList.vue'
+// import ChannelMediaProfileModify from './MediaProfileModify.vue'
+import type { components } from '#nuxt-api-party/transcodeApi'
+
+const emit = defineEmits<{
+  submit: [payload: components['schemas']['CreateChannelDto']]
+  back: []
+}>()
+
+const { defaultValue: channelValueDefault } = definePropsRefs<{
+  defaultValue: components['schemas']['CreateChannelDto']
+}>()
+
+const { t } = useI18n()
+const isCreateQuick = ref(true)
+
+const initialValues = ref({
+  ...klona(channelValueDefault.value),
+  channelConfig: {
+    ...klona(channelValueDefault.value.channelConfig),
+    nameModifier: channelValueDefault.value.channelConfig.nameModifier || channelValueDefault.value.name,
+  },
+})
+
+const { getOutputDefault } = useParamsChannelDefault()
+
+// // SECTION: form
+// const isEditMode = computed(() => !!channelId.value && action.value !== 'clone')
+// const submitCommand = ref('')
+// const { addMutation, editMutation, addQuickMutation } = useChannelMutation()
+
+// function normalizeChannel(value: CreateChannelDto) {
+//   // handle source index
+//   value.profiles = value?.profiles?.map(profile => ({
+//     ...profile,
+//     presets: profile.presets?.map(preset => ({ ...preset, sourceIndex: profile.sourceIndex })),
+//   }))
+
+//   value.channelConfig.watermark = value?.channelConfig?.watermark?.map((item) => {
+//     delete item._id
+//     return item
+//   })
+//   return value
+// }
+
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, register, registerArray } = useElForm<components['schemas']['CreateChannelDto']>({
+  initialValues,
+  async onSubmit(values) {
+    emit('submit', values)
+  },
+})
+const serverConfig = computed(() => {
+  return formValue.value.channelConfig.machineConfig
+})
+useProvideServerConfigStore(serverConfig)
+
+const [targetsValue, targetsAttrs, { remove }] = registerArray<any[]>(getProp('targets'), [])
+const [profilesValue, profilesAttrs, { remove: removeP, add: addP }] = registerArray<any[]>(getProp('profiles'), [])
+const selectProfiles = ref<TargetProfileDto[]>(profilesValue.value || [])
+provide('profilesValue', profilesValue)
+
+const [encoderIdValue] = registerArray<any[]>(getProp('channelConfig.machineConfig.encoderId'), [])
+provide('encoderIdValue', encoderIdValue)
+
+const activeName = ref('configs')
+const activeItem = ref(null)
+const activeIndex = ref(-1)
+
+// // SECTION: server
+
+// // SECTION: profile
+const isShowProfileSetList = ref(false)
+
+// target output
+const isShowOutputSetList = ref(false)
+
+onBeforeRouteLeave((to, from, next) => {
+  const pass = to.query.pass
+  if (pass) {
+    next()
+    return
+  }
+
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_leave_the_whole_data_will_be_lost'),
+    'Warning',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      next()
+    })
+})
+
+const isBlockEdit = ref(false)
+provide('isBlockEdit', isBlockEdit)
+
+const sampleWatermark = {
+  enable: false,
+  x: 0,
+  y: 0,
+  mediaScale: 1,
+  delay: 0,
+  assetId: '',
+  assetSrc: logoOnFastLink,
+  width: 120,
+  height: 88,
+}
+
+function addCustomProfile(profile: any) {
+  profile.nameModifier = profile.name
+  addP({ ...profile, watermark: klona(sampleWatermark) })
+
+  selectProfiles.value = profilesValue.value
+
+  activeName.value = 'profile-item'
+  activeItem.value = profile
+  activeIndex.value = formValue.value.profiles.length - 1
+  isShowProfileSetList.value = false
+}
+
+function addMultipleSelectProfile(profile: any) {
+  const idsNotIn = profilesValue.value.filter(item => !selectProfiles.value.some(el => el.id === item.id)).map(item => item.id)
+
+  idsNotIn.map(el => removeP(el))
+  selectProfiles.value.forEach((item) => {
+    const exists = profilesValue.value.some(el => el.id === item.id)
+    if (!exists) {
+      item.nameModifier = item.name
+      addP({ ...item, watermark: klona(sampleWatermark) })
+    }
+  })
+
+  activeName.value = 'profile-item'
+  activeItem.value = profile
+  activeIndex.value = formValue.value.profiles.length - 1
+}
+
+function selectProfile(profile: any) {
+  selectProfiles.value = profile
+
+  if (selectProfiles.value?.length)
+    addMultipleSelectProfile(profile)
+}
+
+function selectTarget(output: TargetDataDtoFormatEnum) {
+  isShowOutputSetList.value = false
+  // TODO: please check the edit case
+  const outputDefault = { ...getOutputDefault(output), id: genUUID() }
+  formValue.value.targets.push(outputDefault)
+
+  activeName.value = 'target-item'
+  activeItem.value = outputDefault
+  activeIndex.value = formValue.value.targets.length - 1
+}
+
+const isShowModifierForm = ref(false)
+
+const isAllowEditingTarget = ref(false)
+provide('isAllowEditingTarget', isAllowEditingTarget)
+const dataSource = computed(() => {
+  return [
+    {
+      id: 'configs',
+      label: 'Config',
+      active: activeName.value === 'configs',
+      icon: 'i-carbon:settings',
+      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
+    },
+    {
+      id: 'ai',
+      label: 'AI Advanced Config',
+      active: activeName.value === 'ai',
+      icon: 'i-carbon:ai-launch',
+      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
+    },
+    {
+      id: 'profiles',
+      label: 'Profiles',
+      active: activeName.value === 'profiles',
+      addable: (() => {
+        if (formValue.value.profiles.length < 10)
+          return true
+        else return false
+      })(),
+      addOption: true,
+      onClick: () => {
+      },
+      icon: 'i-ep:set-up',
+      error: hasError(formErrors.value, ['profiles']) ? 'Profile error' : '',
+      children: formValue.value.profiles?.map((item, idx) => {
+        return {
+          id: 'profile-item',
+          label: item.name,
+          item,
+          idx,
+          deletable: true,
+          error: hasError(formErrors.value?.profiles, [`${idx}`]) ? 'Error' : '',
+          active: activeName.value === 'profile-item' && activeItem.value?.id === item.id,
+        }
+      }),
+    },
+    {
+      id: 'targets',
+      label: 'Targets',
+      icon: 'i-ep:finished',
+      addable: formValue.value?.targets?.length < 10,
+      onClick: () => {
+        if (formValue.value.targets.length < 10)
+          isShowOutputSetList.value = true
+      },
+      active: activeName.value === 'targets',
+      error: hasError(formErrors.value, ['targets']) ? 'Target error' : '',
+      children: formValue.value.targets?.map((item, idx) => {
+        return {
+          id: 'target-item',
+          enable: !item.enable,
+          label: `${idx + 1}_${item.data?.format}`,
+          item,
+          idx,
+          deletable: true,
+          error: hasError(formErrors.value.targets, [`${idx}`]) ? 'Error' : '',
+          active: activeName.value === 'target-item' && activeItem.value?.id === item.id,
+        }
+      }),
+    },
+  ]
+})
+
+function addProfile(action: string) {
+  if (action === 'select')
+    isShowProfileSetList.value = true
+  else
+    isShowModifierForm.value = true
+}
+
+function handleNodeClick(data: any) {
+  activeName.value = data.id
+  activeItem.value = data.item
+  activeIndex.value = data.idx
+}
+
+function handleRemoveProfile(id: string) {
+  isAllowEditingTarget.value = true
+  formValue.value.profiles = formValue.value.profiles.filter(item => item.id !== id)
+  activeName.value = 'profiles'
+  activeItem.value = null
+  activeIndex.value = -1
+  const index = formValue.value.profiles?.findIndex(item => item.id === id)
+  if (index !== -1) {
+    formErrors.value?.profiles?.splice(index, 1)
+    cleanEmptyObjectAndArray(formErrors.value)
+  }
+
+  selectProfiles.value = formValue.value.profiles
+  // selectProfile(profilesValue.value)
+}
+
+function getProp(path: string) {
+  return () => path
+}
+
+function handleRemoveOutput(id: string) {
+  activeName.value = 'targets'
+  activeItem.value = null
+  activeIndex.value = -1
+  remove(id)
+}
+
+function handleCommand(command: string) {
+  submitCommand.value = command
+  handleSubmit()
+}
+
+function deleteProfile(idx: number) {
+  ElMessageBox.confirm(
+    t('SSConfig.are_you_sure_you_want_to_delete'),
+    'Warning',
+    {
+      confirmButtonText: t('Actions.confirm'),
+      cancelButtonText: t('Actions.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      isAllowEditingTarget.value = true
+      formValue.value.profiles.splice(idx, 1)
+      selectProfiles.value = formValue.value.profiles
+      // selectProfile(profilesValue.value)
+    })
+}
+
+function onBack() {
+  if (!R.equals(formValue.value, channelValueDefault.value)) {
+    ElMessageBox.confirm(
+      t('channel.are_you_sure_you_want_to_go_back_this_will_discard_any_unsaved_changes'),
+      'Warning',
+      {
+        confirmButtonText: t('Actions.confirm'),
+        cancelButtonText: t('Actions.cancel'),
+        type: 'warning',
+      },
+    )
+      .then(() => {
+        emit('back')
+      })
+  }
+  else {
+    emit('back')
+  }
+}
+
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const [pteValue] = register('channelConfig.pte')
+const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent, isPlayout })
+const configPte = computed(() => {
+  if (!isPlayout.value) {
+    return {
+      machineId: transcodeInput.value?.machineConfig?.machineId,
+      machineType: transcodeInput.value?.machineConfig?.machineType,
+      pte: pteValue.value,
+    }
+  }
+  else {
+    return {
+      machineId: formValue.value?.channelConfig?.machineConfig?.machineId,
+      machineType: formValue.value?.channelConfig?.machineConfig?.machineType,
+      pte: pteValue.value,
+    }
+  }
+})
+provide('configPte', configPte)
+</script>
+
+<template>
+  <el-scrollbar class="[&_.el-scrollbar\_\_view]:flex-1">
+    <div class="min-h-[calc(100%-40px)] flex gap-24px">
+      <div class="relative w-200px pr-12px">
+        <div class="sticky top-0">
+          <el-tree
+            class="w-200px [&_.el-tree-node\_\_content]:h-[var(--el-tree-height,36px)]"
+            :data="dataSource"
+            default-expand-all
+            :expand-on-click-node="false"
+            :props="{
+              class: (data, node) => {
+                if (data.error) {
+                  return 'error-item'
+                }
+                if (data.active) {
+                  return 'active-item'
+                }
+              },
+            }"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ node, data }">
+              <div class="w-full flex flex-col">
+                <div class="group flex flex-1 items-center justify-between pr-8px text-14px">
+                  <div class="flex items-center gap-6px">
+                    <el-icon :size="18" :class="data.icon" />
+                    <div
+                      class="min-w-120px flex justify-between text-16px font-semibold"
+                      :class="{ 'font-bold': data.active, 'opacity-40': data.id === 'target-item' && data.enable }"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                  <el-dropdown v-if="data.addOption && data.addable" placement="bottom-start" trigger="click">
+                    <el-button
+                      type="primary"
+                      plain
+                      circle
+                      size="small"
+                      @click.stop="data.onClick(data)"
+                    >
+                      <template #icon>
+                        <div class="i-ep:plus" />
+                      </template>
+                    </el-button>
+
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          @click="() => {
+                            isShowModifierForm = true
+                            isAllowEditingTarget = true
+                          }"
+                        >
+                          {{ t('SSConfig.new_profile') }}
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          @click="() => {
+                            isShowProfileSetList = true
+                            isAllowEditingTarget = true
+                          }"
+                        >
+                          {{ t('SSConfig.template') }}
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    v-else-if="!data.addOption && data.addable"
+                    type="primary"
+                    plain
+                    circle
+                    size="small"
+                    @click.stop="() => {
+                      data.onClick(data)
+                      isAllowEditingTarget = true
+                    }"
+                  >
+                    <template #icon>
+                      <div class="i-ep:plus" />
+                    </template>
+                  </el-button>
+                  <el-button
+                    v-else-if="data.changable"
+                    type="primary"
+                    circle
+                    plain
+                    size="small"
+                    @click.stop="() => {
+                      data.onClickChange(data)
+                      isAllowEditingTarget = true
+                    }"
+                  >
+                    <template #icon>
+                      <div class="i-ep:switch" />
+                    </template>
+                  </el-button>
+                </div>
+                <span class="text-12px text-danger">{{ data.error }}</span>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+      <el-card class="mr-12px w-full">
+        <el-form
+          ref="formRef"
+          :model="formValue"
+          label-width="120px"
+          label-position="top"
+          class="mr-12px w-full"
+          @validate="handleValidate"
+        >
+          <SSChannelConfigForm v-show="activeName === 'configs'" v-model="formValue" />
+          <SSChannelAIConfig v-show="activeName === 'ai'" v-model="formValue" />
+          <LazySSChannelProfileList
+            v-show="activeName === 'profiles'"
+            @add-profile="addProfile"
+            @delete-profile="deleteProfile"
+          />
+          <template v-for="(profile, idx) in formValue.profiles" :key="profile.id">
+            <LazySSChannelProfileForm
+              v-show="activeName === 'profile-item' && activeItem && activeIndex === idx"
+              :idx="idx"
+              @remove-profile="handleRemoveProfile(profile.id)"
+            />
+          </template>
+
+          <LazySSChannelTargetList
+            v-show="activeName === 'targets'"
+            @add-target="isShowOutputSetList = true"
+            @remove-target="handleRemoveOutput"
+          />
+          <template v-for="(_target, idx) in targetsValue" :key="_target.id">
+            <LazySSChannelTargetForm
+              v-show="activeName === 'target-item' && activeItem && activeIndex === idx"
+              :idx="idx"
+              @remove-target="handleRemoveOutput(_target.id)"
+            />
+          </template>
+        </el-form>
+      </el-card>
+    </div>
+    <DevOnly>
+      <VueJsonPretty :data="formValue" />
+    </DevOnly>
+  </el-scrollbar>
+  <div class="flex items-center justify-end border-t-1px border-$el-fill-color-light pt-4">
+    <el-button @click="onBack">
+      {{ $t('Actions.back') }}
+    </el-button>
+    <el-button type="primary" @click="handleSubmit">
+      {{ $t('general.save') }}
+    </el-button>
+  </div>
+
+  <!-- SECTION: Profile dialog -->
+  <SSChannelMultipleSelectProfile
+    v-model:selected-profiles="selectProfiles"
+    :is-show-profile-set-list="isShowProfileSetList"
+    @select-multiple-profile="selectProfile"
+    @close="isShowProfileSetList = false"
+  />
+
+  <!-- SECTION: Targets: Output -->
+  <el-dialog
+    v-model="isShowOutputSetList"
+    :title="t('EventChannel.form.label.selectOutput')"
+    width="500px"
+    align-center
+    destroy-on-close
+    append-to-body
+  >
+    <SSChannelTargetOutputType @submit="selectTarget" @cancel="isShowOutputSetList = false" />
+  </el-dialog>
+
+  <!-- Add new profile -->
+  <SSChannelMediaProfileModify
+    v-if="isShowModifierForm"
+    v-model:visible="isShowModifierForm"
+    modify-title="Create Profile"
+    mode="custom"
+    @new-custom="addCustomProfile"
+    @close="isShowModifierForm = false"
+    @added="isShowModifierForm = false"
+  />
+</template>
+
+<style lang="scss">
+.active-item > .el-tree-node__content {
+  @apply text-primary bg-$el-fill-color-light rounded-1;
+}
+
+.error-item > .el-tree-node__content {
+  @apply text-danger bg-$el-color-danger-light-7 rounded-1;
+  --el-tree-height: 52px;
+}
+</style>