<script lang="ts">
export default {
    name: "tasksetting",
};
</script>


<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import { ElTable, ElMessage, ElMessageBox, FormRules } from 'element-plus'
import { getTaskList, addTaskList, delTaskList, updataTaskList, setTaskList, changeItemOrder } from "@/api/taxkSetting";
import Page from '@/components/Pagination/page.vue'
import Sortable from 'sortablejs';
//输入框内文字
const input = ref('')
//表格数据
const tableData = ref([]) as any
//定义新增
const info: any = ref({
    jobName: '',
    jobCron: '',
    jobClass: '',
    jobMethod: '',
    jobParams: '',
    description: '',
})
//控制弹窗
const infoForm = ref();
const dialogVisible = ref(false)
//时间周期弹窗
const cycleTime = ref(false)
//弹窗标题 
const title = ref('')
//分页
const size = ref(10)
const current = ref(1)
const total = ref()
const pcode = ref(10)
//多选删除获取id
const delid: any = ref([])
//定义tabs
const index = ref(1)
//时间周期表达式-单选
//秒
const second = ref()
//分
const divide = ref()
//时
const time = ref()
//日
const sun = ref()
//月
const moon = ref()
//周
const week = ref()
//年
const year = ref()
//时间周期-周期-秒
const periodsecond = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '2'
})
//时间周期-周期-分
const perioddivide = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '2'
})
//时间周期-周期-时
const periodtime = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '2'
})
//时间周期-周期-日
const periodsun = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '1',
    periodInput5: '1'
})
//时间周期-周期-月
const periodmoon = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '2'
})
//时间周期-周期-周
const periodweek = ref({
    periodInput1: '1',
    periodInput2: '2',
    periodInput3: '1',
    periodInput4: '1',
    periodInput5: '1'
})
//时间周期-周期-年
const periodyear = ref({
    periodInput1: '2023',
    periodInput2: '2036',
})
////时间周期-指定-秒
const checkListsecond = ref([])
const appointsecond = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
    '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
    '51', '52', '53', '54', '55', '56', '57', '58', '59'])
////时间周期-指定-分
const checkListdivide = ref([])
const appointdivide = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
    '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
    '51', '52', '53', '54', '55', '56', '57', '58', '59'])
////时间周期-指定-时
const checkListtime = ref([])
const appointtime1 = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'])
const appointtime2 = ref(['12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',])
////时间周期-指定-日
const checkListsun = ref([])
const appointsun = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
    '24', '25', '26', '27', '28', '29', '30', '31'])
////时间周期-指定-月
const checkListmoon = ref([])
const appointmoon = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',])
////时间周期-指定-周
const checkListweek = ref([])
const appointweek = ref(['1', '2', '3', '4', '5', '6', '7'])
//多选 - 秒
function ahangesecond() {
    rediosecond(4)
}
//表达式字段
const field = ref({
    fieldsecond: '*',
    fielddivide: '*',
    fieldtime: '*',
    fieldsun: '*',
    fieldmoon: '*',
    fieldweek: '?',
    fieldyear: '',
})
//表达式
const resentation = ref('')
//时间周期
//秒
function rediosecond(val: any) {
    second.value = val
    if (val == 1) {
        field.value.fieldsecond = '*'
        checkListsecond.value = []
    } else if (val == 2) {
        field.value.fieldsecond = periodsecond.value.periodInput1 + '-' + periodsecond.value.periodInput2
        checkListsecond.value = []
    } else if (val == 3) {
        field.value.fieldsecond = periodsecond.value.periodInput3 + '/' + periodsecond.value.periodInput4
        checkListsecond.value = []
    } else if (val == 4) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListsecond.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fieldsecond = arraysecond.value.toString()
    }

}
//分
function rediodivide(val: any) {
    divide.value = val
    if (val == 1) {
        field.value.fielddivide = '*'
        checkListdivide.value = []
    } else if (val == 2) {
        field.value.fielddivide = perioddivide.value.periodInput1 + '-' + perioddivide.value.periodInput2
        checkListdivide.value = []
    } else if (val == 3) {
        field.value.fielddivide = perioddivide.value.periodInput3 + '/' + perioddivide.value.periodInput4
        checkListdivide.value = []
    } else if (val == 4) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListdivide.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fielddivide = arraysecond.value.toString()
    }
}
//时
function rediodtime(val: any) {
    time.value = val
    if (val == 1) {
        field.value.fieldtime = '*'
        checkListtime.value = []
    } else if (val == 2) {
        field.value.fieldtime = periodtime.value.periodInput1 + '-' + periodtime.value.periodInput2
        checkListtime.value = []
    } else if (val == 3) {
        field.value.fieldtime = periodtime.value.periodInput3 + '/' + periodtime.value.periodInput4
        checkListtime.value = []
    } else if (val == 4) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListtime.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fieldtime = arraysecond.value.toString()
    }
}
//日
function rediodsun(val: any) {
    sun.value = val
    if (val == 1) {
        checkListsun.value = []
        field.value.fieldsun = '*'
    } else if (val == 2) {
        checkListsun.value = []
        field.value.fieldsun = '?'
    } else if (val == 3) {
        checkListsun.value = []
        field.value.fieldsun = periodsun.value.periodInput1 + '-' + periodsun.value.periodInput2
    } else if (val == 4) {
        checkListsun.value = []
        field.value.fieldsun = periodsun.value.periodInput3 + '/' + periodsun.value.periodInput4
    } else if (val == 5) {
        checkListsun.value = []
        field.value.fieldsun = periodsun.value.periodInput5 + 'w'
    } else if (val == 6) {
        checkListsun.value = []
        field.value.fieldsun = 'L'
    } else if (val == 7) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListsun.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fieldsun = arraysecond.value.toString()
    }
}
//月
function rediodmoon(val: any) {
    moon.value = val
    if (val == 1) {
        field.value.fieldmoon = '*'
        checkListmoon.value = []
    } else if (val == 2) {
        field.value.fieldmoon = periodmoon.value.periodInput1 + '-' + periodmoon.value.periodInput2
        checkListmoon.value = []
    } else if (val == 3) {
        field.value.fieldmoon = periodmoon.value.periodInput3 + '/' + periodmoon.value.periodInput4
        checkListmoon.value = []
    } else if (val == 4) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListmoon.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fieldmoon = arraysecond.value.toString()
    }
}
//周
function rediodweek(val: any) {
    week.value = val
    if (val == 1) {
        field.value.fieldweek = '*'
        checkListweek.value = []
    } else if (val == 2) {
        field.value.fieldweek = '?'
        checkListweek.value = []
    } else if (val == 3) {
        field.value.fieldweek = periodweek.value.periodInput1 + '-' + periodweek.value.periodInput2
        checkListweek.value = []
    } else if (val == 4) {
        field.value.fieldweek = periodweek.value.periodInput3 + '#' + periodweek.value.periodInput4
        checkListweek.value = []
    } else if (val == 5) {
        field.value.fieldweek = periodweek.value.periodInput5 + 'L'
        checkListweek.value = []
    } else if (val == 6) {
        const secondarr: any = ref([])
        const arraysecond: any = ref([])
        secondarr.value = JSON.parse(JSON.stringify(checkListweek.value))
        secondarr.value.forEach((item: any) => {
            arraysecond.value.push(parseInt(item))
        })
        field.value.fieldweek = arraysecond.value.toString()
    }
}
//年
function rediodyear(val: any) {
    year.value = val
    if (val == 1) {
        field.value.fieldyear = '?'
    } else if (val == 2) {
        field.value.fieldyear = '*'
    } else if (val == 3) {
        field.value.fieldyear = periodyear.value.periodInput1 + '-' + periodyear.value.periodInput2
    }
}
//拼接表达式字段
function montage() {
    resentation.value = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
}
//时间周期弹窗-确定
function assignment() {
    if (resentation.value !== '') {
        info.value.jobCron = resentation.value
    } else {
        info.value.jobCron = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
    }

    cycleTime.value = false
}
//时间周期弹窗-取消
function Closeassign() {
    cycleTime.value = false
}
//监听表达式变化
watch(() => field, (newValue, oldValue) => {
    montage()
}, { deep: true })
//获取表格数据
function getTasklist() {
    const params = {
        jobName: input.value,
        size: size.value,
        current: current.value
    }
    getTaskList(params).then((res) => {
        size.value = res.data.size
        current.value = res.data.current
        total.value = res.data.total
        pcode.value = res.data.size
        tableData.value = res.data.records
    })
}

//表格多选事件
function handleSelectionChange(val: any) {
    delid.value = val
}
//定义新增任务规则
//定义企业填写规则
const rules = reactive<FormRules>({
    jobName: [{ required: true, message: "请填任务名称", trigger: "blur" }],
    jobCron: [{ required: true, message: "请填写事件周期表达式", trigger: "blur" }],
    jobClass: [{ required: true, message: "请填写执行类名称", trigger: "blur" }],
});
//新增任务
function addsetting() {
    title.value = '新增定时任务'
    info.value = {
        jobName: '',
        jobCron: '',
        jobClass: '',
        jobMethod: '',
        jobParams: '',
        description: '',
    }
    dialogVisible.value = true
}
//修改任务
const editinfo = ref([])
function editTaskList(row: any) {
    title.value = '修改定时任务'
    dialogVisible.value = true
    editinfo.value = JSON.parse(JSON.stringify(row))
    info.value = editinfo.value
}
//弹窗关闭事件
function handleClose() {
    dialogVisible.value = false
    if (infoForm.value != null) infoForm.value.resetFields();
}
//新增弹窗-确定
function confirmClick(formEl: any) {
    const params = info.value
    formEl.validate((valid: any) => {
        if (valid) {
            if (info.value.id) {
                updataTaskList(params).then((res: any) => {
                    if (res.code == '0') {
                        dialogVisible.value = false
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                    }
                    getTasklist()
                });
            } else {
                addTaskList(params).then((res: any) => {
                    if (res.code == '0') {
                        dialogVisible.value = false
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                    }
                    getTasklist()
                })
            }
        }
    })
}
//多选删除
function delsetting() {
    const id: any = ref([])
    delid.value.forEach((item: any) => {
        id.value.push(item.id)
    })
    const params = {
        id: id.value.toString()
    }
    ElMessageBox.confirm('确定删除已选择的定时任务吗？', "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            delTaskList(params).then((res: any) => {
                if (res.code == '0') {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }
                getTasklist()
            })

        })
        .catch(() => {
            getTasklist()
        });

}
//删除
function deleTaskList(row: any) {
    const params = {
        id: row.id
    }
    ElMessageBox.confirm('确定删除此定时任务吗？', "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            delTaskList(params).then((res: any) => {
                if (res.code == '0') {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }
                getTasklist()
            })

        })
        .catch(() => {
            getTasklist()
        });
}
//定时任务的启用
function switchChange(row: any) {
    //定义状态的暂停和开启
    const elmass = ref('')

    if (row.status == '0') {
        elmass.value = "确定暂停此定时任务吗？"
    } else if (row.status == '1') {
        elmass.value = "确定启用此定时任务吗？"
    }

    ElMessageBox.confirm(elmass.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            const params = {
                id: row.id,
                status: row.status
            }
            setTaskList(params).then((res: any) => {
                if (res.code == '0') {
                    ElMessage({
                        message: '改变成功',
                        type: 'success',
                    })
                }
                getTasklist()
            })

        })
        .catch(() => {
            getTasklist()
        });
}
//时间周期 - 弹窗
function cycleCron() {
    cycleTime.value = true
    index.value = 1
    Echo()
}
//时间周期回显
function Echo() {
    resentation.value = info.value.jobCron
    if (info.value.jobCron == '') {
        second.value = ''
        divide.value = ''
        time.value = ''
        sun.value = ''
        moon.value = ''
        week.value = ''
        year.value = ''
        checkListsecond.value = []
        checkListdivide.value = []
        checkListtime.value = []
        checkListsun.value = []
        checkListmoon.value = []
        checkListweek.value = []
        resentation.value = ''
        field.value = {
            fieldsecond: '*',
            fielddivide: '*',
            fieldtime: '*',
            fieldsun: '*',
            fieldmoon: '*',
            fieldweek: '?',
            fieldyear: '',
        }
    } else {
        const arrEcho = JSON.parse(JSON.stringify(info.value.jobCron))
        const arrayEcho = arrEcho.split(" ");
        //秒
        if (arrayEcho[0] == '*') {
            second.value = 1
            checkListsecond.value = []
            field.value.fieldsecond = '*'
        } else if (arrayEcho[0].indexOf("-") != -1) {
            second.value = 2
            checkListsecond.value = []
            field.value.fieldsecond = arrayEcho[0]
            const secondArr = arrayEcho[0].split("-");
            periodsecond.value.periodInput1 = secondArr[0]
            periodsecond.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[0].indexOf("/") != -1) {
            second.value = 3
            field.value.fieldsecond = arrayEcho[0]
            checkListsecond.value = []
            const secondArr = arrayEcho[0].split("/");
            periodsecond.value.periodInput3 = secondArr[0]
            periodsecond.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[0].indexOf("/") == -1 && arrayEcho[0].indexOf("-") == -1 && arrayEcho[0] != '*') {
            second.value = 4
            field.value.fieldsecond = arrayEcho[0]

            const secondArr = arrayEcho[0].split(",");
            const secondARR: any = ref([])
            secondArr.forEach((item: any) => {
                item = '0' + item
                secondARR.value.push(item)
            })
            checkListsecond.value = secondARR.value
        }
        //分
        if (arrayEcho[1] == '*') {
            divide.value = 1
            checkListdivide.value = []
            field.value.fielddivide = '*'
        } else if (arrayEcho[1].indexOf("-") != -1) {
            divide.value = 2
            checkListdivide.value = []
            field.value.fielddivide = arrayEcho[1]
            const secondArr = arrayEcho[1].split("-");
            perioddivide.value.periodInput1 = secondArr[0]
            perioddivide.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[1].indexOf("/") != -1) {
            divide.value = 3
            field.value.fielddivide = arrayEcho[1]
            checkListdivide.value = []
            const secondArr = arrayEcho[1].split("/");
            perioddivide.value.periodInput3 = secondArr[0]
            perioddivide.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[1].indexOf("/") == -1 && arrayEcho[1].indexOf("-") == -1 && arrayEcho[1] != '*') {
            divide.value = 4
            field.value.fielddivide = arrayEcho[1]

            const secondArr = arrayEcho[1].split(",");
            const secondARR: any = ref([])
            secondArr.forEach((item: any) => {
                item = '0' + item
                secondARR.value.push(item)
            })
            checkListdivide.value = secondARR.value
        }
        //时
        if (arrayEcho[2] == '*') {
            time.value = 1
            checkListtime.value = []
            field.value.fieldtime = '*'
        } else if (arrayEcho[2].indexOf("-") != -1) {
            time.value = 2
            checkListtime.value = []
            field.value.fieldtime = arrayEcho[2]
            const secondArr = arrayEcho[2].split("-");
            periodtime.value.periodInput1 = secondArr[0]
            periodtime.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[2].indexOf("/") != -1) {
            time.value = 3
            field.value.fieldtime = arrayEcho[2]
            checkListtime.value = []
            const secondArr = arrayEcho[2].split("/");
            periodtime.value.periodInput3 = secondArr[0]
            periodtime.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[2].indexOf("/") == -1 && arrayEcho[2].indexOf("-") == -1 && arrayEcho[2] != '*') {
            time.value = 4
            field.value.fieldtime = arrayEcho[2]
            const secondArr = arrayEcho[2].split(",");
            const secondARR: any = ref([])
            secondArr.forEach((item: any) => {
                item = '0' + item
                secondARR.value.push(item)
            })
            checkListtime.value = secondARR.value
        }
        //日
        if (arrayEcho[3] == '*') {
            sun.value = 1
            checkListsun.value = []
            field.value.fieldsun = '*'
        } else if (arrayEcho[3] == '?') {
            sun.value = 2
            checkListsun.value = []
            field.value.fieldsun = '?'
        } else if (arrayEcho[3].indexOf("-") != -1) {
            sun.value = 3
            checkListsun.value = []
            field.value.fieldtime = arrayEcho[3]
            const secondArr = arrayEcho[3].split("-");
            periodsun.value.periodInput1 = secondArr[0]
            periodsun.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[3].indexOf("/") != -1) {
            sun.value = 4
            field.value.fieldtime = arrayEcho[3]
            checkListsun.value = []
            const secondArr = arrayEcho[3].split("/");
            periodsun.value.periodInput3 = secondArr[0]
            periodsun.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[3].indexOf("w") != -1) {
            sun.value = 5
            field.value.fieldtime = arrayEcho[3]
            checkListsun.value = []
            const secondArr = arrayEcho[3].split("w");
            periodsun.value.periodInput5 = secondArr[0]
        } else if (arrayEcho[3] == 'L') {
            sun.value = 6
            checkListsun.value = []
            field.value.fieldsun = 'L'
        } else if (arrayEcho[3].indexOf("/") == -1 && arrayEcho[3].indexOf("-") == -1 && arrayEcho[3] != '*' && arrayEcho[3] != '?' && arrayEcho[3] != 'L' && arrayEcho[3].indexOf("w") == -1) {
            sun.value = 7
            field.value.fieldsun = arrayEcho[3]
            const secondArr = arrayEcho[3].split(",");
            checkListsun.value = secondArr
        }
        //月
        if (arrayEcho[4] == '*') {
            moon.value = 1
            checkListmoon.value = []
            field.value.fieldmoon = '*'
        } else if (arrayEcho[4].indexOf("-") != -1) {
            moon.value = 2
            checkListmoon.value = []
            field.value.fieldmoon = arrayEcho[4]
            const secondArr = arrayEcho[4].split("-");
            periodmoon.value.periodInput1 = secondArr[0]
            periodmoon.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[4].indexOf("/") != -1) {
            moon.value = 3
            field.value.fieldmoon = arrayEcho[4]
            checkListmoon.value = []
            const secondArr = arrayEcho[4].split("/");
            periodmoon.value.periodInput3 = secondArr[0]
            periodmoon.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[4].indexOf("/") == -1 && arrayEcho[4].indexOf("-") == -1 && arrayEcho[4] != '*') {
            moon.value = 4
            field.value.fieldmoon = arrayEcho[4]
            const secondArr = arrayEcho[4].split(",");

            checkListmoon.value = secondArr
        }
        //周
        if (arrayEcho[5] == '*') {
            week.value = 1
            checkListweek.value = []
            field.value.fieldweek = '*'
        } else if (arrayEcho[5] == '?') {
            week.value = 2
            checkListweek.value = []
            field.value.fieldweek = '?'
        } else if (arrayEcho[5].indexOf("-") != -1) {
            week.value = 3
            checkListweek.value = []
            field.value.fieldweek = arrayEcho[5]
            const secondArr = arrayEcho[5].split("-");
            periodweek.value.periodInput1 = secondArr[0]
            periodweek.value.periodInput2 = secondArr[1]
        } else if (arrayEcho[5].indexOf("/") != -1) {
            week.value = 4
            field.value.fieldweek = arrayEcho[5]
            checkListweek.value = []
            const secondArr = arrayEcho[5].split("/");
            periodweek.value.periodInput3 = secondArr[0]
            periodweek.value.periodInput4 = secondArr[1]
        } else if (arrayEcho[5].indexOf("L") != -1) {
            week.value = 5
            field.value.fieldweek = arrayEcho[5]
            checkListweek.value = []
            const secondArr = arrayEcho[5].split("L");
            periodweek.value.periodInput5 = secondArr[0]
        } else if (arrayEcho[5].indexOf("/") == -1 && arrayEcho[5].indexOf("-") == -1 && arrayEcho[5] != '*' && arrayEcho[5] != '?' && arrayEcho[5].indexOf("L") == -1) {
            week.value = 6
            field.value.fieldweek = arrayEcho[5]
            const secondArr = arrayEcho[5].split(",");
            checkListweek.value = secondArr
        }
        //年
        if (arrayEcho[6] == '?') {
            year.value = 1
            field.value.fieldyear = '?'
        } else if (arrayEcho[6] == '*') {
            year.value = 2
            field.value.fieldyear = '*'
        } else if (arrayEcho[6].indexOf("-") != -1) {
            year.value = 3
            field.value.fieldyear = arrayEcho[6]
            const secondArr = arrayEcho[6].split("-");
            periodyear.value.periodInput1 = secondArr[0]
            periodyear.value.periodInput2 = secondArr[1]
        }
    }
}
// if(resentation)
//拖拽
function rowDrop() {
    const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
    Sortable.create(tbody, {
        draggable: ".draggable .el-table__row",
        onEnd(data: any) {
            const newIndex = data.newIndex;
            const oldIndex = data.oldIndex;
            if (tableData.value[newIndex].id == tableData.value[oldIndex].id) {
                return false;
            }
            const params = {
                fromID: tableData.value[newIndex].id,
                toID: tableData.value[oldIndex].id,
            };
            changeItemOrder(params).then(() => {
                getTasklist();
            });
        }
    });
}

onMounted(() => {
    getTasklist();
    rowDrop()
});
</script>
<template>
    <div>
        <div class="setting-box">
            <div style="display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between; margin-bottom: 20px;">
                <div>
                    <el-input v-model="input" placeholder="请输入任务名称" clearable style="width: 200px;"
                        @keyup.enter="getTasklist" />
                    <el-button type="primary" style="margin-left: 10px;" @click="getTasklist">搜索</el-button>
                </div>
                <div>
                    <el-button type="primary" style="margin-left: 10px;" @click="addsetting"><img
                            src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 3px">新增</el-button>
                    <el-button style="margin-left: 10px;" @click="delsetting" :disabled="delid.length <= 0"
                        :type="delid.length > 0 ? 'primary' : ''"><el-icon>
                            <Delete />
                        </el-icon><span></span> 删除</el-button>
                </div>
            </div>
            <div class="draggable">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-bottom: 20px;" border 
                    row-key="id" @selection-change="handleSelectionChange"   :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px',color: '#383838' }" >
                    <el-table-column type="selection" width="55" align="center"  />
                    <el-table-column label="排序号" width="90">
                        <template #default="scope">
                            <div style="width:100%;display: flex;display: -webkit-flex; align-items: center;-webkit-align-items: center;">
                                <div> <img src="@/assets/MenuIcon/lbcz_td.png" alt=""> </div>
                                <div style="margin-left: 15px;">{{ scope.row.orderno }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务名称" width="120" property="jobName" />
                    <el-table-column property="jobClass" label="执行类名称" width="120" />
                    <el-table-column property="jobMethod" label="执行方法名称" width="160" />
                    <el-table-column property="jobCron" label="时间周期表达式" width="180" show-overflow-tooltip />
                    <el-table-column property="jobParams" label="方法参数" min-width="100" show-overflow-tooltip />
                    <el-table-column property="description" label="任务描述" min-width="100"  show-overflow-tooltip />
                    <el-table-column property="status" label="状态" width="120">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"
                                @change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
                            <span v-if="scope.row.status == 1" style="color: #0099ff">启用</span>
                            <span v-else style="color: #d7d7d7">暂停</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="lastmodifier" label="最近修改者" width="120" />
                    <el-table-column property="lastmodifydate" label="最近修改日期" width="170" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <div style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around;">
                                <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" style="cursor: pointer;"
                                    @click="editTaskList(scope.row)">
                                <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" style="cursor: pointer;"
                                    @click="deleTaskList(scope.row)">
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <Page :total="total" v-model:size="size" v-model:current="current" @pagination="getTasklist()"></Page>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
            append-to-body width="620px" draggable >
            <el-form ref="infoForm" :model="info" label-width="140px" :rules="rules">
                <el-form-item label="任务名称" prop="jobName">
                    <el-input v-model="info.jobName" style="width: 100%" placeholder="请输入任务名称"></el-input>
                </el-form-item>
                <el-form-item label="时间周期表达式" prop="jobCron">
                    <div style="display: flex; display: -webkit-flex;flex-wrap: nowrap;justify-content: space-between;-webkit-flex-wrap: nowrap;-webkit-justify-content: space-between; width: 100%;">
                        <el-input v-model="info.jobCron" style="width: 78%" placeholder=" " disabled></el-input>
                        <el-button type="primary" @click="cycleCron"><img src="@/assets/MenuIcon/u697.png" alt=""
                                style="margin-right: 5px;">
                            设置</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="执行类名称" prop="jobClass">
                    <el-input v-model="info.jobClass" style="width: 100%" placeholder="请输入执行类名称"></el-input>
                </el-form-item>
                <el-form-item label="执行方法名称">
                    <el-input v-model="info.jobMethod" style="width: 100%" placeholder="请输入执行方法名称"></el-input>
                </el-form-item>
                <el-form-item label="方法参数">
                    <el-input v-model="info.jobParams" style="width: 100%" placeholder="请输入方法参数"></el-input>
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input v-model="info.description" style="width: 100%" placeholder="请输入任务描述" :rows="2"
                        type="textarea"></el-input>
                </el-form-item>
                <span class="dialog-footer"
                    style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
                </span>
            </el-form>
        </el-dialog>
        <el-dialog v-model="cycleTime" :close-on-click-modal="false" draggable :before-close="Closeassign" title="时间周期表达式设置"
            top="10px" append-to-body width="1216px">
            <div class="tabs">
                <div @click="index = 1" :class="index == 1 ? 'tabsTitle' : ''" style="cursor: pointer;" >秒</div>
                <div @click="index = 2" :class="index == 2 ? 'tabsTitle' : ''" style="cursor: pointer;" >分</div>
                <div @click="index = 3" :class="index == 3 ? 'tabsTitle' : ''" style="cursor: pointer;" >时</div>
                <div @click="index = 4" :class="index == 4 ? 'tabsTitle' : ''" style="cursor: pointer;" >日</div>
                <div @click="index = 5" :class="index == 5 ? 'tabsTitle' : ''" style="cursor: pointer;" >月</div>
                <div @click="index = 6" :class="index == 6 ? 'tabsTitle' : ''" style="cursor: pointer;" >周</div>
                <div @click="index = 7" :class="index == 7 ? 'tabsTitle' : ''" style="cursor: pointer;" >年</div>
                <div style="width: 80%;"></div>
            </div>
            <div class="tabsContent">
                <div v-show="index == 1" style="height:500px">
                    <el-radio-group v-model="second" @change="rediosecond">
                        <el-radio :label="1">每秒 <span class="spanmarg">允许的通配符[,-*/]</span>
                        </el-radio>
                        <el-radio :label="2">周期 <span class="spanmarg">
                                <span class="spanmarg">从</span>
                                <el-input class="spanmarg" @change="rediosecond(2)" v-model="periodsecond.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediosecond(2)" v-model="periodsecond.periodInput2"
                                    style="width:80px" />
                                <span class="spanmarg">秒</span>
                            </span></el-radio>
                        <el-radio :label="3"><span>
                                <span style="color: #363636;">从</span>
                                <el-input class="spanmarg" @change="rediosecond(3)" v-model="periodsecond.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">秒开始，每</span>
                                <el-input class="spanmarg" @change="rediosecond(3)" v-model="periodsecond.periodInput4"
                                    style="width:80px" />
                                <span class="spanmarg">秒执行一次</span>
                            </span></el-radio>

                        <el-radio :label="4" style="height: 230px; ">
                            <div style="display: flex; display: -webkit-flex;">
                                <div style="margin-top:-3px ;">指定</div>
                                <el-checkbox-group v-model="checkListsecond" @change="ahangesecond">
                                    <div
                                        style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
                                        <el-checkbox style="display: block;" v-for="item in appointsecond" :key="index"
                                            :label="item" size="large" />
                                    </div>
                                </el-checkbox-group>

                            </div>

                        </el-radio>

                    </el-radio-group>
                </div>
                <div v-show="index == 2" style="height:500px">
                    <el-radio-group v-model="divide" @change="rediodivide">
                        <el-radio :label="1">分钟 <span class="spanmarg">允许的通配符[,-*/]</span>
                        </el-radio>
                        <el-radio :label="2">周期 <span class="spanmarg">
                                <span class="spanmarg">从</span>
                                <el-input class="spanmarg" @change="rediodivide(2)" v-model="perioddivide.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediodivide(2)" v-model="perioddivide.periodInput2"
                                    style="width:80px" />
                                <span class="spanmarg">分钟</span>
                            </span></el-radio>
                        <el-radio :label="3"><span>
                                <span style="color: #363636;">从</span>
                                <el-input class="spanmarg" @change="rediodivide(3)" v-model="perioddivide.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">分钟开始，每</span>
                                <el-input class="spanmarg" @change="rediodivide(3)" v-model="perioddivide.periodInput4"
                                    style="width:80px" />
                                <span class="spanmarg">分钟执行一次</span>
                            </span></el-radio>

                        <el-radio :label="4" style="height: 230px; ">
                            <div style="display: flex;display: -webkit-flex;">
                                <div style="margin-top: -3px;">指定</div>
                                <el-checkbox-group v-model="checkListdivide" @change="rediodivide(4)">
                                    <div
                                        style="margin-left: 15px; display: flex; display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
                                        <el-checkbox style="display: block;" v-for="item in appointdivide" :label="item"
                                            size="large" />
                                    </div>
                                </el-checkbox-group>
                            </div>

                        </el-radio>

                    </el-radio-group>
                </div>
                <div v-show="index == 3" style="height:500px">
                    <el-radio-group v-model="time" @change="rediodtime">
                        <el-radio :label="1">小时<span class="spanmarg">允许的通配符[,-*/]</span>
                        </el-radio>
                        <el-radio :label="2">周期 <span class="spanmarg">
                                <span class="spanmarg">从</span>
                                <el-input class="spanmarg" @change="rediodtime(2)" v-model="periodtime.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediodtime(2)" v-model="periodtime.periodInput2"
                                    style="width:80px" />
                                <span class="spanmarg">小时</span>
                            </span></el-radio>
                        <el-radio :label="3"><span>
                                <span style="color: #363636;">从</span>
                                <el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">小时开始，每</span>
                                <el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput4"
                                    style="width:80px" />
                                <span class="spanmarg">小时执行一次</span>
                            </span></el-radio>

                        <el-radio :label="4" style="height: 230px; ">
                            <div style="display: flex;display: -webkit-flex;">
                                <div style="margin-top: -3px;">指定</div>

                                <div style="width:1000px; color: #363636;">
                                    <div style="display: flex;display: -webkit-flex; margin-left: 15px; ">
                                        <div style="margin-top: -3px;">上午：</div>
                                        <el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
                                            <div
                                                style=" display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
                                                <el-checkbox style="display: block;" v-for="item in appointtime1"
                                                    :label="item" size="large" />
                                            </div>
                                        </el-checkbox-group>

                                    </div>
                                    <div style="display: flex;display: -webkit-flex; margin-left: 15px;">
                                        <div style="margin-top: -3px;">下午：</div>
                                        <el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
                                            <div
                                                style=" display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
                                                <el-checkbox style="display: block;" v-for="item in appointtime2"
                                                    :label="item" size="large" />
                                            </div>
                                        </el-checkbox-group>

                                    </div>
                                </div>

                            </div>

                        </el-radio>

                    </el-radio-group>
                </div>
                <div v-show="index == 4" style="height:500px">
                    <el-radio-group v-model="sun" @change="rediodsun">
                        <el-radio :label="1">日<span class="spanmarg">允许的通配符[,-*/LW]</span>
                        </el-radio>
                        <el-radio :label="2">不指定</el-radio>
                        <el-radio :label="3">周期 <span class="spanmarg">
                                <span class="spanmarg">从</span>
                                <el-input class="spanmarg" @change="rediodsun(3)" v-model="periodsun.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediodsun(3)" v-model="periodsun.periodInput2"
                                    style="width:80px" />
                                <span class="spanmarg">日</span>
                            </span></el-radio>
                        <el-radio :label="4"><span>
                                <span style="color: #363636;">从</span>
                                <el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">日开始，每</span>
                                <el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput4"
                                    style="width:80px" />
                                <span class="spanmarg">天执行一次</span>
                            </span></el-radio>
                        <el-radio :label="5">每月<el-input class="spanmarg" @change="rediodsun(5)"
                                v-model="periodsun.periodInput5" style="width:80px" />
                            <span class="spanmarg">日最近的那个工作日
                            </span>
                        </el-radio>
                        <el-radio :label="6">本月最后一天</el-radio>
                        <el-radio :label="7" style="height: 230px; ">
                            <div style="display: flex;display: -webkit-flex; width: 1000px;">
                                <div style="margin-top: -3px;">指定</div>
                                <el-checkbox-group v-model="checkListsun" @change="rediodsun(7)">
                                    <div
                                        style="width:1000px;margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
                                        <el-checkbox style="display: block;" v-for="item in appointsun" :label="item"
                                            size="large" />
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div v-show="index == 5" style="height:500px">
                    <el-radio-group v-model="moon" @change="rediodmoon">
                        <el-radio :label="1">月 <span class="spanmarg">允许的通配符[,-*/]</span>
                        </el-radio>
                        <el-radio :label="2">周期 <span class="spanmarg">
                                <span class="spanmarg">从</span>
                                <el-input class="spanmarg" @change="rediodmoon(2)" v-model="periodmoon.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediodmoon(2)" v-model="periodmoon.periodInput2"
                                    style="width:80px" />
                                <span class="spanmarg">月</span>
                            </span></el-radio>
                        <el-radio :label="3"><span>
                                <span style="color: #363636;">从</span>
                                <el-input class="spanmarg" @change="rediodmoon(3)" v-model="periodmoon.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">月开始，每</span>
                                <el-input class="spanmarg" @change="rediodmoon(3)" v-model="periodmoon.periodInput4"
                                    style="width:80px" />
                                <span class="spanmarg">月执行一次</span>
                            </span></el-radio>

                        <el-radio :label="4" style="height: 230px; ">
                            <div style="display: flex;display: -webkit-flex;">
                                <div style="margin-top: -3px;">指定</div>
                                <el-checkbox-group v-model="checkListmoon" @change="rediodmoon(4)">
                                    <div
                                        style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;width: 1000px;">
                                        <el-checkbox style="display: block;" v-for="item in appointmoon" :label="item"
                                            size="large" />
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div v-show="index == 6" style="height:500px">
                    <el-radio-group v-model="week" @change="rediodweek">
                        <el-radio :label="1">周 <span class="spanmarg">允许的通配符[,-*/L#]</span>
                        </el-radio>
                        <el-radio :label="2">不指定</el-radio>
                        <el-radio :label="3">周期 <span class="spanmarg">
                                <span class="spanmarg">从星期</span>
                                <el-input class="spanmarg" @change="rediodweek(3)" v-model="periodweek.periodInput1"
                                    style="width:80px" />
                                <span class="spanmarg">-</span>
                                <el-input class="spanmarg" @change="rediodweek(3)" v-model="periodweek.periodInput2"
                                    style="width:80px" />
                            </span></el-radio>
                        <el-radio :label="4"><span>
                                <span style="color: #363636;">第</span>
                                <el-input class="spanmarg" @change="rediodweek(4)" v-model="periodweek.periodInput3"
                                    style="width:80px" />
                                <span class="spanmarg">周的星期</span>
                                <el-input class="spanmarg" @change="rediodweek(4)" v-model="periodweek.periodInput4"
                                    style="width:80px" />
                            </span></el-radio>
                        <el-radio :label="5"> <span class="spanmarg">本月最后一个星期
                            </span><el-input class="spanmarg" @change="rediodweek(5)" v-model="periodweek.periodInput5"
                                style="width:80px" />

                        </el-radio>
                        <el-radio :label="6" style="height: 230px; ">
                            <div style="display: flex;display: -webkit-flex;">
                                <div style="margin-top: -3px;">指定</div>
                                <el-checkbox-group v-model="checkListweek" @change="rediodweek(6)">
                                    <div
                                        style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;width: 600px;">
                                        <el-checkbox style="display: block;" v-for="item in appointweek" :label="item"
                                            size="large" />
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div v-show="index == 7" style="height:500px">
                    <el-radio-group v-model="year" @change="rediodyear">
                        <el-radio :label="1">不指定 <span class="spanmarg">允许的通配符[,-*/]
                                非必填</span>
                        </el-radio>
                        <el-radio :label="2">每年</el-radio>
                        <el-radio :label="3">
                            <div style="margin-top: -7px;">
                                周期 <span style="display: inline-block;color: #363636;text-align: center;">
                                    <span style="display: inline-block;width: 24px;">从</span>
                                    <el-input @change="rediodyear(3)" v-model="periodyear.periodInput1"
                                        style="width:80px" />
                                    <span style="display: inline-block;width: 24px;">-</span>
                                    <el-input @change="rediodyear(3)" v-model="periodyear.periodInput2"
                                        style="width:80px" />
                                </span>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="display: flex;display: -webkit-flex;align-items: center; justify-content: space-between;-webkit-align-items: center; -webkit-justify-content: space-between; width: 65px; margin-top: 20px;">
                <div style="width: 5px;height: 15px;background-color: #409EFF;"></div>
                <div style="color:#333333;font-size: 16px;font-weight: 700;">表达式</div>
            </div>
            <div style="margin-top: 20px;">表达式字段</div>
            <div style="display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between;">
                <div class="field"><el-input class="fieldInput" v-model="field.fieldsecond" disabled />
                    <div class="fieldText">秒</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fielddivide" disabled />
                    <div class="fieldText">分</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fieldtime" disabled />
                    <div class="fieldText">时</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fieldsun" disabled />
                    <div class="fieldText">日</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fieldmoon" disabled />
                    <div class="fieldText">月</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fieldweek" disabled />
                    <div class="fieldText">周</div>
                </div>
                <div class="field"><el-input class="fieldInput" v-model="field.fieldyear" disabled />
                    <div class="fieldText">年</div>
                </div>
            </div>
            <div style="margin-top: 20px;">表达式</div>
            <div> <el-input v-model="resentation" style="height: 40px;" disabled /></div>
            <span class="dialog-footer"
                style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;margin-top: 10px;">
                <el-button @click="Closeassign">取 消</el-button>
                <el-button type="primary" @click="assignment">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped lang="scss">
.setting-box {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
}

.tabs {
    width: 100%;
    display: flex;
    display: -webkit-flex;

    div {
        width: 43px;
        height: 31px;
        line-height: 31px;
        text-align: center;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(228, 228, 228, 1);
    }
    .tabsTitle {
        box-sizing: border-box;
        border: 1px solid rgba(228, 228, 228, 1);
        border-bottom: 1px solid rgba(251, 251, 251, 1);
        border-radius: 5px 5px 0px 0px;
        background-color: rgba(251, 251, 251, 1);
    }
}

.tabsContent {
    width: 100%;
    border: 1px solid rgba(228, 228, 228, 1);
    border-top: 0px;
    padding: 0px 10px 20px 10px;
    background-color: rgba(251, 251, 251, 1);
    box-sizing: border-box;
    border-radius: 0px 5px 5px 5px;
}

:deep(.el-radio-group) {
    flex-direction: column;
    align-items: flex-start !important;

}

:deep(.el-radio:last-child) {
    align-items: flex-start
}

:deep(.el-radio) {
    margin-top: 25px;
}

.field {
    width: 150px;
    position: relative;

    .fieldText {
        position: absolute;
        top: 0;
        right: 5px;
        z-index: 100;
        height: 40px;
        line-height: 40px;
        color: #409EFF;
    }

    .fieldInput {
        height: 40px;
        // background-color:rgba(242, 246, 252, 1) ;
    }

    :deep(.el-input__wrapper) {
        background-color: rgba(242, 246, 252, 1) !important;
    }
}

.spanmarg {
    display: inline-block;
    margin-left: 10px;
    color: #363636;
}
</style>