<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="expendQurey">
        <el-form-item label="收入对象">
          <el-input v-model="expendQurey.expendObject" placeholder="收入对象"></el-input>
        </el-form-item>
        <el-form-item label="收入类别">
          <el-select v-model="expendQurey.expendType">
            <el-option
              v-for="item in options"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收入内容">
          <el-input v-model="expendQurey.expendBody" placeholder="收入内容"></el-input>
        </el-form-item>

        <el-form-item label="收入时间">
          <el-date-picker
            v-model="mainTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="time"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addexpend()"
            v-if="state != 0"
          >新增支出</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table :data="expendList" style="width: 100%; text-align: center" border>
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
            (expendQurey.pageNum - 1) * expendQurey.pageSize +
            scope.$index +
            1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="expendObject" label="支出对象" />
        <el-table-column prop="expendMoney" label="支出金额" />

        <el-table-column prop="typeName" label="支出类别">
          <template slot-scope="scope">
            <el-tag effect="dark">{{ scope.row.typeName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="expendBody" label="支出内容" />

        <el-table-column prop="expendTime" label="支出时间" />
        <el-table-column prop="expendInformation" label="支出详情" />
        <el-table-column prop="expendRemarks" label="支出备注" />
        <el-table-column prop="prop" label="发票图片">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="ReviseImage(scope.row)">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作人员">
          <template slot-scope="scope">
            <el-tag effect="plain">{{ scope.row.userName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="projectAmount" label="操作" v-if="state != 0">
          <template slot-scope="scope">
            <el-button
              style="margin: 5px"
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="updatain(scope.row)"
            >修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="expendQurey.pageNum"
        :page-size="expendQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <div>
      <!--抽屉-->
      <el-drawer title="发票详情" :visible.sync="drawer" :direction="direction" size="40%">
        <!-- filePath-->
        <el-table :data="getinvoivelist" style="width: 100%; text-align: center" border>
          <el-table-column type="index" label="序号" width="40"></el-table-column>
          <el-table-column prop="number" label="号码" width="160px"></el-table-column>
          <el-table-column prop="mone" label="金额" width="180"></el-table-column>
          <el-table-column prop="prop" label="查看PDF文件或图片">
            <template slot-scope="scope">
              <div v-if="scope.row.filePath != null">
                <a class="a-style" @click="handlePreView(scope.row)">点击查看图片或文件</a>
              </div>
              <div v-else>
                <p>无图片或文件</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { selectAll } from "@/api/type";
import { selectByProjectId } from "@/api/expend";
import { selectAllById } from "@/api/project";
export default {
  data() {
    return {
      expendQurey: {
        projectId: null,
        pageNum: 1,
        pageSize: 10,
        expendObject: null,
        expendType: null,
        expendBody: null,
        expendTimeStart: null,
        expendTimeEnd: null
      },
      expendList: [],
      options: [],
      mainTime: null,
      total: 0,
      //抽屉
      drawer: false,
      direction: "rtl",
      //查询图片给的值
      getinvoiveId: {
        companyId: null,
        expendId: 0
      },
      //图片的数组
      getinvoivelist: [],
      //图片数组
      srcList: [],
      //返回的标记
      backlistid: null
    };
  },
  computed: {
    state: function() {
      return this.$route.query.state;
    }
  },
  created() {
    this.getinvoiveId.companyId = this.$store.getters.companyId;
    this.expendQurey.projectId = this.$route.query.id;
    this.backlistid = this.$route.query.backlistid;
    this.getexpend();
    this.getTypeList();
  },
  methods: {
    //获取支出情况
    getexpend() {
      selectByProjectId(this.expendQurey)
        .then(res => {
          if (res.success) {
            this.expendList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.errror(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("查询数据失败");
        });
    },
    //获取支出类型
    getTypeList() {
      let param = {
        companyId: this.$store.getters.companyId,
        typeCategory: 1
      };
      selectAll(param)
        .then(res => {
          if (res.success) {
            this.options = res.data;
          } else {
            this.$message.error(res.msg);
            this.back();
          }
        })
        .catch(error => {
          this.$message.error("获取类型失败");
          this.back();
        });
    },
    //换页
    handleCurrentChange(val) {
      this.expendQurey.pageNum = val;
    },
    //新增支出信息
    addexpend() {
      this.$router.push({
        path: "/expendAdd",
        query: {
          id: this.$route.query.id,
          backlistid: this.backlistid
        }
      });
    },
    //修改支出信息
    updatain(data) {
      this.$router.push({
        path: "/expendUpdata",
        query: {
          id: data.expendId,
          projectId: this.$route.query.id
        }
      });
    },
    //时间处理
    time(val) {
      if (val == null) {
        this.expendQurey.expendTimeStart = null;
        this.expendQurey.expendTimeEnd = null;
      } else {
        this.expendQurey.expendTimeStart = this.timestampToTime(val[0]);
        this.expendQurey.expendTimeEnd = this.timestampToTime(val[1]);
      }
    },
    //时间处理
    timestampToTime(date) {
      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();
      return Y + M + D + h + m + s;
    },
    //查询
    qurey() {
      this.expendQurey.pageNum = 1;
      this.getexpend();
    },
    //重置
    reset() {
      this.expendQurey.expendTimeStart = null;
      this.expendQurey.expendTimeEnd = null;
      this.mainTime = null;
      this.expendQurey.expendObject = null;
      this.expendQurey.expendType = null;
      this.expendQurey.expendBody = null;
      this.qurey();
    },
    //查看图片的方法
    ReviseImage(row) {
      this.drawer = true;
      this.getinvoiveId.expendId = row.expendId;
      //console.log(process.env.VUE_APP_BASE_API);
      this.Selectinsertlsit();
    },
    //查询发票图片
    Selectinsertlsit() {
      console.log(selectAllById(this.getinvoiveId));
      selectAllById(this.getinvoiveId)
        .then(res => {
          if (res.success) {
            this.getinvoivelist = res.data;
            // this.getinvoivelist.forEach(e => {
            //   e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
            // });
            console.log(this.getinvoivelist);
          } else {
            this.$message.error(res.msg);
            this.back();
          }
        })
        .catch(error => {
          this.$message.error("获取发票图片失败");
          this.back();
        });
    },
    back() {
      if (this.backlistid == 0) {
        this.$router.push({
          path: "/projectList",
          query: {
            id: this.$route.query.id
          }
        });
      } else if (this.backlistid == 1) {
        this.$router.push({
          path: "/beresponsibleforList",
          query: {
            id: this.$route.query.id
          }
        });
      } else {
        this.$router.push({
          path: "/participateinList",
          query: {
            id: this.$route.query.id
          }
        });
      }
    },
    //点击查看发票
    handlePreView(row) {
      const photopath = process.env.VUE_APP_BASE_API + row.filePath;
      console.log(photopath);
      window.open(photopath, "_blank");
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
</style>