<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="BizObjectOAMParamsList">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createObjectOAMMapping, deleteObjectOAMMappingById, getObjectOAMMappingListByOamId, updateObjectOAMMapping } from '@/api/biz/bizObjectOAMMappingApi'
import { modelObjectOAM } from '@/utils/tool'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

const bizId = props.bizId
const objectId = props.objectId

interface ObjectOAMMapping {
  bizId: number
  objectId: number
  oamId: number
  mappingId: number
  mappingModelId: number
  mappingModelTitle: string
  mappingObjectId: number
  mappingObjectCode: string
  mappingObjectTitle: string
  mappingOamId: number
  sortNo: number
  isEdit: boolean
}

// 数据
const state = reactive({
  title: '',
  dialogVisible: false,
  loading: false,
  conditions: {
    keywords: '',
    bizId: props.bizId,
    objectId: props.objectId,
    oamId: 0,
  },
  dataList: [] as ObjectOAMMapping[],
  actionType: 1,
})

const formRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  mappingModelId: [
    { required: true, message: '请输入数据模型', trigger: 'blur' },
  ],
  mappingObjectId: [
    { required: true, message: '请输入对象', trigger: 'blur' },
  ],
  mappingObjectOamId: [
    { required: true, message: '请输入对像行为', trigger: 'blur' },
  ],
})

// 查询数据
const getData = async () => {
  state.loading = true
  const { oamId } = state.conditions
  const { data } = await getObjectOAMMappingListByOamId(bizId, objectId, oamId)
  state.loading = false
  state.dataList = data
  data.forEach((m: ObjectOAMMapping) => {
    m.isEdit = false
  })
}

const mappingTableRef = ref()
const mappingTableKey = ref(0)

function onMappingAdd() {
  state.dataList.push({
    bizId: props.bizId,
    objectId: props.objectId,
    oamId: state.conditions.oamId,
    mappingId: 0,
    mappingModelId: 0,
    mappingModelTitle: '',
    mappingObjectId: 0,
    mappingObjectCode: '',
    mappingObjectTitle: '',
    mappingOamId: 1,
    sortNo: 1,
    isEdit: true,
  })
  state.actionType = 1
}

function onMappingEdit(row: any) {
  row.isEdit = true
  state.actionType = 2
}

async function onMappingDelete(row: any) {
  const { oamId } = state.conditions
  const mappingId = row.mappingId
  await deleteObjectOAMMappingById(bizId, objectId, oamId, mappingId)
  ElMessage.success('删除成功')
  getData()
}

function onMappingCancel(row: any, index: number) {
  row.isEdit = false
  if (state.actionType === 1) {
    state.dataList.splice(index, 1)
  }
  state.actionType = 0
}

async function onMappingSave(row: any) {
  row.isEdit = false
  if (state.actionType === 1) {
    const { msg } = await createObjectOAMMapping(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  } else {
    const { msg } = await updateObjectOAMMapping(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  }
  await getData()
}

onMounted(() => {
  nextTick(() => {
  })
})

defineExpose({
  showData(oamId: number) {
    state.conditions.oamId = oamId
    getData()
  },
})
</script>

<template>
  <div class="container">
    <tool-bar>
      <template #left>
        <h5>数据对象映射</h5>
      </template>
      <template #right>
        <el-input placeholder="请输入关键词筛选" clearable style="width: 200px;" />
        <el-button style="margin-left:10px" @click="getData">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
        </el-button>

        <el-button type="default" @click="onMappingAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
        </el-button>
      </template>
    </tool-bar>

    <el-table ref="mappingTableRef" :key="mappingTableKey" :data="state.dataList" class="list-table" size="small" border stripe highlight-current-row>
      <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />

      <el-table-column label="数据模型" header-align="center" align="center" width="200">
        <template #default="scope">
          <model-selector v-if="scope.row.isEdit" v-model="scope.row.mappingModelId" size="small" />
          <span v-else>{{ scope.row.mappingModelTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数据对象" header-align="center" align="center">
        <template #default="scope">
          <model-object-selector v-if="scope.row.isEdit" v-model="scope.row.mappingObjectId" :model-id="scope.row.mappingModelId" size="small" />
          <span v-else>{{ scope.row.mappingObjectTitle }}: {{ scope.row.mappingObjectCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作行为" header-align="center" align="center" width="200">
        <template #default="scope">
          <ModelObjectOAMSelector v-if="scope.row.isEdit" v-model="scope.row.mappingOamId" size="small" />
          <span v-else>{{ modelObjectOAM(scope.row.mappingOamId) }}</span>
        </template>
      </el-table-column>

      <el-table-column header-align="center" align="center" width="70">
        <template #header>
          排序
        </template>
        <template #default>
          <el-tag type="info" class="sortable">
            <el-icon>
              <svg-icon name="i-ep:d-caret" />
            </el-icon>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="140" align="center">
        <template #default="scope">
          <template v-if="scope.row.isEdit">
            <el-button type="primary" plain size="small" @click="onMappingSave(scope.row)">
              保存
            </el-button>
            <el-button type="primary" plain size="small" @click="onMappingCancel(scope.row, scope.$index)">
              取消
            </el-button>
          </template>
          <template v-else>
            <el-button type="primary" plain size="small" @click="onMappingEdit(scope.row)">
              编辑
            </el-button>
            <el-popconfirm title="是否要删除此行？" style="margin-left: 10px;" @confirm="onMappingDelete(scope.row)">
              <template #reference>
                <el-button type="danger" plain size="small">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.page-main {
  :deep(.el-table) {
    height: 100%;

    .el-table__row {
      .index {
        display: inline-block;
      }

      .delete {
        display: none;
      }

      &:hover {
        .index {
          display: none;
        }

        .delete {
          display: inline-block;
        }
      }
    }
  }
  h5{
    padding: 0;
    margin: 0;
  }
}
</style>
