<template>
  <div>
    <div style="margin-bottom: 120px">
      <el-form
        class="ip-form"
        :inline="true"
        :model="cameraEditData"
        :rules="rules"
        label-width="84px"
        label-position="left"
      >
        <el-form-item
          v-for="item in cameraSharedForm"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="cameraEditData[item.prop]"
            :placeholder="item.placeholder"
            style="width: 200px"
            :type="item.prop === 'password' ? 'password' : ''"
            :show-password="item.prop === 'password'"
            :disabled="item.disabled"
          />
          <el-tree-select
            v-if="item.type === 'tree-select'"
            v-model="cameraEditData[item.prop]"
            :data="scenesTree"
            :render-after-expand="false"
            :default-expand-all="true"
            check-strictly
            :placeholder="item.placeholder"
            style="width: 200px"
            @change="handleTreeSelect"
          />
        </el-form-item>
      </el-form>
    </div>
    <span class="pop-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </span>
  </div>
</template>

<script setup lang="ts">
  import { computed, onBeforeMount, ref } from 'vue';
  import { cameraSharedForm } from '../constant';

  import useSceneInfos from '@/hooks/useSceneInfos';
  import useCameraShare from '../stores/useCameraShare';
  import { CameraShareType } from '@/api/camera/camera-share';

  const useShare = useCameraShare();
  const { handleEdit } = useShare;

  const sceneInfos = useSceneInfos();
  const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;

  const props = defineProps<{ formData?: CameraShareType | null }>();

  const emits = defineEmits(['closeEdit']);

  const cameraEditData = ref<CameraShareType>({} as CameraShareType);

  const rules = computed(() => {
    const newRule = {};
    cameraSharedForm.forEach((item) => {
      if (item.required) {
        newRule[item.prop] = item.rule;
      }
    });
    return newRule;
  });

  const handleTreeSelect = (code: string) => {
    console.log('code', code);
    console.log('flattendWorkspaces', flattendWorkspaces.value);

    cameraEditData.value.cameraWorkspace = flattendWorkspaces.value.find(
      (item) => item.code === code,
    ).id;
  };

  const handleCancel = () => {
    emits('closeEdit');
  };

  const handleConfirm = () => {
    const updateData = {
      id: cameraEditData.value.id,
      cameraName: cameraEditData.value.cameraName,
      cameraWorkspace: cameraEditData.value.cameraWorkspace,
      cameraCode: cameraEditData.value.cameraCode,
    };
    handleEdit(updateData);
    emits('closeEdit');
  };

  onBeforeMount(() => {
    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
    if (props.formData) {
      cameraEditData.value = props.formData;
    }
  });
</script>

<style scoped>
  .ip-form {
    width: 768px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
  }

  .pop-footer {
    position: absolute;
    right: 24px;
    bottom: 27px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
    color: #363636;
    padding: 0;
  }
  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
    margin-bottom: 28px;
  }
</style>
