<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="incomeQurey">
        <el-form-item label="收入对象">
          <el-input v-model="incomeQurey.incomeObject" placeholder="收入对象"></el-input>
        </el-form-item>
        <el-form-item label="收入类别">
          <el-select v-model="incomeQurey.incomeType">
            <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="incomeQurey.incomeBody" 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="addincome()" v-if="state != 0">新增收入</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table :data="incomeList" style="width: 100%; text-align: center" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="收入详情：">
                <span>{{ props.row.incomeInformation }}</span>
              </el-form-item>
              <el-form-item label="收入备注：">
                <span>{{ props.row.incomeRemarks }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
            (incomeQurey.pageNum - 1) * incomeQurey.pageSize +
            scope.$index +
            1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="incomeObject" 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="incomeMoney" label="收入金额" />

        <el-table-column prop="incomeBody" label="收入内容" />

        <el-table-column prop="incomeTime" 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="incomeQurey.pageNum"
        :page-size="incomeQurey.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="prop" label="发票详情">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.filePath" :preview-src-list="[scope.row.filePath]" ></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { selectByProjectId } from "@/api/imcome";
import { selectAll } from "@/api/type";
import { selectAllById } from "@/api/project";

const InitialData = {
  incomeBody: null,
  incomeInformation: null,
  incomeMoney: null,
  incomeObject: null,
  incomeRemarks: null,
  incomeTime: null,
  incomeType: null,
  projectId: null,
  userId: null,
  projectName: null
};

export default {
  data() {
    return {
      
      incomeQurey: {
        projectId: null,
        pageNum: 1,
        pageSize: 10,
        incomeObject: null,
        incomeType: null,
        incomeBody: null,
        incomeTimeStart: null,
        incomeTimeEnd: null
      },
      incomeList: [],
      options: [],
      mainTime: null,
      total: 0,
      dialogVisible: false,
      incomeFrom: {},
      //抽屉
      drawer: false,
      direction: "rtl",
      //查询图片给的值
      getinvoiveId: {
        companyId: null,
        incomeId: 0
      },
      //图片的数组
      getinvoivelist: [],
      //图片数组
      srcList:[],
      backid:null,
    };
  },
  computed:{
    state:function(){
      return this.$route.query.state
    }
  },
  created() {
    this.getinvoiveId.companyId = this.$store.getters.companyId;
    this.incomeQurey.projectId = this.$route.query.id;
    this.backid=this.$route.query.backid
    
    this.getIncome();
    this.getTypeList();
  },
  methods: {
    //获取收入类型
    getTypeList() {
      let param = {
        companyId: this.$store.getters.companyId,
        typeCategory: 0
      };
      selectAll(param)
        .then(res => {
          if (res.success) {
            this.options = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("获取类型失败");
        });
    },
    //获取收入情况
    getIncome() {
      selectByProjectId(this.incomeQurey)
        .then(res => {
          if (res.success) {
            this.incomeList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.errror(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("查询数据失败");
        });
    },
    //换页
    handleCurrentChange(val) {
      this.incomeQurey.pageNum = val;
      this.getIncome();
    },
    //时间处理
    time(val) {
      if (val == null) {
        this.incomeQurey.incomeTimeStart = null;
        this.incomeQurey.incomeTimeEnd = null;
      } else {
        this.incomeQurey.incomeTimeStart = this.timestampToTime(val[0]);
        this.incomeQurey.incomeTimeEnd = 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.incomeQurey.pageNum = 1;
      this.getIncome();
    },
    //重置
    reset() {
      this.incomeQurey.incomeTimeStart = null;
      this.incomeQurey.incomeTimeEnd = null;
      this.mainTime = null;
      this.incomeQurey.incomeObject = null;
      this.incomeQurey.incomeType = null;
      this.incomeQurey.incomeBody = null;
      this.qurey();
    },
    //时间处理 yyyy-MM-dd hh:mm:ss
    timestampToTime2() {
      var date = this.incomeFrom.incomeTime;
      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.incomeFrom.incomeTime = Y + M + D + h + m + s;
    },
    //添加按钮事件
    addincome() {
      this.$router.push({
        path: "/incomeAdd",
        query: {
          id: this.$route.query.id,
          backid:this.backid
        }
      });
    },
    //查看图片的方法
    ReviseImage(row) {
      this.drawer = true;
      this.getinvoiveId.incomeId = row.incomeId;
      //console.log(process.env.VUE_APP_BASE_API);
      this.Selectinsertlsit();
    },
    //查询发票图片
    Selectinsertlsit() {
      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();
        });
    },
    //修改方法
    updatain(data) {
      this.$router.push({
        path: "/incomeUpdata",
        query: {
          id: data.incomeId,
          projectId: this.$route.query.id
        }
      });
    },
    //返回开始
    back(){
      if(this.backid==0){
      this.$router.push({
          path: "/projectList",
          query: {
            id: this.$route.query.id
          }
        });
      }else if (this.backid==1) {
         this.$router.push({
          path: "/beresponsibleforList",
          query: {
            id: this.$route.query.id
          }
        });
      }else{
         this.$router.push({
          path: "/participateinList",
          query: {
            id: this.$route.query.id
          }
        });
      }
    }
  }
};
</script>

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