<template>
  <div>
    <!-- 头部 -->
    <div class="QueryInvoice" style="margin: 10px 15px">
      <el-row :gutter="30">
        <el-col :span="30">
          <el-form :inline="true" :model="invoiceQruey">
            <el-form-item>
              <el-input v-model="invoiceQruey.number" placeholder="请输入发票号码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="invoiceQruey.code" placeholder="请输入发票代码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="invoiceQruey.category" placeholder="请选择发票类型">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.category"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="invoiceQruey.type" placeholder="请选择发票类别">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="invoiceQruey.status" placeholder="请选择发票状态">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.status"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="30">
          <el-button type="primary" icon="el-icon-search" @click="selectexpend()">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-right" @click="upddlist()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="drawer">
      <el-table
        :data="invoicegetList"
        border
        style="width:100%"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="序号" width="50" style>
          <template slot-scope="scope">
            {{
            (invoiceQruey.pageNum - 1) * invoiceQruey.pageSize +
            scope.$index +
            1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="发票代码"></el-table-column>
        <el-table-column prop="number" label="发票号码" width="width"></el-table-column>
        <el-table-column prop="time" label="发票时间" :formatter="getFroms"></el-table-column>
        <el-table-column prop="category" label="发票类型">
          <template slot-scope="scope">
            <el-tag :type="scope.row.category == '0' ? 'info' : 'primary'">
              {{
              scope.row.category == "0" ? "普票" : "专票"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="发票类别">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.type == '0'
                  ? 'success'
                  : scope.row.type == '1'
                  ? 'danger'
                  : 'warning'
              "
            >
              {{
              scope.row.type == "0"
              ? "收入"
              : scope.row.type == "1"
              ? "支出"
              : "报销"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="mone" label="发票金额"></el-table-column>
        <el-table-column prop="prop" label="发票文件" width="120px">
          <template slot-scope="scope">
            <div v-if="formatProtocolType(scope.row)">
              <el-image
                style="width: 80px; height: 80px"
                :src="scope.row.fileUrl"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <div v-else>
              <a class="a-style" @click="handlePreView(scope.row)">点击查看文件</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="发票状态" width="90px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == '0' ? 'info' : 'warning'">
              {{
              scope.row.status == 0 ? "未报销" : "已报销"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作">
          <template slot-scope="scope">
            <el-popover placement="top" width="160" v-model="scope.row.visible">
              <p>确定要删除当前发票吗</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="YesGet(scope.row)">确定</el-button>
              </div>
              <el-button
                type="danger"
                icon="el-icon-delete"
                slot="reference"
                size="mini"
                :disabled="scope.row.status == 0 ? false : true"
              ></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 分页 -->
          <div class="foot_yi">
            <el-pagination
              @current-change="handleCurrentChange"
              layout="total, prev, pager, next"
              :total="total"
              :current-page.sync="invoiceQruey.pageNum"
              :page-size="invoiceQruey.pageSize"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { insertList, queryBypageIncomeAdd, deleteexpen } from "@/api/project";
import { getFileUrl } from "@/api/companyFile";
import { categoryOptions, typeOptions, statusOptions } from "../expense";
export default {
  computed: {
    ...mapGetters(["companyId", "urId"])
  },
  created() {
    this.action = process.env.VUE_APP_BASE_API + "/file/uploadFile";
    this.getincomeSelectlist();
  },
  data() {
    return {
      invoiceQruey: {
        pageNum: 1,
        pageSize: 10
      },
      invoicegetList: [],
      categoryOptions,
      typeOptions,
      statusOptions,
      total: 0,
      srcList: []
    };
  },
  methods: {
    //发票的分页查询
    getincomeSelectlist() {
      const params = {
        ...this.invoiceQruey,
        companyId: this.companyId,
        userId: this.urId
      };
      queryBypageIncomeAdd(params)
        .then(res => {
          if (res.success) {
            this.total = res.data.total;
            res.data.list.forEach(e => {
              let fileNamepdf = e.filePath;
              let fileType = fileNamepdf.substring(
                fileNamepdf.lastIndexOf(".")
              );
              getFileUrl(e.filePath).then(res => {
                if (res.success) {
                  let url = res.data;
                  e.fileUrl = url;
                  if (fileType != ".pdf") {
                    this.srcList.push(url);
                  }
                }
              });
            });
            this.invoicegetList = res.data.list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error("查询发票数据失败");
        });
    },
    //换页
    handleCurrentChange(val) {
      this.invoiceQruey.pageNum = val;
      this.getincomeSelectlist();
    },
    //时间处理
    getFroms(value) {
      var dt = new Date(value.time);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      let date = dt.getDate();
      return `${year}年${month}月${date}日`;
    },
    //图片与pdf文件的处理
    formatProtocolType(row) {
      //这里判断的是是否有文件
      if (row.filePath == null) {
        return false;
      } else {
        let fileNamepdf = row.filePath;
        let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
        if (fileType != ".pdf") {
          return true;
        } else {
          return false;
        }
      }
    },
    //查询
    selectexpend() {
      this.invoiceQruey.pageNum = 1;
      this.getincomeSelectlist();
    },
    //重置
    upddlist() {
      this.invoiceQruey.pageNum = 1;
      this.invoiceQruey.number = null;
      this.invoiceQruey.code = null;
      this.invoiceQruey.category = null;
      this.invoiceQruey.type = null;
      this.invoiceQruey.status = null;
      this.getincomeSelectlist();
    },
    //发票的删除操作
    YesGet(row) {
      deleteexpen(row)
        .then(res => {
          if (res.success) {
            this.visible = false;
            this.$message({
              message: "发票删除成功",
              type: "success"
            });

            this.getincomeSelectlist();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(e => {
          console.log(e.msg);
          this.$message.error(e.msg);
        });
    },
    //点击查看发票
    handlePreView(row) {
      const photopath = row.fileUrl;
      window.open(photopath, "_blank");
    }
  }
};
</script>

<style>
.foot_yi {
  text-align: right;
}
</style>