<template>
  <Dialog
    class="vtj-code-factory"
    title="设置"
    top="50%"
    width="70%"
    height="80%"
    :body-padding="false">
    <div class="vtj-code-factory__wrapper">
      <ElTabs
        class="vtj-code-factory__cate"
        tab-position="left"
        type="border-card">
        <ElTabPane label="状态数据" lazy>
          <CodeFactoryPanel
            field="state"
            label="状态数据"
            dataType="JSExpression"
            :file="props.file"
            :list="state"
            :update="setState"
            :remove="removeState"></CodeFactoryPanel>
        </ElTabPane>
        <ElTabPane label="计算属性" lazy>
          <CodeFactoryPanel
            field="computed"
            label="计算属性"
            dataType="JSFunction"
            :file="props.file"
            :list="computedList"
            :update="setComputed"
            :remove="removeComputed"></CodeFactoryPanel>
        </ElTabPane>
        <ElTabPane label="watch" lazy>
          <CodeFactoryPanel
            field="watch"
            label="watch"
            dataType="JSFunction"
            :file="props.file"
            :list="watchList"
            :update="setWatch"
            :remove="removeWatch"></CodeFactoryPanel>
        </ElTabPane>
        <ElTabPane label="自定义方法" lazy>
          <CodeFactoryPanel
            field="methods"
            label="自定义方法"
            dataType="JSFunction"
            :file="props.file"
            :list="methods"
            :update="setMethod"
            :remove="removeMethod"></CodeFactoryPanel>
        </ElTabPane>
        <ElTabPane label="生命周期" lazy>
          <CodeFactoryPanel
            field="lifeCycles"
            label="生命周期"
            dataType="JSFunction"
            :file="props.file"
            :list="lifeCycles"
            :update="setLifeCycle"
            :remove="removeLifeCycle"></CodeFactoryPanel>
        </ElTabPane>
        <ElTabPane label="数据管理" lazy>
          <CodeFactoryDataSources :file="props.file"></CodeFactoryDataSources>
        </ElTabPane>
        <ElTabPane label="CSS" lazy>
          <CodeFactoryCss :file="props.file">></CodeFactoryCss>
        </ElTabPane>
      </ElTabs>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import Dialog from './Dialog.vue';
import CodeFactoryPanel from './CodeFactoryPanel.vue';
import CodeFactoryDataSources from './CodeFactoryDataSources.vue';
import CodeFactoryCss from './CodeFactoryCss.vue';
import { ElTabs, ElTabPane } from 'element-plus';
import { IFile, JSExpression, JSFunction, WatchSchema } from '@vtj/engine';
import { computed } from 'vue';

export interface Props {
  file: IFile;
}

const props = defineProps<Props>();

const state = computed(() => {
  const record = props.file.state || {};
  return Object.keys(record).map((name) => {
    return {
      name,
      value: record[name]
    };
  });
});

const setState = (name: string, value: JSExpression) => {
  props.file.setState(name, value);
};

const removeState = (name: string) => {
  props.file.removeState(name);
};

const methods = computed(() => {
  const record = props.file.methods || {};
  return Object.keys(record).map((name) => {
    return {
      name,
      value: record[name]
    };
  });
});

const setMethod = (name: string, value: JSFunction) => {
  props.file.setMethod(name, value);
};

const removeMethod = (name: string) => {
  props.file.removeMethod(name);
};

const lifeCycles = computed(() => {
  const record = props.file.lifeCycles || {};
  return Object.keys(record).map((name) => {
    return {
      name,
      value: record[name]
    };
  });
});

const setLifeCycle = (name: string, value: JSFunction) => {
  props.file.setLifeCycle(name, value);
};

const removeLifeCycle = (name: string) => {
  props.file.removeLifeCycle(name);
};

const computedList = computed(() => {
  const record = props.file.computed || {};
  return Object.keys(record).map((name) => {
    return {
      name,
      value: record[name]
    };
  });
});

const setComputed = (name: string, value: JSFunction) => {
  props.file.setComputed(name, value);
};

const removeComputed = (name: string) => {
  props.file.removeComputed(name);
};

const watchList = computed(() => {
  const record = props.file.watch || {};
  return Object.keys(record).map((name) => {
    return {
      name,
      value: record[name]
    };
  });
});

const setWatch = (name: string, value: any) => {
  const schema: WatchSchema = {
    deep: value.deep,
    immediate: value.immediate,
    handler: {
      type: value.type,
      value: value.value
    }
  };
  props.file.setWatch(name, schema);
};

const removeWatch = (name: string) => {
  props.file.removeWatch(name);
};
</script>
