<template>
  <view class="container">
    <view class="nav_bar">
      <!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
      <view class="nav_bar_tit"> 灾情信息 </view>
    </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>
      <view class="more">
        <image
          style="width: 20px; height: 20px; margin-right: 10px"
          src="../../static/images/filter.png"
          @click="openpop"
        ></image>
      </view>
    </view>
    <!-- table_info -->
    <view class="table_info">
      <p class="p">共4条信息</p>
      <view>
        <view class="table_Page">
          <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 class="table_Page">
          <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>

    <!-- 抽屉 -->
    <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
              ref="item3"
              :customStyle="{ height: '55px' }"
            >
              <u-checkbox-group
                v-model="model1.userInfo.checkboxValue1"
                placement="row"
                @change="checkboxChange"
                style="flex-wrap: wrap; position: absolute"
              >
                <u-checkbox
                  :customStyle="{ marginRight: '16px', margin: '5px' }"
                  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>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      saerchValue: '',
      popupOpen: false, //抽屉打开,
      // 基本案列数据
      checkboxList1: [
        {
          name: '一般险情',
          disabled: false
        },
        {
          name: '较大险情',
          disabled: false
        },
        {
          name: '重大险情',
          disabled: false
        },
        {
          name: '特别重大险情',
          disabled: false
        }
      ],
      isTime: false,
      valueTime: Number(moment()),
      valueTime2: Number(moment()),
      isTime2: false,
      model1: {
        userInfo: {
          start: '',
          end: '',
          checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
        }
      },
      params: {
        pageSo: { pageSize: 10, pageNumber: 0 },
        isRead: 0,
        projectName: this.saerchValue
      }
    }
  },
  methods: {
    submit () {
      this.popupOpen = false
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      // this.$refs.uForm
      //   .validate()
      //   .then(res => {
      //     // uni.$u.toast('校验通过')
      //   })
      //   .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
    },
    cancel2 () {
      console.log('取消')
      this.isTime2 = false
    },
    checkboxChange (n) {
      console.log('change', n)
      //   this.model1.userInfo.checkboxValue1 = e.name
    },
    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;
      }
    }
  }
}
.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>
