<template>
    <el-table :data="props.currSelect.attributes.attrs.cdata.defJob.currRunJobs" style="width: 100%">
        <el-table-column type="index" :label="t('createTable.index')" width="80">
            <template #header>
                <el-button icon="Plus" size="small" type="primary" circle @click="onAddItem"></el-button>
            </template>
            <template #default="scope">
                <el-button icon="Minus" size="small" type="danger" circle @click="handleDelete(scope.$index, scope.row)"
                           :disabled="scope.row.isConfigJob === '1'"></el-button>
            </template>
        </el-table-column>
        <el-table-column prop="sort" :label="t('runJob.sort')"  show-overflow-tooltip width="70">
            <template #default="scope">
                <el-input v-model="scope.row.sort" :placeholder="t('runJob.inputSortTip')"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="jobName" :label="t('runJob.jobName')"  show-overflow-tooltip width="150">
            <template #default="scope">
                <el-input v-model="scope.row.jobName" :placeholder="t('runJob.inputJobNameTip')"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="jobType" :label="t('runJob.jobType')"  show-overflow-tooltip width="100">
            <template #default="scope">
                <el-select v-model="scope.row.jobType" :placeholder="t('runJob.inputJobTypeTip')" clearable filterable
                           @change="handleRoleType(scope.row)">
                    <el-option v-for="(item, index) in DIC_PROP.JOB_USER_NONE_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column prop="roleId" :label="t('runJob.roleId')"  show-overflow-tooltip width="130">
            <template #default="scope">
                <el-tooltip content="请输入名称进行模糊搜索" placement="top">
                    <el-select v-model="scope.row.roleId" :placeholder="t('runJob.inputRoleIdTip')" clearable filterable
                               remote :remote-method="(query) => remoteMethodAll(query, scope.row.jobType)" :reserve-keyword="false">
                        <el-option v-for="(item, index) in dicData.users" :key="index" :label="item.name" :value="item.userId"
                                   v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[0].value"></el-option>
                        <el-option v-for="(item, index) in dicData.roles" :key="index" :label="item.roleName" :value="item.roleId"
                                   v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[1].value"></el-option>
                        <el-option v-for="(item, index) in dicData.posts" :key="index" :label="item.postName" :value="item.postId"
                                   v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[2].value"></el-option>
                        <el-option v-for="(item, index) in dicData.depts" :key="index" :label="item.name" :value="item.deptId"
                                   v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[3].value"></el-option>
                    </el-select>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column prop="userId" :label="t('runJob.userId')"  show-overflow-tooltip>
            <template #default="scope">
                <convert-name :options="dicData.userId" :value="scope.row.userId"
                              :valueKey="'userId'" :showKey="'name'"></convert-name>
            </template>
        </el-table-column>
        <el-table-column prop="startTime" :label="t('runJob.startTime')"  show-overflow-tooltip/>
        <el-table-column prop="status" :label="t('runJob.status')"  show-overflow-tooltip>
            <template #default="scope">
                <dict-tag :options="DIC_PROP.NODE_STATUS" :value="scope.row.status"></dict-tag>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts" name="FlowCurrJob">
    import {useI18n} from "vue-i18n";
    import {useMessage} from "/@/hooks/message";
    import {onFormLoadedUrl, onLoadDicUrl, remoteMethodAllByKey} from "../../components/convert-name/convert";
    import {handleChangeJobType} from "../../index";
    import {DIC_PROP} from "../../support/dict-prop";
    import {validateNull} from "../../../utils/validate";
    import {PROP_CONST} from "../../support/prop-const";

    const {proxy} = getCurrentInstance();

    const {t} = useI18n();
    const $message = useMessage();
    const props = defineProps({
        currSelect: {
            type: Object,
            default: null,
        },
    });

    // 定义字典
    const dicData = reactive({});
    const onLoad = onLoadDicUrl();
    const onFormLoaded = onFormLoadedUrl({key: "userId"}, ...PROP_CONST.LOAD_USER_ROLE);
    onMounted(async () => {
        // await onLoad(dicData);
        await onFormLoadedCurrRunJobs()
    })

    const onAddItem = () => {
        let jobName = props.currSelect.attributes.attrs.cdata.defJob.jobName;
        let obj = {sort: 1, jobName: jobName, jobType: DIC_PROP.JOB_USER_NONE_TYPE[0].value, roleId: null, userId: null,
            startTime: null, status: DIC_PROP.NODE_STATUS[0].value};
        props.currSelect.attributes.attrs.cdata.defJob.currRunJobs.push(obj);
    }

    const handleDelete = (index: number, row: any) => {
        let currRunJobs = props.currSelect.attributes.attrs.cdata.defJob.currRunJobs;
        if (currRunJobs.length === 1) {
            useMessage().warning("当前节点参与者至少需存在一个参与者");
            return
        }
        props.currSelect.attributes.attrs.cdata.defJob.currRunJobs.splice(index, 1)
    }

    function remoteMethodAll(query: string, jobType) {
        remoteMethodAllByKey(onLoad, dicData, query, jobType)
    }

    function onFormLoadedCurrRunJobs() {
        let currRunJobs = props.currSelect.attributes.attrs.cdata.defJob.currRunJobs
        if (validateNull(currRunJobs)) return
        onFormLoaded(dicData, currRunJobs)
    }

    function handleRoleType(row) {
        handleChangeJobType(dicData, row)
    }

</script>

<style lang="scss">
  @import '../assets/style/flow-attr.scss';
</style>
