<script setup>
import { Search,Switch } from '@element-plus/icons-vue'
import { apiCustomerStatistic } from '@/api/customer'
import UserStatisticDetail from './components/UserStatisticDetail.vue'

const emits=defineEmits(['change'])

const filterState=reactive({
  keyword: '',
  seller: '',
  status: '',
  register: '',
  subscribe: '',
  regsiterTime: [],
  createTime: []
})

const tableColOpt = [
  {
    label: '姓名',
    key: 'RealName'
  },
  {
    label: '手机号',
    key: 'Phone'
  },
  {
    label: '邮箱',
    key: 'Email'
  },
  {
    label: '营业部/销售',
    key: 'SellerName'
  },
  {
    label: '用户状态',
    key: 'Status'
  },
  {
    label: '最近一次阅读时间',
    key: 'LastUpdateTime',
    sort: true
  },
  {
    label: '累计阅读次数',
    key: 'ReadCnt',
    sort: true
  }
]
const userList = ref([])
const page = ref(1)
const pageSize = ref(10)
const tableLoading = ref(false)
const totals = ref(0)
async function getUserList() {
  tableLoading.value = true
  const res = await apiCustomerStatistic.readRecordList({
    PageSize: pageSize.value,
    CurrentIndex: page.value,
    KeyWord: filterState.keyword,
    SellerId:filterState.seller?filterState.seller.join(','):'',
    Status: filterState.status,
    IsRegistered: filterState.register,
    IsSubscribed: filterState.subscribe,
    RegisterStartDate: filterState.regsiterTime ? filterState.regsiterTime[0] : '',
    RegisterEndDate: filterState.regsiterTime ? filterState.regsiterTime[1] : '',
    CreateStartDate: filterState.createTime ? filterState.createTime[0] : '',
    CreateEndDate: filterState.createTime ? filterState.createTime[1] : '',
    SortParam:filterState.sortType,
    SortType:filterState.sortVal
  })
  tableLoading.value = false
  if (res.Ret === 200) {
    userList.value = res.Data.List || []
    totals.value = res.Data.Paging.Totals
  }
}
getUserList()
function handlePageChange(e) {
  page.value = e
  getUserList()
}
function handleTableSort(e) {
  // console.log(e);
  const { order, prop } = e//order:"descending",prop: "RegisterTime"
  filterState.sortType=prop
  if(!order){
    filterState.sortVal=''
  }else{
    filterState.sortVal=order==='descending'?'desc':'asc'
  }
  handleFilterList()
}
function handleFilterList() {
  page.value = 1
  getUserList()
}


const showDetail=ref(false)
const activeUserId=ref(0)
function handleShowDetail(e){
  activeUserId.value=e.UserId
  showDetail.value=true
}

</script>

<template>
  <div class="user-report-statistic-page">
    <div class="flex filter-wrap">
      <el-button type="primary" :icon="Switch" link @click="emits('change','list')">统计图</el-button>
      <all-user-for-depart
        style="width: 165px"
        v-model="filterState.seller"
        :props="{
          emitPath: false,
          multiple: true,
        }"
        clearable
        filterable
        @change="handleFilterList"
      />
      <el-select
        placeholder="用户状态"
        v-model="filterState.status"
        style="width: 165px"
        @change="handleFilterList"
      >
        <el-option label="启用" :value="1"></el-option>
        <el-option label="禁用" :value="0"></el-option>
      </el-select>
      <el-select
        placeholder="注册状态"
        v-model="filterState.register"
        style="width: 165px"
        @change="handleFilterList"
      >
        <el-option label="是" value="是"></el-option>
        <el-option label="否" value="否"></el-option>
      </el-select>
      <el-select
        placeholder="是否关注公众号"
        v-model="filterState.register"
        style="width: 165px"
        @change="handleFilterList"
      >
        <el-option label="是" value="是"></el-option>
        <el-option label="否" value="否"></el-option>
      </el-select>
      <span style="width: 235px">
        <el-date-picker
          style="width: 235px"
          v-model="filterState.regsiterTime"
          type="daterange"
          range-separator="至"
          start-placeholder="注册时间"
          end-placeholder="注册时间"
          value-format="YYYY-MM-DD"
          @change="handleFilterList"
        />
      </span>
      <span style="width: 235px">
        <el-date-picker
          style="width: 235px"
          v-model="filterState.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="创建时间"
          end-placeholder="创建时间"
          value-format="YYYY-MM-DD"
          @change="handleFilterList"
        />
      </span>
      <el-input
        placeholder="姓名/手机号/邮箱"
        v-model="filterState.keyword"
        :prefix-icon="Search"
        clearable
        style="max-width: 359px;margin-left:auto"
        @input="handleFilterList"
      />
    </div>
    <div class="userlist-wrap" style="margin-top: 20px">
      <el-table
        :data="userList"
        border
        stripe
        highlight-current-row
        element-loading-text="数据加载中..."
        v-loading="tableLoading"
        @sort-change="handleTableSort"
      >
        <el-table-column
          v-for="column in tableColOpt"
          :key="column.key"
          :prop="column.key"
          :label="column.label"
          :sortable="column.sort ? 'custom' : false"
        >
          <template #default="{ row }">
            <span
              v-if="column.key === 'Status'"
              :style="{ color: !row.Status ? '#f00' : '' }"
              >{{ row.Status ? "启用" : "禁用" }}</span
            >
            <el-button v-else-if="column.key === 'ReadCnt'&&row.ReadCnt>0" link type="primary" @click="handleShowDetail(row)">{{row.ReadCnt}}</el-button>
            <span v-else>{{ row[column.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="page"
        :page-size="pageSize"
        :total="totals"
        @current-change="handlePageChange"
        style="margin-top: 30px;justify-content: flex-end;"
      />
    </div>
  </div>
  <UserStatisticDetail v-model:show="showDetail" :userId="activeUserId"/>
</template>

<style lang="scss" scoped>
.filter-wrap{
  gap: 10px;
  flex-wrap: wrap;
}
</style>