<template>

  <div class="flow-select-main">
    <!-- 下拉操作 -->
    <el-dropdown v-if="selectionData.length">
      <el-button type="primary">
        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleDelete(selectionData)">
            批量删除
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-table ref="tableRef" :onSelectionChange="handleSelectionChange" :data="tableData" :header-cell-style="{
      'background': '#f6f8fb!important',
      'color': '#495060'
    }" :cell-style="{ 'padding': '20px 0 !important', 'font-size': '12px' }">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="记录号" prop="flow_record_no" width="180" />
      <el-table-column label="访问者IP" prop="flow_visitor_ip" width="180" />
      <el-table-column label="所在地" prop="flow_location">
        <template #default="scope">
          <div> {{ scope.row.flow_location }}</div>
        </template>
      </el-table-column>
      <el-table-column label="访问日期" prop="flow_create_time" />
      <el-table-column label="来源" prop="flow_source" />

      <el-table-column label="操作" width="350" fixed="right">
        <template #default="scope">
          <el-space>
            <el-button size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </el-space>
        </template>
      </el-table-column>

    </el-table>
  </div>

  <pagination v-model:limit="queryParams.limit" v-model:page="queryParams.page" :total="total" @pagination="getList" />

</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus';
import { getFlowRecord, deleteFlowRecord } from "~/service/flow.js"
import { reactive, ref } from "vue";
let tableData = ref([
])
const ids = ref([])
const tableRef = ref();
const selectionData = ref([]);
let total = ref(0);
const queryParams = reactive({
  page: 1,
  limit: 20
})

function getList() {
  getFlowRecord(queryParams).then((res) => {
    if (res.code == 0) {
      console.log(res, 's')
      tableData.value = res.data
      total.value = res.count
    }
  })
}
getList()

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.flow_id).join()
  selectionData.value = selection
}

// 删除数据
const handleDelete = data => {
  const Ids = data.flow_id || ids.value

  ElMessageBox.confirm(`您确定要删除该留言吗？`).then(async () => {
    const res = await deleteFlowRecord({
      flow_id: Ids
    });
    if (res) {
      getList()
      tableRef.value.reload();
    }
  });
};

</script>
<style scoped>
.el-card__body {
  padding-top: 20px !important;
}
</style>