<template>
    <el-dialog
        title="发票详情"
        :close-on-click-modal="false"
        :visible.sync="detailsVisible"
        :before-close="close"
    >
        <!-- <div class="details flexs">
            <div class="details-left">
                <div class="QRcode flexs mb10">
                    <div>二维码:</div>
                    <el-image
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        style="width:60px;height:60px"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    ></el-image>
                </div>
                <div class="number mb10">
                    <span>机器编号: 001</span>
                </div>
                <div class="buyer flexs">
                    <div class="buyer-left">
                        <span>购买方</span>
                    </div>
                    <div class="buyer-right">
                        <p>名称: 某某企业</p>
                        <p>纳税人识别号: 001</p>
                        <p>地址、电话：10086</p>
                        <p>开户行及账号：001</p>
                    </div>
                </div>
            </div>
            <div class="details-right mb10">
                <div class="right-top">
                    <p>发票代码: 001</p>
                    <p>发票号码: 001</p>
                    <p>发票日期: 2020-02-02</p>
                    <p>校验码: 001</p>
                </div>
                <div class="QRcode flexs">
                    <div>密码区:</div>
                    <el-image
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        style="width:60px;height:60px"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"
                    ></el-image>
                </div>
            </div>
        </div>-->
        <div class="MaintenanceTable">
            <el-form :model="ruleData" ref="ruleData">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发票种类：" style="margin-left:10px;">
                            <span v-if="ruleData.invoiceType == 2">专用发票</span>
                            <span v-if="ruleData.invoiceType == 1">电子发票</span>
                            <span v-if="ruleData.invoiceType == 0"></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发票类型：">
                            <span v-if="ruleData.userInvoice.type == 2">企业</span>
                            <span v-if="ruleData.userInvoice.type == 1">个人</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="ruleData.invoiceType == 1">
                    <el-col :span="24">
                        <el-form-item label="">
                            <span style="margin-left:10px;">邮箱：{{ ruleData.email }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="ruleData.invoiceType == 2">
                    <el-col :span="12">
                        <el-form-item label="">
                            <span style="margin-left:10px;">收票人：{{ ruleData.receiveTicket }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span>收票人电话：{{ ruleData.receiveMebile }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="ruleData.invoiceType == 2">
                    <el-col :span="24">
                        <el-form-item label="">
                            <span style="margin-left:10px;">收票人地址：{{ ruleData.receiveAddress }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span style="margin-left:10px;">发票抬头：{{ ruleData.userInvoice.name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span>税号：{{ ruleData.userInvoice.enterpriseNumber }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span style="margin-left:10px;">地址：{{ ruleData.userInvoice.gmfDz }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span>电话：{{ ruleData.userInvoice.gmfDh }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span style="margin-left:10px;">开户行：{{ ruleData.userInvoice.gmfYh }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <span>账号：{{ ruleData.userInvoice.gmfZh }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                tooltip-effect="dark"
                class="OutTable"
                v-loading="listLoading"
            >
                <el-table-column prop="xmmc" label="货物或应税、服务名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="dw" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="xmsl" label="数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="xmdj" label="单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="xmze" label="金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="sl" label="税率(%)" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="se" label="税额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime | formatTimePipe }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="details-bottom">
                <div class="details-bottom-total flexs">
                    <span>价税合计: {{formData.jshj | pricePipe(2, '￥', true) }}</span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { queryDetails } from '@/apps/mobile/api/payment/auditInvoice/index';
export default {
    data() {
        return {
            id: null,
            ruleData: {},
            listLoading: false,
            detailsVisible: false,
            tableData: [],
            formData: {},
        };
    },
    methods: {
        open(data) {
            this.ruleData = data.ruleData;
            this.id = data.id;
            this.getDetails();
            this.detailsVisible = true;
        },
        close() {
            this.formData = {};
            this.tableData = [];
            this.detailsVisible = false;
        },
        getDetails() {
            queryDetails(this.id)
                .then(res => {
                    this.formData = res.data;
                    this.tableData = res.data.invoiceItem;
                })
                .catch();
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
.max150 {
    max-width: 150px;
}
.max200 {
    max-width: 200px;
}
.total {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
}
.MaintenanceTable {
    margin-top: 20px;
}
.details {
    justify-content: space-between;
}
.details > div {
    flex: 1;
}
.flexs {
    display: flex;
}
.QRcode > div {
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
}
.mb10 {
    margin-bottom: 10px;
}
.buyer-left {
    height: 72px;
    line-height: 72px;
    margin-right: 30px;
}
.details p {
    margin-bottom: 5px;
}
.details-right {
    padding-left: 40px;
}
.right-top {
    padding-left: 60px;
    margin-bottom: 10px;
}
.details-bottom {
    padding: 20px;
}
.details-bottom-total {
    justify-content: space-between;
    margin-bottom: 10px;
}
.buyer-right p {
    margin-bottom: 5px;
}
.foot {
    justify-content: space-between;
    margin-top: 10px;
}
::v-deep .el-dialog__header .el-dialog__title {
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
}
</style>