<template>
    <HcCard>
        <template #header>
            <span class="mr-2">任务分类:</span>
            <el-button _icon hc-btn size="small" type="primary" @click="openTypeEdit(1)">
                <HcIcon name="add"/>
            </el-button>
        </template>
        <!-- <template #extra>
            <div style="float: right;">
                <el-button size="large" type="primary">
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
            </div>
        </template> -->
        <HcTable :column="tasktableColumn" :datas="tasktableData">
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="openTypeEdit(2)">编辑</el-button>
                <el-button size="small" type="primary" @click="delTasktype">删除</el-button>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
        </template>

        <!--任务类型弹窗-->
        <HcDialog bgColor="#ffffff" isToBody widths="24rem" :show="tasktypeModal" :title="taskTypeTitle" @close="taskTypeModalClose">
            <el-form label-position="top" :model="formtaskType" label-width="auto" size="large">
                <el-form-item label="任务类型名称">
                    <el-input v-model="formtaskType.name"/>
                </el-form-item>
                <el-form-item label="完成指标">
                    <el-select v-model="formtaskType.type" class="block" placeholder="请选择">
                        <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";

const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
})

const tabsKey = ref(props.cur)

//监听
watch(() => [
    props.cur,
], ([key]) => {
    tabsKey.value = key
    console.log(key)
})

const searchForm = ref({
    postType: '', name: '',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

const tasktableColumn = [
    {key: 'name', name: '任务类型名称'},
    {key: 'text', name: '类型'},
    {key: 'action', name: '操作', width: 200}
]
const tasktableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])

const taskTypeTitle = ref('')
const tasktypeModal = ref(false)
const openTypeEdit = (type) => {
    if (type === 1) {
        taskTypeTitle.value = '新增任务'
    } else {
        taskTypeTitle.value = '编辑任务'
    }
    tasktypeModal.value = true
}

const formtaskType = ref({})
const typeoptions = ref([
    {
        value: '1',
        label: '固定任务',
    },
    {
        value: '2',
        label: '临时任务',
    },
])

const taskTypeModalClose = () => {
    tasktypeModal.value = false
}

const delTasktype = () => {
    window?.$messageBox?.alert('您确定要删除该任务分类吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
</script>

<style scoped lang="scss">

</style>
