<template>
  <div class="wh100">
    <div class="describe">说明：用来维护流程流转过程中、各个节点需要使用到的属性信息、主要用在条件判断节点</div>
    <div class="add">
      <a-button type="primary" class="border-radius" @click="addEvent"><PlusOutlined />新增变量</a-button>
    </div>
    <a-table :dataSource="modelVariableList" :columns="columns" bordered size="small" :pagination="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'index'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex == 'variableName'">
          <a-input v-model:value="record.variableName" placeholder="请输入"></a-input>
        </template>
        <template v-if="column.dataIndex == 'variableCode'">
          <a-input v-model:value="record.variableCode" placeholder="请输入"></a-input>
        </template>
        <template v-if="column.dataIndex == 'description'">
          <a-input v-model:value="record.description" placeholder="请输入"></a-input>
        </template>
        <template v-if="column.dataIndex == 'action'">
          <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="remove(index)"></icon-font>
        </template>
      </template>
    </a-table>
    <div class="add"><a-button type="primary" class="border-radius" @click="onSave">保存</a-button></div>
  </div>
</template>

<script setup name="FlowVariableDrawer">
import { ref } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import { deepClone } from '@/utils/common/util';

const props = defineProps({});

const emits = defineEmits(['save']);

// Store
const flowStore = useWorkflowStore();

// 显示侧边
const show = async () => {
  modelVariableList.value = deepClone(flowStore.flowGlobalConfig.modelVariableList);
};

// 流程变量列表
const modelVariableList = ref([]);

// 表格配置
const columns = ref([
  {
    title: '序号',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '显示名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'variableName'
  },
  {
    title: '属性名',
    width: 150,
    ellipsis: true,
    dataIndex: 'variableCode'
  },
  {
    title: '描述',
    width: 200,
    ellipsis: true,
    dataIndex: 'description'
  },
  {
    title: '操作',
    width: 60,
    dataIndex: 'action'
  }
]);

// 侧边保存
const onSave = () => {
  flowStore.setModelVariableList(modelVariableList.value);
  emits('save');
};

// 新增变量
const addEvent = () => {
  let obj = {
    variableName: null,
    variableCode: null,
    description: null
  };
  modelVariableList.value.push(obj);
};

// 删除
const remove = index => {
  modelVariableList.value.splice(index, 1);
};

defineExpose({
  show,
  modelVariableList
});
</script>

<style scoped lang="less">
.describe {
  color: #a6a6a6;
}
.add {
  margin: 15px 0;
}
</style>
