<script lang="ts" setup>
import { getRegionPageAPI } from '@/api/map'
import { deleteSiteAPI } from '@/api/operator'
import { useOperatorStore } from '@/store'
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'

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

const operatorStore = useOperatorStore()
const list = ref([])
const paging = ref(null)
const popoverRef = ref(null)
const operatorAllList = ref<any>([])
const query = ref({
  siteName: '',
})
const actions = ref([
  { text: '编辑' },
  { text: '删除' },
])

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

async function queryList(pageNum: number, pageSize: number) {
  uni.showLoading({
    title: '加载中...',
  })
  try {
    const { records } = await getRegionPageAPI({
      ...query.value,
      pageNum,
      pageSize,
    })
    paging.value.complete(records)
  }
  catch (e) {
    paging.value.complete(false)
  }
  finally {
    uni.hideLoading()
  }
}

function actionAction(item: any, action: any) {
  if (action.text === '编辑') {
    uni.navigateTo({
      url: `/pages-sub/map/siteManagement/editSite?data=${encodeURIComponent(JSON.stringify(item))}`,
    })
  }

  if (action.text === '删除') {
    uni.showModal({
      title: '提示',
      content: '确定要删除吗？',
      success: async (res) => {
        if (res.confirm) {
          await deleteSiteAPI({
            siteId: item.siteId,
          })
          paging.value.reload()
        }
      },
    })
  }
}

function goToAddSite() {
  uni.navigateTo({
    url: '/pages-sub/map/siteManagement/editSite',
  })
}

function handleSearch() {
  paging.value.reload()
}

onLoad(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
})

onShow(() => {
  paging.value?.reload()
})
</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="#f9f9f9"
    @query="queryList"
  >
    <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>
      <view class="search_bar">
        <uv-search
          v-model="query.siteName"
          :show-action="false"
          bg-color="white"
          placeholder="请输入站点名称"
          @search="handleSearch"
        />
      </view>
    </template>

    <view class="container">
      <view class="list-panel">
        <view
          v-for="(item) in list"
          :key="item.siteId"
          class="list-item"
        >
          <view class="header">
            <view class="left">
              <uv-icon
                name="tingchechang"
                custom-prefix="custom-icon"
                size="25"
                color="#0f73ff"
              />
              <view class="title">
                {{ item.siteName }}
              </view>
            </view>
            <view class="right">
              <zb-popover
                ref="popoverRef"
                placement="bottom-end"
                :options="actions"
                @select="(action) => actionAction(item, action)"
              >
                <uv-icon
                  name="more-circle"
                  size="22"
                />
              </zb-popover>
            </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('ORDER_ICON1_IMAGE')" mode="widthFix" width="30rpx" />
            </view>
            <view class="text">
              创建时间：{{ item.createAt }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          type="primary"
          text="新增站点"
          :custom-style="{
            backgroundImage: `linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%)`,
            borderRadius: '28rpx',
            height: '100rpx',
          }"
          :custom-text-style="{
            fontSize: '32rpx',
            marginLeft: '8rpx',
          }"
          @click="goToAddSite"
        />
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.custom_navbar {
  width: 100%;
  position: relative;
  background-color: #0f73ff;

  .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;
    }
  }
}

.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 25rpx 0 10rpx;
        }

        .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;
      }
    }
  }
}

.search_bar {
  width: calc(100% - 40rpx);
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0f73ff;
}
</style>
