<route lang="json5">
{
  style: {
    navigationBarTitleText: '工作台',
  },
}
</route>

<template>
  <view class="overflow-hidden">
    <view class="wraper">
      <wd-sidebar v-model="active" @change="handleChange">
        <wd-sidebar-item
          v-for="(item, index) in categories"
          :key="index"
          :value="index"
          :label="item.label"
          :disabled="item.disabled"
          :is-dot="item.num"
        />
      </wd-sidebar>
      <view class="content" :style="`transform: translateY(-${active * 100}%)`">
        <scroll-view
          v-for="(item, index) in categories"
          :key="index"
          class="category"
          scroll-y
          scroll-with-animation
          :show-scrollbar="false"
          :scroll-top="scrollTop"
          :throttle="false"
        >
          <wd-cell :title="item.title" value="待办事件" class="title-border"></wd-cell>
          <!-- 页面展示 -->
          <view v-show="item.title == activeTitle">
            <view v-if="activeTitle == item.label">
              <view class="card" v-for="(child, index) in item.children" :key="index">
                <!-- 诊断 -->
                <view v-if="activeTitle == '诊断'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mb-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        牛号:
                        <text>23874166</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        栏舍:
                        <text>1A-01</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="24">
                      <view>
                        备注:
                        <text>12</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>

                <!-- 治疗 -->
                <view v-if="activeTitle == '治疗'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mb-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        牛号:
                        <text>23874166</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        栏舍:
                        <text>1A-01</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="24">
                      <view>
                        发病时间:
                        <text>2024-05-01</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="24">
                      <view>
                        治疗结果:
                        <text>12</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>

                <!-- 免疫 -->
                <view v-if="activeTitle == '免疫'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mt-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        栏舍:
                        <text>1A-1111</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        牛头数:
                        <text>130头</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mt-1">
                    <wd-col :span="24">
                      <view>
                        免疫类型:
                        <text>CCCC AAAA</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mt-1">
                    <wd-col :span="24">
                      <view>
                        免疫日期:
                        <text>2024-08-23</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>

                <!-- 驱虫 -->
                <view v-if="activeTitle == '驱虫'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mt-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        栏舍:
                        <text>1A-1111</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        牛头数:
                        <text>130头</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mt-1">
                    <wd-col :span="24">
                      <view>
                        驱虫方式:
                        <text>CCCC AAAA</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mt-1">
                    <wd-col :span="24">
                      <view>
                        驱虫日期:
                        <text>2024-08-23</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>

                <!-- 进场 -->
                <view v-if="activeTitle == '进场'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mb-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        牛号:
                        <text>23874166</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        体重 :
                        <text>200KG</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="12">
                      <view>
                        电子耳标:
                        <text>10013131</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        类型:
                        <text>肉牛进场</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>

                <!-- 离场 -->
                <view v-if="activeTitle == '离场'">
                  <view class="card-not" :style="{ backgroundColor: getColor(item.title) }">
                    {{ item.title }}
                  </view>
                  <wd-row class="mb-1">
                    <wd-col :span="12">
                      <view class="cattle-num">
                        牛号:
                        <text>23874166</text>
                      </view>
                    </wd-col>
                    <wd-col :span="12">
                      <view>
                        体重 :
                        <text>200KG</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="24">
                      <view>
                        离场原因:
                        <text>10013131</text>
                      </view>
                    </wd-col>
                  </wd-row>
                  <wd-row class="mb-1">
                    <wd-col :span="24">
                      <view>
                        离场时间:
                        <text>20240809</text>
                      </view>
                    </wd-col>
                  </wd-row>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'

const active = ref<number>(0)
const scrollTop = ref<number>(0)
const activeTitle = ref<string>('诊断')

// 品种与颜色的映射
const breedColors = {
  诊断: '#B22222',
  治疗: '#228B22',
  免疫: '#FF4500',
  驱虫: '#B8860B',
  进场: '#9ACD32',
  离场: '#8B4513',
}

// 获取颜色的方法
const getColor = (breed) => {
  return breedColors[breed] || '#CCCCCC' // 如果品种没有匹配到颜色，使用默认颜色
}

// 工作台菜单数据
const categories = ref([
  {
    label: '诊断',
    title: '诊断',
    children: [
      { title: '标题文字', label: '这是描述这是描述' },
      { title: '标题文字', label: '这是描述这是描述' },
    ],
    disabled: false,
    num: 0,
  },
  {
    label: '治疗',
    title: '治疗',
    children: [
      { title: '标题文字', label: '这是描述这是描述' },
      { title: '标题文字', label: '这是描述这是描述' },
    ],
    disabled: false,
    num: 10,
  },
  {
    label: '免疫',
    title: '免疫',
    children: [{ title: '标题文字', label: '这是描述这是描述' }],
    disabled: false,
    num: 3,
  },
  {
    label: '驱虫',
    title: '驱虫',
    children: [{ title: '标题文字', label: '这是描述这是描述' }],
    disabled: false,
    num: 0,
  },
  {
    label: '进场',
    title: '进场',
    children: [{ title: '标题文字', label: '这是描述这是描述' }],
    disabled: false,
    num: 1,
  },
  {
    label: '离场',
    title: '离场',
    children: [{ title: '标题文字', label: '这是描述这是描述' }],
    disabled: false,
    num: 1,
  },
])

// 切换菜单
function handleChange({ value, label }) {
  activeTitle.value = label
  active.value = value
  scrollTop.value = -1
  nextTick(() => {
    scrollTop.value = 0
  })
}
</script>

<style lang="scss" scoped>
.cattle-num {
  font-size: 28rpx;
  font-weight: 500;
  color: #d4a017;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  text-align: left;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  //   height: 80rpx;
}
.card-not {
  position: absolute;
  top: 60rpx;
  right: -30rpx; /* 控制标签的水平位置 */
  padding: 5rpx 40rpx; /* 控制标签的宽度 */
  clip-path: polygon(20px 0, 0 100%, 100% 100%, calc(100% - 20px) 0); /* 创建等腰梯形 */
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #ff5733;
  transform: rotate(45deg); /* 旋转45度 */
  transform-origin: right top; /* 设置旋转点 */
}

.title-border {
  border-bottom: 1rpx solid #eee;
}
.wraper {
  display: flex;
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}
.content {
  flex: 1;
  background: #fff;
  transition: transform 0.4s ease;
}
.category {
  box-sizing: border-box;
  height: 100%;
}
</style>
