<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">隐患记录</block>
      <block slot="right">
        <view @click="showDrawer('showRight')">查询</view>
      </block>
    </cu-custom>
    <uni-drawer ref="showRight" mode="right" :mask-click="true" @change="change($event,'showRight')">
      <view class="scroll-view">
        <scroll-view class="scroll-view-box" scroll-y="true">
          <view class="de-drawer">
            <view class="padding-sm bb-default text-semi">
              高级查询
            </view>
            <view class="picker-tree-select">
              <view class="">
                隐患发现部门
              </view>
              <view class="picker-tree-box">
                <view class="picker-tree" style="padding-right: 0upx;" @tap="showDeptTree3">
                  {{ HIDDENFINDDEPT_NAME }}
                  <text class="cuIcon-triangledownfill"></text>
                </view>
              </view>
              <tki-tree ref="tkidTree2" :selectParent="true" :range="treeNode" rangeKey="name"
                        @confirm="deptTreeFindDept"></tki-tree>
            </view>
            <view class="picker-tree-select">
              <view class="">
                隐患确认部门
              </view>
              <view class="picker-tree-box">
                <view class="picker-tree" style="padding-right: 0upx;" @tap="showDeptTree">
                  {{ CONFIRM_DEPT_NAME }}
                  <text class="cuIcon-triangledownfill"></text>
                </view>
              </view>
              <tki-tree ref="tkiTree" :selectParent="true" :range="treeNode" rangeKey="name"
                        @confirm="depttreeConfirm" @cancel="depttreeCancel"></tki-tree>
            </view>
            <view class="picker-tree-select">
              <view class="">
                隐患整改部门
              </view>
              <view class="picker-tree-box">
                <view class="picker-tree" style="padding-right: 0upx;" @tap="showDeptTree1">
                  {{ RECTIFICATIONDEPT_NAME }}
                  <text class="cuIcon-triangledownfill"></text>
                </view>
              </view>
              <tki-tree ref="tkiTree1" :selectParent="true" :range="treeNode" rangeKey="name"
                        @confirm="depttreeConfirm1" @cancel="depttreeCancel1"></tki-tree>
            </view>
            <view class="padding-sm bb-default">
              隐患级别
            </view>
            <view class="flex margin-top-xs sr-s">
              <view class="cu-btn radiued margin-xs" :class="HIDDENLEVEL=='hiddenLevel0001'?'bg-blue':'line-blue'"
                    @click="changeLevel('hiddenLevel0001')">一般隐患
              </view>
              <view class="cu-btn radiued margin-xs" :class="HIDDENLEVEL=='hiddenLevel0002'?'bg-blue':'line-blue'"
                    @click="changeLevel('hiddenLevel0002')">重大隐患
              </view>
            </view>
            <view class="padding-sm bb-default text-semi">
              隐患发现时间
            </view>
            <view class="search-time-box">
              <view class="time-style">
                <picker mode="date" @change="changeStarDate">
                  <text class="cuIcon-calendar text-gray mr10"></text>
                  <text class="text-grey f24">{{ starDate == '' ? '开始时间' : starDate }}</text>
                </picker>
              </view>
              <view class="fenge">-</view>
              <view class="time-style">
                <picker mode="date" @change="changeEndDate">
                  <text class="cuIcon-calendar text-gray mr10"></text>
                  <text class="text-grey f24">{{ endDate == '' ? '结束时间' : endDate }}</text>
                </picker>
              </view>
            </view>
            <view class="padding-sm bb-default text-semi">
              隐患整改时间
            </view>
            <view class="search-time-box">
              <view class="time-style">
                <picker mode="date" @change="changeRectificationStarDate">
                  <text class="cuIcon-calendar text-gray mr10"></text>
                  <text class="text-grey f24">{{
                      RECTIFICATION_STARTTIME == '' ? '开始时间' : RECTIFICATION_STARTTIME
                    }}
                  </text>
                </picker>
              </view>
              <view class="fenge">-</view>
              <view class="time-style">
                <picker mode="date" @change="changeRectificationEndDate">
                  <text class="cuIcon-calendar text-gray mr10"></text>
                  <text class="text-grey f24">{{
                      RECTIFICATION_ENDTIME == '' ? '结束时间' : RECTIFICATION_ENDTIME
                    }}
                  </text>
                </picker>
              </view>
            </view>
            <view class="padding-sm bb-default">
              隐患状态
            </view>
            <view class="de-drawer-nr">
              <view class="cu-btn radiued margin-sm" :class="STATE=='1'?'bg-blue':'line-blue'"
                    @click="changeState('1')">未整改
              </view>
              <view class="cu-btn radiued margin-sm" :class="STATE=='3'?'bg-blue':'line-blue'"
                    @click="changeState('3')">已整改
              </view>
              <view class="cu-btn radiued margin-sm" :class="STATE=='4'?'bg-blue':'line-blue'"
                    @click="changeState('4')">已验收
              </view>
              <view class="cu-btn radiued margin-sm" :class="STATE=='16'?'bg-blue':'line-blue'"
                    @click="changeState('16')">确认时打回
              </view>
              <view class="cu-btn radiued margin-sm" :class="STATE=='17'?'bg-blue':'line-blue'"
                    @click="changeState('17')">整改时打回
              </view>
              <view class="cu-btn radiued margin-sm" :class="STATE=='-1'?'bg-blue':'line-blue'"
                    @click="changeState('-1')">已过期
              </view>
            </view>
            <view class="de-drawer-bottom">
              <view class="cz-btn">
                <text class="cu-btn" @click="reset">重置</text>
              </view>
              <view class="done-btn" @click="closeDrawer('showRight')">
                <text class="cu-btn bg-blue">完成</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-drawer>
    <view class="select-fixed top-fixed">
      <view class="cu-bar search bg-white">
        <view class="search-form radius">
          <text class="cuIcon-search"></text>
          <input @input="InputBlur" 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="total>0" class="dy-list">
        <view v-for="(item,index) of list" :key="index" :data-id="item.HIDDEN_ID" class="dy-list-item p201 arrow">
          <view class="" @click="$noMultipleClicks(gotRectify, item)">
            <view class="dy-title-flex">
              <text v-if="item.HIDDENDESCR">
                {{ item.HIDDENDESCR.length > 15 ? item.HIDDENDESCR.substr(0, 15) + '...' : item.HIDDENDESCR }}
              </text>
              <text v-else>暂无</text>
              <text v-if="item.HIDDENLEVEL=='hiddenLevel0001'" class="cu-tag radius bg-yellow light">
                {{ item.HIDDENLEVELNAME }}
              </text>
              <text v-else-if="item.HIDDENLEVEL=='hiddenLevel0002'" class="cu-tag radius bg-red light">
                {{ item.HIDDENLEVELNAME }}
              </text>
            </view>
            <view class="dy-subtitle-flex">
              <text v-if="item.SOURCE=='4' || item.SOURCE=='5'">隐患来源：安全检查</text>
              <text v-if="item.SOURCE=='1'">隐患来源：隐患快报</text>
              <text v-if="item.SOURCE=='2'">隐患来源：风险管控清单检查</text>
              <text v-if="item.SOURCE=='3'">隐患来源：风险管控清单检查</text>
              <text v-if="item.SOURCE=='6'">隐患来源：消防管理检查(app端)</text>
              <text>隐患状态：{{ getHiddenStareName(item.STATE) }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>整改类型：{{ item.RECTIFICATIONTYPE === '1' ? "立即整改" : "限期整改" }}</text>
              <text v-if="item.RECTIFICATIONTYPE === '2'">整改期限：{{ item.RECTIFICATIONDEADLINE }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>隐患发现部门：{{ item.HIDDENFINDDEPTNAME ? item.HIDDENFINDDEPTNAME : '暂无' }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>隐患发现人：{{ item.CREATORNAME ? item.CREATORNAME : '暂无' }}</text>
              <text v-if="item.CREATTIME">隐患发现时间：{{ item.CREATTIME.split(" ")[0] }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>隐患整改部门：{{ item.RECTIFICATIONDEPTNAME ? item.RECTIFICATIONDEPTNAME : '暂无' }}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>整改人：{{ item.RECTIFICATIONORNAME ? item.RECTIFICATIONORNAME : '暂无' }}</text>
              <text v-if="item.RECTIFICATIONTIME">隐患整改时间：{{ item.RECTIFICATIONTIME }}</text>
            </view>
          </view>

          <view v-if="item.STATE === '16' && item.CREATOR === USER_ID" class="action">
            <button class="cu-btn bg-green shadow-blur radius" @click="$noMultipleClicks(goEdit, item)"  style="margin-right: 10px;">编辑</button>
            <button class="cu-btn bg-red shadow-blur radius" @click="$noMultipleClicks(deleted, item)">删除</button>
          </view>
        </view>
      </view>
      <view v-else-if="dataFlag=='noData'" class="dy-null">
        <view class="dy-null-img">
          <image src="../../../../static/null.png" mode=""></image>
        </view>
        <view class="dy-null-title">
          暂无数据
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

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

export default {
  components: {
    tkiTree
  },
  data() {
    return {
      showRight: false,
      sTop: 0,
      totalHeight: 0,
      scrollLeft: 0,
      time: '12:01',
      date: '2018-12-25',
      starDate: '',
      endDate: '',
      RECTIFICATION_STARTTIME: '',
      RECTIFICATION_ENDTIME: '',
      page: 1,
      rows: 10,
      totalCount: 0,
      isEnd: false,
      total: 0,
      varList: [],
      noClick: true,
      dataFlag: 'noData',
      list: [],
      initflag: false,
      name: '',
      HIDDENLEVEL: "",
      HIDDEN_RISKSTANDARD: '',
      STATE: '',
      treeNode: [],
      USER_ID :loginUserId,
      HIDDEN_STATE: {
        "1": "未整改",
        "-2": "待确认",
        "3": "已整改",
        "4": "已验收",
        "16": "确认时打回",
        "17": "整改时打回",
      },
      DEPT: '',
      DEPTNAME: '请选择',
      //  隐患发现部门
      CONFIRM_DEPT: "",
      CONFIRM_DEPT_NAME: "请选择",
      HIDDENFINDDEPT: "",
      HIDDENFINDDEPT_NAME: "请选择",
      //
      RECTIFICATIONDEPT: '',
      RECTIFICATIONDEPT_NAME: '请选择',
    }
  },
  onLoad() {
    this.getData();
    this.getDept();
    loginSession();
  },
  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()
      }
    })
  },
  onShow() {
    var _this = this;
    if (_this.initflag) {
      _this.initflag = false;
      _this.getQuery()
    }
  },
  methods: {
    getData() {
      var _this = this;
      if (_this.isEnd) {
        return
      }
      uni.showLoading({
        title: '请稍候'
      });
      uni.request({
        url: basePath + '/app/hidden/listRiskStandard', // /app/hidden/list
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          tm: new Date().getTime(),
          showCount: _this.rows,
          IS_MYSELF: "1",
          currentPage: _this.page,
          totalResult: _this.total,
          DISPOSESTATE: -1,
          STARTTIME: _this.starDate,
          ENDTIME: _this.endDate,
          RECTIFICATION_STARTTIME: _this.RECTIFICATION_STARTTIME,
          RECTIFICATION_ENDTIME: _this.RECTIFICATION_ENDTIME,
          HIDDENLEVEL: _this.HIDDENLEVEL,
          HIDDEN_RISKSTANDARD: _this.HIDDEN_RISKSTANDARD,
          STATE: _this.STATE,
          HIDDEN_FIND_DEPT_IDS: _this.HIDDENFINDDEPT,
          HIDDEN_CONFIRM_DEPT_IDS: _this.CONFIRM_DEPT,
          HIDDEN_RECTIFICATION_DEPT_IDS: _this.RECTIFICATIONDEPT,
          USERDEPT: loginUser.DEPARTMENT_ID,
          SELFUSERID: loginUserId,
          HIDDENDESCR: _this.name,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          // console.info(res.data);
          if (res.data.result == 'success') {
            uni.hideLoading();
            _this.total = res.data.page.totalResult;
            if (_this.totalCount < res.data.page.totalResult) {
              var content = res.data.varList;
              _this.list = _this.list.concat(content);
              _this.page++;
              _this.totalCount += content.length;
            } else {
              _this.isEnd = true
            }

          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000
            });
          }
        }
      });

    },
    changeStarDate(e) {
      this.starDate = e.detail.value
      this.getQuery();
    },
    changeEndDate(e) {
      this.endDate = e.detail.value
      this.getQuery();
    },
    changeRectificationStarDate(e) {
      this.RECTIFICATION_STARTTIME = e.detail.value
      this.getQuery();
    },
    changeRectificationEndDate(e) {
      this.RECTIFICATION_ENDTIME = e.detail.value
      this.getQuery();
    },
    changeRiskStandard(e) {
      var _this = this;
      _this.HIDDEN_RISKSTANDARD = e
      _this.getQuery();
    },
    changeLevel(e) {
      var _this = this;
      _this.HIDDENLEVEL = e
      _this.getQuery();
    },
    changeState(e) {
      var _this = this;
      _this.STATE = e
      _this.getQuery();
    },
    reset() {
      var _this = this;
      _this.DEPT = '';
      _this.DEPTNAME = '请选择';
      _this.HIDDENFINDDEPT_NAME = '请选择';
      _this.RECTIFICATIONDEPT_NAME = '请选择';
      _this.CONFIRM_DEPT_NAME = '请选择';
      _this.CONFIRM_DEPT = '请选择';
      _this.starDate = '';
      _this.endDate = '';
      _this.RECTIFICATION_STARTTIME = '';
      _this.RECTIFICATION_ENDTIME = '';
      _this.HIDDENLEVEL = '';
      _this.STATE = '';
      _this.getQuery();
    },
    getQuery() {
      var _this = this;
      _this.page = 1;
      _this.isEnd = false;
      _this.totalCount = 0;
      _this.total = 0;
      _this.list = [];
      _this.getData()
    },
    getlist() {
      var _this = this;
      _this.page = 1;
      _this.isEnd = false;
      _this.totalCount = 0;
      _this.total = 0;
      _this.list = [];
      _this.getData()
    },
    showDeptTree3() {
      // this.isUps=true
      this.$refs.tkidTree2._show();
    },
    // 显示树形选择器
    showDeptTree() {
      // this.isUps=true
      this.$refs.tkiTree._show();
    },
    // 显示树形选择器
    showDeptTree1() {
      // this.isUps=true
      this.$refs.tkiTree1._show();
    },

    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      this.getQuery();
    },
    InputBlur(e) {
      this.name = e.detail.value
    },
    PickerChange(e) {
      this.index = e.detail.value
    },
    TimeChange(e) {
      this.time = e.detail.value
    },
    DateChange(e) {
      this.date = e.detail.value
    },
    // 打开窗口
    showDrawer(e) {
      this.$refs[e].open()
    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // 抽屉状态发生变化触发
    change(e, type) {
      console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      this[type] = e
    },
    getHiddenStareName(state) {
      return this.HIDDEN_STATE[state]
    },
    //跳转事件
    gotRectify(e) {
      uni.navigateTo({
        url: '/pages/application/hidden-danger-management/hidden-danger-record/hidden-danger-record-detail?id=' + e.HIDDEN_ID,
      });
      // if (e.SOURCE === '4' || e.SOURCE === '5' || e.SOURCE === '1') {
      //
      // } else if (e.HIDDEN_RISKSTANDARD === '1') {
      //   uni.navigateTo({
      //     url: '/pages/application/hidden-danger-management/hidden-danger-record/hidden-danger-record-risk-detail?id=' + e.HIDDEN_ID,
      //   });
      // } else if (e.HIDDEN_RISKSTANDARD === '2') {
      //   uni.navigateTo({
      //     url: '/pages/application/hidden-danger-management/hidden-danger-record/hidden-danger-record-standard-detail?id=' + e.HIDDEN_ID,
      //   });
      // }
    },
    //跳转事件
    goEdit(e) {
      uni.navigateTo({
        url: '/pages/application/hidden-danger-management/hidden-danger-edit/hidden-danger-edit-detail?HIDDEN_ID=' + e.HIDDEN_ID,
      });
    },
    deleted(e) {
      var _this = this;
      uni.showModal({
        title: '新泰安全',
        content: '确定要删除这条隐患吗？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            uni.request({
              url: basePath + '/app/hidden/riskListCheckHiddenDelete',
              method: 'POST',
              dataType: 'json',
              header: {
                'Content-type': 'application/x-www-form-urlencoded'
              },
              data: {
                HIDDEN_ID: e.HIDDEN_ID,
              },
              success: (res) => {
                uni.showToast({
                  icon: 'none',
                  title: '删除成功',
                  duration: 1500
                });
                setTimeout(function () {
                  _this.getQuery()
                }, 1500)
              },
              fail: (err) => {
                uni.showModal({
                  content: "删除失败",
                  showCancel: false
                });
              }
            })
          }
        }
      })
    },
    //跳转事件
    gotReview(e) {
      uni.navigateTo({
        url: '/pages/works/hidden-danger/hidden-danger-review?id=' + e,
      });
    },
    //跳转事件
    gotCheck(e) {
      uni.navigateTo({
        url: '/pages/works/hidden-danger/hidden-danger-check?id=' + e,
      });
    },
    //跳转事件
    gotDetail(e) {
      uni.navigateTo({
        url: '/pages/works/hidden-danger/hidden-danger-details?id=' + e,
      });
    },
    getDept() {
      var _this = this;
      uni.request({
        url: basePath + '/app/sys/listTree', //部门下拉接口
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          DEPARTMENT_ID: loginUser.DEPARTMENT_ID,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          if ("success" == res.data.result) {
            _this.treeNode = eval(res.data.zTreeNodes);
          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000
            });
          }
        }
      });
    },
    deptTreeFindDept(e) {
      console.log('deptTreeFindDept')
      console.log('deptTreeFindDept')
      if (e && e.length > 0) {
        this.HIDDENFINDDEPT = e[0].id;
        this.HIDDENFINDDEPT_NAME = e[0].name;
      }
      this.$forceUpdate(); //强制刷新
      this.getQuery();
    },
    // 确定回调事件
    depttreeConfirm(e) {
      console.log('depttreeConfirm')
      if (e && e.length > 0) {
        this.CONFIRM_DEPT = e[0].id;
        this.CONFIRM_DEPT_NAME = e[0].name;
      }
      this.$forceUpdate(); //强制刷新
      this.getQuery();
    },
    depttreeConfirm1(e) {
      // this.isUps=false;
      if (e && e.length > 0) {

        this.RECTIFICATIONDEPT = e[0].id;
        this.RECTIFICATIONDEPT_NAME = e[0].name;
      }
      // this.RISK_UNIT_ID = ''; //单元
      // this.RISK_UNIT_NAME = ''; //单元
      this.$forceUpdate(); //强制刷新
      // this.getUserList();
      this.getQuery();
    },
    depttreeFindDeptCancel(e) {},
    // 取消回调事件
    depttreeCancel(e) {
      // this.isUps=false;
    },
    // 取消回调事件
    depttreeCancel1(e) {
      // this.isUps=false;
    },
    scrolltolower() {
      this.getData();
    }
  }
}
</script>
<style>
.sr-s .cu-btn {
  font-size: 24upx;
  height: 54upx;
  flex: 1;
}

.scroll-view {
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
  z-index: 999;

}

.scroll-view-box {
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

}
</style>
