<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">付款申请流程</p>
        </template>
      </van-nav-bar>
      <div class="main_box">
        <van-row v-if="processList.待申请!=2">
          <van-col span="6" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="18" class="textBlue">草稿</van-col>
        </van-row>
        <van-row v-if="processList.待申请==2">
          <van-col span="6" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="18" class="textBlue">已申请
            <van-row>
              <van-col span="24" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">申请人：{{processList.申请人}}</van-col>
            </van-row>
            <van-row>
              <van-col span="24" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">申请时间：{{processList.申请时间}}</van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row v-if="processList.status==2" v-for="(item1,index,i) in processList.审批事项" :key="i">
          <van-col span="6" align="right">
            <p class="icon_jian" v-show="item1[0].deptStatus==1||item1[0].deptStatus==null||item1[0].deptStatus==''"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="item1[0].deptStatus==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="item1[0].deptStatus==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="item1[0].deptStatus==1||item1[0].deptStatus==null||item1[0].deptStatus==''">{{item1[0].deptLabel}}</p>
            <p v-show="item1[0].deptStatus==2" class="textBlue">{{item1[0].deptLabel}}</p>
            <p v-show="item1[0].deptStatus==3" class="textRed">{{item1[0].deptLabel}}</p>
            <div v-for="(item2,index) in item1" :key="item1.assigneeName">
              <van-row>
                <van-col span="24" style="padding: 0;">
                  <p v-show="item2.approverStatus == 1">审批人：{{item2.assigneeName}}</p>
                  <p v-show="item2.approverStatus == 2" class="textBlue">审批人：{{item2.assigneeName}}</p>
                  <p v-show="item2.approverStatus == 3" class="textRed">审批人：{{item2.assigneeName}}</p>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="24" style="padding: 0;" >
                  <p v-show="item2.approverStatus == 1">审批时间：{{item2.time}}</p>
                  <p v-show="item2.approverStatus == 2" class="textBlue">审批时间：{{item2.time}}</p>
                  <p v-show="item2.approverStatus == 3" class="textRed">审批时间：{{item2.time}}</p>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
        <van-row v-if="approvalTemplateDeptList.length>0" v-for="(item1,index,i) in approvalTemplateDeptList" :key="i">
          <van-col span="6" align="right">
            <p class="icon_jian" ><van-icon name="minus" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="item1.approvalLevel == 1">组级审批</p>
            <p v-show="item1.approvalLevel == 2">村级审批</p>
            <p v-show="item1.approvalLevel == 3">镇级审批</p>
            <div v-for="(item2,index) in approvalTemplateDetailList" :key="item2.approvalOrder">
              <van-row v-if="item1.approvalLevel == item2.approvalLevel">
                <van-col span="24" style="padding: 0;">
                  <p v-show="item2.userName!=null&&item2.userName!=''">审批人：{{item2.nickName}}</p>
                  <p v-show="item2.userName==null||item2.userName==''">审批角色：{{item2.roleName}}</p>
                </van-col>
              </van-row>
              <van-row v-if="item1.approvalLevel == item2.approvalLevel">
                <van-col span="24" style="padding: 0;">
                  <p v-show="item2.approverStatus != null">审批顺序：{{item2.approvalOrder}}级审批</p>
                </van-col>
              </van-row>
              <van-row v-if="item1.approvalLevel == item2.approvalLevel">
                <van-col span="24" style="padding: 0;" >
                  <p v-show="item2.approvalOrder != null">审批节点：{{item2.name}}</p>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
</template>

<script>
import {
  getTransferProcess,
  getTransfer,
  getProjectto,
  queryTransferDetail,
  selectApprovalByTemplateId
} from "@/api/onlineHome/bankAgriculture/paymentApproval";
export default {
  name: "approvalProcess",
  data() {
    return {
      processList:{},
      form:{},
      approvalTemplateDeptList:[],
      approvalTemplateDetailList:[]
    };
  },
  created() {
    this.handleUpdate(this.$route.query.id);
  },
  methods: {
    //查询审批进程
    getTransferProcess(id){
      getTransferProcess(id).then(res => {
        this.processList = res.data.processSchedule
        this.processList.乡镇审批时间 = this.processList.乡镇审批时间?this.format(this.processList.乡镇审批时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.区县审批时间 = this.processList.区县审批时间?this.format(this.processList.区县审批时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.支付状态时间 = this.processList.支付状态时间?this.format(this.processList.支付状态时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.入账状态时间 = this.processList.入账状态时间?this.format(this.processList.入账状态时间, "yyyy-MM-dd HH:mm:ss"):""
      })
    },
    handleUpdate(id) {
      getTransfer(id).then((response) => {
        this.form = response.data;
        this.processList = {}
        if(this.form.auditStatus == 0){
          selectApprovalByTemplateId(this.form.approvalTemplateId).then(rs => {
            this.approvalTemplateDeptList = rs.approvalDepts;
            this.approvalTemplateDetailList = rs.approvalDetails;
          })
        }else{
          this.getTransferProcess(this.$route.query.id);
        }
        if(this.form.capitalExpenditureType==2){
          this.capitalExpenditureOpen = true
          let param={
            'outId' : this.form.id,
            'ynType' : '1'
          }
          getProjectto(param).then(res => {
            this.projectForm = res.data
            this.projectForm.projectFundType+=""
            queryTransferDetail(id).then((r) => {
              this.chargeItme = r.rows;
              this.length = this.chargeItme.length;
              this.detailTotal = r.total;
              this.loading = false;
            });
          })
        }else{
          this.capitalExpenditureOpen = false
          queryTransferDetail(id).then((r) => {
            this.chargeItme = r.rows;
            this.length = this.chargeItme.length;
            this.detailTotal = r.total;
            this.loading = false;
          });
        }

      });

    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 0.2rem 0;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
    padding: 20Px 0;
  }
  .icon_jian{
    background-color: #C9C9C9;
    display: inline-block;
    width: 20Px;
    height: 20Px;
    line-height: 24Px;
    text-align: center;
    border-radius: 50%;
    color: #FFF;
  }
  .blue{
    background-color: #1D6FE9;
  }
  .red{
    background-color: rgb(245, 108, 108);
  }
  .textBlue{
    color: #1D6FE9!important;
  }
  .textRed{
    color: rgb(245, 108, 108)!important;
  }
  .van-col{
    padding: 20Px 10Px;
  }
  .van-col:nth-child(2){
    font-size: 16Px;
    color: #878787;
    line-height: 22Px;
  }
  .van-row{
    .van-row{
      .van-col{
        padding: 5Px 0 0 0!important;
        color: #878787;
      }
    }
  }
</style>
