<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">吊装作业{{ flow }}</block>
      <block slot="right" v-if="flow === '提交申请'">
        <view @click="$noMultipleClicks(goToAdd)">申请</view>
      </block>
    </cu-custom>
    <view class="select-fixed top-fixed">
      <view class="cu-bar search bg-white">
        <picker @change="statusChange" :value="sindex" :range="stepList" range-key="STEP_NAME">
          <view class="saixuan">
            <text>筛选</text>
            <text class="cuIcon-triangledownfill"></text>
          </view>
        </picker>
        <view class="search-form radius" style="margin-left: 0;">
          <text class="cuIcon-search"></text>
          <input v-model="KEYWORDS" placeholder="请输入关键字"></input>

        </view>
        <view class="action">
          <button class="cu-btn bg-green shadow-blur radius" @click="getQuery">搜索</button>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y
                 :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
      <view v-if="list.length>0">
        <view class="dy-list">
          <view v-for="(item,index) of list" :key="index" :data-id="item.HOISTING_ID" class="dy-list-item p20">
            <view class="dy-title-flex align-center" @click="$noMultipleClicks(goToDetail,item)">
              <text>编号:{{ item.CHECK_NO }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text v-if="item.WORK_LEVEL==1">作业级别:一级作业级别</text>
              <text v-else-if="item.WORK_LEVEL==2">作业级别:二级作业级别</text>
              <text v-else>作业级别:三级作业级别</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text>申请人:{{ item.APPLY_USER_NAME }}</text>
              <text>吊装指挥人：{{ item.PROJECT_MANAGER_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text>监护人：{{ item.GUARDIAN_USER_NAME }}</text>
              <text>吊装作业人：{{ item.SISUO_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text>工段负责人：{{ item.WORKSHOP_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text>分厂车间安全部负责人：{{ item.LEADER_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text v-if="item.AUDIT_USER_NAME">分厂负责人：{{ item.AUDIT_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text v-if="item.APPROVE_USER_NAME">安全科负责人：{{ item.APPROVE_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text v-if="item.SAFETY_USER_NAME">生产部负责人：{{ item.SAFETY_USER_NAME }}</text>
            </view>
            <view class="dy-subtitle-flex" @click="$noMultipleClicks(goToDetail,item)">
              <text>验收部门负责人：{{ item.ACCEPT_USER_NAME }}</text>
            </view>

            <view class="dy-subtitle-flex" style="height: 34upx;" @click="$noMultipleClicks(goToDetail,item)">
              <text>
                审核状态：
                <template v-if="item.STEP_ID==0">暂存</template>
                <template v-else-if="item.STATUS==-2">气体检测打回</template>
                <template v-else-if="item.STEP_ID!=-1">{{ item.NEXT_STEP_NAME }}</template>
                <template v-else>{{ item.STEP_NAME }}作废</template>
              </text>
              <!--							<text v-if="item.STEP_ID<1"><button class="cu-btn bg-red margin-tb-sm sm" @click="$noMultipleClicks(handleDelete,item)">删除</button></text>-->
            </view>
            <view class="dy-subtitle-flex">
              <text>
                <button class="cu-btn bg-green" style="padding: 0 5px; height:24px;"
                        @click="showDrawer('showRight',item.HOISTING_ID)">查看流程图
                </button>
              </text>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="dataFlag=='noData'" class="dy-null">
        <view class="dy-null-img">
          <image :src="background[dataFlag].url" mode=""></image>
        </view>
        <view class="dy-null-title">
          {{ background[dataFlag].msg }}
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>

    <!-- 右侧抽屉 -->
    <uni-drawer ref="showRight" mode="right" :mask-click="true" @change="change($event,'showRight')">
      <scroll-view scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <view class="step-top ">
          查看流程图
        </view>
        <view class="step-item-container">
          <view class="step-item">
            <view class="step-item-wrap" v-for="(item,key) of flowList" :key="key"
                  :class="getShowStatus(item)">
              <view class="step-item-wrap-doter">
                <view class="step-item-wrap-dot"></view>
              </view>
              <view class="step-item-wrap-right">
                <view class="step-item-wrap-right-title">{{ item.STEP_NAME }}</view>
                <view class="step-item-wrap-right-title">
                  {{ item.SIGN_USER || item.FINISHED_SIGN_USER || item.ACT_USER_NAME }}
                </view>
                <view class="step-item-wrap-right-title">{{ item.ACT_TIME }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </uni-drawer>
  </view>
</template>

<script>
import {
  basePath, corpinfoId, loginSession, formatDate, loginUser
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"

export default {
  components: {
    tkiTree
  },
  data() {
    return {
      flow: "",
      showRight: false,
      dataFlag: 'noData',
      sTop: 0,
      totalHeight: 0,
      list: [],//返回数据
      page: 1,//分页参数--页数
      rows: 10,//分页参数--每页数据条数
      totalCount: 0,//分页参数--初始化页数
      isEnd: false,//防止多次刷新
      totalPage: 0,//分页参数--分页数量
      KEYWORDS: '',
      noClick: true,
      stepList: [],
      sindex: -1,
      STEP_ID: '',
      flowList: [],
    }
  },
  onReady() {
    let that = this;
    let CustomBar = this.CustomBar;
    uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
      success(res) { //成功回调函数
        let titleH = uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
        titleH.boundingClientRect(data => {
          that._data.sTop = data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          that.totalHeight = data.height + CustomBar
        }).exec()
      }
    })
  },
  onLoad(e) {//页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参
    this.flow = e.flow;
  },
  onShow() {
    //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
    var _this = this;
    _this.background = require('@/common/background.json');
    _this.showCount = -1;
    _this.currentPage = 1;
    _this.list = [];
    _this.isEnd = false;
    _this.getData();
    _this.getSetps();
    // _this.getDept();
    loginSession();
  },

  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  methods: {
    //跳转事件
    goToDetail(work) {
      uni.request({
        url: basePath + '/app/eightwork/isInPls',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
          PLS_ID: work.PLS_ID
        },
        success: (res) => {
          if (res.data) {
            this.doNavigateTo(work.HOISTING_ID)
          } else {
            uni.showToast({
              title: '请在作业区域进行作业',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    doNavigateTo(e) {
      if (this.flow === '提交申请') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-apply/hoisting-apply-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '吊装作业人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-sisuo/hoisting-sisuo-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '设置安全措施确认人') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-measures/hoisting-measures-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '安全措施吊装指挥人确认') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-measures-confirm/hoisting-measures-confirm-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '监护人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-guardian/hoisting-guardian-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '安全交底人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-confess/hoisting-confess-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '接受交底人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-acceptconfess/hoisting-acceptconfess-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '作业人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-workuser/hoisting-workuser-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '作业负责人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-confirm/hoisting-confirm-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '吊装指挥人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-projectmanager/hoisting-projectmanager-detail?HOISTING_ID=' + e
        });
      }else if (this.flow === '工段负责人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-workshop/hoisting-workshop-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '单位车间安全部签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-leader/hoisting-leader-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '分厂负责人签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-audit/hoisting-audit-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '安全科签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-approve/hoisting-approve-detail?HOISTING_ID=' + e
        });
      }else if (this.flow === '生产部签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-safety/hoisting-safety-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '开始作业') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-startwork/hoisting-startwork-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '结束作业') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-endwork/hoisting-endwork-detail?HOISTING_ID=' + e
        });
      } else if (this.flow === '验收签字') {
        uni.navigateTo({
          url: '/pages/application/hoisting/hoisting-accept/hoisting-accept-detail?HOISTING_ID=' + e
        });
      }

    },
    goToAdd() {
      uni.navigateTo({
        url: '/pages/application/hoisting/hoisting-apply/hoisting-apply-detail'
      });
    },
    getQuery() {	//搜索按钮事件
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = 1;
      _this.list = [];
      _this.isEnd = false;
      _this.getData();
    },


    // 滑动到底方法
    scrolltolower() {
      var _this = this;
      _this.showCount = -1;
      _this.currentPage = _this.currentPage + 1;
      _this.isEnd = false;
      if (_this.totalPage >= _this.currentPage) {
        _this.getData();//开始分页查询
      }
    },

    statusChange(e) {
      this.sindex = e.detail.value;
      this.STEP_ID = this.stepList[this.sindex].STEP_ID;
      this.getQuery();
    },

    getSetps() {
      var _this = this;
      uni.request({
        url: basePath + '/app/eightwork/getTaskSetps',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          TASK_ID: 10,
        },
        success: (res) => {
          if (res.data != null) {
            _this.stepList = [{"STEP_NAME": "请选择", "STEP_ID": ""}, ...res.data.list];
          }
        }
      })
    },
    getData() {
      var _this = this;
      if (_this.isEnd) {
        return
      } else {
        this.isEnd = true;
      }
      uni.showLoading({
        title: "加载中..."
      });//加载中动画
      uni.request({
        url: basePath + '/app/hoisting/list?showCount=' + _this.showCount + '&currentPage=' + _this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CREATOR: _this.flow === '提交申请' ? loginUser.USER_ID : '',
          GASCHECK: _this.flow === '气体检测' ? loginUser.USER_ID : '',
          STEP_NAME: (_this.flow === '提交申请' || _this.flow === '气体检测') ? '' : _this.flow,
          STEP_ID: _this.STEP_ID,
          WORK_STATE: '0',
          KEYWORDS: _this.KEYWORDS, //关键字模糊查询
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading();//结束加载中动画
          _this.totalPage = res.data.page.totalPage;
          if (_this.list.length == 0) {
            _this.list = res.data.varList;
          } else {
            if (res.data.varList != null) {
              _this.list = _this.list.concat(res.data.varList);
            }
          }
        }
      })
    },
    handleDelete(item) {
      var _this = this;
      if (item.SPECIAL_WORK) {
        if (item.SPECIAL_WORK.split(",")[0].includes("作业", "用电")) {
          uni.showToast({
            icon: 'none',
            title: '无法删除，该作业关联了其他作业票！',
            duration: 1500
          });
          return;
        }
      }

      uni.showModal({
        title: '',
        content: '确定要删除这条申请？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中'
            })
            uni.request({
              url: basePath + '/app/hoisting/delete',
              method: 'POST',
              dataType: 'json',
              header: {
                'Content-type': 'application/x-www-form-urlencoded'
              },
              data: {
                HOISTING_ID: item.HOISTING_ID,
                CORPINFO_ID: loginUser.CORPINFO_ID,
                USER_ID: loginUser.USER_ID,
              },
              success: (res) => {
                uni.hideLoading();
                uni.showToast({
                  icon: 'none',
                  title: '删除成功',
                  duration: 1500
                });
                _this.getQuery()
              },
              fail: (err) => {
                uni.hideLoading();
                uni.showModal({
                  content: err.errMsg,
                  showCancel: false
                });
              }
            })
          }
        }
      })
    },

    // 打开窗口
    showDrawer(e, HOISTING_ID) {
      uni.showLoading({
        title: "加载中..."
      });//加载中动画
      uni.request({
        url: basePath + '/app/hoisting/getFlowList',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          HOISTING_ID
        },
        success: (res) => {
          uni.hideLoading();//结束加载中动画
          this.flowList = res.data.flowList
          this.$refs[e].open()
        }
      })
    },

    getShowStatus(work) {
      if (work.STATUS === 1) {
        return 'success'
      } else if (work.STATUS < 0) {
        return 'erroractive'
      } else if (work.CURRENT_STEP) {
        return 'active'
      }
    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },

    // 抽屉状态发生变化触发
    change(e, type) {
      console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      this[type] = e
    },
  }
}
</script>

<style>
.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;

}

.dy-card-content-item {
  margin-top: 20upx;
}

.dy-card-content-item .title {
  display: flex;
  align-items: center;
}

.dy-card-content-item .title .l {
  width: 10upx;
  height: 30upx;
  border-radius: 20upx;
  background-color: #666;
  margin-right: 10upx;
}

.dy-card-content-item .content {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
}

.dy-card-content-item .name text {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
  display: inline-block;
}

.dy-card-foot {
  border-top: 1px solid #eee;
  padding: 30upx;
}

.p20 {
  padding: 40upx;
}

.step-top {
  width: 100%;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
  padding: 20upx;
}

.step-item-container {
  width: 100%;
  padding: 20upx;

}

.step-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20upx 40upx;
}


.step-item-wrap {
  width: 100%;
  border-left: 1px solid #ccc;
  min-height: 100upx;
  position: relative;
  display: flex;
  flex-direction: row;
}

.step-item-wrap.active .step-item-wrap-doter .step-item-wrap-dot {
  background: #4cc9fb;
}

.step-item-wrap.success .step-item-wrap-doter .step-item-wrap-dot {
  background: #5db174;
}

.step-item-wrap.erroractive .step-item-wrap-doter .step-item-wrap-dot {
  background: red;
}

.step-item-wrap.active {
  border-left: 1px solid #5db174;
}

.step-item-wrap.activeing {
  border-left: 1px solid #ccc;
}

.step-item-wrap:last-child {
  border: none;
}

.step-item-wrap-doter {
  width: 30upx;
  height: 30upx;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  top: 0upx;
  left: -12upx;
  text-align: center;
  padding-top: 5upx;

}

.step-item-wrap-dot {
  width: 20upx;
  height: 20upx;
  background: #c0c4cc;
  border-radius: 100%;
}

.step-item-wrap-right {
  margin-left: 40upx;
  margin-top: -5upx;
  padding-bottom: 60upx;
}


.step-item-wrap-right-info {
  color: #999;
  margin-top: 10upx;
}

.step-item-wrap.active .step-item-wrap-right, .step-item-wrap.active .step-item-wrap-right-info {
  color: #4cc9fb;
}

.step-item-wrap.success .step-item-wrap-right, .step-item-wrap.success .step-item-wrap-right-info {
  color: #5db174;
}

.step-item-wrap.erroractive .step-item-wrap-right, .step-item-wrap.erroractive .step-item-wrap-right-info {
  color: red;
}
</style>
