<template>
  <view class="page">
    <u-tabs
        lineWidth="336upx"
        :list="tabsList"
        itemStyle="height:80upx;padding-bottom:10upx;background-color: #fff;"
        @click="tabsClick"
    ></u-tabs>
    <view class="container">
      <u-sticky offset-top="200">
        <u-button type="primary" text="高级搜索" @click="popupOpen" style="height: 30px;"></u-button>
      </u-sticky>
    </view>
    <u-popup :show="popupShow" mode="right" :overlay="true" customStyle='width: 300px;' :safeAreaInsetTop="true" @close="popupClose" @open="popupOpen">
      <view>
        <u-datetime-picker
            :show="addStartPickBarShow"
            v-model="addTimeStart"
            mode="date"
            @close="addPickBarOnClose('start')"
            @cancel="addPickBarOnCancel('start')"
            @confirm="addPickBarOnConfirm"
        ></u-datetime-picker>
        <u-button @click="addStartPickBarShow = true">起始时间：{{ addTimeStartStr == '' ? '请选择起始时间...' : addTimeStartStr }}</u-button>
        <u-datetime-picker
            :show="addEndPickBarShow"
            v-model="addTimeEnd"
            mode="date"
            @close="addPickBarOnClose('end')"
            @cancel="addPickBarOnCancel('end')"
            @confirm="addPickBarOnConfirm"
        ></u-datetime-picker>
        <u-button @click="addEndPickBarShow = true">结束时间：{{ addTimeEndStr == '' ? '请选择结束时间...' : addTimeEndStr }}</u-button>
        <u-toast ref="uToast"></u-toast>
        <view class="u-page">
          <view class="u-demo-block">
            <view class="u-demo-block__content">
              <u-row customStyle="margin-bottom: 10px">
                <u-col span="6">
                  <view class="demo-layout bg-purple-light">
                    <u-button @click="resetAdvancedParam">重置</u-button>
                  </view>
                </u-col>
                <u-col span="6">
                  <view class="demo-layout bg-purple">
                    <u-button @click="advancedSearch">搜索</u-button>
                  </view>
                </u-col>
              </u-row>

            </view>
          </view>
        </view>

      </view>
    </u-popup>
    <view class="message_list">
      <u-list @scrolltolower="scrolltolower" v-if="list.length > 0">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="message_item arrow" @click="fnNavigator(item)">
            <view class="message_flex">
              <view>
                <template v-if="item.corppromisType ==='1'"> <!-- 0承诺书1责任状 -->
                  <view class="fontstyle">发状人：{{ item.coverpeople }}</view>
                  <view class="fontstyle">受状人：{{ item.NAME }}</view>
                </template>
                <template v-else>
                  <view class="fontstyle">被承诺人：{{ item.coverpeople }}</view>
                  <view class="fontstyle">承诺人：{{ item.NAME }}</view>
                </template>

                <view v-if="item.SIGNTIME != null" class="fontstyle">已签字</view>
                <view v-else class="fontstyle_red">未签字</view>
                <view class="message_time">{{ item.SIGNTIME }}</view>
              </view>
              <view class="font0" v-if="TYPE === '2'">{{ item.ISREAD == '0' ? '待阅' : '已阅' }}</view>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <empty v-else></empty>
    </view>
  </view>
</template>

<script>
import {getMyPromiseList, getReceivePromiseList} from "../../../api";

export default {
  data() {
    return {
      tabsList: [
        // {name: '我的承诺', id: '1'},
        {name: '发出承诺', id: '1'},
        {name: '接收承诺', id: '2'}
      ],
      TYPE: '1',
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
      list: [],
      popupShow: false, // 高级搜索弹窗
      addStartPickBarShow: false, // 起始日期选择器
      addEndPickBarShow: false, // 结束日期选择器
      addTimeStart: Number(new Date()), // 承诺书添加时间-起始
      addTimeEnd: Number(new Date()), // 承诺书添加时间-结束
      addTimeStartStr: '', // 承诺书添加时间-起始-字符串
      addTimeEndStr: '', // 承诺书添加时间-结束-字符串
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  onShow(event) {
    this.resetList()
  },
  methods: {
    async fnGetMyPromiseList() {
      let resData = await getMyPromiseList({
        USER_ID: this.userInfo.USER_ID,
        showCount: this.pageSize,
        currentPage: this.currentPage,
        ADDSTART: this.addTimeStartStr,
        ADDEND: this.addTimeEndStr
      })
      this.list = [...this.list, ...resData.varList]
      this.totalPage = resData.page.totalPage
    },
    async fnGetReceivePromiseList() {
      let resData = await getReceivePromiseList({
        USER_ID: this.userInfo.USER_ID,
        showCount: this.pageSize,
        currentPage: this.currentPage,
        ADDSTART: this.addTimeStartStr,
        ADDEND: this.addTimeEndStr
      })
      this.list = [...this.list, ...resData.varList]
    },
    resetList() {
      this.pageSize = 10
      this.currentPage = 1
      this.list = []
      this.getData();
    },
    getData() {
      if (this.TYPE === '1') this.fnGetMyPromiseList()
      if (this.TYPE === '2') this.fnGetReceivePromiseList()
    },
    scrolltolower() {
      this.currentPage++;
      if (this.totalPage >= this.currentPage) this.getData();
    },
    tabsClick(e) {
      this.TYPE = e.id
      this.resetAllAddTime()
      this.resetList()
    },
    fnNavigator(item) {
      uni.$u.route({
        url: 'pages/mine/promise/detail',
        params: {
          PROMISE_ID: item.PROMISE_ID,
          PROMISEPEOPLE_ID: item.PROMISEPEOPLE_ID,
          TYPE: this.TYPE
        }
      })
    },
    // 高级搜索弹窗弹出函数
    popupOpen() {
      this.popupShow = true

    },
    // 高级搜索弹窗关闭函数
    popupClose() {
      this.popupShow = false

    },
    // 高级搜索日期选择器关闭回调
    addPickBarOnClose(type) {
      switch (type) {
        case 'start':
          this.addStartPickBarShow = false;
          break;
        case 'end':
          this.addEndPickBarShow = false;
          break;
        default:
          this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
      }
    },
    // 高级搜索日期选择器取消回调
    addPickBarOnCancel(type) {
      this.addPickBarOnClose(type)
    },
    // 高级搜索日期选择器确认回调
    addPickBarOnConfirm(value) {
      // alert(value.value)
      switch (this.addStartPickBarShow) {
        case true:
          // start type
          this.addTimeStartStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
          this.addPickBarOnClose('start')
          break;
        case false:
          // end type
          this.addTimeEndStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
          this.addPickBarOnClose('end')
          break;
        default:
          this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
      }
    },
    // 清除高级搜索内的起始日期、结束日期组件绑定的时间属性（时间戳类型）；清除根据时间戳格式化的文本日期
    resetAllAddTime() {
      this.addTimeStart = Number(new Date())
      this.addTimeEnd = Number(new Date())
      this.addTimeStartStr = ''
      this.addTimeEndStr = ''
    },
    // 重置高级搜索条件
    resetAdvancedParam() {
      this.resetAllAddTime()
      this.resetList()
    },
    // 高级搜索
    advancedSearch(){
      const toast = uni.$u.toast
      // 日期合法判定
      if (this.addTimeStartStr > this.addTimeEndStr){
        // 包含两种case：case1 开始时间 > 结束时间；case2 开始时间有值，结束时间为空
        this.$refs.uToast.show({message:'日期不合法',duration:1000})
        return
      }
      if (this.addTimeEndStr != '' && this.addTimeStartStr == ''){
        // 结束时间有值，开始时间为空
        this.$refs.uToast.show({message:'日期不合法',duration:1000})
        return
      }
      this.resetList()
      this.popupClose()
    }

  }
}
</script>

<style scoped>
.page {
  background-color: #f7f9ff;
  height: 100vh;
}
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #CED7E1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>
