<template>
  <div class="list-box">
    <div class="opr-box">
      <NodeHead :nodeName="t('表单操作列表')" />
      <div class="button-box">
        <a-button type="primary" @click="addItem" class="!rounded w-82px">{{ t('添加') }}</a-button>
      </div>
    </div>
    <div :class="prefixCls" style="height: calc(100% - 42px)">
      <a-table
        size="middle"
        :columns="columns"
        :data-source="formInfo.assignmentConfig.formAssignmentConfigs"
        :pagination="false"
        :scroll="{ y: 'calc(100% - 51px)' }"
      >
        <template #headerCell="{ column }">
          <div class="header-cell__custom-title">{{ column.title }}</div>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'source'">
            <a-tree-select
              v-model:value="record.source"
              autoExpandParent
              treeDefaultExpandAll
              :tree-data="props.processParameter"
              style="width: 100%"
              :field-names="{
                children: 'children',
                label: 'name',
                value: 'id',
              }"
            />
          </template>
          <template v-if="column.key === 'target'">
            <FormTargetItem
              v-model:target="record.target"
              :formSettingTree="props.formSettingTree"
            />
          </template>
          <template v-if="column.key === 'action'">
            <div @click="deleteItem(index)" class="text-[#FF5461]">{{ t('删除') }}</div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';

  import FormTargetItem from './FormTargetItem.vue';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { storeToRefs } from 'pinia';
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const props = defineProps({
    formSettingTree: Array,
    processParameter: Array,
  });

  const store = useBpmnStore();
  const { infoId } = store;
  const { info } = storeToRefs(store);
  const formInfo = ref();
  const columns = ref([
    {
      title: t('赋值来源'),
      dataIndex: 'source',
      key: 'source',
      width: '35%',
      align: 'center',
    },
    {
      title: t('目标表单字段'),
      dataIndex: 'target',
      key: 'target',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'action',
      key: 'action',
      width: 88,
      align: 'center',
    },
  ]);
  formInfo.value = info.value.get(infoId);

  function addItem() {
    formInfo.value.assignmentConfig.formAssignmentConfigs.push({
      source: '',
      target: { key: '', formId: '', formField: '' },
    });
  }
  function deleteItem(index: number) {
    formInfo.value.assignmentConfig.formAssignmentConfigs.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .opr-box {
      display: flex;
      justify-content: space-between;
      margin: 0 10px 10px;
    }
  }

  .list {
    .row {
      height: 40px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .common {
        flex-basis: 40%;
        margin-right: 4px;
      }

      .small {
        flex-basis: 10%;
      }
    }

    .head {
      background-color: #f9f9f9;
    }

    .item {
      border-bottom: 1px solid #f9f9f9;
    }

    .delete-icon {
      color: @clear-color;
    }
  }
</style>
