<template>
  <PageContainer :pageHeaderRender="false" style="padding: 0 10px 10px 10px">
    <FullPage>
      <div class="scene-warp">
        <div class="header">
          <JEllipsis :tooltip="data.name" style="max-width: 50%">
            <span class="title">{{ data.name }}</span>
          </JEllipsis>
          <div class="type">
            <img :src="TriggerHeaderIcon[data.triggerType]" alt="scene" />
            {{ keyByLabel[data.triggerType] }}
          </div>
        </div>
        <JForm ref="sceneForm" :model="data" :colon="false" layout="vertical">
          <Device v-if="data.triggerType === 'device'" />
          <Manual v-else-if="data.triggerType === 'manual'" />
          <Timer v-else-if="data.triggerType === 'timer'" />
          <JFormItem>
            <template #label>
              <TitleComponent data="说明" style="font-size: 14px" />
            </template>
            <JTextarea v-model:value="data.description" placeholder="请输入说明" :rows="4" show-count :maxLength="200" />
          </JFormItem>
        </JForm>
        <div style="text-align: right">
          <JSpace>
            <PermissionButton @click="close"> 取消 </PermissionButton>
            <PermissionButton type="primary" :loading="loading" @click="save"> 保存 </PermissionButton>
          </JSpace>
        </div>
      </div>
    </FullPage>
  </PageContainer>
</template>

<script setup lang="ts" name="Scene">
  import { onlyMessage } from '@jdlinker/utils';
  import { storeToRefs } from 'pinia';
  import { useSceneStore } from '@jdlinker/func';
  import { TriggerHeaderIcon } from './asstes';
  import { keyByLabel } from '../typings';
  import Device from './Device/index.vue';
  import Manual from './Manual/index.vue';
  import Timer from './Timer/index.vue';
  import { modify } from '../../../../api/rule-engine/scene';
  import { JEllipsis, PermissionButton, FullPage, TitleComponent } from '@jdlinker/ui';
  import { ref, onUnmounted } from 'vue';
  // @ts-ignore
  import {
    PageContainer,
    Space as JSpace,
    Form as JForm,
    FormItem as JFormItem,
    Textarea as JTextarea
  } from 'linker-ui-components';

  type Emit = {
    (e: 'close'): void;
  };

  const props = defineProps({
    id: {
      type: String,
      defult: ''
    }
  });
  const emit = defineEmits<Emit>();
  const sceneStore = useSceneStore();
  const { data } = storeToRefs(sceneStore);
  const { getDetail, refresh } = sceneStore;
  const sceneForm = ref();
  const loading = ref(false);

  const save = async () => {
    const formData = await sceneForm.value.validateFields();
    if (formData) {
      loading.value = true;
      const branches = data.value.branches?.filter((item) => item);
      const resp: any = await modify(data.value.id!, {
        ...data.value,
        branches
      })
        .then((res) => res)
        .catch(() => {
          loading.value = false;
        });
      loading.value = false;
      if (resp.success) {
        onlyMessage('操作成功');
        emit('close');
      }
    }
  };

  const close = () => {
    emit('close');
  };

  getDetail(props.id as string);

  onUnmounted(() => {
    console.log('scene-onUnmounted');
    refresh?.();
  });
</script>

<style scoped lang="less">
  .scene-warp {
    padding: 24px;
    background-color: #fff;

    .header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 16px;

      .title {
        font-size: 20px;
        color: rgba(#000, 0.8);
        font-weight: bold;
      }

      .type {
        display: flex;
        align-items: center;
        min-width: 80px;
        margin-left: 16px;
        padding: 4px 8px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 2px;

        img {
          margin-right: 4px;
        }
      }
    }
  }
</style>
<style lang="less">
  @import './style.less';
</style>
