<template>
  <div class="mobile-list-page">
    <!-- 操作按钮 -->
    <div class="mobile-list-page__actions">
      <el-button plain size="small" @click="handleQuery">
        <Icon icon="ep:refresh" class="mr-5px" /> 刷新
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="openForm('create')"
        v-hasPermi="['crm:customer-limit-config:create']"
      >
        <Icon icon="ep:plus" class="mr-5px" /> 新增
      </el-button>
    </div>

    <!-- 列表 -->
    <div class="mobile-item-list" v-loading="loading">
      <div
        v-for="item in list"
        :key="item.id"
        class="mobile-item-card"
      >
        <div class="mobile-item-card__header">
          <span class="mobile-item-card__name">规则 #{{ item.id }}</span>
          <el-tag type="primary" size="small">上限 {{ item.maxCount }}</el-tag>
        </div>
        <div class="mobile-item-card__body">
          <div class="mobile-item-card__info-row">
            <span class="mobile-item-card__info-label">适用人群</span>
            <span class="mobile-item-card__info-value">{{ item.users?.map((user: any) => user.nickname).join('，') || '-' }}</span>
          </div>
          <div class="mobile-item-card__info-row">
            <span class="mobile-item-card__info-label">适用部门</span>
            <span class="mobile-item-card__info-value">{{ item.depts?.map((dept: any) => dept.name).join('，') || '-' }}</span>
          </div>
          <div class="mobile-item-card__info-row" v-if="confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT">
            <span class="mobile-item-card__info-label">成交客户占用</span>
            <span class="mobile-item-card__info-value">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="item.dealCountEnabled" />
            </span>
          </div>
          <div class="mobile-item-card__info-row">
            <span class="mobile-item-card__info-label">创建时间</span>
            <span class="mobile-item-card__info-value">{{ dateFormatter(null, null, item.createTime) }}</span>
          </div>
        </div>
        <div class="mobile-item-card__footer">
          <el-button
            size="small"
            type="primary"
            @click="openForm('update', item.id)"
            v-hasPermi="['crm:customer-limit-config:update']"
          >编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(item.id)"
            v-hasPermi="['crm:customer-limit-config:delete']"
          >删除</el-button>
        </div>
      </div>
      <div v-if="list.length === 0 && !loading" class="mobile-empty-tip">暂无配置数据</div>
    </div>

    <!-- 分页 -->
    <div class="mobile-pagination" v-if="total > 0">
      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20]"
        layout="total, prev, pager, next"
        :pager-count="5"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <CustomerLimitConfigForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as CustomerLimitConfigApi from '@/api/crm/customer/limitConfig'
import CustomerLimitConfigForm from './CustomerLimitConfigForm.vue'
import { DICT_TYPE } from '@/utils/dict'
import { LimitConfType } from '@/api/crm/customer/limitConfig'

defineOptions({ name: 'CustomerLimitConfigList' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const { confType } = defineProps<{ confType: LimitConfType }>()

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  type: confType
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await CustomerLimitConfigApi.getCustomerLimitConfigPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, confType, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await CustomerLimitConfigApi.deleteCustomerLimitConfig(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.mobile-list-page {
  padding: 12px 0;
}
.mobile-list-page__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mobile-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-item-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  &__name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }
  &__body {
    font-size: 13px;
  }
  &__info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }
  &__info-label {
    color: #909399;
    flex-shrink: 0;
  }
  &__info-value {
    color: #606266;
    text-align: right;
    word-break: break-all;
  }
  &__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }
}
.mobile-empty-tip {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}
.mobile-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  :deep(.el-pagination) {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>
