<template>
    <HcCard>
        <template #header>
            <div class="w-36 mr-4" v-if="isTableKey !== 'to-do'">
                <el-select v-model="searchForm.reportType" block clearable placeholder="选择审批状态" size="large">
                    <el-option v-for="item in reportTypes" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-36 mr-4">
                <el-select v-model="searchForm.reporting" block clearable placeholder="选择上报类型" size="large">
                    <el-option v-for="item in reportings" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
            </div>
            <div class="mx-2">~</div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
            </div>
            <div class="ml-4">
                <el-button size="large" type="primary" @click="searchClick">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>
        <HcTable indexName="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #taskName="{row}">
                <span class="text-blue text-hover" @click="rowNameClick(row)">{{row.taskName}}</span>
            </template>
            <template #auditStatus="{row}">
                <span class="text-green" v-if="row.auditStatus === '1'">已审核</span>
                <span class="text-orange" v-if="row.auditStatus === '2'">待审批</span>
                <template v-if="row.auditStatus === '3'">
                    <el-popover placement="top-start" title="驳回原因" :width="200" :hide-after="0" content="这里是驳回原因说明内容">
                        <template #reference>
                            <span class="text-red">已驳回</span>
                        </template>
                    </el-popover>
                </template>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, nextTick, watch} from "vue";
import {useRouter} from 'vue-router'
import {getArrValue} from "js-fast-way"

const router = useRouter()

//参数
const props = defineProps({
    tableKey: {
        type: String,
        default: ''
    }
})

//变量
const isTableKey = ref(props.tableKey);
const reportTypes = ref([
    {name: '待审批', key: '2'},
    {name: '已驳回', key: '3'},
])

//选择上报类型
const reportings = ref([
    {name: '任务审批', key: '1'},
    {name: '采购审批', key: '2'},
    {name: '用车审批', key: '3'},
    {name: '报销审批', key: '4'},
    {name: '借款审批', key: '5'},
])

//监听
watch(() => [
    props.tableKey,
], ([Key]) => {
    isTableKey.value = Key
})

//搜索表单
const searchForm = ref({
    reportType: null, startTime: null, endTime: null, reporting: null,
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    console.log(searchForm.value)
    getTableData()
}

//重置
const resetClick = () => {
    searchForm.value = {
        reportType: null, startTime: null, endTime: null,
        current: 1, size: 20, total: 0
    }
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = ref([
    {key: 'taskName', name: '任务名称'},
    {key: 'reportDate', name: '上报日期', width: '160', align: 'center'},
    {key: 'auditDate', name: '审核日期', width: '160', align: 'center'},
    {key: 'reportType', name: '上报类型', width: '120', align: 'center'},
    {key: 'auditStatus', name: '审核状态', width: '100', align: 'center'},
    {key: 'informant', name: '上报人', width: '120', align: 'center'},
    {key: 'auditor', name: '审核人', width: '120', align: 'center'},
])
const tableData = ref([
    {id: 1, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '任务审批', auditStatus: '1', informant: '张三', auditor: '李四'},
    {id: 2, taskName: '【上报人】向您发起【用车审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '采购审批', auditStatus: '2', informant: '张三', auditor: '李四'},
    {id: 3, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '用车审批', auditStatus: '3', informant: '张三', auditor: '李四'},
    {id: 4, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '报销审批', auditStatus: '1', informant: '张三', auditor: '李四'},
    {id: 5, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '借款审批', auditStatus: '3', informant: '张三', auditor: '李四'},
    {id: 6, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '出差申请', auditStatus: '1', informant: '张三', auditor: '李四'},
    {id: 7, taskName: '【上报人】向您发起【任务审批】审批', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '外包支付', auditStatus: '1', informant: '张三', auditor: '李四'},
])
const getTableData = () => {
    //const key = isTableKey.value
}

//任务名称被点击
const rowNameClick = (row) => {
    router.push({
        name: 'home-task-details', query: {
            id: row.id,
            type: isTableKey.value
        }
    })
}
</script>

<style lang="scss" scoped>

</style>
