<template>
  <view class="wrap">
    <view class="content" style="padding-bottom: 30rpx">
      <view class="sub-title">
        <view class="title-item">我的代办</view>
        <view class="weather-item">
          <view class="weather-data">
            <view class="weather-temp">
              16°
            </view>
            <view class="weather-data-item">
              {{ date }}
            </view>
          </view>
          <view class="icon">
          </view>
        </view>
      </view>
      <view class="order-summery">
        <view class="order-summery-item">
          <view class="order-summery-item-title">
            设备告警
          </view>
          <view class="order-summery-item-content">
            8
          </view>
        </view>
        <view class="order-summery-item">
          <view class="order-summery-item-title">
            待处理工单
          </view>
          <view class="order-summery-item-content">
            10
          </view>
        </view>
      </view>
      <appctl/>
      <usrsubmit :tag="timestamp"/>
    </view>
  </view>
</template>

<script>
import {formatWeekday} from "@/util";
import dayjs from 'dayjs';
import Panel from "@/components/pannel/index.vue";
import list from '@/static/aiot/list.svg';
import Appctl from "@/pages/workbench/appctl.vue";
import Usrsubmit from "@/pages/workbench/usrsubmit.vue";

export default {
  components: {Usrsubmit, Appctl, Panel},
  data() {
    return {
      list,
      date: `${dayjs().format('MM月DD日')} ${formatWeekday(dayjs().format('d'))}`,
      timestamp: Date.now()
    }
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.tel) {
        style.color = "#fff";
        style.backgroundColor = this.$u.color['warning'];
      }
      return style;
    }
  },
  onPullDownRefresh() {
    this.timestamp = Date.now();
    console.log('onPullDownRefresh', Date.now());
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 2000);
  },
  methods: {
    submit() {
      if (this.$u.test.mobile(this.tel)) {
        this.$u.route({
          url: 'pages/template/login/code'
        })
      }
    }
  }
};
</script>

<style lang="scss">
.wrap {
  background: linear-gradient(to bottom, #0079fe 500rpx, transparent 500rpx);
  color: #fefefe;

  .content {
    width: 680rpx;
    margin: 0 auto 0;

    .sub-title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title-item {
        font-weight: 700;
        color: #ffffff;
        text-align: left;
        font-size: 36rpx;
        display: flex;
        align-items: center;

      }

      .weather-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        view {
          text-align: right;
        }

        .weather-temp {
          font-weight: 700;
          font-size: 30rpx;
        }

        .weather-data-item {
          font-size: 20rpx;
        }
      }
    }

    .order-summery {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 30rpx;
      width: 100%;
      height: 200rpx;
      font-size: 28rpx;

      .order-summery-item {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .order-summery-item-content {
          font-size: 40rpx;
          font-weight: 700;
          display: flex;
          align-content: center;
          justify-content: center;
          margin-top: 15rpx;
        }
      }
    }

    .panel-wrap {
      margin-top: 30rpx;
    }
  }
}
</style>
