<template>
  <view class="task-management">
    <view class="fixed-area">
      <view class="title">
        <text class="title-text">龙飞街加油站</text>
        <text class="title-text-time" @click="handleClickCalendar">
          <text>{{ currentDateTime }}</text>
          <wd-icon
            style="margin-left: 10rpx; transform: translateY(6rpx)"
            name="arrow-down"
            size="20px"
          />
        </text>
      </view>
      <view>
        <wd-tabs v-model="tab">
          <block v-for="item in tabs" :key="item">
            <wd-tab :title="`${item}`" :name="item" />
          </block>
        </wd-tabs>
      </view>
    </view>
    <scroll-view class="task-container" scroll-y>
      <view class="content-main">
        <view style="font-size: 36rpx; font-weight: 500; margin-bottom: 50rpx">
          油品：0#
        </view>
        <wd-form ref="form" :model="model">
          <view style="display: flex; flex-direction: column; gap: 90rpx">
            <view>
              <view
                style="font-size: 32rpx; font-weight: 500; margin-bottom: 30rpx"
              >
                液位仪数据
              </view>
              <wd-input
                v-model="model.value1"
                label="油高 h1(mm)"
                label-width="100%"
                prop="value1"
                clearable
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写发现问题' }]"
                custom-class="custom-vertical-input"
              />
              <wd-input
                v-model="model.value2"
                label="水高(mm)"
                label-width="100%"
                prop="value2"
                clearable
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写处理措施' }]"
                custom-class="custom-vertical-input"
              />
            </view>
            <view>
              <view
                style="font-size: 32rpx; font-weight: 500; margin-bottom: 30rpx"
              >
                手工量缸数据
              </view>
              <wd-input
                v-model="model.value1"
                label="油高 h1(mm)"
                label-width="100%"
                prop="value1"
                clearable
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写发现问题' }]"
                custom-class="custom-vertical-input"
              />
              <wd-input
                v-model="model.value2"
                label="水高(mm)"
                label-width="100%"
                prop="value2"
                clearable
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写处理措施' }]"
                custom-class="custom-vertical-input"
              />
              <wd-input
                v-model="model.value2"
                label="水高高度差(mm)(h1-h2)"
                label-width="100%"
                prop="value2"
                clearable
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写处理措施' }]"
                custom-class="custom-vertical-input"
              />
            </view>
            <view>
              <view
                style="font-size: 32rpx; font-weight: 500; margin-bottom: 30rpx"
              >
                异常记录
              </view>
              <wd-textarea
                v-model="model.value1"
                prop="value1"
                placeholder="请填写异常记录"
                :rules="[{ required: true, message: '请填写异常记录' }]"
                :auto-height="false"
                style="height: 160rpx"
                class="custom-textarea"
              />
            </view>
          </view>
        </wd-form>
      </view>
    </scroll-view>
    <!-- 确定按钮 -->
    <view class="confirm-btn">
      <button class="btn" @click="submitTasks">
        确 定
      </button>
    </view>
    <calendar
      v-model:date-picker-visible="datePickerVisible"
      :detailedtime="true"
      @confirm-date="onconfirmDate"
    />
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import calendar from '@/utils/calendar.vue'

const tab = ref('1缸')
const tabs = ['1缸', '2缸', '3缸', '4缸']
const { success: showSuccess } = useToast()
const form = ref()
const datePickerVisible = ref(false)
// 获取当前日期时间
const currentDateTime = ref('')
function formatDateTime() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')

  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}`
}
function handleClickCalendar() {
  datePickerVisible.value = true
}
function onconfirmDate(date: string) {
  currentDateTime.value = date
}
onMounted(() => {
  formatDateTime()
})

const model = reactive<{
  value1: string
  value2: string
}>({
  value1: '',
  value2: '',
})
function submitTasks() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '校验通过',
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped>
.task-management {
  display: flex;
  flex-direction: column;
  height: 1500rpx;
  overflow: hidden;
  .fixed-area {
    flex-shrink: 0; // 不让它被压缩
    background-color: #fff;
    position: sticky; // 若想随外层滚就 sticky；想完全固定用 fixed 即可
    top: 0;
    z-index: 10;
    margin-bottom: 30rpx;
  }
  .title {
    width: 100%;
    height: 128rpx;
    background-color: #4a80c3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 46rpx;
    padding-right: 46rpx;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
  }
  .title-text-time {
    font-size: 28rpx;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
  }
  .task-container {
    flex: 1; // 占剩余高度
    overflow-y: auto; // 仅这里滚动
    padding: 0 30rpx;
  }
  .content-main {
    width: 100%;
    .wd-input {
      margin-bottom: 30rpx;
      padding: 0px;
      &.custom-vertical-input {
        display: flex;
        flex-direction: column;
        gap: 10rpx;
        .wd-input__body {
          width: 100%;
          position: relative;
        }
        :deep(.wd-input__label-inner) {
          //   margin-bottom: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #4e5969;
        }
        /* 使用Vue 3深度选择器确保样式能正确应用到输入框 */
        :deep(.wd-input__inner) {
          width: 20rem !important;
          height: 70rpx !important;
          border: 1px solid #e5e5e5 !important;
          border-radius: 8rpx !important;
          padding: 0 60rpx 0 20rpx !important;
          font-size: 28rpx !important;
        }

        /* 确保图标容器在输入框内部 */
        :deep(.wd-input__suffix) {
          position: absolute;
          right: 20rpx;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }
      }
    }
    .custom-textarea {
      margin-bottom: 30rpx;
      /* 直接设置wd-textarea组件的样式 */
      padding: 0px !important;

      /* 设置内部文本框的样式 */
      :deep(.wd-textarea__inner) {
        width: 20rem !important;
        height: 160rpx !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 8rpx !important;
        padding: 20rpx !important;
        font-size: 28rpx !important;
        resize: none;
      }

      /* 尝试选择组件的容器元素 */
      :deep(.wd-textarea__wrapper) {
        padding: 0px !important;
      }

      /* 尝试选择组件的根元素 */
      :deep(.wd-textarea) {
        padding: 0px !important;
        margin: 0px !important;
      }
    }
  }

  // 确定按钮
  .confirm-btn {
    padding: 20rpx 30rpx;
    background-color: white;
    border-top: 1rpx solid #eee;

    .btn {
      width: 100%;
      height: 80rpx;
      background-color: #215acd;
      color: white;
      font-size: 32rpx;
      border-radius: 12rpx;
      font-weight: 400;
      border: none;
      outline: none;
    }
  }
}
</style>
