<template>
  <div class="app-container">
    <div class="from-Card">
      <el-form
        ref="queryRef" size="small" :model="queryParams" :inline="true"
        label-position="top"
      >
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="联系人姓名" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入联系人姓名"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="会员信息" prop="code">
              <el-input
                v-model="queryParams.code"
                placeholder="请输入会员信息"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex">
            <el-form-item style="width: 100%" label="登记时间" prop="validityDateRange" label-width="">
              <el-date-picker
                v-model="validityDateRange[0]"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item style="width: 100%" label="登记时间" prop="validityDateRange" label-width="">
              <el-date-picker
                v-model="validityDateRange[1]"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
                style="width: 100%;"
                :default-time="defaultTime"
              />
            </el-form-item>


            <div class="po-r-btns">
              <el-button size="small" icon="search" type="primary" @click="handleQuery">搜索</el-button>
              <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button size="small" icon="download" type="warning" @click="handelExportData">导出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <el-table v-loading="loading" border :data="infoList">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="客户类型" align="center" prop="type" min-width="120" />
        <el-table-column label="关注车型" align="center" prop="focusCar" min-width="300" show-overflow-tooltip />
        <el-table-column label="联系人姓名" align="center" prop="name" min-width="120" />
        <el-table-column label="联系人电话" align="center" prop="telNo" min-width="120" />
        <el-table-column label="所在省市区" align="center" prop="areaStr" min-width="180" show-overflow-tooltip />
        <el-table-column label="会员信息" align="center" prop="code" min-width="170" />
        <el-table-column label="登记时间" align="center" min-width="120">
          <template #default="{row}">
            {{ parseTime(row.createTime,'{y}-{m}-{d}' ) }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="equityCar">
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { onMounted, ref, toRefs } from 'vue'
import { listApi } from '@/api/equity'
import { dateEnd } from '/@/utils/ruoyi'
const { proxy } = getCurrentInstance()
const infoList = ref([])
const loading = ref(true)
const total = ref(0)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    code: undefined
  }
})
const validityDateRange = ref([null, null])
const { queryParams } = toRefs(data)
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))

onMounted(() => {
  getList()
})

async function getList() {
  if (validityDateRange.value[0] && validityDateRange.value[1] == null) return proxy.$modal.msgError('请选择时间范围')
  if (validityDateRange.value[0] == null && validityDateRange.value[1]) return proxy.$modal.msgError('请选择时间范围')
  if (validityDateRange.value[1])validityDateRange.value[1] = dateEnd(validityDateRange.value[1])
  queryParams.value.createTimeRange = validityDateRange.value.length > 1 && validityDateRange.value[0] != null ? validityDateRange.value.toString() : null
  loading.value = true
  const res = await listApi(queryParams.value)
  infoList.value = res.rows
  total.value = res.total
  loading.value = false
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  validityDateRange.value = [null, null]
  handleQuery()
}

function handelExportData() {
  proxy.download('/activity/buyCar/export', {
    ...queryParams.value
  }, `购车优惠${new Date().getTime()}.xlsx`)
}

</script>