<template>
    <div class="detail_area refund-detail_area">
    <!-- 添加或修改发票对话框 -->
<!--    <el-dialog title="退费记录详情" v-model="detailDialog" width="700px" append-to-body>-->
        <div class="content-refund">
          <div class="header">
              <div>
                  <span>退款单号：{{ form.refundCode  }}</span> <span> 待审批（小王）</span>
              </div>
              <div>
                  <el-button  icon="Edit" type="success" @click="handleUpdate">编辑退款单</el-button>
                  <el-button icon="Check" type="primary" @click="submitApprove">提交审批</el-button>
                  <el-button type="warning" icon="Delete" @click="delRefund">删除退款单</el-button>
              </div>
          </div>
            <div class="center">
                <el-descriptions column="2" title="基本信息" border>

                    <el-descriptions-item label="退款金额：">{{ form.refundAmount }}</el-descriptions-item>
                    <el-descriptions-item label="退款日期：">{{ form.refundDate }}</el-descriptions-item>
                    <el-descriptions-item label="关联客户：">{{ form.customerId }}</el-descriptions-item>

                    <el-descriptions-item label="关联订单：">{{ form.orderId }}</el-descriptions-item>


                    <el-descriptions-item label="附件下载：">xxx.pdf</el-descriptions-item>
                    <el-descriptions-item label="退款单号：">{{ form.refundCode }}</el-descriptions-item>
                    <el-descriptions-item label="退款描述：">{{ form.remark }}</el-descriptions-item>

                </el-descriptions>
                <div class="nav_sec" style="background: #fff;margin-top: 30px">
                    <div class="title flex">
                        <span class="bold" style="font-size: 16px">退款动态</span>
                    </div>
                    <div>
                        <Follow :followParams="followParams" :showAll="onlyFollow"></Follow>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <addRefund ref="addRefundRef" @onOk="detail"></addRefund>
</template>

<script setup name="RefundRecord" lang="ts">
import {
    listRefundRecord,
    getRefundRecord,
    delRefundRecord,
    approveRefundRecord,
    addRefundRecord,
    updateRefundRecord
} from '@/api/finance/refundRecord';
import {RefundRecordVO, RefundRecordQuery, RefundRecordForm} from '@/api/finance/refundRecord/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import {tableTypes} from '@/components/Table/types'
import {useDictCache} from "@/hooks/web/useDict";
import {listOrderForm} from "@/api/orderForm";
import addRefund from "./addRefund.vue";
import Follow from '@/components/Follow/index.vue'
const router = useRouter()
const route = useRoute()

const {queryDictDetailByCodes} = useDictCache(['order_review_status'])
queryDictDetailByCodes()
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const loading = ref(true);
const onlyFollow = ref(true);
const detailDialog = ref(false);//详情
const addRefundRef = ref();//详情
const refundDate = ref();//
const createdDate = ref();//
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const refundRecordFormRef = ref<ElFormInstance>();
let queryData = router.currentRoute.value.query
const followParams:any = ref({
    resourceType: 110,
    resourceTypeId: queryData.id,
})


const initFormData: RefundRecordForm = {
    id: undefined,
    refundCode: undefined,
    refundAmount: undefined,
    refundMethod: undefined,
    refundDate: undefined,
    customerId: undefined,
    orderId: undefined,
    invoicingType: undefined,
    approveStatus: undefined,
    remark: undefined,
    ownerBy: undefined
}
const form = reactive<RefundRecordForm>({
    ...initFormData
});

// form.id = queryData.id

/** 表单重置 */
const reset = () => {
    refundRecordFormRef.value?.resetFields();
}

const refundRecordTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    refundRecordTable.value.getData()
}
/** 取消按钮 */
const detailCancel = () => {
    detailDialog.value = false;
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}
const submitApprove = async()=>{

    let res = await approveRefundRecord(form.id)
    if(res.success) {
        ElMessage.success('删除成功')
    }else{
        ElMessage.error('删除失败')
    }
    detail()
}
const delRefund = async ()=>{
    let res = await delRefundRecord(form.id)
    if(res.success) {
        ElMessage.success('删除成功')
    }else{
        ElMessage.error('删除失败')
    }
    router.push('/financial/refundRecord')
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: RefundRecordVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 修改按钮操作 */
const detail = async () => {
    const res = await getRefundRecord(form.id);
    Object.assign(form, res.result);
}

/** 修改按钮操作 */
const handleUpdate = async () => {
    addRefundRef.value.handleUpdate(form.id)
}
const getList = () => {
    refundRecordTable.value.getData()
}


onMounted(() => {
    if(route.query.id){
        detail()
    }

});
</script>
<style lang="scss" scoped>
.refund-detail_area{
    display: flex;
    justify-content: center;
    .content-refund{
        display: flex;
        flex-direction: column;
        width: 1200px;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            margin-bottom: 20px;
            padding: 20px 30px
        }
    }
    .center{
        padding: 30px;
        box-sizing: border-box;
        background: #fff;

    }

}
</style>
