<template>
    <el-dialog title="交易详情" :visible.sync="dialogVisible" width="30%" >
        <div>
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>业务详情</span>
              </div>
             <div  class="text item" v-if="hisData">
               <div class="itemlist">
                   <div class="itemleft">交易时间：</div>
                   <div>{{hisData.trade_date}}</div>
               </div>
               <div class="itemlist">
                   <div class="itemleft">业务名称：</div>
                   <div>{{hisData.account_type_text}}</div>
               </div>
               <div class="itemlist">
                   <div class="itemleft">交易金额：</div>
                   <div>{{cutMoneyFiter(hisData.amount)}}</div>
               </div>
               <div class="itemlist">
                   <div class="itemleft">第三方流水号：</div>
                   <div>{{hisData.stream_no}}</div>
               </div>
               <div class="itemlist" v-if="hisData.bank_sn">
                   <div class="itemleft">银行流水号：</div>
                   <div>{{hisData.bank_sn}}</div>
               </div>
               <div class="itemlist">
                   <div class="itemleft">账户类型：</div>
                   <div>{{hisData.ywlx_text}}</div>
               </div>
               <div class="itemlist">
                   <div class="itemleft">就诊卡号：</div>
                   <div>{{hisData.card_no}}</div>
               </div>
             </div>
             <el-empty description="暂无数据" :image-size="80" style="padding:0 !important;"  v-else></el-empty>
            </el-card>
            <el-card shadow="always" style="margin-top: 20px;">
              <div slot="header" class="clearfix">
                <span>交易状态跟踪</span>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="orderData">{{orderData.pay_text}}</el-button>
              </div>
              <div  class="text item" v-if="orderData">
                <div class="itemlist" v-if="orderData.bank_flow_no">
                    <div class="itemleft">银行交易流水号：</div>
                    <div>{{orderData.bank_flow_no}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">第三方流水号：</div>
                    <div>{{orderData.out_trade_no}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">交易金额：</div>
                    <div>{{cutMoneyFiter(orderData.amount)}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">支付方式：</div>
                    <div>{{orderData.cheque_text}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">交易状态：</div>
                    <div>{{orderData.status == 'succ' ? '成功' : '失败'}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">发起交易时间：</div>
                    <div>{{orderData.time_start}}</div>
                </div>
                <div class="itemlist">
                    <div class="itemleft">结束交易时间：</div>
                    <div>{{orderData.time_expire}}</div>
                </div>
              </div>
              <el-empty description="暂无数据" :image-size="80" style="padding:0 !important;"  v-else></el-empty>
            </el-card>
        </div>
    </el-dialog>

</template>

<script>
import {
    getdealDetail
} from '@/api/financial'
export default {
    name: 'OrderDetail',
    props: {
        visible: Boolean,
        outTradeNo:String,
        ywlx:String
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 表格数据
            list: [],
            // 总条数
            total:0,
            // 分页参数
            pageInfo: {
                page: 1,
                limit: 10,
            },
            hisData:null,
            orderData:null
        };
    },
   watch: {
       outTradeNo: {
           immediate: true,
           handler (val, old) {
              this.getDetail();
           },
       }
   },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            },
        },
    },
    methods: {
        getDetail(){
            this.loading = true
            const qyparams = {
                'out_trade_no':this.outTradeNo,
                'ywlx':this.ywlx
            }
            getdealDetail(qyparams).then(response => {
                this.hisData = response.data.hisData
                this.orderData = response.data.orderData
            }).finally(() => {
                this.loading = false
            })
        },
        toggleDialog(key, visible) {
            this[key] = visible;
        },
        handleOk() {},
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .itemlist{
        display: flex;
        padding: 5px 0;
        align-items: center;
    }
    .itemleft{
        width: 115px;
        display:inline-block;
        text-align: justify;
        text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
        text-align-last: justify;
        color:#999;
    }
</style>
