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

<script lang="ts" setup name="BizObjectOAMRuleList">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createObjectOAMRule, deleteObjectOAMRuleById, getObjectOAMRuleListByOamId, updateObjectOAMRule } from '@/api/biz/bizObjectOAMRuleApi'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

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

interface ObjectOAMRule {
  bizId: number
  objectId: number
  oamId: number
  orId: number
  ruleId: number
  ruleTitle: string
  targetAttrId: number
  targetAttrTitle: string
  targetAttrCode: string
  sortNo: number
  isEdit: boolean
}

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

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

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

const ruleTableRef = ref()
const ruleTableKey = ref(0)

function onRuleAdd() {
  state.dataList.push({
    bizId,
    objectId,
    oamId: state.search.oamId,
    orId: 0,
    ruleId: 0,
    ruleTitle: '',
    targetAttrId: 0,
    targetAttrTitle: '',
    targetAttrCode: '',
    sortNo: 1,
    isEdit: true,
  })
  state.actionType = 1
}

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

async function onRuleDelete(row: any) {
  const orId = row.orId
  const { oamId } = state.search
  const { msg } = await deleteObjectOAMRuleById(bizId, objectId, oamId, orId)
  ElMessage.success(msg)
  await getData()
}

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

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

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

  })
})

defineExpose({
  showData(oamId: number) {
    state.search.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="onRuleAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
        </el-button>
      </template>
    </tool-bar>

    <el-table ref="ruleTableRef" :key="ruleTableKey" :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="300">
        <template #default="scope">
          <biz-object-attr-selector v-if="scope.row.isEdit" v-model="scope.row.targetAttrId" :biz-id="bizId" :object-id="objectId" size="small" />
          <span v-else>{{ scope.row.targetAttrTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="应用的业务规则" header-align="center" align="center">
        <template #default="scope">
          <biz-rule-selector v-if="scope.row.isEdit" v-model="scope.row.ruleId" size="small" />
          <span v-else>{{ scope.row.ruleTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column header-align="center" align="center" width="100">
        <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="操作" align="center" width="180">
        <template #default="scope">
          <template v-if="scope.row.isEdit">
            <el-button type="primary" plain size="small" @click="onRuleSave(scope.row)">
              保存
            </el-button>
            <el-button type="primary" plain size="small" @click="onRuleCancel(scope.row, scope.$index)">
              取消
            </el-button>
          </template>
          <template v-else>
            <el-button type="primary" plain size="small" @click="onRuleEdit(scope.row)">
              编辑
            </el-button>
            <el-popconfirm title="是否要删除此行？" style="margin-left: 10px;" @confirm="onRuleDelete(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>
