<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="$noMultipleClicks(scan)">清单扫描</view> -->
      </block>
    </cu-custom>
    <view class="top-fixed">
      <scroll-view
          scroll-x
          class="bg-white nav"
          scroll-with-animation
          :scroll-left="scrollLeft"
      >
        <view class="flex text-center">
          <view
              class="cu-item flex-sub"
              :class="index == TabCur ? 'text-blue cur' : ''"
              v-for="(item, index) in tabNav"
              :key="index"
              @tap="tabSelect"
              :data-id="index"
          >
            {{ tabNav[index] }}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>
    <block v-if="TabCur == 0">
      <scroll-view
          class="dy-scroll-nobg"
          @scrolltolower="scrolltolower"
          scroll-y
          :style="'top:' + sTop + 'px;height:calc(100vh - ' + totalHeight + 'px)'"
      >
        <view v-if="list.length > 0">
          <view
              class="dy-card"
              v-for="item in list"
              :key="item.FIRE_RECORD_ID"
              @click="
              $noMultipleClicks(goToList, {
                FIRE_RECORD_ID: item.FIRE_RECORD_ID,
                FIRE_CHECK_ID: item.FIRE_CHECK_ID,
                FIRE_CHECK_TYPE: item.FIRE_CHECK_TYPE,
                PHONE_REPEAT: item.PHONE_REPEAT,
                ISLOG: '0'
              })
            "
          >
            <view class="dy-card-title">
              <text>
                <text v-if="item.USER_ID == loginUserId" style="margin-right: 10upx; color: #07bb07">★</text>
                {{ item.FIRE_CHECK_STANDARD_NAME }}
              </text>
              <text class="cuIcon-right f30 text-gray"></text>
            </view>
            <view class="dy-card-content">
              <view class="dy-sub-stitle">
                <text class="text-grey">负责部门：{{ item.DEPARTMENT }}</text>
                <text class="text-grey">负责人：{{ item.USERNAME }}</text>
              </view>
              <view class="dy-sub-stitle">
                <text class="text-grey">涉及点位数：{{ item.ITEMCOUNT }}</text>
                <text class="text-grey"
                >排查周期：{{ item.FIRE_CHECK_TYPE_NAME }}</text
                >
              </view>
              <!--							<view class="dy-stitle">-->
              <!--								<text v-if="item.FIRE_CHECK_TYPE !== 'checkPeriod0001' "-->
              <!--									class="text-grey">检查周期：{{item.PERIODSTART.split(" ")[0]}} ~-->
              <!--									{{item.PERIODEND.split(" ")[0]}}</text>-->
              <!--								<text v-else class="text-grey">检查周期：{{item.PERIODSTART.split(" ")[0]}}</text>-->
              <!--							</view>-->
              <!--							<view class="cu-progress radius striped active">-->
              <!--								<view class="bg-olive" :style="[{ width:loading?((item.checkedItem>0 && item.count>0)?(item.checkedItem/item.count*100):0)+'%':''}]">{{(item.checkedItem>0 && item.count>0)?(item.checkedItem/item.count*100):0}}%</view>-->
              <!--							</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>
    </block>

    <block v-if="TabCur == 1">
      <scroll-view
          class="dy-scroll-nobg"
          @scrolltolower="scrolltolower"
          scroll-y
          :style="'top:' + sTop + 'px;height:calc(100vh - ' + totalHeight + 'px)'"
      >
        <view v-if="list1.length > 0">
          <view
              class="dy-card"
              v-for="item in list1"
              :key="item.FIRE_CHECK_ID"
              @click="
              $noMultipleClicks(goToRecordList, {
                FIRE_CHECK_ID: item.FIRE_CHECK_ID,
                FIRE_CHECK_NAME: item.FIRE_CHECK_STANDARD_NAME,
                ISLOG: '1'
              })
            "
          >
            <view class="dy-card-title">
              <text
              ><text
                  v-if="item.USER_ID == loginUserId"
                  style="margin-right: 10upx; color: #07bb07"
              >★</text
              >{{ item.FIRE_CHECK_STANDARD_NAME }}</text
              >
              <text class="cuIcon-right f30 text-gray"></text>
            </view>
            <view class="dy-card-content">
              <view class="dy-sub-stitle">
                <text class="text-grey"
                >负责部门：{{ item.DEPARTMENT_NAME }}</text
                >
                <text class="text-grey">负责人：{{ item.USER_NAME }}</text>
              </view>
              <view class="dy-sub-stitle">
                <text class="text-grey">检查次数：{{ item.COUNT }}</text>
                <text class="text-grey">排查周期：{{ item.PERIODNAME }}</text>
              </view>
              <!-- <view class="dy-stitle">
								<text class="text-grey">起止时间：{{item.PERIODSTART}} - {{item.PERIODEND}}</text>
							</view>
							<view class="dy-stitle">
								<text class="text-grey">检查时间：{{item.CHECK_TIME}}</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>
    </block>
  </view>
</template>

<script>
import { basePath, loginUser, loginSession } from '@/common/tool.js'
export default {
  data() {
    return {
      noClick: true,
      initflag: false,
      showCount: 10,
      currentPage: 1,
      sTop: 0,
      totalHeight: 0,
      TabCur: 0,
      scrollLeft: 0,
      tabNav: ['待排查', '排查记录'],
      loading: false,
      list: [],
      list1: [],
      totalList: [],
      page: 1,
      rows: 1000,
      totalCount: 0,
      totalPage: 0,
      isEnd: false,
      total: 0,
      dataFlag: 'noData',
      isIndex: 0,
      loginUserId: ''
    }
  },
  onLoad: function () {
    let that = this
    this.loginUserId = loginUser.USER_ID
    this.showCount = 10
    this.currentPage = 1
    this.background = require('@/common/background.json')
    setTimeout(function () {
      that.loading = true
    }, 500)
  },
  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() {
    if (this.TabCur == 0) {
      // 待排查
      this.list = []
      this.getlist()
    } else {
      // 排查记录
      this.list1 = []
      this.getCheckDataRecord()
    }
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      this.currentPage = 1
      if (this.TabCur === 0) {
        // 待排查
        this.list = []
        this.getlist()
      } else {
        // 排查记录
        this.list1 = []
        this.getCheckDataRecord()
      }
    },
    getlist() {
      this.getData()
    },
    getData() {
      var _this = this
      if (_this.isEnd) {
        return
      }
      uni.showLoading({
        title: '加载中'
      })

      uni.request({
        url: basePath + '/app/fireRecordManger/checkList/v2',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
          USER_NAME: loginUser.NAME,
          CHECK_DEPARTMENT_ID: loginUser.DEPARTMENT_ID,
          IS_MAIN: loginUser.ISMAIN,
          FINISHED: this.TabCur,
          roleLevel: loginUser.roleLevel,
          supDeparIds: loginUser.supDeparIds
        },
        success: (res) => {
          _this.totalPage = res.data.page.totalPage
          if ('success' == res.data.result) {
            uni.hideLoading()
            if (_this.list.length == 0) {
              _this.list = res.data.varList
            } else {
              if (res.data.varList != null) {
                _this.list2 = res.data.varList
                _this.list = _this.list.concat(_this.list2)
              }
            }
            // this.list = res.data.varList;
            // this.totalList = res.data.varList;
          } else {
            uni.showToast({
              icon: 'none',
              title: '系统异常',
              duration: 2000
            })
          }
        }
      })
    },

    getCheckDataRecord() {
      var _this = this
      if (_this.isEnd) {
        return
      }
      uni.showLoading({
        title: '加载中'
      })

      uni.request({
        url:
            basePath +
            '/app/fireRecordManger/getCheckRecordListV2?showCount=' +
            _this.showCount +
            '&currentPage=' +
            _this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          USER_ID: loginUser.USER_ID,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          roleLevel: loginUser.roleLevel,
          supDeparIds: loginUser.supDeparIds
        },
        success: (res) => {
          if ('success' == res.data.result) {
            uni.hideLoading()
            _this.totalPage = res.data.page.totalPage
            if (_this.list1.length == 0) {
              _this.list1 = res.data.varList
            } else {
              if (res.data.varList != null) {
                let list2 = res.data.varList
                _this.list1 = _this.list1.concat(list2)
              }
            }
            // this.list1 = res.data.varList;
            // this.totalList = res.data.varList;
          } else {
            uni.showToast({
              icon: 'none',
              title: '系统异常',
              duration: 2000
            })
          }
        }
      })
    },

    scan() {
      let _this = this
      uni.scanCode({
        success: function (res) {
          let flag = false
          let listId = res.result
          for (var i = 0; i < _this.totalList.length; i++) {
            if (_this.totalList[i].FIRE_CHECK_ID == listId) {
              flag = true
              _this.goToList({
                FIRE_RECORD_ID: _this.totalList[i].FIRE_RECORD_ID,
                FIRE_CHECK_ID: _this.totalList[i].FIRE_CHECK_ID,
                FIRE_CHECK_TYPE: _this.totalList[i].FIRE_CHECK_TYPE,
                PHONE_REPEAT: _this.totalList[i].PHONE_REPEAT,
                ISLOG: '1'
              })
              break
            }
          }
          if (!flag) {
            uni.showToast({
              title: '无法检查该清单',
              duration: 2000
            })
          }
        }
      })
    },
    // 滑动到底方法
    scrolltolower() {
      var _this = this
      _this.currentPage = _this.currentPage + 1
      _this.isEnd = false
      if (_this.totalPage >= _this.currentPage) {
        if (_this.TabCur == 0) {
          _this.getData() //开始分页查询}
        } else {
          _this.getCheckDataRecord()
        }
      }
    },
    //跳转事件
    goToList({
               FIRE_RECORD_ID,
               FIRE_CHECK_ID,
               FIRE_CHECK_TYPE,
               PHONE_REPEAT,
               ISLOG
             }) {
      uni.navigateTo({
        url:
            '/pages/application/fire-management/hidden-trouble-app/hidden-trouble-spot?' +
            'FIRE_RECORD_ID=' + FIRE_RECORD_ID +
            '&FIRE_CHECK_ID=' + FIRE_CHECK_ID +
            '&FIRE_CHECK_TYPE=' + FIRE_CHECK_TYPE +
            '&PHONE_REPEAT=' + PHONE_REPEAT +
            '&ISLOG=' + ISLOG
      })
    },
    goToRecordList({ FIRE_CHECK_ID, FIRE_CHECK_NAME, ISLOG }) {
      uni.navigateTo({
        url:
            '/pages/application/fire-management/hidden-trouble-app/check-record-list?FIRE_CHECK_ID=' +
            FIRE_CHECK_ID +
            '&FIRE_CHECK_NAME=' +
            FIRE_CHECK_NAME +
            '&ISLOG=' +
            ISLOG
      })
    }
  }
}
</script>

<style>
.dy-list {
  background: #fff;
  margin-top: 2upx;
}

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

.dy-stitle {
  margin: 16upx 0;
}

.dy-sub-stitle {
  margin: 16upx 0;
  display: flex;
  justify-content: space-between;
}

.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;
}
</style>
