<template>
  <div class="container">
    <div>
      <el-form :inline="true" :model="reimbursementQurey">
        <el-form-item>
          <!-- <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addreimbursement()"
            >申请报销</el-button
          > -->
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table
        :data="reimbursementList"
        style="width: 100%; text-align: center"
        border
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="padding: 10px">
              <el-descriptions title="报销详情" :column="5" border>
                <el-descriptions-item label="支付方式" :span="5">{{
                  props.row.paymentMethod
                }}</el-descriptions-item>
                <el-descriptions-item label="组长审批状态" :span="2"
                  ><el-tag
                    :type="
                      props.row.reimbursementState == 0
                        ? 'info'
                        : props.row.reimbursementState == 2
                        ? 'danger'
                        : 'success'
                    "
                  >
                    {{
                      props.row.reimbursementState == 0
                        ? "待审批"
                        : props.row.reimbursementState == 2
                        ? "驳回"
                        : "通过"
                    }}
                  </el-tag></el-descriptions-item
                >
                <el-descriptions-item label="组长审批时间" :span="3">{{
                  props.row.headmanTime
                }}</el-descriptions-item>
                <el-descriptions-item label="组长驳回缘由" :span="5">{{
                  props.row.headmanRefute || "无"
                }}</el-descriptions-item>
                <el-descriptions-item label="财务审批状态" :span="2"
                  ><el-tag
                    :type="
                      props.row.reimbursementState == 4
                        ? 'danger'
                        : props.row.reimbursementState == 3
                        ? 'success'
                        : 'info'
                    "
                  >
                    {{
                      props.row.reimbursementState == 4
                        ? "驳回"
                        : props.row.reimbursementState == 3
                        ? "通过"
                        : "待审批"
                    }}
                  </el-tag></el-descriptions-item
                >
                <el-descriptions-item label="财务审批时间" :span="3">{{
                  props.row.financeTime
                }}</el-descriptions-item>
                <el-descriptions-item label="财务驳回缘由" :span="5">{{
                  props.row.finaceRefute || "无"
                }}</el-descriptions-item>
                  <el-descriptions-item label="查看详情" :span="5">
          <el-button
              @click="getdetails(props.row)"
              type="primary"
              style="margin: 5px"
              size="mini"
              >查看详情</el-button>
             </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
              (reimbursementQurey.pageNum - 1) * reimbursementQurey.pageSize +
              scope.$index +
              1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="报销人" />
        <el-table-column prop="projectName" label="项目" />
        <!-- <el-table-column prop="typeName" label="报销类别">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.typeName }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="applyTotalAmountSmall" label="申报总金额" />
        <el-table-column label="核报总金额">
          <template slot-scope="props">
            {{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
          </template>
        </el-table-column>
        <el-table-column label="组长审批人">
          <template slot-scope="props">
            {{ props.row.headmanName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="财务审批人">
          <template slot-scope="props">
            {{ props.row.financeName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fillingTime"
          label="报销日期"
          :formatter="timestampToTime"
        />
        <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 prop="reimbursementState" label="状态">
          <template slot-scope="props">
            <el-tag
              :type="
                props.row.reimbursementState == 0
                  ? 'info'
                  : props.row.reimbursementState == 1 ||
                    props.row.reimbursementState == 3
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                props.row.reimbursementState == 0
                  ? "待小组长通过"
                  : props.row.reimbursementState == 1
                  ? "待财务长通过"
                  : props.row.reimbursementState == 2
                  ? "小组长驳回"
                  : props.row.reimbursementState == 3
                  ? "财务长通过"
                  : "财务长驳回"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <div v-if="scope.row.reimbursementState == 1">
              <el-button
                style="margin: 5px"
                type="primary"
                @click="agreeandrefuse(scope.row)"
                >同意和驳回</el-button
              >
            </div>
            <div
              v-else-if="scope.row.reimbursementState == 0"
              style="width：100%;text-align: center"
            >
              待小组长审批
            </div>
            <div
              v-else-if="scope.row.reimbursementState == 2"
              style="width：100%;text-align: center"
            >
              小组长已驳回
            </div>
            <div v-else style="width：100%;text-align: center;color:#13ce66">
              已操作
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer title="查看详情" :visible.sync="drawer" :direction="direction">
        <el-form :inline="true" label-width="80px">
          <el-row>
            <el-col
              v-for="(item, index) in reimbursementDetails.list"
              :key="index"
            >
              <el-form-item :label="item.name">
                <el-input v-model="item.money"></el-input>
              </el-form-item>
              <el-form-item label="说明">
                <el-input v-model="item.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-drawer>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="reimbursementQurey.pageNum"
        :page-size="reimbursementQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <el-drawer
      title="核实金额"
      :visible.sync="dialogVisible"
      direction="btt"
      :size="'100%'"
    >
      <div style="padding: 10px; width: 100%">
        <el-row :gutter="20">
          <el-col :xl="12" :lg="12" :md="24" :sm="24" style="margin: 10px 0px">
            <el-descriptions title="报销详情" :column="3" border>
              <el-descriptions-item label="报销人">{{
                reimbursementData.userName
              }}</el-descriptions-item>
              <el-descriptions-item label="报销项目">{{
                reimbursementData.projectName
              }}</el-descriptions-item>
              <el-descriptions-item label="报销类别">{{
                reimbursementData.typeName
              }}</el-descriptions-item> 
            </el-descriptions> 
            <el-descriptions :column="3"  border>
                <el-descriptions-item :label="item.name" v-for="( item ,index ) in financeList.list" :key="index">
                {{item.money}}
              </el-descriptions-item>
              </el-descriptions>
              <el-descriptions  border>
              <el-descriptions-item :span="2" label="申请报销总金额（大写）">{{
                reimbursementData.applyTotalAmountLarge
              }}</el-descriptions-item>
              <el-descriptions-item label="申请报销总金额（小写）">{{
                reimbursementData.applyTotalAmountSmall
              }}</el-descriptions-item>
              <el-descriptions-item :span="2" label="核实报销总金额（大写）">{{
                from.verifyTotalAmountLarge
              }}</el-descriptions-item>
              <el-descriptions-item label="核实报销总金额（小写）">{{
                from.verifyTotalAmountSmall
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :xl="12" :lg="12" :md="24" :sm="24" style="margin: 10px 0px">
            <el-form
              ref="form"
              :model="from"
              :inline="true"
              label-width="200px"
              :rules="rules"
            >
              <el-form-item
                label="核实报销总金额（大写）"
                prop="verifyTotalAmountLarge"
              >
                <el-input v-model="from.verifyTotalAmountLarge"></el-input>
              </el-form-item>
              <el-form-item
                label="核实报销总金额（小写）"
                prop="verifyTotalAmountSmall"
              >
                <el-input v-model="from.verifyTotalAmountSmall"></el-input>
              </el-form-item>
            </el-form>
            <div style="width: 100%; text-align: right; padding: 0px 10%">
              <el-button style="margin: 5px" type="success" @click="agree()"
                >同意</el-button
              >
              <el-button style="margin: 5px" type="warning" @click="refuse()"
                >驳回</el-button
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    
    <el-drawer
        title="发票详情"
        :visible.sync="invoiceShow"
        :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>
</template>

<script>
import { money } from "@/utils/myValidate";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { selectByFinance,financeApproval} from "@/api/reimbursement";
import { selectAllById } from "@/api/project";
export default {
  data() {
    return {
      //抽屉
      drawer: false,
      direction: "rtl",
      reimbursementDetails: {
        list: [],
      },
      financeList: {
        list: [],
      },
      dialogVisible: false,
      reimbursementData: {},
      reimbursementQurey: {
        companyId: null,
        userId: null,
        pageNum: 1,
        pageSize: 10,
      },

      total: 0,
      reimbursementList: [],
      from: {
        reimbursementId: null,
        financeId: null,
        finaceRefute: null,
        financeTime: null,
        reimbursementState: null, //0待审批 1小组长通过 2小组长驳回 3财务通过 4财务驳回
        verifyTotalAmountLarge: null,
        verifyTotalAmountSmall: null,
      },
      rules: {
        verifyTotalAmountLarge: [
          {
            required: true,
            message: "请输入申请报销总金额（大写）",
            trigger: "blur",
          },
        ],
        verifyTotalAmountSmall: [
          { required: true, validator: money, trigger: "blur" },
        ],
      },
      invoiceShow: false,
      getinvoivelist:[],
      //查询图片给的值
      getinvoiveId: {
        companyId: null,
        reimbursementId: 0
      },
    };
  },
  created() {
    this.reimbursementQurey.userId = this.$store.getters.urId;
    this.reimbursementQurey.companyId = this.$store.getters.companyId;
    this.getinvoiveId.companyId = this.$store.getters.companyId;
    this.getReimbursement();
  },
  methods: {
     //查看详情
     getdetails(data) {
      this.drawer = true;
      let param = {
        reimbursementId: data.reimbursementId,
      };
      selectByReimbursementId(param)
        .then((res) => {
          if (res.success) {
            //获取数据
            this.reimbursementDetails.list = res.data;
            this.$message.success(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    //获取报销项
    getgetdetails(data) {
      console.log(data);
      let param = {
        reimbursementId: data.reimbursementId,
      };
      selectByReimbursementId(param)
        .then((res) => {
          console.log(res)
          if (res.success) {
            //获取数据
            this.financeList.list = res.data;
            // this.$message.success(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    //获取申请报销列表
    getReimbursement() {
      // console.log(this.reimbursementQurey)
      let param = {
        companyId: this.reimbursementQurey.companyId,
        pageNum: this.reimbursementQurey.pageNum,
        pageSize: this.reimbursementQurey.pageSize,
      };
      selectByFinance(param)
        .then((res) => {
          // console.log(res)
          if (res.success) {
            this.reimbursementList = res.data.list;
            // console.log(this.reimbursementList)
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("回去数据失败");
        });
    },
    //换页
    handleCurrentChange(val) {
      this.reimbursementQurey.pageNum = val;
      this.getReimbursement();
    },

    //agreeandrefuse
    agreeandrefuse(data) {
      this.getgetdetails(data)
      console.log(this.financeList)
      this.reimbursementData = data;
      this.dialogVisible = true;
    },
    agree() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm("是否同意此报销单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              //处理数据
              this.from.reimbursementId =
                this.reimbursementData.reimbursementId;
              this.from.financeId = this.$store.getters.urId;
              this.from.financeTime = this.time();
              this.from.reimbursementState = 3;
              financeApproval(this.from)
                .then((res) => {
                  if (res.success) {
                    this.$message.success("操作成功");
                    this.getReimbursement();
                  } else {
                    this.$message.error(res.msg);
                  }
                })
                .catch((error) => {
                  this.$message.error("操作失败");
                });
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消操作",
              });
              this.dialogVisible = false;
            });
        }
      });
    },
    //驳回
    refuse() {
      this.$prompt("驳回理由", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((value) => {
          //处理数据
          this.from.reimbursementId = this.reimbursementData.reimbursementId;
          this.from.financeId = this.$store.getters.urId;
          this.from.finaceRefute = value.value;
          this.from.financeTime = this.time();
          this.from.reimbursementState = 4;
          financeApproval(this.from)
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.getReimbursement();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((error) => {
              this.$message.error("操作失败");
            });
          this.dialogVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
          this.dialogVisible = false;
        });
    },
    //时间处理 yyyy-MM-dd hh:mm:ss
    time() {
      var date = new 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;
    },
    //时间处理
    timestampToTime(row, column, cellValue) {
      return cellValue.split(" ")[0];
    },
    //查看图片的方法
    ReviseImage(row) {
      this.invoiceShow = true;
      this.getinvoiveId.reimbursementId = row.reimbursementId;
      //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();
        });
    },
  },
};
</script>

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