<!-- 开始节点配置 -->
<template>
  <div class="start-event">

    <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <a-form-item label="节点标识">
        <a-input v-model:value="node.id" placeholder="请输入" readonly />
      </a-form-item>
      <a-form-item label="下一审核人">
        <a-switch v-model:checked="node.isNextAuditor" />
      </a-form-item>
      <a-form-item label="自定义标题">
        <a-switch v-model:checked="node.isCustmerTitle" />
      </a-form-item>
      <a-form-item label="通知策略" name="f_Color">
        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
          :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
      </a-form-item>

      <a-divider plain="true">表单添加</a-divider>
      <a-tabs v-model:activeKey="node.formType" type="card" size="small" centered="true">
        <a-tab-pane key="1" tab="自定义表单">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-space-compact>
            <a-space-compact block>
              <a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="2" tab="系统表单">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
            </a-space-compact>
            <a-space-compact block>
              <a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
      </a-tabs>

      <a-divider plain="true">表单字段权限</a-divider>
      <a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false"
        v-if="node.formType == 1">
        <template #bodyCell="{ column, text, record }">
          <template v-if="['label', 'field'].includes(column.dataIndex)">
            <div>
              {{ text }}
            </div>
          </template>
          <template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
            <div>
              <a-switch v-model:checked="record[column.dataIndex]" />
            </div>
          </template>
        </template>
      </a-table>
      <a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false" v-else>
        <template #bodyCell="{ column, text, record }">
          <template v-if="['label', 'field'].includes(column.dataIndex)">
            <div>
              {{ text }}
            </div>
          </template>
          <template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
            <div>
              <a-switch v-model:checked="record[column.dataIndex]" />
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <delete-outlined two-tone-color='#eb2f96' @click='handleDeleteAuthField(record.field)' />
          </template>
        </template>
      </a-table>

      <a-divider plain="true"></a-divider>
      <a-space v-if="node.formType!=1">
        <a-button @click="handleAddAuthField" width="100%" type="dashed" danger :icon="h(PlusOutlined)">添加字段</a-button>
      </a-space>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
  const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false
    },
    element: Object
  })
  const data = reactive({
    columns: [
      {
        title: '名称',
        dataIndex: 'label',
      },
      {
        title: '字段',
        dataIndex: 'field',
      },
      {
        title: '必填',
        dataIndex: 'required',
      },
      {
        title: '编辑',
        dataIndex: 'isEdit',
      },
      {
        title: '查看',
        dataIndex: 'isLook',
      },


    ],
    formRelations: [],
    elementData: props.element
  })
  const node = reactive({
    id: data.elementData.id,
    type: data.elementData.type,
    isNextAuditor: false,
    isCustmerTitle: false,
    formRelations: [],
    formType: "1",
    formCode: "",
    formVerison: "",
    formRelationId: "",
    formUrl: "",
    formAppUrl: "",
    authFields: [
      {
        label: '测试',
        field: 'ceshi',
        required: true,
        isEdit: true,
        isLook: true,
      }
    ],
    messageType: "",
    isInit: true
  })
  watch(
    () => props.element,
    (newVal, oldVal) => {
      data.elementData = newVal
      node.id = data.elementData.id
      node.type = data.elementData.type
    }
  )
  watch(
    () => node.formType,
    (newVal, oldVal) => {
      if (newVal == 1) {
        data.columns = data.columns.filter(item => item.dataIndex !== 'operation');
      } else {
        data.columns.push({
          title: '',
          dataIndex: 'operation',
        })
      }
    }
  )

  
  async function custmerformChange(val) {
    this.$set(this.node, 'formRelationId', '')
    if (val == null) {
      this.node.authFields = [];
      this.node.formVerison = ''
      return;
    }
    if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
      // const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
      this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
      if (this.node.formCode == f_SchemeInfoId) {
        this.loadFormScheme(f_Scheme)
      }
    }
    else {
      this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
    }
    this.node.formVerison = val.f_SchemeId
  }
  async function custmerformVerisonChange(val) {
    this.$set(this.node, 'formRelationId', '')
    if (this.$validatenull(val)) {
      this.node.authFields = []
      return
    }
    if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
      // const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
      this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
      if (this.node.formVerison == f_Id) {

        this.loadFormScheme(f_Scheme)
      }
    }
    else {
      this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
    }
  }
  function loadFormScheme(strScheme) {
    const scheme = JSON.parse(strScheme)
    const fields = []
    const rfields = []
    scheme.formInfo.tabList.forEach(tab => {
      tab.components.forEach(component => {
        if (['guid'].includes(component.type)) {
          rfields.push({ label: component.label, value: component.prop })
        }

        if (!['gridtable', 'divider'].includes(component.type) && component.display) {
          fields.push({
            prop: component.prop,
            field: component.field,
            label: component.label,
            table: component.table,
            required: component.required,
            isEdit: true,
            isLook: true
          })
        }
        else if (['gridtable'].includes(component.type)) {
          fields.push({
            prop: `${component.prop}_add`,
            label: `${component.label || '表格'}-添加按钮`,
            required: false,
            isEdit: true,
            isLook: false,
            type: 'grid'
          })
          fields.push({
            prop: `${component.prop}_remove`,
            label: `${component.label || '表格'}-删除按钮`,
            required: false,
            isEdit: true,
            isLook: false,
            type: 'grid'
          })

          fields.push({
            prop: `${component.prop}_required`,
            label: `${component.label || '表格'}-数据`,
            required: component.required,
            isEdit: false,
            isLook: false,
            type: 'gridrequired'
          })
          fields.push(...component.children.filter(t => t.display).map(t => {
            return {
              gridprop: component.prop,
              prop: t.prop,
              field: t.field,
              label: `${component.label || '表格'}-${t.label}`,
              table: component.table,
              required: t.required,
              isEdit: true,
              isLook: true
            }
          }))
        }
      })
    })



    this.node.formRelations = rfields
    this.node.authFields = fields

  }
  function handleFormTypeChange() {
    this.node.formCode = ''
    this.node.formUrl = ''
    this.node.formAppUrl = ''
    this.node.authFields = []
    this.node.formRelations = []

    this.$set(this.node, 'formRelationId', '')

  }
  function handleAddAuthField() {
    node.authFields.push({
      field: '',
      label: '',
      required: true,
      isEdit: true,
      isLook: true
    })
  }
  function handleDeleteAuthField(key) {
    node.authFields = node.authFields.filter(item => item.field !== key);
  }

</script>
<style lang="less" scoped>
  .site-space-compact-wrapper {
    width: 100%;

    .ant-select {
      width: 100%;
    }
  }

  ::v-deep .ant-tabs {
    padding: 0 !important;
  }

  ::v-deep .ant-space {
    width: 90%;
    margin-left: 5%;

    .ant-space-item {
      width: 100%;

      button {
        width: 100%;
      }
    }
  }
</style>