<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:18:06
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-17 15:09:01
 * @FilePath: \JiangNingUmale-App\subcontract\work\attence\components\comanalysis.vue
-->
<template>
  <view class="page">
    <view class="view-segmented">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="button"
        activeColor="#007aff"
        bgColor="#FFFFFF"
        fontColor="#34373B"
        tabHeight="88rpx"
        tabFontsize="32rpx"
        tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.2)"
        tabBorderRadius="16rpx"
        class="segmented-controls"
      ></uni-segmented-control>
    </view>

    <view class="main-content">
      <view class="view-one" v-show="current === 0">
        <view class="view-calendar">
          <view class="date">
            <view class="icon-arrowleft"></view>
            <view class="text-date">2023年07月</view>
            <view class="icon-arrowright"></view>
          </view>
          <!-- 插入模式 -->
          <uni-calendar
            class="uni-calendar--hook"
            :selected="info.selected"
            :showMonth="false"
            @change="change"
            @monthSwitch="monthSwitch"
          />
          <view class="icon-arrow"></view>
        </view>
        <view class="view-rule">
          <view>打卡规则：A组班次 7:00 - 12:00 13:00 - 18:00</view>
          <view>
            <view class="icon-timeb"></view>
            <view>今日打卡2次，共计工时8小时</view>
          </view>
        </view>
        <view class="view-steps">
          <!-- <view class="btn-edit">修改考勤</view> -->
          <uni-steps
            :options="list2"
            active-color="#007AFF"
            :active="active"
            direction="column"
          />
        </view>
      </view>
      <view v-show="current === 1" class="view-two">
        <view>
          <view class="view-head">
            <view class="date">
              <view class="icon-arrowleft"></view>
              <view class="text-date">2023年07月</view>
              <view class="icon-arrowright"></view>
            </view>
            <view class="header">
              <view class="view-left">
                <view class="avatar"></view>
                <view class="name-gr">
                  <view class="name">李想</view>
                  <view class="title"
                    >本月签到
                    <text style="color: #fe7634; margin: 0 10rpx"> 2 </text>
                    次</view
                  >
                </view>
              </view>
            </view>
          </view>

          <view class="item-header">
            <view class="title">签到历史分布</view>
          </view>
          <view class="list">
            <view class="item">
              <view class="item-gr1">
                <view class="icon-calendar"></view>
                <view class="text1">7月30日</view>
              </view>
              <view class="item-gr">
                <view class="icon-time"></view>
                <view class="text2">15:09</view>
              </view>
              <view class="item-gr">
                <view class="icon-loc"></view>
                <view class="text3">江苏省南京市江宁区xxx街道600号</view>
              </view>
            </view>
            <view class="item">
              <view class="item-gr1">
                <view class="icon-calendar"></view>
                <view class="text1">7月30日</view>
              </view>
              <view class="item-gr">
                <view class="icon-time"></view>
                <view class="text2">15:09</view>
              </view>
              <view class="item-gr">
                <view class="icon-loc"></view>
                <view class="text3">江苏省南京市江宁区xxx街道600号</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: null,
      list2: [
        {
          title: "打卡时间：06:59:59",
          content: "江苏省南京市江宁区xxx街道600号",
          desc: "上班打卡   07:00:00",
        },
        {
          title: "打卡时间：06:59:59",
          content: "江苏省南京市江宁区xxx街道600号",
          desc: "上班打卡   07:00:00",
        },
        {
          title: "打卡时间：06:59:59",
          content: "江苏省南京市江宁区xxx街道600号",
          desc: "上班打卡   07:00:00",
        },
        {
          title: "打卡时间：06:59:59",
          content: "江苏省南京市江宁区xxx街道600号",
          desc: "上班打卡   07:00:00",
        },
      ],
      items: ["打卡统计", "签到统计"],
      current: 0,
      showCalendar: false,
      info: {
        lunar: true,
        range: true,
        insert: false,
        selected: [],
      },
    };
  },
  methods: {
    open() {
      this.$refs.calendar.open();
    },
    close() {
      console.log("弹窗关闭");
    },
    change(e) {
      console.log("change 返回:", e);
      // 模拟动态打卡
      if (this.info.selected.length > 5) return;
      this.info.selected.push({
        date: e.fulldate,
        info: "打卡",
      });
    },
    confirm(e) {
      console.log("confirm 返回:", e);
    },
    monthSwitch(e) {
      console.log("monthSwitchs 返回:", e);
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    goPath(item) {
      this.$tab.navigateTo(item.toPage);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f6f7f8;

  .view-segmented {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f7f8;
    position: fixed;
    top: calc(var(--status-bar-height) + 44px);
    z-index: 99;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    .segmented-controls {
      width: 688rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;

      /deep/.segmented-control--button {
        /deep/.segmented-control__item--button {
          /deep/.segmented-control__text {
            color: #34373b;
          }
        }
      }
    }
  }
  .main-content {
    position: relative;
    margin-top: calc(var(--status-bar-height) + 84px);
    padding-bottom: 250rpx;
    .view-one {
      background: #ffffff;
      box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
      border-radius: 16rpx;
      padding: 20rpx 0;
      margin: 0 20rpx;

      .view-calendar {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 25rpx;
        .date {
          width: 100%;
          background: #ffffff;
          position: absolute;
          top: 0;
          z-index: 1;
          display: flex;
          margin-bottom: 30rpx;
          padding: 37rpx 37rpx;

          .icon-arrowleft {
            width: 52rpx;
            height: 52rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-arrowleft.png");
            background-repeat: no-repeat;
          }
          .text-date {
            flex: 1;
            font-size: 40rpx;
            font-family: PingFang SC;
            color: #34373b;
            text-align: center;
          }
          .icon-arrowright {
            width: 52rpx;
            height: 52rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-arrowright.png");
            background-repeat: no-repeat;
          }
        }

        .icon-arrow {
          width: 20rpx;
          height: 20rpx;
          background-size: 100%;
          background-image: url("@/static/images/umale/icon-arrow.png");
          background-repeat: no-repeat;
        }
      }

      .view-rule {
        padding: 27rpx 33rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #616367;
        border-top: 1rpx solid #e2e2e2;
        border-bottom: 1rpx solid #e2e2e2;

        & > view {
          display: flex;
          align-items: center;
          margin: 8rpx 0;
          .icon-timeb {
            width: 24rpx;
            height: 24rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-timeb.png");
            background-repeat: no-repeat;
            margin-right: 13rpx;
          }
        }
      }

      .view-steps {
        position: relative;
        .btn-edit {
          position: absolute;
          right: 20rpx;
          top: 18rpx;
          padding: 10rpx 25rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #367bef;
          letter-spacing: 10rpx;
          border: 1px solid #367bef;
          border-radius: 30rpx;
        }
        /deep/.uni-steps__column-desc {
          font-size: 24rpx;
          font-family: PingFang SC;
          color: #616367;
        }

        /deep/.uni-steps__column-title {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #2e2f31 !important;
          margin: 17rpx 0;
        }
      }
    }

    .view-two {
      .view-head {
        background: #ffffff;
        box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
        border-radius: 16rpx;
        margin: 20rpx;
        padding: 37rpx 37rpx 0 37rpx;

        .date {
          display: flex;
          margin-bottom: 30rpx;

          .icon-arrowleft {
            width: 52rpx;
            height: 52rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-arrowleft.png");
            background-repeat: no-repeat;
          }
          .text-date {
            flex: 1;
            font-size: 40rpx;
            font-family: PingFang SC;
            color: #34373b;
            text-align: center;
          }
          .icon-arrowright {
            width: 52rpx;
            height: 52rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-arrowright.png");
            background-repeat: no-repeat;
          }
        }

        .header {
          display: flex;
          padding: 36rpx;
          justify-content: space-between;

          .view-left {
            display: flex;
            .avatar {
              width: 88rpx;
              height: 88rpx;
              background-size: 100%;
              background-image: url("@/static/images/umale/icon-head.png");
              background-repeat: no-repeat;
            }

            .name-gr {
              margin-left: 48rpx;
              .name {
                font-size: 40rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #2e2f31;
              }
              .title {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #9da2ab;
                letter-spacing: 5rpx;
              }
            }
          }

          .btn-appl {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 14rpx;
            .icon-appl {
              width: 44rpx;
              height: 44rpx;
              background-size: 100%;
              background-image: url("@/static/images/umale/icon-appl.png");
              background-repeat: no-repeat;
            }
          }
        }
      }

      .item-header {
        display: flex;
        margin: 15rpx 20rpx;
        .title {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #2e2f31;
          background-image: url("@/static/images/umale/icon_ind.png");
          background-size: 100% 50%;
          background-position: bottom;
          background-repeat: no-repeat;
        }

        .icon {
          font-size: 30rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #fe3434;
        }
      }
      .list {
        .item {
          background: #ffffff;
          box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
          border-radius: 16rpx;
          margin: 15rpx 20rpx;
          padding: 26rpx 16rpx;
          .item-gr1 {
            display: flex;
            padding-bottom: 24rpx;
            border-bottom: 1px solid #e2e2e2;
            align-items: center;
            .text1 {
              font-size: 32rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #2e2f31;
              letter-spacing: 6rpx;
              margin-left: 16rpx;
            }

            .icon-calendar {
              width: 44rpx;
              height: 44rpx;
              background-size: 100%;
              background-image: url("@/static/images/umale/icon-calendar.png");
              background-repeat: no-repeat;
            }
          }
          .item-gr {
            display: flex;
            margin-top: 20rpx;
            align-items: center;

            .text2 {
              font-size: 24rpx;
              font-family: PingFang SC;
              color: #616367;
              margin-left: 8rpx;
            }

            .text3 {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #616367;
              margin-left: 8rpx;
            }

            .icon-time {
              width: 24rpx;
              height: 24rpx;
              background-size: 100%;
              background-image: url("@/static/images/umale/icon-time.png");
              background-repeat: no-repeat;
            }
            .icon-loc {
              width: 24rpx;
              height: 24rpx;
              background-size: 100%;
              background-image: url("@/static/images/umale/icon-loc.png");
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }
}
</style>
