<script setup lang="ts" name="SelTable">
import _ from 'lodash'
import { reactive, ref, onMounted, watch } from 'vue'

const emit = defineEmits(['check', 'input'])
const props = defineProps({
  poverWidth: {
    type: Number,
    default: 380
  },
  searchInput: {
    type: String,
    default: ''
  }
})
const searchVal = ref(props.searchInput)
watch(
  () => props.searchInput,
  (current) => {
    searchVal.value = current
  }
)
// 响应数据
const state: any = reactive({
  // searchVal: '',
  poverShow: false,
  currentPage: 1,
  pageSize: 10,
  total: 6,
  activeRowIndex: '',
  tableData: [
    {
      Country: 'China',
      City: 'Shenzhen',
      id: 1,
      Uncode: 'CNSZX'
    },
    {
      Country: 'China',
      City: 'Beijing',
      id: 2,
      Uncode: 'CNBJX'
    },
    {
      Country: 'JaPan',
      id: 3,
      City: 'Tokyo',
      Uncode: 'JPARI'
    },
    {
      Country: 'Germany',
      id: 4,
      City: 'Berlin',
      Uncode: 'DEBER'
    },
    {
      Country: 'France',
      City: 'Paris',
      id: 5,
      Uncode: 'FRCDG'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 6,
      Uncode: 'ITCIA'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 7,
      Uncode: 'ITCIA'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 8,
      Uncode: 'ITCIA'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 9,
      Uncode: 'ITCIA'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 10,
      Uncode: 'ITCIA'
    },
    {
      Country: 'Italy',
      City: 'Rome',
      id: 11,
      Uncode: 'ITCIA'
    }
  ],
  copyData: [],
  loading: false
})

// 模拟搜索 复制一份数据给copyData，数据来源于接口 直接删除此代码
onMounted(() => {
  state.copyData = state.tableData
  handleSearch()
})

// 点击行
const handleRowClick = (row: { id: number; City: string }) => {
  state.poverShow = false
  searchVal.value = row.City
  state.activeRowIndex = row.id
  // 将点击行传给父级
  emit('check', row)
}
// 搜索 模拟，正常请求接口
const handleSearch = _.debounce(() => {
  // 模拟请求，正常将搜索文字传给后端 请求接口 重新赋值
  state.loading = true
  emit('input', searchVal.value)
  setTimeout(() => {
    const filterList = state.copyData.filter((p: any) => {
      return (
        p.Country.indexOf(searchVal.value) > -1 ||
        p.City.indexOf(searchVal.value) > -1 ||
        p.Uncode.indexOf(searchVal.value) > -1
      )
    })
    state.tableData = filterList
    state.total = filterList.length
    state.loading = false
  }, 800)
}, 500)
// 分页 请求接口
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
<template>
  <div>
    <el-popover
      v-model:visible="state.poverShow"
      placement="bottom-start"
      :teleported="false"
      :width="props.poverWidth"
      trigger="click"
    >
      <template #reference>
        <el-input
          v-model="searchVal"
          placeholder="Please input country/city/uncode"
          @input="handleSearch"
          @click="handleSearch"
        >
          <template #suffix>
            <el-icon :class="state.poverShow ? 'reverse' : ''"><CaretBottom /></el-icon>
          </template>
        </el-input>
      </template>
      <el-table
        :data="state.tableData"
        border
        stripe
        v-loading="state.loading"
        @row-click="handleRowClick"
        header-row-class-name="cus-header"
      >
        <el-table-column width="120" property="Country" label="Country" />
        <el-table-column width="120" property="City" label="City" />
        <el-table-column min-width="120" property="Uncode" label="Uncode" />
      </el-table>
      <div class="pagination">
        <span>Total {{ state.total }}</span>
        <el-pagination
          v-model:currentPage="state.currentPage"
          v-model:page-size="state.pageSize"
          size="small"
          layout="prev, pager, next"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-popover>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-input) {
  input {
    cursor: pointer;
  }
  .el-input__suffix-inner {
    i {
      transition: all 0.3s;
    }
    .reverse {
      transform: rotate(-180deg);
    }
  }
  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #ffbc79 inset !important;
  }
}
:deep(.cus-header) th {
  background-color: var(--color-table-header-bg) !important;
}
:deep(.el-table__row) {
  td {
    cursor: pointer;
  }
}
:deep(.el-table__row:not(.current-row):hover) {
  td {
    background-color: #fff1e6 !important;
  }
}
:deep(.current-row) {
  td {
    background-color: #ffe3cd !important;
  }
}
.pagination {
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-between;
  padding: 0 12px 0 8px;
  > span {
    font-size: 13px;
  }
}
:deep(.el-popper) {
  border-radius: 12px !important;
}
:deep(.el-pagination) {
  .is-active {
    color: #b57b32 !important;
  }
}
</style>