<template>
  <view class="content">
    <!-- 头部两个卡片 -->
    <view class="card">
      <view class="card-item card-left">
        <view class="card-title">已绑定子区域数</view>
        <view class="card-totel">{{ form.bindnfc }}</view>
      </view>
      <view class="card-item card-right">
        <view class="card-title">未绑定子区域数</view>
        <view class="card-totel">{{ form.noBindnfc }}</view>
      </view>
    </view>
    <!-- tabs -->
    <u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent" @change="tabChangeFn"></u-tabs>
    <!-- 搜索 -->
    <view class="search-box">
      <u-input class="search-input" v-model="keyword" :clearable="false" border placeholder="搜索名称" @keyup.enter="searchFn"></u-input>
      <u-icon name="search" class="search-icon" size="40" @click="searchFn"></u-icon>
      <view class="select-box" @click="selectFn">
        <view>
          {{ selectVal }}
        </view>
        <image src="/static/svg/down.svg" style="width: 30rpx; height: 30rpx; margin-left: 10rpx"></image>
      </view>
    </view>

    <!-- tip -->
    <view v-if="sonList.length" class="tip-box">共{{ sonForm.countData }}个子区域，其中{{ sonForm.countData -
      sonForm.bindData }}个未绑定</view>
    <!-- 列表 -->
    <view class="list-box">
      <scroll-view :scroll-y="true" class="scroll-Y">
        <view v-for="item in sonList" class="item-box" @click="dialogShowFn(item)">
          <view class="item-title">{{ item.name }}</view>
          <view v-if="item.state === true" class="btn-have btn">已绑定</view>
          <view v-if="item.state === false" class="btn-none btn">去绑定</view>
        </view>
        <view v-if="!sonList.length" style="height:100rpx;"></view>
        <u-empty v-if="!sonList.length" text="数据为空" mode="list"></u-empty>
      </scroll-view>
    </view>
    
    <!-- 筛选的下拉 -->
    <u-action-sheet :list="options" title="请选择" @click="changeFn" v-model:value="selectShow"></u-action-sheet>
    <!-- 弹窗 -->
    <bind-dialog ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow" @changeBinding="onChangeBinding" @confirm="onConfirm" @closeRes="closeResFn"></bind-dialog>

    <u-tabbar :list="vuex_tabbar"></u-tabbar>
  </view>
</template>
<script>
import { GetRegionDataListApi, GetHomeDataApi, GetAreaListApi } from '@/api/apiAdmin.js'
import BindDialog from '@/pages/adminNfc/components/bindDialog.vue' // 确保路径正确
export default {
  components: {
    BindDialog
  },
  data() {
    return {
      form: {
        regionCount: 0,
        areaCount: 0,
        bindnfc: 0,
        noBindnfc: 0
      },
      keyword: '',
      selectShow: false,
      showDialog: false,
      selectVal: '筛选',
      options: [
        {
          text: '全部',
          value: 0
        },
        {
          text: '已绑定',
          value: 1
        },
        {
          text: '未绑定',
          value: 2
        }
      ],
      tabCurrent: 0,
      tabCurrentId: '',
      tabsList: [
        // {
        //   name: '区域1'
        // },
        // {
        //   name: '区域2'
        // },
      ],
      // 子区域列表
      sonList: [],
      sonForm: {
        bindData: 0,
        countData: 0
      },
      currentRow: {}
    }
  },
  mounted() {
    uni.hideLoading() // 关闭 Loading
  },
  onLoad() {
    this.getAreaFn()
  },
  onShow() {
    this.getDataFn()
  },
  methods: {
    dialogShowFn(row) {
      // console.log(this.vuex_userData.nfcwrite)
      // return
      // 给安卓传参
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android
      console.log(row.state, 'row.state--')
      // 添加的时候给安卓传参
      if (row.state === false) {
        try {
          if (isAndroid && AndroidJs) {
            console.log('%c%s', 'color:red', '安卓--调用方法')
            const reqRow = {
              name: 'area',
              data: {
                // state: row.state,
                state: true,
                areaId: row.id
              }
            }
            console.log(reqRow, 'reqRow--')
            AndroidJs.func(JSON.stringify(reqRow)) // 给安卓传参
          } else {
            console.log('%c%s', 'color:red', '苹果--调用方法')
            const reqRow = {
              name: 'back-iphone',
              data: ''
            }
            window.webkit.messageHandlers.func.postMessage(JSON.stringify(reqRow)) // 给ios 传参
          }
        } catch (e) {
          console.log(e, 'e-----判断安卓苹果类型出错')
        }
      }

      console.log(JSON.parse(JSON.stringify(row)), 'row--')
      this.currentRow = row
      this.$refs.dialogRef.isChange = row.state // 重置弹窗状态
      this.$refs.dialogRef.resData = ''
      this.$refs.dialogRef.showMsg = ''
      this.$refs.dialogRef.isAdd = !row.state
      this.$refs.dialogRef.step = 0 // 重置弹窗状态
      if (row.state === false) {
        this.$refs.dialogRef.step = 1 // 重置弹窗状态
      }
      this.showDialog = true
    },
    async getDataFn() {
      const res = await GetHomeDataApi()
      console.log(res, '首页数据')
      Object.assign(this.form, res.data)
    },
    // 获取区域列表
    async getAreaFn() {
      const res = await GetRegionDataListApi()
      console.log(res, '区域数据')
      this.tabsList = res.data
      if (this.tabsList.length > 0) {
        this.tabCurrentId = this.tabsList[0].id
        this.getSonAreaFn()
      }
    },
    // 绑定成功
    closeResFn() {
      this.showDialog = false
      uni.showToast({ title: '绑定成功', icon: 'none' })
      setTimeout(() => {
        this.getSonAreaFn()
      }, 500)
    },
    // 获取子区域列表
    async getSonAreaFn() {
      const req = {
        regionId: this.tabCurrentId
      }
      if (this.keyword) {
        req.keyword = this.keyword
      }
      const findRow = this.options.find(x => x.text === this.selectVal)
      if (findRow) {
        req.type = findRow.value
      }
      const res = await GetAreaListApi(req)
      console.log(res, '子区域数据')
      this.sonList = res.data.data
      this.sonForm.bindData = res.data.bindData
      this.sonForm.countData = res.data.countData
    },
    async searchFn() {
      this.getSonAreaFn()
    },
    selectFn() {
      this.selectShow = true
    },
    changeFn(val) {
      console.log(val, 'val--')
      this.selectVal = this.options[val].text
      this.getSonAreaFn()
    },
    //
    tabChangeFn(val) {
      // 清空已选的值
      this.keyword = ''
      this.selectVal = '筛选'
      console.log(val, 'val--')
      console.log(this.tabsList[val], 'tabsList--current')
      this.tabCurrent = val
      this.tabCurrentId = this.tabsList[val].id
      this.getSonAreaFn()
    },
    onChangeBinding() {
      console.log('点击了更换绑定')
      // 处理更换绑定的逻辑
    },
    onConfirm() {
      console.log('点击了知道了')
      // 处理确认逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  min-height: calc(100vh - 180rpx); // 确保容器有明确高度
  // overflow: hidden;
  background-color: #f6f8fc;
  padding-bottom: 100rpx;

  .card {
    display: flex;
    // margin-top: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;

    .card-item {
      position: relative;
      flex: 1;
      height: 150rpx;
      border-radius: 30rpx;
      color: white;
      padding: 20rpx;
      font-size: 30rpx;

      .card-title {
        font-size: 30rpx;
      }

      .card-totel {
        padding-left: 20rpx;
        font-size: 40rpx;
      }
    }

    .card-left {
      background: url('/static/adminImg/icon-bg1.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
      background-color: #4974f3;
    }

    .card-right {
      margin-left: 20rpx;
      background: url('/static/adminImg/icon-bg2.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
      background-color: #53d5a9;
    }
  }

  .search-box {
    position: relative;
    display: flex;
    align-items: center;
    // border: 1px solid red;
    // margin-top: 20rpx;
    padding: 20rpx;

    .search-icon {
      position: absolute;
      right: 210rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .search-input {
      background-color: white;
      border-radius: 50rpx;
    }

    .select-box {
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid red;
      margin-left: 20rpx;
      background-color: white;
      width: 150rpx;
      border-radius: 20rpx;
      text-align: center;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      // color: #4974f3;
    }
  }

  .tip-box {
    color: grey;
    padding-left: 30rpx;
  }

  .list-box {
    padding-left: 30rpx;
    padding-right: 30rpx;

    .item-box {
      background-color: white;
      margin-top: 20rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      height: 100rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-title {
        font-size: 30rpx;
        color: #333;
        // font-weight: bold;
      }

      .btn {
        padding-left: 20rpx;
        padding-right: 20rpx;
        border-radius: 20rpx;
        padding-top: 5rpx;
        padding-bottom: 5rpx;
      }

      .btn-have {
        background-color: #f5f5f5;
        color: black;
      }

      .btn-none {
        background-color: #4274dc;
        color: white;
      }
    }
  }
}
</style>
