<template>
  <div class="app-container invoice-list">
    <!-- 筛选条件 -->
    <div class="screen-container">
      <el-form
        ref="screenForm"
        :model="screenForm"
        label-width="70px"
        size="small"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="订单号" prop="orderId">
              <el-input
                v-model="screenForm.orderId"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="当前状态" prop="status">
              <el-select v-model="screenForm.status" placeholder="全部">
                <el-option label="全部" value=""></el-option>
                <el-option label="已开票" value="true"></el-option>
                <el-option label="未开票" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl" />
        <div class="fr">
          <el-button size="small" type="primary" @click="handleExport"
            >导出报表</el-button
          >
        </div>
      </div>

      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <div style="width: 100%; display: flex">
                <div style="width: 50%">
                  <el-form label-position="left">
                    <el-form-item label="用户编号">
                      <span>{{ props.row.userId }}</span>
                    </el-form-item>
                    <el-form-item label="抬头名称">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="纳税人识别号">
                      <span>{{ props.row.taxNo }}</span>
                    </el-form-item>
                    <el-form-item label="注册地址">
                      <span>{{ props.row.registerAddress }}</span>
                    </el-form-item>
                    <el-form-item label="注册电话">
                      <span>{{ props.row.registerPhone }}</span>
                    </el-form-item>
                    <el-form-item label="开户银行">
                      <span>{{ props.row.bank }}</span>
                    </el-form-item>
                    <el-form-item label="开户账号">
                      <span>{{ props.row.account }}</span>
                    </el-form-item>
                    <el-form-item label="收票人姓名">
                      <span>{{ props.row.receiverName }}</span>
                    </el-form-item>
                    <el-form-item label="收票人电话">
                      <span>{{ props.row.receiverPhone }}</span>
                    </el-form-item>
                    <el-form-item label="收票人邮箱">
                      <span>{{ props.row.receiverEmail }}</span>
                    </el-form-item>
                    <el-form-item label="收票人地址">
                      <span>{{ props.row.receiverAddress }}</span>
                    </el-form-item>
                    <el-form-item label="发票内容">
                      <span>{{ props.row.content }}</span>
                    </el-form-item>
                    <el-form-item label="下载链接" v-if="props.row.taxLink">
                      <span>
                        <el-link
                          :href="props.row.taxLink"
                          type="primary"
                          target="_blank"
                          >{{ props.row.taxLink }}</el-link
                        >
                      </span>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- ----------------- -->
                <div style="width: 50%">
                  <el-form label-position="left">
                    <el-form-item label="以旧换新用户名">
                      <span>{{ props.row.buyerName }}</span>
                    </el-form-item>
                    <el-form-item label="以旧换新用户电话">
                      <span>{{ props.row.buyerMobile }}</span>
                    </el-form-item>
                    <el-form-item label="以旧换新身份证">
                      <span>{{ props.row.buyerIdCard }}</span>
                    </el-form-item>
                    <el-form-item label="以旧换新国补金额">
                      <span>{{ props.row.couponMerchantContribute }}</span>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
                scope.row.status ? "已开票" : "未开票"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="订单编号"
            prop="orderId"
            min-width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            label="抬头类型"
            prop="type"
            min-width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.type ? "公司" : "个人" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="抬头名称"
            prop="name"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="接收电话"
            prop="receiverPhone"
            min-width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            label="发票类型"
            prop="taxType"
            min-width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.taxType ? "专票" : "普票" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="商品分类"
            prop="categoryNames"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="接收邮箱"
            prop="receiverEmail"
            min-width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="createTime"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            label="商户"
            prop="companyName"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作"
            fixed="right"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="showDialog(scope.row)"
                >上传PDF</el-button
              >
              <el-popconfirm
                v-if="!scope.row.status"
                style="margin-left: 10px"
                title="确定已线下处理吗？"
                @confirm="offlineHandle(scope.row)"
              >
                <el-button slot="reference" type="text">线下处理</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑 -->
    <!-- ----------------- -->
    <el-dialog
      title="上传PDF地址"
      :visible.sync="addFormVisible"
      :show-close="false"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-position="left"
        label-width="150px"
      >
        <el-form-item label="发票编号" prop="orderTaxId">
          <el-input v-model="addForm.orderTaxId" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="orderId">
          <el-input v-model="addForm.orderId" disabled></el-input>
        </el-form-item>
        <el-form-item label="抬头名称" prop="name">
          <el-input v-model="addForm.name" disabled></el-input>
        </el-form-item>

        <el-form-item label="以旧换新用户名" prop="name">
          <el-input v-model="addForm.buyerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="以旧换新用户电话" prop="name">
          <el-input v-model="addForm.buyerMobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="以旧换新身份证" prop="name">
          <el-input v-model="addForm.buyerIdCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="以旧换新国补金额" prop="name">
          <el-input
            v-model="addForm.couponMerchantContribute"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="上传PDF：" prop="upTaxLink">
          <el-upload
            class="avatar-uploader"
            style="height: 122px"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="true"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :limit="1"
            ref="uploadPDF"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="tips">
            <span>请上传PDF格式文件</span>
          </div>
        </el-form-item>
        <el-form-item label="PDF地址" prop="taxLink" v-if="addForm.taxlink">
          <el-link :href="addForm.taxlink" type="primary" target="_blank"
            >预 览 PDF</el-link
          >
        </el-form-item>
        <!-- <el-form-item label="PDF地址" prop="taxLink" v-if="addForm.taxlink">
          <el-button type="primary" @click="previewPDF(addForm.taxlink)">预 览 PDF</el-button>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { getInvoiceList, changeInvoiceUrl, offlineHandle } from "@/api/invoice";
import { getToken } from "@/utils/auth";
import { downloadFiles } from "@/utils/util";

export default {
  components: {
    pdf,
  },
  data() {
    const validateUrl = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("PDF地址不能为空"));
      }
    };
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { "x-token": getToken() },
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        orderId: "",
        status: "", // 状态
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      editId: null,
      addFormVisible: false,
      addForm: {
        orderTaxId: "", // 发票编号
        orderId: "", // 订单编号
        name: "", // 抬头名称
        taxlink: "", // PDF地址
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;

      let params = {
        orderId: this.screenForm.orderId,
        status: this.screenForm.status,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };

      getInvoiceList(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1;
      this.getList();
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields();
      this.currentPage = 1;
      this.getList();
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    // 显示弹框
    showDialog(row) {
      this.addFormVisible = true;

      this.addForm = {
        orderTaxId: row.orderTaxId,
        orderId: row.orderId,
        name: row.name,
        taxlink: row.taxLink,
        buyerName: row.buyerName,
        buyerMobile: row.buyerMobile,
        buyerIdCard: row.buyerIdCard,
        couponMerchantContribute: row.couponMerchantContribute,
      };
    },
    // 取消 编辑
    cancelAddForm() {
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
      this.addForm.taxlink = "";
      this.$refs.uploadPDF.clearFiles();
    },
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.changeInvoiceUrl();
        }
      });
    },
    // 操作 - 更改发票地址
    changeInvoiceUrl() {
      if (!this.addForm.taxlink) {
        this.$errorMsg("请先上传PDF后再提交！");
        return;
      }
      changeInvoiceUrl(this.addForm).then(() => {
        this.addFormVisible = false;
        this.cancelAddForm();
        this.getList();
        this.$successMsg("上传PDF地址成功");
      });
    },
    // PDF上传
    uploadSuccess(res) {
      this.addForm.taxlink = res.data.url;
    },
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["PDF", "pdf"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg("只支持上传PDF文件!");
        return false;
      }
    },

    // 预览pdf
    previewPDF(url) {
      let loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },

    // 线下处理
    offlineHandle(item) {
      offlineHandle({
        orderTaxId: item.orderTaxId,
      }).then((res) => {
        this.$successMsg();
        this.getList();
      });
    },

    // 导出
    handleExport() {
      let screenData = {
        orderId: this.screenForm.orderId,
        status: this.screenForm.status,
      };
      downloadFiles("tax/export", screenData);
    },
  },
};
</script>

<style lang="scss">
.invoice-list {
  .table {
    .el-form-item {
      margin-bottom: 5px;
    }
  }
}
</style>
