<template>
  <div class="app-container">
    <van-nav-bar
      :title="type == 'waiting' ? '方案审批':'方案详情'"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main_box">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
          <span class="custom-title">方案公开<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <van-cell title="方案名称：" :label="schemeOption.schemeName" />
      <van-cell title="检查方式：" :label="schemeOption.checkMethod" />
      <van-cell title="检查部门：" :value="schemeOption.checkDepartment" />
      <van-cell title="检查时间：" :value="schemeOption.checkStartDate" />
      <van-cell title="检查类型：" :value="schemeOption.checkType" />
      <van-cell title="检查事项：" :label="schemeOption.checkList" />
      <van-cell title="方案描述：" :label="schemeOption.checkContent" />

    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
          <span class="custom-title">执行人员<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <div class="peopleList">
        <van-row>
          <van-col :span="4">序号</van-col>
          <van-col :span="10">经办人姓名</van-col>
          <van-col :span="10">执法证号</van-col>
        </van-row>

        <van-row v-for="(item,index) in schemeOption.tenforceSchemeHandlerList" :key="index">
          <van-col :span="4">{{index+1}}</van-col>
          <van-col :span="10">{{item.name}}</van-col>
          <van-col :span="10">{{item.enforceNum}}</van-col>
        </van-row>
      </div>
    </div>
    <div class="main_box2">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
          <span class="custom-title">审批列表<i class="bgBlue"></i></span>
        </template>
      </van-cell>

      <van-row v-for="(item,index) in schemeOption.historicActivityList" :key="index">
        <van-col :span="4">
          <p class="index">{{index+1}}</p>
          <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
            <p class="ssT" v-if="index>0"></p>
            <p class="yq"></p>
            <p class="ss" v-if="schemeOption.historicActivityList.length != index+1"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell :title="item.activityName" center :border="false">
            <template #default>
              <p style="color: #666666;">{{ item.assigneeName }}</p>
            </template>
          </van-cell>

          <van-cell center :border="false">
            <template #title>
              <p style="color: #999999;">{{ item.endTime }}</p>
            </template>
            <template #default>
              <p style="color: #999999;">{{ item.durationInMillis }}</p>
            </template>
          </van-cell>

          <p class="bq">审批意见：{{ item.comment }}</p>
        </van-col>
      </van-row>



    </div>

    <div class="main_box examine_box" v-if="type == 'waiting'">
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="5">审批<br/>意见</van-col>
        <van-col span="19">
          <van-radio-group v-model="pass" direction="horizontal" @change="radioChange">
            <van-radio name="true">同意</van-radio>
            <van-radio name="false">驳回</van-radio>
          </van-radio-group>
          <van-field rows="2" autosize v-model="comment" type="textarea" placeholder="审批意见"/>
        </van-col>
      </van-row>
    </div>
    <div style="margin: 16px 2%;" v-if="type == 'waiting'">
      <van-row>
        <van-col span="24" align="center">
          <van-button type="info" native-type="submit" @click="submitComplete" class="submitButtonActive">提交</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import { getTopDeptId , schemeDetail } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      showBankType:false,
      showPayeeType:false,
      showPicker:false,
      form:{},

      pass: "true",
      comment: "同意",

      bankType:'',
      payeeType:'',
      value:'',
      type:'',

      schemeOption:[]

    };
  },
  created() {
    this.type = this.$route.query.type;
    this.getDetail()
  },
  methods: {
    getDetail(){
      schemeDetail(this.$route.query.id).then(response => {
        response.data.historicActivityList.forEach((row) => {
          row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
          row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
          row.durationInMillis = this.formatTotalDateSub(
            row.durationInMillis / 1000
          );
        });

        this.schemeOption = response.data;
      });
    },
    radioChange(value){
      this.comment = value == 'true' ? '同意' : '驳回' ;
    },
    submitComplete() {
      const data = {
        taskId: this.schemeOption.taskId,
        instanceId: this.schemeOption.instanceId,
        variables: JSON.stringify({
          comment: this.comment,
          pass: this.pass,
          //"formData": this.row,
        }),
      };
      return request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        if (response.code == 200 && response.msg == "操作成功") {
          this.$notify({ type: 'success' , message: "操作成功" });
          setTimeout(function () {
            history.back(-1);
          },1000)
        } else {
          this.$notify({ type: 'danger' , message: "操作失败" });
        }
      });
    },

    format(time, format) {
      var t = new Date(time);
      var tf = function (i) { return (i < 10 ? '0' : '') + i };
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear());
            break;
          case 'MM':
            return tf(t.getMonth() + 1);
            break;
          case 'mm':
            return tf(t.getMinutes());
            break;
          case 'dd':
            return tf(t.getDate());
            break;
          case 'HH':
            return tf(t.getHours());
            break;
          case 'ss':
            return tf(t.getSeconds());
            break;
        }
      })
    },
    /**
     * 计算出相差天数
     * @param secondSub
     */
    formatTotalDateSub (secondSub) {
      var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
      var leave1 = secondSub % (24*3600) ;                // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
      var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
      var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3);
      return days + "天" + hours + "时" + minutes + "分" + seconds + '秒';
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.van-row{
  display: flex;
  flex-wrap: wrap;
}
.app-container {
  padding: 0;
  padding-bottom: 1%;
}
.examine_box{
  background-color: #1D6FE9!important;
  padding: 0.18rem!important;
  padding-left: 0!important;
  border-radius: 0.15rem!important;
  margin-top: 0.3rem!important;
}
.examine_box .van-col:first-child{
  color: #FFF!important;
  font-size: 0.45rem!important;
  text-align: center!important;
}
.examine_box .van-col:last-child{
  background-color: #FFF!important;
  border-radius: 0.15rem!important;
  overflow: hidden!important;
  .van-radio-group--horizontal{
    padding: 0.2rem 0;
    border-bottom: 1px solid #eee;
  }
}
/deep/.van-radio--horizontal{
  margin-left: 20px;
  margin-right: 0;
}
.submitButtonActive{
  width: 100%;
  margin: 0 auto;
}
.van-uploader {
  padding: 15PX;
}
/deep/ .van-nav-bar--fixed{
  background: url("../../../../static/images/lawEnforcement/head_bg.png") 100%;
}
/deep/ .van-nav-bar .van-icon{
  color: #ffffff;
}
/deep/ .van-nav-bar__title{
  color: #ffffff;
}
/deep/ .van-tabs__nav--complete{
  padding: 0;
  border: none;
  height: auto;
}
/deep/ .van-tabs__nav--card .van-tab{
  border: none;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: auto;
  margin-top: 10PX;
}
/deep/ .van-tabs__nav--card .van-tab.van-tab--active{
  background: transparent;
  .van-tab__text{
    width: 56PX;
    height: 56PX;
    line-height: 56PX;
  }
  .finish,.ongoing,.notStarted{
    padding: 15PX 0;
  }
}
/deep/ .van-tab__text{
  display: block;
  width: 44PX;
  height: 44PX;
  background: #FFF;
  border-radius: 50%;
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
  text-align: center;
  padding: 0;
  p{
    line-height: 1;
  }
}
.finish{
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  padding: 10PX 0;
  height: 100%;
}
.ongoing{
  border-radius: 50%;
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
  padding: 10PX 0;
  height: 100%;
}
.notStarted{
  padding: 10PX 0;
  height: 100%;
}
.typeBox{
  width: 44PX;
  height: 44PX;
  background: #ffffff;
  text-align: center;
  font-size: 14PX;
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  margin: 0 auto;
  padding: 10PX 0px;
  line-height: 1;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.noActive{
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
}
.doActive{
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
}
.active{
  width: 56PX;
  height: 56PX;
  padding: 15PX 0px;
}
/deep/ .van-radio--horizontal{
  margin-left: 0.32rem;
  margin-right: 0;
}
.peopleList{
  padding-right: 3%;
  margin-top: 10PX;
  .van-row{
    margin-bottom: 10PX;
    .van-col{
      text-align: center;
      font-size: 14PX;
    }
    &:first-child{
      .van-col{
        color: #1D6FE9;
      }
    }
  }
}
.cf{
  padding: 0 3%;
  margin-top: 20PX;
  margin-bottom: 20PX;
  .van-row{
    background: #F0F3F5;
    .van-col{
      padding: 5PX 0;
      font-size: 12PX!important;
      text-align: center;
      p{
        color: #1D6FE9;
      }
    }
    &:first-child{
      background: transparent;
    }
  }
}
.main_title{
  font-size: 0.4rem;
  color: #1D6FE9;
  margin: 0.2rem 6%;
  margin-top: 0;
  position: relative;
}
.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;
  margin-top: 10PX;
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
.submitButton{
  width: 80%;
  margin: 0 auto;
  background-color: #1D6FE9;
}

.addFamily{
  position: absolute;
  top: -2px;
  right: 0;
  border-radius: 50%;
}
.main_box2{
  width: 96%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 6PX;
  overflow: hidden;
  margin-top: 10PX;
  margin-bottom: 20PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
  .van-col{
    position: relative;
  }
  .van-col--20{
    padding: 12PX 0;
  }
  .van-row:nth-child(2n){
    background: rgba(29,111,233,0.1);
  }
  /deep/ .van-row .van-cell{
    background: transparent;
    padding: 0 10Px;
  }
  .bq{
    display: inline-block;
    padding: 0PX 10PX;
    line-height: 0.64rem;
    border-radius: 5PX;
  }
  .index{
    background: #1D6FE9;
    color: #ffffff;
    text-align: center;
    width: 20PX;
    height: 20PX;
    line-height: 20PX;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .indexCenter{
    top: 0!important;
  }
  .van-row:nth-child(2){
    .van-col:first-child{
      .indexBorder {
        top: calc(50% - 5px);
      }
    }
  }
  .indexBorder{
    width: 10PX;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    .yq{
      height: 10PX;
      width: 10PX;
      background: #C9C9C9;
      border-radius: 50%;
    }
    .ss{
      height: calc(50% - 5PX);
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
    .ssT{
      height: calc(50% - 5PX);
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
  }
}
.splcTit{
  font-size: 17PX;
  text-align: center;
  margin-top: 25PX;
  margin-bottom: 5PX;
}
</style>
