import { ref, Ref, unref, computed } from 'vue'
import { Message, MessageBox } from 'element-ui'

export default function (propertyState: any, tables: Ref<any[]>) {
  const sourceTable = ref([])
  function selectSource(sourceField: number) {
    const item: any = propertyState.sourceFieldList.find((a: any) => a.id === sourceField);
    if (item.type.includes('TABLE')) {
      sourceTable.value = item.itemList
    } else {
      sourceTable.value = [];
    }
  }
  const targetTable = ref([])
  function selectTarget(targetField: number) {
    const item: any = propertyState.targetFieldList.find((a: any) => a.id === targetField);
    if (item.type.includes('TABLE')) {
      targetTable.value = item.itemList
    } else {
      targetTable.value = [];
    }
  }
  const keys = computed(() => {
    return unref(tables).filter((item: any) => item.sourceValue && item.targetValue).map((item: any) => {
      return `${item.sourceValue}-${item.targetValue}`
    })
  });
  function getDisabled(record: any, item: any, type: string) {
    if (!record.targetValue && !record.sourceValue) return false;
    return keys.value.includes(type === 'source' ? `${item.id}-${record.targetValue}` : `${record.sourceValue}-${item.id}`)
  }
  function handleAddTable() {
    tables.value.push({})
  }
  function handleDeleteTable(index: number) {
    MessageBox.confirm('您确定要删除吗?', '提示', {
      confirmButtonClass: 'el-button--danger',
      type: 'warning'
    })
      .then(async () => {
        tables.value.splice(index, 1)
      })
      .catch(e => {})
  }
  return {
    sourceTable,
    targetTable,
    selectSource,
    selectTarget,
    getDisabled,
    handleAddTable,
    handleDeleteTable
  }
}