<template>
  <MDrawer v-if="isAntd" :open="visible" :title="mTitle" @close="visible=false" :width="width">
    <MMorm :model="formState" v-if="form.formItems?.length" :label-col="{
      flex: form.labelWidth || '100px'
    }">
      <MFormItem :name="item.name" :label="item.helpMessage&&item.helpMessage.length?undefined:item.label" v-for="item in form.formItems" v-bind="item.formItemProps">
        <template v-if="item.helpMessage&&item.helpMessage.length" #label>
          {{ item.label }}
          <MTooltip>
            <template #title>
              <template v-if="Array.isArray(item.helpMessage)">
                <div v-for="msg in item.helpMessage" >{{ msg }}</div>
              </template>
              <template v-else>
                {{ item.helpMessage }}
              </template>
            </template>
            <img :src="QuestionSvg" />
          </MTooltip>
        </template>
        <MInput v-if="item.component == 'Input'" v-model:value="formState[item.name]" v-bind="{...item.componentProps}"></MInput>
        <MSelect v-else-if="item.component == 'Select'" v-model:value="formState[item.name]" v-bind="{...item.componentProps}"></MSelect>
        <template v-else-if="item.slot">
          <slot :name="item.slot" v-bind="currentData"></slot>
        </template>
        <component v-else :is="item.render?item.render(currentData): undefined" v-model:value="formState[item.name]" v-model="formState[item.name]" v-model:checked="formState[item.name]"  />
      </MFormItem>
    </MMorm>
  </MDrawer>
  <MDrawer v-else  v-model="visible" :title="mTitle" :size="width">
    <MMorm :model="formState" v-if="form.formItems?.length" :label-width="form.labelWidth || '100px'">
      <MFormItem :prop="item.name" :label="item.label" v-for="item in form.formItems" v-bind="item.formItemProps">
        <template v-if="item.helpMessage&&item.helpMessage.length" #label>
          {{ item.label }}
          <MTooltip placement="top">
            <template #content>
              <template v-if="Array.isArray(item.helpMessage)">
                <div v-for="msg in item.helpMessage" >{{ msg }}</div>
              </template>
              <template v-else>
                {{ item.helpMessage }}
              </template>
            </template>
            <div style="justify-content: center;align-items: center;display: flex;height:32px;"><img :src="QuestionSvg" /></div>
          </MTooltip>
        </template>
        <MInput v-if="item.component == 'Input'" v-model="formState[item.name]" v-bind="{...item.componentProps}"></MInput>
        <MSelect v-else-if="item.component == 'Select'" v-model="formState[item.name]" v-bind="{...item.componentProps}">
          <MOption v-for="(itemm,index) in item.componentProps?.options || []" :key="index" :label="itemm.label" :value="itemm.value" />
        </MSelect>
        <template v-else-if="item.slot">
          <slot :name="item.slot" v-bind="currentData"></slot>
        </template>
        <component v-else :is="item.render?item.render(currentData): undefined" v-model:value="formState[item.name]" v-model="formState[item.name]" v-model:checked="formState[item.name]"/>
      </MFormItem>
    </MMorm>
  </MDrawer>
</template>
<script setup lang="ts">
import { computed, PropType, reactive, ref, watch } from 'vue';
import UIAdapter from '../UIAdapter';
import { FDFormType } from '../../types';
import QuestionSvg from '../../assets/question.svg'

const visible = ref(false)
const props = defineProps({
  title: { // 标题
    type: String as PropType<string>
  },
  width: { // 抽屉宽度
    type: [String,Number] as PropType<string | number>,
    default: '600px'
  }
})
const mTitle = ref(props.title)
const formState = reactive<any>({})
watch(()=>props.title,()=>{
  mTitle.value = props.title
})
const uiAdapter = new UIAdapter();
const isAntd = computed(()=>{
  return uiAdapter.isAntd()
})
const MDrawer = uiAdapter.createDrawer();
const MMorm = uiAdapter.createForm();
const MFormItem = uiAdapter.createFormItem();
const MInput = uiAdapter.createInput();
const MSelect = uiAdapter.createSelect();
const MOption = uiAdapter.createOption();
const MTooltip = uiAdapter.createTooltip();
const form = ref<FDFormType>({} as any)
const currentData = ref()
let watchMap: any = {}
defineExpose({
  show(e: any){
    currentData.value = e;
    Object.keys(formState).forEach(key=>{
      formState[key] = undefined
    })
    
    form.value = e.patternItem?.form || {}
    const lf = currentData.value.lf
    const typePrefix = lf.graphModel.props.typePrefix || ''
    // 监听唯一编码变化=>修改节点id
    form.value?.formItems?.forEach(item=>{
      let stopWatch = watchMap[item.name]
      if(stopWatch) {
        stopWatch()
      }
      stopWatch = watch(()=>formState[item.name],(n, o)=>{
        if(e.data.type == 'process') {
          lf.graphModel[item.name] = n
          const { eventCenter } = lf.graphModel;
          // 触发自定义的update:graphModel
          eventCenter.emit("update:graphModel", lf.graphModel);
        } else if(e.data.type == `${typePrefix}transition`) {
          if(item.name == 'name') {
          // 如果为唯一编码，则修改节点id
            lf.changeEdgeId(o, n);
          } else if(item.name == 'displayName') {
            // 如果为显示名称，则修改节点显示名称
            lf.updateText(formState.name, n);
          } else {
            // 务属性变化=>修改节点属性
            lf.setProperties(formState.name, {
              [item.name]: n,
            });
          }
        } else {
          if(item.name == 'name') {
          // 如果为唯一编码，则修改节点id
            const lf = currentData.value.lf
            lf.changeNodeId(o, n);
          } else if(item.name == 'displayName') {
            // 如果为显示名称，则修改节点显示名称
            const lf = currentData.value.lf
            lf.updateText(formState.name, n);
          } else {
            // 务属性变化=>修改节点属性
            const lf = currentData.value.lf
            lf.setProperties(formState.name, {
              [item.name]: n,
            });
          }
        }
      }, {
        deep: true
      })
      watchMap[item.name] = stopWatch
      // 先根据默认值赋值
      if(item.defaultValue!==undefined) {
        formState[item.name] = item.defaultValue
      }
    })
    
    if(e.data.type == 'process') {
      mTitle.value = '设置流程属性'
      Object.keys(e.data.properties || {}).forEach(key=>{
        formState[key] = e.data.properties[key]
      })
    } else if(e.data.type == `${typePrefix}transition`) {
      mTitle.value = '设置边属性'
      // 赋值唯一编码
      formState.name = e.data.id
      // 赋值显示名称
      formState.displayName = e.data.text?.value
      // 赋值业务属性
      Object.keys(e.data.properties || {}).forEach(key=>{
        formState[key] = e.data.properties[key]
      })
    } else {
      if(e.patternItem?.drawerTitle) {
        mTitle.value = e.patternItem?.drawerTitle
      } else {
        if(e.patternItem?.text) {
          mTitle.value = `设置【${e.patternItem?.text.replace('节点','')}】节点属性`
        } else {
          mTitle.value = '设置属性'
        }
      }
      // 赋值唯一编码
      formState.name = e.data.id
      // 赋值显示名称
      formState.displayName = e.data.text?.value
      // 赋值业务属性
      Object.keys(e.data.properties || {}).forEach(key=>{
        formState[key] = e.data.properties[key]
      })
    }
    visible.value = true
  }
})
</script>
<style lang="less" scoped>

</style>