<template>
  <view class="container" v-if="isdetail">
    <view class="nav_bar">
      <!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
      <view class="nav_bar_tit"> 工情信息 </view>
    </view>
    <!-- tabs -->
    <view class="table_h">
      <div
        class="leftTab"
        :class="{ activetextTypeTab: showTextTypeTab == 1 }"
        @click="tabChange(1)"
      >
        运行情况
      </div>
      <div
        class="rightTab"
        :class="{ activetextTypeTab: showTextTypeTab == 2 }"
        @click="tabChange(2)"
      >
        工程险情
      </div>
    </view>
    <!-- 搜索区域 -->
    <view class="search">
      <view class="search_sear">
        <input
          class="searchInput"
          confirm-type="search"
          placeholder-style="color:#bbb"
          v-model="saerchValue"
          placeholder="请输入工程名称/上报人"
          @input="myinput"
          @confirm="myconfirm"
        />
        <icon class="icon-small" type="search" size="14"></icon>

        <icon
          v-if="saerchValue.length > 0"
          class="clear-icon"
          type="clear"
          size="16"
          @click="clearnClick"
        ></icon>
      </view>
      <view class="more">
        <image
          style="width: 20px; height: 20px; margin-right: 10px"
          src="../../static/images/filter.png"
          @click="openpop"
        ></image>
      </view>
    </view>
    <!-- 列表区域 -->
    <view class="table_info" v-if="list.length > 0">
      <p class="p" v-if="total > 0">共{{ total }}条信息</p>
      <view v-for="(item, index) in list" :key="index">
        <view class="table_Page" @tap="toDetail(item)">
          <view class="info">
            <h4>{{ item.projectName }}</h4>
            <p class="info_P">
              <span class="info_n">{{ item.reporter }}</span>
              <span>{{ item.reportTime }}</span>
            </p>
          </view>
          <view v-if="item.isRead == 0" class="badge"
            ><u-badge :isDot="true"></u-badge
          ></view>
        </view>
      </view>
    </view>
    <!-- 无数据 -->
    <view class="table_info" v-if="list.length == 0">
      <view class="table_Page" @tap="toDetail('item')">
        <view class="info">
          <h4>朝阳寺水库</h4>
          <p class="info_P">
            <span class="info_n">刘明</span>
            <span>2024-03-06 13:50:47</span>
          </p>
        </view>
        <view class="badge"><u-badge :isDot="true"></u-badge></view> </view
    ></view>

    <!-- 筛选抽屉 -->
    <view class="popup" v-if="popupOpen">
      <u-popup
        :show="popupOpen"
        mode="bottom"
        @close="() => (this.popupOpen = false)"
      >
        <view style="padding: 30px 20px">
          <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
          <u-form
            labelPosition="left"
            :model="model1"
            ref="uForm"
            labelWidth="100"
          >
            <u-form-item
              label="工程类型"
              prop="checkboxValue1"
              borderBottom
              labelWidth="80"
              ref="item3"
            >
              <u-checkbox-group
                v-model="model1.userInfo.checkboxValue1"
                shape="square"
              >
                <u-checkbox
                  :customStyle="{ marginRight: '16px' }"
                  v-for="(item, index) in checkboxList1"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                >
                </u-checkbox>
              </u-checkbox-group>
            </u-form-item>
            <!-- 时间 -->
            <u-form-item
              label="上报开始时间"
              prop="userInfo.start"
              borderBottom
              @click="
                isTime = true
                hideKeyboard()
              "
              ref="item1"
            >
              <u-input
                v-model="model1.userInfo.start"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择上报开始时间"
              ></u-input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item
              label="上报结束时间"
              prop="userInfo.end"
              borderBottom
              @click="isTime2 = true"
              ref="item1"
            >
              <u--input
                v-model="model1.userInfo.end"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择上报结束时间"
              ></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </u-form>
          <view class="bottom">
            <u-button
              text="重置"
              customStyle="margin: 10px"
              @click="reset"
            ></u-button>
            <u-button
              type="primary"
              text="确认"
              customStyle="margin: 10px"
              @click="submit"
            ></u-button>
          </view>
          <u-datetime-picker
            :show="isTime"
            v-model="valueTime"
            mode="datetime"
            @confirm="confirm"
            @cancel="cancel"
          ></u-datetime-picker>

          <u-datetime-picker
            :show="isTime2"
            v-model="valueTime2"
            mode="datetime"
            @confirm="confirm2"
            @cancel="cancel2"
          ></u-datetime-picker>
        </view>
      </u-popup>
    </view>
  </view>
  <view class="container" v-else>
    <detail :info="detailInfo" @rightClick="rightClick"></detail>
  </view>
</template>
<script>
import moment from 'moment'
import detail from './detail/index.vue'
export default {
  components: { detail },
  data () {
    return {
      isdetail: true,
      detailInfo: {},
      showTextTypeTab: 1,
      saerchValue: '',
      popupOpen: false, //抽屉打开,
      // 基本案列数据
      checkboxList1: [
        {
          name: '水库',
          disabled: false,
          key: 'sk'
        },
        {
          name: '水电站',
          disabled: false,
          key: 'sdz'
        }
      ],
      isTime: false,
      valueTime: Number(moment()),
      valueTime2: Number(moment()),
      isTime2: false,
      model1: {
        userInfo: {
          start: '',
          end: '',
          checkboxValue1: ['水库', '水电站']
        }
      },
      list: {},
      total: '',
      isfixed: false,
      params: {
        pageSo: { pageSize: 10, pageNumber: 0 },
        isRead: 0,
        projectName: this.saerchValue
      }
    }
  },
  onLoad () {
    this.getData()
  },
  // 页面滚动时，固定头部
  onPageScroll () {
    this.isfixed = true
  },
  //   下拉刷新
  onPullDownRefresh () {
    uni.showToast({
      title: '努力加载中...'
    })
    this.params.pageSo.pageNumber = 0
    this.list = []
    this.getData()
  },
  // 上拉加载
  onReachBottom () {
    if (this.list.length >= this.total) {
      uni.showToast({
        title: '没有更多的数据了1'
      })
      return
    }
    this.getData()
  },
  methods: {
    rightClick (val) {
      this.isdetail = true
    },
    toDetail (item) {
      console.log('item', item)
      this.detailInfo = item
      this.isdetail = false
      //   uni.navigateTo({
      //     url: './detail/index'
      //   })
    },
    async getData () {
      let obj = this.params
      this.params.pageSo.pageNumber++
      if (this.model1.userInfo.start != '' && this.model1.userInfo.end != '') {
        obj.timeSo = {
          start: this.model1.userInfo.start,
          end: this.model1.userInfo.end
        }
      }

      this.list = []
      try {
        if (this.showTextTypeTab === 1) {
          let res = await uni.$http.post(
            '/gunshiApp/xfflood/xfProjectRun/queryPage',
            obj
          )

          let res2 = await uni.$http.post(
            '/gunshiApp/xfflood/xfProjectRun/queryPage',
            { ...obj, isRead: 1 }
          )
          this.total = res.data.data.total + res2.data.data.total

          this.list = res.data.data.records.concat(res2.data.data.records)
          console.log('--1-', res.data.data, res.data.data.records)
          console.log('--2-', res2.data.data, this.total, this.list)
        } else {
          let res = await uni.$http.post(
            '/gunshiApp/xfflood/xfProjectIncident/queryPage',
            obj
          )
          let res2 = await uni.$http.post(
            '/gunshiApp/xfflood/xfProjectIncident/queryPage',
            { ...obj, isRead: 1 }
          )
          this.total = res.data.data.total + res2.data.data.total
          this.list = res.data.data.records.concat(res2.data.data.records)
        }
      } catch (e) {
        uni.$showMsg()
      }
    },

    tabChange (val) {
      console.log('tabChange0', val)
      this.showTextTypeTab = val
      this.params.pageSo.pageNumber = 0
      this.getData()
    },
    submit () {
      this.popupOpen = false
      console.log('res', this.$refs.uForm)
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      //   this.$refs.uForm
      //     .validate()
      //     .then(res => {
      //       uni.$u.toast('校验通过')
      //       this.popupOpen = false
      //     })
      //     .catch(errors => {
      //       uni.$u.toast('校验失败')
      //     })
    },
    reset () {
      const validateList = [
        'userInfo.start',
        'userInfo.end',
        'userInfo.checkboxValue1'
      ]
      this.$refs.uForm.resetFields()
      this.$refs.uForm.clearValidate()
      setTimeout(() => {
        this.$refs.uForm.clearValidate(validateList)
        // 或者使用 this.$refs.uForm.clearValidate()
      }, 10)
      this.model1 = {
        userInfo: {
          start: '',
          end: '',
          checkboxValue1: ['水库', '水电站']
        }
      }
    },
    confirm (val) {
      console.log(
        '点击确定按钮时触发',
        val.value,
        moment(val.value).format('YYYY-MM-DD HH:mm')
      )
      this.valueTime = Number(val)
      this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
      this.isTime = false
    },
    cancel () {
      console.log('取消')
      this.isTime = false
    },
    confirm2 (val) {
      console.log(
        '点击确定按钮时触发',
        val.value,
        moment(val.value).format('YYYY-MM-DD HH:mm')
      )
      this.valueTime2 = Number(val)
      this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
      this.isTime2 = false
      this.params.timeSo.end = this.model1.userInfo.end
    },
    cancel2 () {
      console.log('取消')
      this.isTime2 = false
    },

    openpop () {
      this.popupOpen = true
    },
    myinput () {},
    myconfirm () {},
    clearnClick () {
      console.log('打印了clearnClick', this.saerchValue)
      this.saerchValue = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  font-size: 14px;
  background-color: #f3f5f8;
}
.table_info {
  background-color: #fff;
  margin-bottom: 12rpx;
  padding: 20px;
  .p {
    text-align: right;
  }
  .table_Page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-top: 12rpx;
    padding-bottom: 12rpx;

    .info_P {
      color: #a2a2a2;
      font-size: 24rpx;
      .info_n {
        margin-right: 20px;
      }
    }
  }
}
.table_h {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56rpx;
  line-height: 88rpx;
  background-color: #fff;
  margin-bottom: 12rpx;
  text-align: center;
}
.leftTab {
  width: 80px;
}
.rightTab {
  width: 80px;
}
.activetextTypeTab,
.activetextTypeTab:hover {
  //   border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}
.nav_bar {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  width: 100%;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfdfdf;
  box-shadow: 0 5px 10px -8px #dfdfdf inset;
  background-color: #fff;
  margin-bottom: 12rpx;
}
.nav_bar_tit {
  text-align: center;
}

.search {
  background-color: #fff;
  margin-bottom: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}
.fl {
  display: flex;
  justify-content: center;
  align-items: left;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search_sear {
  //   background-color: #eee;
  width: 100%;
  padding: 30rpx 16rpx;
  position: relative;
  box-sizing: border-box;
  z-index: 999;

  .searchInput {
    background-color: #eee;
    height: 60rpx;
    border-radius: 6rpx;
    color: #bbb;
    padding-left: 60rpx;
  }

  .icon-small {
    position: absolute;
    top: 50%;
    left: 36rpx;
    transform: translateY(-50%);
  }
  .clear-icon {
    position: absolute;
    top: 50%;
    right: 36rpx;
    transform: translateY(-50%);
    icon {
    }
  }
}
</style>
