<template>
  <div>
    <div class="top">
      <span>选择工作结束时间</span>
    </div>
    <van-picker ref="picker"
                :show-toolbar="false"
                :default-index="defaultIndex"
                @change="onChange"
                :loading="loading"
                :key="account_type_value"
                :columns="columns"
    />
    <div class="btns">
    <span
      @click="triggerComfirm"
      class="btn btn_com"
    >确定</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Picker, Toast } from 'vant'
import { defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted, onUpdated } from 'vue'
import { formatDate, getHours, getTomorrow } from '@/utils'
import { changeSetTimeHttp } from '@/apis/envmonitor'
import any = jasmine.any

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => ''
    },
    show: {
      type: Boolean,
      default: () => false
    },

    nextCusStartTime: {  // 第二天 服务定制开始时间
      type: Number,
      default: () => 0
    },
    cusStartTime: {  // 服务定制开始时间
      type: Number,
      default: () => 0
    },
    cusEndTime: {    // 服务定制结束时间
      type: Number,
      default: () => 0
    },
    spaceId: {
      type: String,
      default: () => ''
    },
    currentValue: {
      type: Array,
      default: () => [0, 0]
    },
    workInfo: {
      type: Object,
      default: () => {
      }
    }
  },
  components: {
    VanPicker: Picker
  },
  setup(props, contx) {
    const picker: any = ref(null)
    const columns = [
      { values: ['今天', '明天'] },
      { values: [] },
    ]
    const timeList: any = []
    const checkValues: any = []
    const proxyData = reactive({
      columns: columns,
      loading: false,
      defaultIndex: 0,
      account_type_value: '0+3',
      checkValues: checkValues,
      timeList: timeList,
      tempVal: '',
      onChange(values: any) {
        if (values[0] !== proxyData.tempVal) {
          proxyData.loading = true
          proxyData.tempVal = values[0]
        }
        if (values[0] === '今天') {
          // proxyData.columns[1].values = []
          proxyData.formatColumns(0)
        } else {
          // proxyData.columns[1].values = []
          proxyData.formatColumns(1)
        }
      },
      setDefaultTime(col: number = 0, textTime: any) {
        proxyData.defaultIndex = col
        let timeArr: any = proxyData.columns[1].values
        let optIndex: any = 0
        timeArr.map((item: any, index: any) => {
          if (textTime === item) {
            optIndex = index
          }
        })
        picker.value.setColumnValue(col, textTime)
        let x: any = col ? '明天' : '今天'
        let time: any = textTime ? textTime : timeArr[0]
        // proxyData.checkValues = [x, time]
        // picker.value.setColumnIndex(col, optIndex)
      },
      formatColumns(curDate: any) {
        let arrTime = []
        if (curDate === 0) {
          // 今天
          let nowTime = getHours() // 当前小时
          let todayStart = 0
          let todayEnd = 0
          if (props.cusStartTime && nowTime + 2 < props.cusStartTime) {
            todayStart = nowTime + 1
            todayEnd = props.cusStartTime
          } else if (props.cusStartTime && (nowTime + 2) >= props.cusStartTime) {
            if (nowTime > props.cusEndTime) {
              todayStart = nowTime + 1
              todayEnd = 24
            } else {
              // 逻辑有问题吧
              todayStart = props.cusEndTime + 1
              todayEnd = 24
            }
          } else if (!props.cusStartTime) {
            todayStart = nowTime + 1
            todayEnd = 24
          } else {
            return
          }
          for (let i = todayStart; i < todayEnd + 1; i++) {
            const item = {
              label: `${i}:00`,
              value: i
            }
            arrTime.push(item)
          }
        } else {
          // 明天
          // debugger
          for (let j = 1; j < props.nextCusStartTime; j++) {
            let num: any = j
            if (num < 10) {
              num = '0' + j
            }
            const item = {
              label: `${num}:00`,
              value: Number(num)
            }
            arrTime.push(item)
          }
        }
        proxyData.timeList = arrTime
        let values: any = []
        for (let i = 0; i < proxyData.timeList.length; i++) {
          values.push(proxyData.timeList[i].label)
        }
        proxyData.columns[1].values = values
        setTimeout(() => {
          proxyData.loading = false
        }, 1000)
      },
      // 确定
      triggerComfirm() {
        let values: any = picker.value.getValues()
        proxyData.checkValues = [values[0], values[1]]
        // console.log(proxyData.checkValues)
        //设置加班
        if (proxyData.checkValues[0] && proxyData.checkValues[1]) {
          // console.log(proxyData.checkValues)
          proxyData.setWorkOverTime()
        } else {
          Toast('请选择时间')
        }
      },
      // 设置加班时间
      setWorkOverTime() {
        // /**
        //  *  1.少了判断位置的逻辑
        //  */
        let endDate: string = formatDate()
        if (proxyData.checkValues[0] === '明天') {
          endDate = getTomorrow()
        }
        let endTime = proxyData.checkValues[1]
        endTime = endTime.replace(':', '')
        const params = {
          projectId: props.projectId, // 项目id
          'objectId': props.spaceId,         // 空间ID
          'endDate': endDate,      // 结束日期  "20210310",
          'endTime': endTime + '00',        // 结束时间 "090000"
          'type': 2                        // 0 预约加班，1 取消，2 我来了/确定, 3 我走了
        }
        // console.log('被点击了===')
        changeSetTimeHttp(params).then(res => {
          const resData: any = res
          if (resData.result == 'success') {
          }
          contx.emit('setWorkTime')
        }).catch(() => {
          contx.emit('setWorkTime')
        })
      },
      init() {
        let text: any = props.workInfo.text
        let textTime: any = props.workInfo.textTime
        // debugger
        if (text === '明天') {
          proxyData.formatColumns(1) //  默认初始化为今天
          proxyData.setDefaultTime(1, textTime)
        } else {
          proxyData.formatColumns(0) //  默认初始化为今天
          proxyData.setDefaultTime(0, textTime)
        }
      }
    })
    onMounted(() => {
      proxyData.init()
    })
    return {
      picker,
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: center;

  span {
    padding-top: 20px;
    padding-bottom: 40px;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #140050;

  }
}

.btns {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;

  .btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #c4c4c4;
  }

  .btn_com {
    background: #ffda1a;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.07);
    border-radius: 30px;
    color: #000000;
  }
}

</style>
