<template>
  <div>
    <!-- 发票模块 -->
    <div class="QueryInvoice" style="margin:10px 15px">
      <el-row :gutter="30">
        <el-col :span="30">
          <el-form :inline="true" :model="invoiceList">
            <el-form-item label="发票号码" style="margin-left">
              <el-input v-model="invoiceList.number" placeholder="发票号码"></el-input>
            </el-form-item>
            <el-form-item label="发票代码">
              <el-input v-model="invoiceList.code" placeholder="发票代码"></el-input>
            </el-form-item>
            <el-form-item label="发票类型">
              <el-select v-model="invoiceList.category" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.category"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票类别">
              <el-select v-model="invoiceList.type" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票状态">
              <el-select v-model="invoiceList.status" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.status"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" style="margin:20px 5px;">
          <el-button
            type="primary"
            icon="el-icon-search"
            style="margin:1px 5px;"
            @click="selectexpend()"
          >查询</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="upddlist()">重置</el-button>
          <el-button type="success" icon="el-icon-download" @click="Reimbursement()">添加发票单</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="drawer" v-show="isgetid==0" style="margin-left:15px">
      <el-table :data="invoicegetList.list" border style="width:99%">
        <el-table-column label="序号" width="50" style>
          <template slot-scope="scope">
            {{
            (invoiceList.pageNum - 1) * invoiceList.pageSize +
            scope.$index +
            1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="发票号码" width="width"></el-table-column>
        <el-table-column prop="code" label="发票代码"></el-table-column>
        <el-table-column prop="time" label="发票时间"></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="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="4" style=" margin: 15px 70%;">
          <!-- 分页 -->
          <div class="foot_yi">
            <el-pagination
              @current-change="getincomeSelectlist"
              layout="total, prev, pager, next"
              :total="invoicegetList.total"
              :current-page="invoiceList.pages"
              background
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 添加区域 -->
    <div class="getadd" v-show="isgetid==1" style="margin-left:5%">
      <el-row>
        <el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
          <el-form
            style="width:100%;margin:30px 0px"
            :model="addTO"
            :rules="rules"
            ref="addTO"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="发票号码" prop="number">
              <el-input v-model="addTO.number" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="发票代码" prop="code">
              <el-input v-model="addTO.code"></el-input>
            </el-form-item>
            <el-form-item label="发票时间" required prop="time">
              <el-date-picker
                v-model="addTO.time"
                type="datetime"
                placeholder="选择日期时间"
                @change="timestampToTime1()"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="发票类型" prop="category">
              <el-select v-model="addTO.category" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.category"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票类别" prop="type">
              <el-select v-model="addTO.type" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发票金额" prop="mone">
              <el-input v-model="addTO.mone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" icon="el-icon-folder-checked" @click="getlistForm()">立即创建</el-button>
              <el-button type="info" icon="el-icon-refresh" @click="delectdd">重置信息</el-button>
              <el-button @click="cancel()">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="10" :xl="11">
          <el-upload
            class="upload-demo"
            ref="upload"
            :file-list="fileList"
            :action="action"
            :auto-upload="false"
            :data="proutlist"
            :on-change="onChange"
            :on-remove="delfile"
            :limit="1"
            style="margin-left:90px;"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              style="margin-left:20px;margin-top:40px;"
            >选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件</div>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  insertList,
  queryBypageIncomeAdd,
  deleteexpen
} from "@/api/project";
export default {
  data() {
    return {
      //查询发票单的数据集合
      QueryInvoiceList: [],
      //发票参数
      invoicegetList: {
        list: [], //发票列表
        //查询发票条件
        qurey: {
          pageNum: 1,
          pageSize: 5,
          companyId: null
        },
        total: 0
      },
      fileList: [],
      proutlist: {
        Id: 1,
        status: 0
      },
      companyId: 0,
      isgetid: 0,
      typeList: [],
      projectData: {},
      options: [
        {
          value: 0,
          category: "普票"
        },
        {
          value: 1,
          category: "专票"
        }
      ],
      options1: [
        {
          value: 0,
          type: "收入"
        },
        {
          value: 1,
          type: "支出"
        },
        {
          value: 2,
          type: "报销"
        }
      ],
      options2: [
        {
          value: 0,
          status: "未报销"
        },
        {
          value: 1,
          status: "已报销"
        }
      ],
      //添加发票的数组
      addTO: {
        category: null,
        code: null,
        companyId: null,
        mone: null,
        number: null,
        status: 0,
        time: null,
        type: null
      },
      //抽屉的临时数据
      //表单验证内容
      rules: {
        time: [
          { required: true, message: "请输入发票时间", trigger: "change" }
        ],
        number: [
          { required: true, message: "请输入发票号码", trigger: "change" }
        ],
        code: [
          { required: true, message: "请输入发票代码", trigger: "change" }
        ],
        category: [
          {
            required: true,
            message: "请至少选择一个发票类型",
            trigger: "change"
          }
        ],
        type: [
          {
            required: true,
            message: "请至少选择一个发票类别",
            trigger: "change"
          }
        ],
        mone: [{ required: true, message: "请输入发票金额", trigger: "change" }]
      },
      //查询发票数据
      invoiceList: {
        category: null,
        code: null,
        companyId: null,
        invoiceId: null,
        mone: null,
        number: null,
        pageNum: 1,
        pageSize: 10,
        pages: 1,
        searchCount: null,
        status: null,
        time: null,
        type: null
      },
      //发票状态
      status: 0,
      //发票的数组
      invoicegetList: [],
      //发票编号数组
      getinvoivelist: [],
      //收集发票编号
      invoiceListAdd: {},
      //查询发票编号的数组
      getinvoiveId: {
        companyId: null,
        type: 0
      },
      pageNum: 10,
      total: 10,
      //收集数据
      newList: [],
      visible: false //确认删除
    };
  },
  computed: {
    // projectId() {
    //   return this.$route.query.id;
    // }
  },
  created() {
    this.addTO.companyId = this.$store.getters.companyId;
    this.invoiceList.companyId = this.$store.getters.companyId;
    this.getinvoiveId.companyId = this.$store.getters.companyId;
    //发票上传地址
    this.action = process.env.VUE_APP_BASE_API + "/file/uploadFile";
    this.getincomeSelectlist();
  },
  methods: {
    //返回
    back() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/incomeList",
        query: {
          id: this.$route.query.id,
          backid: this.$route.query.backid
        }
      });
    },
    //时间处理 yyyy-MM-dd hh:mm:ss
    timestampToTime1() {
      var date = this.addTO.time;
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.addTO.time = Y + M + D + h + m + s;
    },
    //抽屉的关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.isgetid = 0;
          done();
        })
        .catch(_ => {});
    },
    //发票页面的按钮事件
    drawerAdd() {
      this.drawer = true;
      this.getincomeSelectlist();
    },
    //查询
    selectexpend() {
      this.getincomeSelectlist();
    },
    selectggb() {
      let list = [];
      this.invoicegetList.forEach(item => {
        list.push({
          status: item.status
        });
      });
    },
    //发票的分页查询
    getincomeSelectlist(pager = 1) {
      this.invoiceList.pageNum = pager;
      queryBypageIncomeAdd(this.invoiceList)
        .then(res => {
          if (res.success) {
            this.invoicegetList = res.data;
            this.total = res.data.total;
            let list = [];
            res.data.list.forEach((item, index) => {
              list.push({
                status: item.status
              });
            });
          } else {
            this.$message.errror(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("查询发票数据失败");
        });
    },
    //分页
    handleSizeChange(val) {
      this.invoicegetList.pageSize = val;
    },
    handleCurrentChange: function(currentPage) {
      this.total = this.invoicegetList.length;
      this.currentPage = currentPage;
    },
    //取消隐藏tatle
    cancel() {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
      this.isgetid = 0;
      this.getincomeSelectlist();
    },
    //显示报销单添加页面
    Reimbursement() {
      this.isgetid = 1;
      this.$refs.addTO.resetFields();
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
    },
    //发票提交页面的提交
    getlistForm() {
      if (this.fileTypeJpg == true) {
        this.$refs.addTO.validate(valid => {
          if (valid) {
            this.addTO.userId = this.$store.getters.urId;
            this.addTO.companyId = this.$store.getters.companyId;
            insertList(this.addTO)
              .then(res => {
                if (res.success) {
                  //发票记录添加成功
                  //提交发票文件
                  this.proutlist.Id = res.data;
                  this.$refs.upload.submit();
                  this.$message.success(res.msg);
                  this.isgetid = 0;
                  this.addTO = {
                    category: 0, //0收入 1支出 2报销
                    code: null,
                    companyId: null,
                    mone: null,
                    number: null,
                    status: 0, //状态 0未报销 1已报销
                    time: null,
                    type: 0, //0 普票 1专票
                    userId: null,
                    pages: 1
                  };
                  //this.$refs.upload.clearFiles();
                  this.getincomeSelectlist();
                  //this.Selectinsertlsit();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(e => {
                this.$message.error("发票添加失败,检测是否重复");
              });
          }
        });
      } else {
        this.$message.warning("没有发票文件，无法提交");
      }
    },
    //校验发票文件格式
    onChange(file) {
      const fileNamepdf = file.name;
      console.log(file.name);
      let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
      if (fileType == ".pdf" || fileType == ".png" || fileType == ".jpg") {
        this.fileTypeJpg = true;
      } else {
        this.fileTypeJpg = false;
        this.$message.warning("发票文件只能是pdf，png，jpg格式文件");
        this.$refs.upload.clearFiles();
      }
    },
    //清除发片文件
    delfile() {
      this.fileTypeJpg = false;
    },
    //数据清除
    delectdd() {
      this.$refs.addTO.resetFields();
    },
    //刷新
    upddlist() {
      (this.invoiceList = {
        category: null,
        code: null,
        companyId: null,
        invoiceId: null,
        mone: null,
        number: null,
        orders: [
          {
            asc: null,
            column: null
          }
        ],
        pageNum: 1,
        pageSize: 10,
        searchCount: null,
        status: null,
        time: null,
        type: null
      }),
        (this.invoiceList.companyId = this.$store.getters.companyId);
      this.invoiceList.pageNum = 1;
      this.getincomeSelectlist();
    },
    //发票的删除操作
    YesGet(row) {
      deleteexpen(row)
        .then(res => {
          if (res.success) {
            this.visible = false;
            this.$message({
              message: "发票删除成功",
              type: "success"
            });
            this.getincomeSelectlist(
              this.invoicegetList.list.length > 1
                ? this.invoiceList.pageNum
                : this.invoiceList.pageNum - 1
            );
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(e => {
          this.$message.error(e.msg);
        });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.QueryInvoice .el-form-item {
  margin: 10px 15px;
}
.drawer .foot_yi {
  margin: 10px 10px;
}
</style>