<template>
  <view class="header">
    <hs-tabs
      :list="tabTypeList"
      :current="useModel?.currentTabs?.value"
      @onChange="method?.handleChangeTabs"
    />
    <view class="header_status">
      <scroll-view scroll-x="true">
        <view
          v-for="(i, index) in tablist"
          :key="`items_${index}`"
          class="item_btn"
          :style="useModel?.formData?.value?.status === i?.value?getBorderColorInfo():''"
          @click="method?.handleChangeStatus(i)"
        >
          {{ i?.label }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {getBorderColorInfo} from "@/common/libraries/getPageConfig"
import method from '../method'
import useModel from '../model'

const tabTypeList = [
  { label: '报修类', value: 'Repair' },
  { label: '报事类', value: 'Incident' },
  { label: '投诉类', value: 'Complaint' }
]

const tablist = [
  { label: '全部', value: '' },
  { label: '待处理', value: 'Pending' },
  { label: '处理中', value: 'Processing' },
  { label: '待支付', value: 'PendingPayment' },
  { label: '待验收', value: 'PendingAcceptance' },
  { label: '已完成', value: 'Completed' },
  { label: '已关闭', value: 'Closed' }
]
</script>
<style lang="scss" scoped>
.header {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0px 3px 7px rgba(206, 206, 206, 0.25);
  &_status {
    white-space: nowrap;
    padding: 20rpx 0 30rpx 0;
    .item_btn {
      display: inline-block;
      margin-left: 30rpx;
      padding: 8rpx 25rpx;
      font-size: 28rpx;
      border: 1px solid #ccc;
      border-radius: 100rpx;
      color: #999;
      &:last-child {
        margin-right: 30rpx;
      }
    }
    .active_btn {
      color: #2a7efb;
      border: 1px solid #2a7efb;
    }
  }
}
</style>
