<template>
    <HcCard scrollbar actionUi="text-center">
        <HcCardItem>
            <div class="hac-task-name-box">
                <div class="label">任务名称</div>
                <div class="name">【上报人】向您发起【任务审批】审批</div>
            </div>
            <div class="hac-task-text-box">
                <span>上报类型：废除任务</span>
                <span class="ml-10">上报人：张三</span>
                <span class="ml-10">上报时间：2023-02-23 19:20:22</span>
            </div>
        </HcCardItem>

        <HcCardItem title="任务详情" class="mt-4">
            <div class="h-52">
                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData"/>
            </div>
        </HcCardItem>

        <HcCardItem title="操作任务" class="mt-4" v-if="dataType === '1'">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="" :disabled="tabsKey !== 'to-do'">
                <el-form-item label="变更类别：" prop="type" size="large">
                    <el-radio-group v-model="formModel.type" size="large">
                        <el-radio label="1">已完成</el-radio>
                        <el-radio label="2" class="ml-4">任务转移</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="完成时间：" prop="finish_time" class="w-72" v-if="formModel.type === '1'">
                    <el-date-picker class="block" v-model="formModel.finish_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="转移时间：" prop="transfer" class="w-72" v-if="formModel.type === '2'">
                    <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="转移对象：" prop="type" size="large" v-if="formModel.type === '2'">
                    <div class="form-item-div">张三</div>
                </el-form-item>
                <el-form-item label="转移原因：" prop="textContent" v-if="formModel.type === '2'">
                    <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcCardItem>

        <HcCardItem title="数据详情" class="mt-4" v-if="dataType > 1">
            <div class="hc-info-list">
                <HcListItem title="报销金额：" content="1520元"/>
                <HcListItem title="发生日期：" content="2023-05-15"/>
                <HcListItem title="费用类型：" content="水电"/>
                <HcListItem title="费用说明：" content="这是费用说明"/>
                <HcListItem title="电子发票：" >
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                </HcListItem>
                <HcListItem title="附件文件：" >
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                    <HcImg ui="img" :index="0"
                           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                           :srcs="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    />
                </HcListItem>
                <HcListItem title="归属人：" content="张三"/>
                <HcListItem title="备注信息：" content="备注数据"/>
            </div>
        </HcCardItem>

        <HcCardItem title="操作任务" class="mt-4" v-if="dataType !== '1' && authType">
            <HcListItem ui="items-center" title="支付状态：">
                <el-radio-group v-model="formPay" size="large">
                    <el-radio label="1">已支付</el-radio>
                    <el-radio label="2" class="ml-4">待支付</el-radio>
                </el-radio-group>
            </HcListItem>
        </HcCardItem>

        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="tabsKey === 'to-do'">取消并返回</span>
                <span v-else>返回</span>
            </el-button>
            <el-button size="large" type="danger" hc-btn @click="groundsShow" v-if="tabsKey === 'to-do'">
                <HcIcon name="arrow-go-forward"/>
                <span>驳回申请</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="doubleClick" v-if="tabsKey === 'to-do'">
                <HcIcon name="check-double"/>
                <span>审核通过</span>
            </el-button>

            <!--模拟效果-->
            <div class="w-36 mx-6 inline-block">
                <el-select v-model="dataType" block placeholder="选择模拟类型" size="large">
                    <el-option label="任务详情" value="1"/>
                    <el-option label="财务报销" value="2"/>
                    <el-option label="采购" value="3"/>
                    <el-option label="外包支付" value="4"/>
                    <el-option label="借款审批" value="5"/>
                </el-select>
            </div>
            <el-button hc-btn @click="authTypeClick">模拟财务审核</el-button>
        </template>

        <HcDialog bgColor="#ffffff" isToBody :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
            <el-form ref="formGroundsRef" :model="formGroundsModel" :rules="formGroundsRules" label-width="0" size="large">
                <el-form-item prop="grounds">
                    <el-input v-model="formGroundsModel.grounds" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入驳回理由" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const tabsKey = ref(useRoutes?.query?.tabKey ?? '')
const dataType = ref(useRoutes?.query?.type ?? '')
const dataId = ref(useRoutes?.query?.id ?? '')
const authType = ref(false)

//缓存页面被激活时
onActivated(() => {
    tabsKey.value = useRoutes?.query?.tabKey ?? ''
    dataType.value = useRoutes?.query?.type ?? ''
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
})

const authTypeClick = () => {
    authType.value = !authType.value
}

//任务表格
const tableColumn = [
    {key: 'taskName', name: '所属项目'},
    {key: 'description', name: '任务描述'}
]
const tableData = ref([
    {taskName: '所属项目', description: '任务描述。。。。。'},
    {taskName: '所属项目', description: '任务描述。。。。。'},
    {taskName: '所属项目', description: '任务描述。。。。。'},
    {taskName: '所属项目', description: '任务描述。。。。。'}
])

//任务操作数据
const formRef = ref(null)
const formModel = ref({
    type: '1',
})
const formRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: "请输入节点名称"
    },
}
const formPay = ref('1')

const groundsShow = () => {
    groundsLoading.value = false
    groundsModal.value = true
}

//驳回弹窗
const groundsLoading = ref(false)
const groundsModal = ref(false)

//驳回表单
const formGroundsRef = ref(null)
const formGroundsModel = ref({grounds: ''})
const formGroundsRules = {
    grounds: {
        required: true,
        trigger: 'blur',
        message: "请输入驳回理由"
    },
}

//确认驳回
const saveGroundsClick = () => {
    closeGroundsClick()
    window?.$message.warning('驳回成功!')
}

//取消驳回
const closeGroundsClick = () => {
    groundsModal.value = false
    groundsLoading.value = false
}

//审核通过
const doubleClick = () => {
    window?.$message.success('审核通过!')
}

//返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.hac-task-name-box {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #c5d7ff;
    border-radius: 3px;
    .label {
        position: relative;
        padding: 12px;
        background: #cddcff;
    }
    .name {
        position: relative;
        padding: 12px;
        border-left: 1px solid #c5d7ff;
    }
}
.hac-task-text-box {
    position: relative;
    font-size: 14px;
    margin-top: 14px;
}
</style>
