<template>
    <div class="app-container">
        <el-tabs v-model="goodsType" @tab-click="onChangeGoodsType">
            <template v-for="(dict, i) in dict.type.goods_type">
                <el-tab-pane :key="i" :label="dict.label" :name="dict.value" v-if="dict.label !== '材料商品'"></el-tab-pane>
            </template>
        </el-tabs>
        <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="realName">
                <el-input v-model="queryParams.realName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="refundStatus">
                <el-select v-model="queryParams.refundStatus" placeholder="请选择支付状态" clearable>
                    <el-option v-for="dict in dict.type.goods_order_refund_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!--            <el-col :span="1.5">-->
            <!--                <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['order:goods:export']" v-if="userInfoVO.userType == '00'">导出</el-button>-->
            <!--            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <Page uri="/mapi/order/goods/refundOrderGoodsList" :request-params="queryParams" ref="pagination">
            <!--      <el-table-column type="selection" width="55" align="center" fixed="left"/>-->
            <el-table-column label="订单编号" align="center" prop="orderNo" width="190" />
            <el-table-column label="客户信息" align="center" width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.realName ? scope.row.realName : '--' }}</span>
                    <br />
                    <span>{{ scope.row.phoneNumber ? scope.row.phoneNumber : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单总价（元）" align="center" prop="orderAmount" width="120px" />
            <el-table-column label="支付金额（元）" align="center" prop="payAmount" width="120px" />
            <el-table-column label="支付方式" align="center" prop="payType" width="120px">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
              </template>
            </el-table-column>
            <el-table-column label="退款金额（元）" align="center" prop="refundAmount" width="120px" />
            <el-table-column label="退款描述" align="center" prop="refundReason" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.refundReason ? scope.row.refundReason : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="退款状态" align="center" prop="refundStatus" width="100px">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.goods_order_refund_status" :value="scope.row.refundStatus" />
                </template>
            </el-table-column>
            <el-table-column label="退款时间" align="center" prop="refundTime" width="140px" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="250">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-check" @click="approvalYes(scope.row)" v-if="scope.row.refundStatus == '1' && userInfoVO.userType == '00'">退款审核同意</el-button>
                    <el-button type="text" icon="el-icon-close" @click="approvalNo(scope.row)" v-if="scope.row.refundStatus == '1' && userInfoVO.userType == '00'">退款审核驳回</el-button>
                    <el-button type="text" icon="el-icon-chat-dot-square" @click="orderDetail(scope.row)">订单详情</el-button>
                </template>
            </el-table-column>
        </Page>

        <!--    详情-->
        <el-dialog :title="detailTitle" :visible.sync="openDetail" width="80%" append-to-body>
            <el-card>
                <el-descriptions title="客户信息" v-show="detailView" :column="3" border :label-style="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'center' }">
                    <el-descriptions-item label="客户姓名">{{ detailView.realName }}</el-descriptions-item>
                    <el-descriptions-item label="客户手机号">{{ detailView.phoneNumber }}</el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <dict-tag :options="dict.type.order_goods_status" :value="detailView.orderStatus" />
                    </el-descriptions-item>
                    <el-descriptions-item label="收货联系人">{{ detailView.contactName ? detailView.contactName : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="收货人手机号">{{ detailView.contactPhone ? detailView.contactPhone : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{ detailView.createTime ? detailView.createTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ detailView.payTime ? detailView.payTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="发货时间">{{ detailView.sendTime ? detailView.sendTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="确认收货时间">{{ detailView.finishTime ? detailView.finishTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="订单总价">{{ detailView.totalPrice ? detailView.totalPrice : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="物流公司">{{ detailView.deliveryCompany ? detailView.deliveryCompany : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="物流单号">{{ detailView.totalPrice ? detailView.totalPrice : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="收货地址" span="3">{{ detailView.province }}{{ detailView.city }}{{ detailView.area }}{{ detailView.address }}{{ detailView.addressDetail }}</el-descriptions-item>
                    <el-descriptions-item label="备注信息" span="3">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div class="head-column2">
                <el-table v-loading="detailLoading" :data="detailView.orderGoodsSkuList">
                    <el-table-column label="分类" align="center" prop="goodsCategoryName" />
                    <el-table-column :label="goodsType == 0 ? '商品名称' : '材料名称'" align="center" prop="goodsName" width="250px" />
                    <el-table-column :label="goodsType == 0 ? '商品规格' : '材料规格'" align="center" width="250px">
                        <template slot-scope="scope">
                            <div style="text-align: center">{{ scope.row.skuName.replace(' ', '/') }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" align="center" prop="buyNum" />
                    <el-table-column label="价格（元）" align="center" prop="salePrice" />
                    <el-table-column label="总和（元）" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.buyNum * scope.row.salePrice }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row :gutter="10" class="box-shadow" style="margin-top: 10px">
                <el-col :span="21">
                    <el-form label-width="130px" style="height: 80px; padding-top: 20px; text-align: right" :inline="true" size="small">
                        <el-form-item label="总金额（元）:">
                            {{ costTotalPrice }}
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import {
  cancelOrder,
  getGoods,
  getRefundGoods,
  listGoods,
  outOrderGoods,
  refundApprovalPass,
  refundApprovalReject,
  refundOrderGoodsList,
  rePayOrder
} from '@/api/order/goods'
import { findUserByPhoneNumber, getUser } from '@/api/app/user'

export default {
    name: 'refundRetailOrder',
    dicts: ['order_goods_status', 'delivery_company', 'recharge_pay_type', 'goods_order_refund_status', 'goods_type'],
    data() {
        return {
            userInfoVO: null,
            orderLoading: true,
            // 遮罩层
            loading: false,
            detailLoading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            detailTitle: '',
            // 是否显示弹出层
            openDetail: false,
            openApprovalPage: false,
            // 查询参数
            queryParams: {
                realName: null,
                phoneNumber: null,
                orderNo: null,
                refundStatus: null
            },
            // 表单参数
            payFrom: {},
            // 表单校验
            rules: {},
            goodsType: null,
            // 商品订单表格数据
            GoodsList: [],
            // 可选商品集合
            goodsList: null,
            // 总金额
            totalPrice: 0,
            // 总件数
            totalCount: 0,
            // 详情数据
            detailView: {},
            // detailList:[],
            // 详情总金额
            costTotalPrice: null
        }
    },
    created() {
        this.handleUser()
        this.goodsType = this.getUrlParam('goodsType')
        this.getList()
    },
    methods: {
        onChangeGoodsType() {
            this.queryParams.goodsType = this.goodsType
            this.handleQuery()
        },
        handleUser() {
            this.userInfoVO = this.getUserInfo()
        },
        getList() {
            this.queryParams.goodsType = this.goodsType
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 订单详情
        orderDetail(row) {
            this.openDetail = true
            this.detailTitle = '订单商品详情'
            this.detailLoading = true
            this.detailView = {}
            const id = row.id
          getRefundGoods(id).then((response) => {
                this.detailView = response.data
                this.costTotalPrice = this.detailView.totalPrice
                this.detailLoading = false
            })
        },
        approvalYes(row) {
            this.$confirm('是否确认同意退款申请？')
                .then(() => {
                    refundApprovalPass({ orderId: row.id }).then((response2) => {
                        this.$message.success('操作成功')
                        this.getList()
                    })
                })
                .catch(() => {})
        },
        approvalNo(row) {
            this.$confirm('是否确认驳回退款申请？')
                .then(() => {
                    refundApprovalReject({ orderId: row.id }).then((response2) => {
                        this.$message.success('操作成功')
                        this.getList()
                    })
                })
                .catch(() => {})
        },
        checkClose(done) {
            this.$confirm('是否关闭支付页面，放弃支付？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/order/goods/exportByRefund',
                {
                    ...this.queryParams,
                    ...{ goodsType: this.goodsType }
                },
                `goods_orderRefund_${new Date().getTime()}.xlsx`
            )
        }
    }
}
</script>
<style>
.list_title {
    text-align: center;
    line-height: 40px;
}
.head-container-two {
    height: 500px;
    display: block;
    overflow-y: scroll;
}
.head-column1 {
    height: 300px;
    display: block;
    overflow-y: scroll;
}
.head-column2 {
    height: 600px;
    display: block;
    overflow-y: scroll;
}
.box-shadow .el-button--medium {
    font-size: 18px;
}
</style>
