<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <div class="search">
                <div class="search_left">

                    <div class="search_left_1">
                        <el-form-item label="工号">
                            <el-input v-model="searchData.gh"></el-input>
                        </el-form-item>

                        <el-form-item label="患者信息">
                            <el-input v-model="searchData.hzxx" placeholder="患者姓名、身份证号、住院号"></el-input>
                        </el-form-item>
                        <el-form-item label="时间范围">
                            <el-date-picker v-model="searchData.sjfw" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-button type="primary" @click="searchsome">查找</el-button>
                        <el-button type="primary" @click="deletelist">重置</el-button>
                    </div>
                </div>
            </div>
        </el-form>
        <el-table v-loading="loading" class="eltable" :data="tableData1" style="width: 100%"
            :header-cell-style="{ background: '#49ABF5', color: '#FFFFFF' }" element-loading-text="拼命加载中"
            >
            <el-table-column align="center" property="id" label="ID"></el-table-column>
            <el-table-column align="center" property="patient.xm" label="病人姓名"></el-table-column>

            <!-- <el-table-column align="left" property="yyxmmc" label="发票号" width="120"></el-table-column> -->
            <!-- <el-table-column align="left" property="scqy" label="电子发票" width="120"></el-table-column> -->
            <el-table-column align="center" property="brjsrq" label="结算日期" width="120"></el-table-column>
            <el-table-column align="center" property="job_number" label="工号" width="120"></el-table-column>
            <el-table-column align="center" property="his_inpatient_no" label="住院流水号" width="120"></el-table-column>

            <el-table-column align="center" property="gjzhzf" label="共济支付"></el-table-column>
            <el-table-column align="center" property="grzhzf" label="个账支付"></el-table-column>
            <el-table-column align="center" property="ybfdje" label="医保负担"></el-table-column>
            <el-table-column align="center" property="brfdje" label="病人负担"></el-table-column>
            <el-table-column align="center" property="zje" label="总费用"></el-table-column>
            <el-table-column align="center" property="payment_amount" label="缴款" width="120"></el-table-column>
            <el-table-column align="center" property="status.name" label="状态"></el-table-column>
            <!-- <el-table-column align="center" property="zje" label="结算金额 " width="120"></el-table-column> -->

            <!-- <el-table-column align="center" property="zxgg" label="操作员工"></el-table-column> -->


            <el-table-column prop="operate" label="操作" align="center"  width="250">
                <template slot-scope="scope">
                    <div><el-link type="primary" @click="Paymentrefund(scope.row)" style="margin-right: 20px;">预交金历史</el-link>
                    <el-link type="primary" @click="Advancepayment(scope.row)">缴退历史</el-link></div>
                    <div style="display: flex;justify-content: space-between;width: 50%;margin: 0 auto;"><el-link type="primary" @click="fapiao(scope.row)">发票</el-link>
                    <el-link type="primary" @click="tcd(scope.row)">统筹单</el-link>
                    <el-link type="primary" @click="jssq(scope.row)">结算</el-link></div>

                    <!-- <el-button @click="Paymentrefund(scope.row)" type="text" size="mini"
                        style="color:rgb(67, 159, 255);font-weight: bold;">缴退历史</el-button>
                    <el-button @click="Advancepayment(scope.row)" type="text" size="mini"
                        style="color:rgb(67, 159, 255);font-weight: bold;">预交金历史</el-button> -->
                </template>
            </el-table-column>

        </el-table>
        <div style="">
            <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="desali()" />
        </div>
        <el-dialog title="预交金列表" :visible.sync="Paymentrefund_show">
            <el-table :data="Paymentrefund_list" tooltip-effect="dark" style="width: 100%; height: 630px; overflow-y: auto"
                :header-cell-style="{ background: '#49ABF5', color: '#FFFFFF' }"
                element-loading-text="拼命加载中">
                <el-table-column prop="payWay" label="支付渠道" width="110"> </el-table-column>
                <el-table-column prop="openAccounts" label="银行卡号"> </el-table-column>
                <el-table-column prop="prepayCost" label="预交金额"> </el-table-column>
                <el-table-column prop="bankTranno" align="center" label="预交金状态">
                    <template slot-scope="scope">
                   <span v-if="scope.row.prepayState=='0'">收取</span>
                   <span v-if="scope.row.prepayState=='1'">作废</span>
                   <span v-if="scope.row.prepayState=='2'">补打</span>
                   <span v-if="scope.row.prepayState=='3'">结算召回作废</span>
                </template>
                </el-table-column>
                <!-- <el-table-column prop="ck_no" align="center" label="参考号"> </el-table-column> -->
                <el-table-column prop="inprepayDate" align="center" label="充值交易时间"> </el-table-column>
            </el-table>

        </el-dialog>
        <el-dialog title="缴退款列表" :visible.sync="Advancepayment_show">
            <el-table :data="Advancepayment_list" tooltip-effect="dark" style="width: 100%; height: 630px; overflow-y: auto"
                :header-cell-style="{ background: '#49ABF5', color: '#FFFFFF' }"
                element-loading-text="拼命加载中">
                <el-table-column prop="source.name" label="支付渠道" width="110"> </el-table-column>
                <el-table-column prop="job_number" label="工号"> </el-table-column>
                <el-table-column prop="amount" label="金额"> </el-table-column>
                <el-table-column prop="serial_number" align="center" label="流水号"> </el-table-column>
                <el-table-column prop="bank_data.referNo" align="center" label="参考号"> </el-table-column>
                <el-table-column prop="type" label="缴/退款">
                    <template slot-scope="scope">
                   <span v-if="scope.row.type=='out'">退款</span>
                   <span v-if="scope.row.type=='in'">缴款</span>
                </template>
                </el-table-column>
                <el-table-column prop="created_at" align="center" label="创建时间"> </el-table-column>
            </el-table>


        </el-dialog>
    </div>
</template>
<script>
import { jiesuanlist ,rechargeList,invoice} from '@/api/jiesuan'
import { settlement_history, mztk, mzcs, mis_refund } from '@/api/mz'
export default {
    name: 'Outpatient',
    data() {
        return {
            total: 0,
            pageInfo: {page: 1, limit: 10,},
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            Paymentrefund_show: false,
            Advancepayment_show: false,
            Paymentrefund_list: [],
            Advancepayment_list: [],
            value1: '',
            value2: '',
            project_id: '',
            current_tab: 'one',
            loading: false,
            form: {
                id: '',
                yyxmbm: '',
                yyxmmc: '',
                scqy: '',
                bzgg: '',
                bzsl: '',
                xzbz: '',
            },
            searchData: {
              sjfw:'',
              hzxx:'',
              gh:''
            },
            tableData1: [

            ],
            visible: false,

        }
    },
    mounted() {

    },
    created() {
        this.desali()
    },
    methods: {
        jssq(e){
            if ( localStorage.getItem('SET_TOKEN')==null) {
                window.location.href = "/yibaomanager/jiesuan?" + e.his_inpatient_no ;
            }else{
                window.location.href = "/yibaomanager/jiesuan?a=" + e.his_inpatient_no + "&token=" + localStorage.getItem('SET_TOKEN') +"";
            }

        },
        searchsome(){
            this.desali()
        },
        deletelist(){
           this.searchData.sjfw=''
           this.searchData.hzxx=''
           this.searchData.gh=''
            this.desali()
        },
        fapiao(e){
            invoice({
                his_inpatient_no:e.his_inpatient_no
            })
                .then(response => {
                    window.open(response.data.url)
                })
                .finally(() => {

                })
        },
        tcd(e){
            window.open (process.env.VUE_APP_BASE_URL+'/invoice/tcd?his_inpatient_no='+e.his_inpatient_no)
        },
        desali() {
            
            this.tableData1 = []
            this.param = {
                ...this.pageInfo,
                is_zy: 1,
                take: '10',
                patient: this.searchData.hzxx,
                job_number:this.searchData.gh,
                start_time:this.searchData.sjfw[0],
                end_time:this.searchData.sjfw[1],
                // ...this.ruleForm
            }
            settlement_history(this.param)
                .then(response => {
                    this.tableData1 = response.data
                    this.total = response.meta.total
                })
                .finally(() => { })
        },
        Paymentrefund(e) {
            this.Paymentrefund_show = true
            this.Paymentrefund_list=[]
            const qyparams = {
                his_inpatient_no: e.his_inpatient_no,
            }
            jiesuanlist(qyparams)
                .then(response => {
                    this.Paymentrefund_list = response.data
                })
                .finally(() => {
                    this.loading = false
                })
        },
        Advancepayment(e) {
            this.Advancepayment_show = true
            this.Advancepayment_list = []
            const qyparams = {
                his_inpatient_no:e.his_inpatient_no,
                ...this.pageInfo,
            }
            rechargeList(qyparams)
                .then(response => {
                    this.loading = false
                    this.Advancepayment_list = response.data

                    this.$forceUpdate()
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-table{
    width: 100%;
    // height: 489px;
    //overflow: auto;
}
 ::v-deep .el-table__body-wrapper{
    height: calc(100vh - 246px);
    overflow: auto;

}
::v-deep .pagination-container{
    height: 50px;
}
</style>
