<template>
  <div class="container">
    <!-- 添加按钮 -->
    <div class="total_top">
      <el-button
        type="success"
        icon="el-icon-circle-plus"
        @click="insertreimebursementItem"
        >申请出差报销</el-button
      >
    </div>
    <!-- 表格内容区域 -->
    <div class="total_content">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-descriptions
                title="报销详情"
                :column="5"
                border
                style="width: 100%"
              >
                <el-descriptions-item label="组长审批状态" :span="2">
                  <el-tag
                    :type="
                      props.row.tripStatus == 0
                        ? 'info'
                        : props.row.tripStatus == 2
                        ? 'danger'
                        : 'success'
                    "
                  >
                    {{
                      props.row.tripStatus == 0
                        ? "待审批"
                        : props.row.tripStatus == 2
                        ? "驳回"
                        : "通过"
                    }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item
                  label="组长审批时间"
                  :span="3"
                  :formatter="timestampToTime"
                  >{{ 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.tripStatus == 4
                        ? 'danger'
                        : props.row.tripStatus == 3
                        ? 'success'
                        : 'info'
                    "
                  >
                    {{
                      props.row.tripStatus == 4
                        ? "驳回"
                        : props.row.tripStatus == 3
                        ? "通过"
                        : "待审批"
                    }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item
                  label="财务审批时间"
                  :span="3"
                  :formatter="timestampToTime"
                  >{{ 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>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
              (queryitem.pageNum - 1) * queryitem.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column label="项目列表" prop="projectName"> </el-table-column>
        <el-table-column label="申报总金额" prop="applyTotalAmountSmall">
        </el-table-column>
        <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.financeName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="财务审批人">
          <template slot-scope="props">
            {{ props.row.financeName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column
          label="报销日期"
          prop="applyTime"
          :formatter="timestampToTime"
        >
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="props">
            <el-tag
              :type="
                props.row.tripStatus == 0
                  ? 'info'
                  : props.row.tripStatus == 1 || props.row.tripStatus == 3
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                props.row.tripStatus == 0
                  ? "待审批"
                  : props.row.tripStatus == 1
                  ? "小组长通过"
                  : props.row.tripStatus == 2
                  ? "小组长驳回"
                  : props.row.tripStatus == 3
                  ? "财务通过"
                  : props.row.tripStatus == 4
                  ? "财务驳回"
                  : "不存在"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              style="margin: 5px"
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="updatereimbursementList(scope.row)"
              v-if="scope.row.tripStatus != 3 && scope.row.tripStatus != 1"
              >修改信息</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              icon="el-icon-edit-outline"
              type="success"
              @click="updatebtn(scope.row)"
              v-if="scope.row.tripStatus != 3 && scope.row.tripStatus != 1"
              >修改随行人员</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              type="danger"
              @click="Resubmit(scope.row)"
              v-if="scope.row.tripStatus == 2 || scope.row.tripStatus == 4"
              >重新提交</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              type="info"
              @click="withdraw(scope.row)"
              v-if="scope.row.tripStatus == 0"
            >
              撤回</el-button
            >
            <el-link
              type="success"
              style="margin: 5px"
              size="mini"
              v-if="scope.row.tripStatus == 3"
              >已通过</el-link
            >
            <el-link
              type="info"
              style="margin: 5px"
              size="mini"
              v-if="scope.row.tripStatus == 1"
              >待审批</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看详情 -->
      <el-drawer
        title="查看详情"
        :visible.sync="drawer"
        :direction="direction"
        size="50%"
      >
        <el-form :inline="true" label-width="180px">
          <el-row>
            <el-col :span="12">
              <div>
                <el-form-item label="审批状态">
                  <el-tag
                    :type="
                      paramlist.tripStatus == 0
                        ? 'info'
                        : paramlist.tripStatus == 1 || paramlist.tripStatus == 3
                        ? 'success'
                        : 'danger'
                    "
                  >
                    {{
                      paramlist.tripStatus == 0
                        ? "待审批"
                        : paramlist.tripStatus == 1
                        ? "小组长通过"
                        : paramlist.tripStatus == 2
                        ? "小组长驳回"
                        : paramlist.tripStatus == 3
                        ? "财务通过"
                        : paramlist.tripStatus == 4
                        ? "财务驳回"
                        : "不存在"
                    }}
                  </el-tag>
                </el-form-item>
                <el-form-item label="附件数量">
                  <span>{{ paramlist.enclosureNumber }}</span>
                </el-form-item>
                <el-form-item label="出差理由">
                  <span>{{ paramlist.tripReason }}</span>
                </el-form-item>
                <el-form-item label="出发地点">
                  <span>{{ paramlist.fromPlace }}</span>
                </el-form-item>
                <el-form-item label="目的地点">
                  <span>{{ paramlist.purposePlace }}</span>
                </el-form-item>
                <el-form-item label="经过地点">
                  <span>{{ paramlist.transitPlace }}</span>
                </el-form-item>
                <el-form-item label="交通工具">
                  <span>{{ paramlist.vehicle }}</span>
                </el-form-item>

                <el-form-item label="伙食补贴">
                  <span>{{ paramlist.foodAllowance }}</span>
                </el-form-item>
                <el-form-item label="公杂补贴">
                  <span>{{ paramlist.publicMiscellaneousSubsidy }}</span>
                </el-form-item>
                <el-form-item label="随从人员">
                  <span
                    v-for="item in paramlist.entouragelist"
                    :key="item.tripId"
                    style="margin: 0px 5px"
                    >{{ item.userName }}</span
                  >
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-form-item label="火车/汽车/轮船费">
                  <span>{{ paramlist.tripCost }}</span>
                </el-form-item>
                <el-form-item label="机票费">
                  <span>{{ paramlist.planeTicket }}</span>
                </el-form-item>
                <el-form-item label="汽油费">
                  <span>{{ paramlist.trafficCost }}</span>
                </el-form-item>
                <el-form-item label="住宿费">
                  <span>{{ paramlist.lodgingCost }}</span>
                </el-form-item>
                <el-form-item label="其他费用">
                  <span>{{ paramlist.otherCost }}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ paramlist.remarks }}</span>
                </el-form-item>
                <el-form-item label="无票据说明">
                  <span>{{ paramlist.nobillExplain }}</span>
                </el-form-item>
                <el-form-item label="是否领取补贴">
                  <span>{{ paramlist.receiveSubsidy == 0 ? "否" : "是" }}</span>
                </el-form-item>
                <el-form-item label="天数">
                  <span>{{ paramlist.days }}</span>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-drawer>
      <!-- 对话框1 -->
      <el-dialog title="修改随从人员" :visible.sync="dialogFormVisible">
        <!-- 输入框的布局 -->
        <el-row :gutter="20">
          <el-col :span="16"
            ><div class="grid-content bg-purple">
              <el-input placeholder="请输入..."></el-input></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </div></el-col
          >
        </el-row>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="员工" name="first">
            <!-- v-model 绑定的是 数据少的那个数组 -->
            <el-checkbox-group v-model="peopleId">
              <el-checkbox
                v-for="item in collectProjectpeople"
                :label="item.userId"
                :key="item.userId"
                >{{ item.userName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-tab-pane>
          <el-tab-pane label="财务人员" name="second">财务人员</el-tab-pane>
          <el-tab-pane label="小组长" name="third">小组长</el-tab-pane>
          <button @click="btn">测试</button>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 分页区域 -->
    <div class="block">
      <el-pagination
        layout="->, total, prev, pager, next"
        :total="10"
        :page-size="queryitem.pageSize"
        @current-change="getpagelist"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { queryBypage } from "@/api/spendreimbursement";
import { selectAll } from "@/api/spendreimbursement";
import { reimbursementListid, resubmit } from "@/api/spendreimbursement";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
export default {
  created() {
    this.Projectpeople.companyId = this.$store.getters.companyId;
    // 获取 userId
    this.queryitem.userId = this.$store.getters.urId;
    this.reimebursementprojectpeopleItem();
    this.getpagelist();
  },
  data() {
    return {
      activeName: "second",
      list1: [],
      queryitem: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
      },
      //抽屉
      drawer: false,
      // 对话框
      dialogFormVisible: false,
      // 接受的数据
      tableData: [],
      // 收集随从人员进行展示
      collectProjectpeople: [],
      // 随从成员
      Projectpeople: {
        companyId: null,
      },
      // 随从人员
      entouragelist: [],
      paramlist: {},
      peopleId: [],
      // 收集所选择的随从人员
      insertBatch: [
        {
          personnelId: null,
          tripId: null,
        },
      ],
      list: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(event);
    },
    // 这是测试的数据
    btn() {
      console.log(this.peopleId);
      console.log(this.list1);
      // this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
      // this.peopleId.forEach((item) => {
      //   let obj = {};
      //   obj.personnelId = item;
      //   obj.tripId = 3;
      //   this.insertBatch.push(obj);
      // });
      // insertId(this.insertBatch)
      //   .then((result) => {
      //     if (result.success) {
      //       console.log(result);
      //     } else {
      //       this.$message.error(result.msg);
      //     }
      //   })
      //   .catch((error) => {
      //     this.$message.error("失败");
      //   });
      // this.insertBatch = [];
    },
    // 修改随从人员
    updatereimbursementPeople() {
      // 第二个方法
      insertId(this.insertBatch)
        .then((result) => {
          if (result.success) {
            this.$message.success("添加成功！");
            // 添加成功以后 把表单的数据清空
            this.$refs.ruleform.resetFields();
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((error) => {
          this.$message.error("失败");
        });
    },
    // 查询de所有随从人员
    reimebursementprojectpeopleItem() {
      selectProjectpeople(this.Projectpeople)
        .then((res) => {
          if (res.code == 20000) {
            this.collectProjectpeople = res.data;
          } else {
            this.$message.error("失败");
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    //添加的方法
    insertreimebursementItem() {
      this.$router.push("/spendreimbursementAdd");
    },
    // 展示数据的方法
    getpagelist(pager = 1) {
      this.queryitem.pageNum = pager;
      queryBypage(this.queryitem)
        .then((res) => {
          if (res.success) {
            this.tableData = res.data.list;
            res.data.list.forEach((item) => {
              selectAll({ tripId: item.tripId })
                .then((resu) => {
                  if (resu.success) {
                    item.entouragelist = resu.data;
                    this.list = resu.data;
                    resu.data.forEach((element) => {
                      let obj = {};
                      let personnelId = "";
                      personnelId = element.personnelId;
                      obj.personnelId = element.personnelId;
                      obj.tripId = element.tripId;
                      this.peopleId.push(personnelId);
                      this.list1.push(obj);
                    });
                  } else {
                    this.$message.error(resu.msg);
                  }
                })
                .catch((error) => {
                  this.$message.error("失败");
                });
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    // 跳转修改页面
    updatereimbursementList(data) {
      this.$router.push({
        path: "/spendreimbursementListUpdate",
        //query 找到我们需要的字段
        query: {
          tripid: data.tripId,
        },
      });
    },
    // 弹窗展示
    updatebtn() {
      this.dialogFormVisible = true;
    },
    // 查看详情
    getdetails(data) {
      this.drawer = true;
      this.paramlist = data;
    },
    // 从新提交
    Resubmit(data) {
      resubmit(data)
        .then((res) => {
          if (res.success) {
            this.$message.success("重新提交成功，等待审批");
            this.getpagelist();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("重新提交失败");
        });
    },
    // 撤回申请
    withdraw(data) {
      reimbursementListid(data.tripId).then((res) => {
        if (res.success) {
          this.getpagelist();
        }
      });
    },
    //时间处理
    timestampToTime(row, column, cellValue) {
      return cellValue.split(" ")[0];
    },
  },
};
</script>
  
<style scoped>
.total_content {
  padding: 0px 15px;
}
.demo-table-expand {
  font-size: 0;
  padding: 0px 100px;
  width: 100%;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 150px;
  margin-bottom: 0;
  width: 80%;
}
.total_top {
  margin: 15px 20px;
}
</style>