<template>
  <view class="container">
    <!-- 筛选及搜索区域 -->
    <view class="search-bar">
      <input v-model="searchParams.visitorName" class="search-input" placeholder="访客姓名"/>
      <input v-model="searchParams.visitedPerson" class="search-input" placeholder="被访人"/>
      <input v-model="searchParams.visitedUnit" class="search-input" placeholder="被访单位"/>
      <!-- <picker mode="selector" :range="statusOptions" @change="onStatusChange">
         <view class="picker-view">
           {{ searchParams.bookStatus || '预约状态' }}
         </view>
       </picker> -->
      <input v-model="searchParams.phoneSuffix" class="search-input" placeholder="手机号后四位"/>
      <button class="search-btn" @click="handleSearch">搜索</button>
      <button class="reset-btn" @click="handleReset">重置</button>
    </view>

    <!-- 表格区域 -->
    <view class="table-wrap">
      <view class="table-header">
        <view class="table-cell">序号</view>
        <view class="table-cell">访客姓名</view>
        <view class="table-cell">访客电话</view>
        <view class="table-cell">所属公司</view>
        <view class="table-cell">被访人</view>
        <view class="table-cell">联系电话</view>
        <view class="table-cell">被访单位</view>
        <view class="table-cell">拜访事由</view>
        <view class="table-cell">拜访时间</view>
        <!--  <view class="table-cell">是否预约车位</view>
          <view class="table-cell">预约状态</view> -->
        <view class="table-cell">提交时间</view>
        <!-- <view class="table-cell">操作</view> -->
      </view>
      <view v-for="(item, index) in filteredList" :key="index" class="table-row">
        <view class="table-cell">{{ index + 1 }}</view>
        <view class="table-cell">{{ item.visitorName }}</view>
        <view class="table-cell">{{ item.visitorPhone }}</view>
        <view class="table-cell">{{ item.visitorUnit }}</view>
        <view class="table-cell">{{ item.interviewedPerson }}</view>
        <view class="table-cell">{{ item.interviewedPhone }}</view>
        <view class="table-cell">{{ item.interviewedUnit || '无' }}</view>
        <view class="table-cell">{{ item.visitingReason }}</view>
        <view class="table-cell">{{ item.visitingBeginTime }}</view>
        <!--    <view class="table-cell">{{ item.bookingParkingSpace === 1 ? '是' : '否' }}</view>
            <view class="table-cell" :class="{'status-confirm': item.serveStatus === 1, 'status-wait': item.serveStatus === 0}">
              {{ item.serveStatus === 1 ? '已确认' : '待确认' }}
            </view> -->
        <view class="table-cell">{{ item.createTime }}</view>
        <!--  <view class="table-cell operation-cell">
            <button class="operation-btn" @click="handleDetail(item)">详情</button>
            <button class="operation-btn" @click="handleAudit(item)">确认</button>
          </view> -->
      </view>
    </view>
    <VisitorDetailModal
        :visible="showDetailModal"
        :visitorInfo="currentVisitor"
        :showActionButtons="currentVisitor.serveStatus === 0"
        @close="closeDetailModal"
        @audit="handleAudit"
    />
  </view>
</template>

<script>
import VisitorDetailModal from '@/components/VisitorDetailModal.vue';

export default {
  components: {
    VisitorDetailModal
  },
  data() {
    return {
      showDetailModal: false,
      currentVisitor: {},
      loading: false,
      tableData: [],
      searchParams: {
        visitorName: '',
        visitedPerson: '',
        visitedUnit: '',
        bookStatus: '',
        phoneSuffix: ''
      },
      statusOptions: ['已确认', '待确认']
    }
  },
  computed: {
    filteredList() {
      return this.tableData.filter(item => {
        if (this.searchParams.visitorName && !item.visitorName.includes(this.searchParams.visitorName)) return false;
        if (this.searchParams.visitedPerson && !item.interviewedPerson.includes(this.searchParams.visitedPerson)) return false;
        if (this.searchParams.visitedUnit && !item.interviewedUnit.includes(this.searchParams.visitedUnit)) return false;
        if (this.searchParams.bookStatus) {
          const statusMap = {'已确认': 1, '待确认': 0};
          return item.serveStatus === statusMap[this.searchParams.bookStatus];
        }
        if (this.searchParams.phoneSuffix) {
          const phone = item.visitorPhone || '';
          return phone.slice(-4) === this.searchParams.phoneSuffix;
        }
        return true;
      });
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('default');
    // #endif
    this.onload();
  },
  methods: {
    handleDetail(item) {
      console.log('点击详情，传递的数据：', item);
      this.currentVisitor = item;
      this.showDetailModal = true;
    },
    closeDetailModal() {
      this.showDetailModal = false;
    },
    handleAudit(item) {
      console.log("eee", item)
      this.loading = true;
      item.serveStatus = 1
      this.$u.api.spfk(item).then(res => {
        console.log(res)
      })
    },
    onReady() {
      // #ifdef APP-PLUS
      plus.screen.lockOrientation('landscape-primary');
      // #endif
    },
    onload() {
      this.$u.api.fklist().then(res => {
        this.tableData = res.rows;
      }).catch(err => {
        console.error('获取数据失败：', err);
        uni.showToast({title: '获取数据失败', icon: 'none'});
      });
    },
    onStatusChange(e) {
      const index = e.detail.value;
      this.searchParams.bookStatus = this.statusOptions[index];
    },
    handleSearch() {
      this.onload();
      console.log('当前筛选参数：', this.searchParams);
    },
    handleReset() {
      this.searchParams = {
        visitorName: '',
        visitedPerson: '',
        visitedUnit: '',
        bookStatus: '',
        phoneSuffix: ''
      };
      this.onload();
    },
    //  handleAudit(item) {
    //    console.log('审核操作，当前数据：', item);
    // handleAudit(item)
    //  }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.search-input {
  flex: 1;
  min-width: 120px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.picker-view {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 120px;
  text-align: center;
}

.search-btn,
.reset-btn {
  padding: 8px 15px;
  border-radius: 4px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 24px;
}

.search-btn {
  background-color: #007aff;
  border: none;
}

.reset-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
}

.table-wrap {
  overflow-x: auto;
}

.table-header,
.table-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
}

.table-header {
  background-color: #f8f8f8;
  font-weight: bold;
}

.table-cell {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell:last-child {
  border-right: none;
}

.operation-cell {
  display: flex;
  justify-content: space-around;
  flex: 2;
}

.operation-btn {
  margin: 0 5px;
  padding: 5px 10px;
  font-size: 12px;
}

.status-confirm {
  color: #52c41a;
}

.status-wait {
  color: #fa8c16;
}
</style>