<template>
  <div class="form-header">
    <div class="form-header-left">
      <a-space :size="16">
        <a-button shape="circle" @click="backClick">
          <template #icon>
            <left-outlined />
          </template>
        </a-button>
        <span class="form-name">{{ props.formModelName }}</span>
      </a-space>
    </div>
    <div class="form-header-center">
      <a-tabs v-model:activeKey="activeKey" @change="equipmentTypeChange" class="devops-tabs">
        <a-tab-pane key="1" tab="PC端"> </a-tab-pane>
        <a-tab-pane key="2" tab="移动端"> </a-tab-pane>
      </a-tabs>
    </div>
    <div class="form-header-right">
      <a-space :size="16">
        <a-button class="border-radius green-color" ghost @click="formParamsClick">表单属性</a-button>
        <a-button class="border-radius green-color" ghost @click="loadData">数据加载</a-button>
        <a-button class="border-radius green-color" @click="preview">预览效果</a-button>
        <a-button class="border-radius" danger type="primary" @click="clearAll">清空</a-button>
        <a-button type="primary" class="border-radius" @click="upgradeAndSave">升级并保存</a-button>
        <a-button type="primary" class="border-radius" @click="save">保存</a-button>
      </a-space>
    </div>

    <!-- 预览弹框 -->
    <form-preview v-model:visible="showPreview" v-if="showPreview" :formConfig="formConfig"></form-preview>
    <!-- 自定义js弹框 -->
    <FormCustomData v-model:visible="showCustom" v-if="showCustom" :formConfig="formConfig"></FormCustomData>
    <!-- 表单属性 -->
    <FormParamsConfig v-model:visible="showFormParams" v-if="showFormParams" :formConfig="formConfig" />
  </div>
</template>

<script setup name="FormHeader">
import { ref, inject, defineAsyncComponent } from 'vue';
import FormPreview from '../../preview/index.vue';
import FormCustomData from './diaolog/custom-data.vue';

const props = defineProps({
  // 当前表单模型名称
  formModelName: String
});

const emits = defineEmits(['save', 'clearAll', 'back', 'upgradeAndSave', 'typeChange']);

const FormParamsConfig = defineAsyncComponent(() => import('./diaolog/form-params-config.vue'));

// 表单配置项
const formConfig = inject('formConfig');

// 是否显示预览弹框
const showPreview = ref(false);
// 是否显示自定义js弹框
const showCustom = ref(false);
// 类型选中
const activeKey = ref('1');

const showFormParams = ref(false);

// 返回
const backClick = () => {
  emits('back');
};

// 预览
const preview = () => {
  showPreview.value = true;
};

// 升级并报错保存
const upgradeAndSave = () => {
  emits('upgradeAndSave');
};

// 保存
const save = () => {
  emits('save');
};

// 清除所有
const clearAll = () => {
  emits('clearAll');
};

//数据加载
const loadData = () => {
  showCustom.value = true;
};

// 设备类型改变
const equipmentTypeChange = (val) => {
  emits('typeChange', val);
}

const formParamsClick = () => {
  showFormParams.value = true;
}
</script>

<style></style>
