<script lang="ts" setup>
import { batchRemoveInventoryAPI, getInventoryListAPI, getOperatoringAllListAPI } from '@/api/warehouse'
import { useAppStore, useOperatorStore } from '@/store'
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const appStore = useAppStore()
const operatorStore = useOperatorStore()
const paging = ref<any>(null)
const list = ref<any>([])
const checkboxValue = ref<any>([])
const operatorAllList = ref<any>([])
const regionId_list = ref<any>([])

const modalRef = ref<any>(null)

// 返回
function handleBack() {
  uni.navigateBack()
}

// 刷新列表
function refreshList() {
  list.value = []
}

// 详情
function handleDetail(bikeCode: string) {
  uni.navigateTo({
    url: `/pages-sub/common/carDetail?bikeCode=${bikeCode}`,
  })
}

function handleUndercarriage(records: any) {
  const { bikeCode } = records
  // 如果不存在则添加
  if (!checkboxValue.value.includes(bikeCode)) {
    checkboxValue.value.push(bikeCode)
  }
  modalRef.value.open()
}

// 获取列表
async function queryList(pageNo: number, pageSize: number) {
  try {
    uni.showLoading({
      title: '加载中',
    })
    const { records } = await getInventoryListAPI({
      pageNum: pageNo,
      pageSize,
    })
    uni.hideLoading()
    paging.value.complete(records)
  }
  catch (e) {
    uni.hideLoading()
    paging.value.complete(false)
  }
}

// 车辆上架
function vehicleHoisting() {
  modalRef.value.open()
}

// 获取列表
async function getOperatoringAllList() {
  try {
    const res = await getOperatoringAllListAPI()
    if (res && res.length > 0) {
      regionId_list.value = res.map((item) => {
        return {
          text: item.regionName,
          value: item.regionId,
        }
      })
    }
  }
  catch (e) {
    console.error(new Error('获取运营区'))
  }
}

// 提交
async function submit() {
  uni.showLoading({
    title: '正在提交中。。。',
  })
  try {
    const res = await batchRemoveInventoryAPI({
      bikeCodes: checkboxValue.value,
    })
    uni.showToast({
      title: '已下架',
      icon: 'success',
    })
    modalRef.value.close()
    modalRef.value.closeLoading()
    checkboxValue.value = []
    setTimeout(() => {
      paging.value.reload()
    }, 500)
  }
  catch (e) {
    modalRef.value.closeLoading()
  }
  finally {
    uni.hideLoading()
  }
}

onMounted(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
  getOperatoringAllList()
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="Number('1')"
    :default-page-size="Number('10')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f3f3f3"
    @query="queryList"
    @refresher-touchend="refreshList"
  >
    <template #top>
      <view class="custom_navbar" :style="{ height: `${systemInfo.statusBarHeight + 44}px` }">
        <view class="back_bar">
          <uv-icon name="arrow-left" color="white" size="24" @click="handleBack" />
          <text class="text">运营车辆</text>
        </view>
      </view>
    </template>

    <view class="container">
      <uv-checkbox-group
        v-model="checkboxValue"
        size="20"
        shape="circle"
      >
        <view class="list-panel">
          <view
            v-for="(item) in list"
            :key="item.bikeInfoId"
            class="list-item"
          >
            <view class="header">
              <view class="left">
                <uv-checkbox :name="item.bikeCode" />
                <view class="title">
                  {{ item.bikeCode || '--' }}
                </view>
                <uv-tags
                  :text="appStore.translateDictValue(item.status, 'BIKE_STATUS')"
                  plain
                  size="mini"
                />
              </view>
              <view class="right" @click="handleDetail(item.bikeCode)">
                <text>查看详情</text>
                <uv-icon name="arrow-right" color="#999999" size="14" />
              </view>
            </view>
            <view class="row">
              <view class="icon">
                <uv-image :src="getImageFullPath('TONGYONG_YUNYINGSHANG_IMAGE')" mode="widthFix" width="100%" />
              </view>
              <view class="text">
                运营商：{{ operatorStore.translateOperatorId(item.operatorId, operatorAllList) }}
              </view>
            </view>
            <view class="row">
              <view class="icon">
                <uv-image :src="getImageFullPath('TONGYONG_YUNYINGSHANG_IMAGE')" mode="widthFix" width="100%" />
              </view>
              <view class="text">
                运营区域：{{ item.regionName || '--' }}
              </view>
            </view>
            <view class="row">
              <view class="icon">
                <uv-image :src="getImageFullPath('ORDER_ICON1_IMAGE')" mode="widthFix" width="30rpx" />
              </view>
              <view class="text">
                上架时间：{{ item.updatedAt || '--' }}
              </view>
            </view>
            <view class="footer">
              <uv-button
                type="primary"
                :custom-style="{
                  backgroundImage: `linear-gradient(226deg, #3C9CFE 0%, #067AF2 100%)`,
                  borderRadius: '26rpx',
                  height: '70rpx',
                  width: '180rpx',
                }"
                :custom-text-style="{
                  fontSize: '26rpx',
                  marginLeft: '8rpx',
                }"
                text="下架"
                @click="handleUndercarriage(item)"
              />
            </view>
          </view>
        </view>
      </uv-checkbox-group>

      <!-- 下架 -->
      <uv-modal ref="modalRef" title="车辆下架" confirm-text="下架" show-cancel-button :async-close="true" @confirm="submit">
        <view>
          <view class="tips">
            当前选择下架的车辆：
          </view>
          <view class="checkboxValue_bar">
            {{ checkboxValue.join("、") }}
          </view>
        </view>
      </uv-modal>
    </view>

    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          :disabled="checkboxValue.length <= 0"
          type="primary"
          text="车辆下架"
          :custom-style="{
            backgroundImage: `linear-gradient(226deg, #3C9CFE 0%, #067AF2 100%)`,
            borderRadius: '28rpx',
            height: '100rpx',
          }"
          :custom-text-style="{
            fontSize: '32rpx',
            marginLeft: '8rpx',
          }"
          @click="vehicleHoisting"
        />
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.container {
  .list-panel {
    padding: 10px 5px 0px 0px;
    width: 100%;

    .list-item {
      padding: 10px;
      margin: 10px;
      border-radius: 26rpx;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);

      .header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;

        .title {
          font-family: PingFangSC-Semibold;
          font-size: 30rpx;
          color: #333333;
          letter-spacing: 0;
          font-weight: 600;
          margin: 0 20rpx 0 0rpx;
        }

        .left {
          display: flex;
          align-items: center;
        }

        .right {
          display: flex;
          align-items: center;

          text {
            font-family: PingFangSC-Regular;
            font-size: 24rpx;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }

      .row {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .icon {
          width: 46rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        .text {
          margin-left: 16rpx;
          transform: translateY(4rpx);
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
        }
      }

      .footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.tips {
  width: 100%;
  font-size: 28rpx;
  text-align: center;
  margin: 10rpx 0;
}

.checkboxValue_bar {
  width: 100%;
  color: red;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  letter-spacing: 0;
  text-align: center;
  line-height: 39px;
  font-weight: 400;
}

.custom_navbar {
  width: 100%;
  position: relative;
  background-color: #0f74ff;

  .back_bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 25rpx;
    left: 30rpx;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: white;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}
</style>
