<template>
  <div class="app-container">
    <a-form :model="queryForm" ref="queryFormRef" layout="inline">

      <a-form-item field="user_name" label="用户名称">
        <a-input :style="{ width: '182px' }" v-model="queryForm.user_name" placeholder="请输入用户名称" @press-enter="handleQuery" />
      </a-form-item>
      <a-form-item field="coupon_name" label="优惠劵名称">
        <a-input :style="{ width: '182px' }" v-model="queryForm.coupon_name" placeholder="请输入优惠劵名称" @press-enter="handleQuery" />
      </a-form-item>
      <a-form-item field="user_coupon_status" label="使用状态">
        <a-select  v-model="queryForm.user_coupon_status" placeholder="使用状态" :style="{ width: '182px' }">
          <!-- 0:未使用 1:已使用 3:已过期 -->
          <a-option :value="0">未使用</a-option>
          <a-option :value="1">已使用</a-option>
          <a-option :value="2">已过期</a-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item field="create_range_time" label="创建时间范围">
        <a-range-picker
          style="width: 260px"
          v-model="queryForm.create_range_time"
        />
      </a-form-item> -->
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
          <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-divider />

    <!-- action -->
      <!--<div class="action">
      <a-space>

       <a-button v-has="'admin:sysPatientList:selectExport'" type="primary" @click="handlExport(2)"><icon-export /> 选择数据导出 </a-button>
        <a-button v-has="'admin:sysPatientList:searchExport'" type="primary"  @click="handlExport(1)"><icon-export /> 当前搜索全部导出</a-button> 
        <a-button v-has="'admin:sysPatientList:allExport'" type="primary"  @click="handlExport(3)"><icon-export /> 全部导出</a-button> 
      </a-space>
    </div>  -->

    <!-- table -->
    <a-table :columns="columns" :data="tableData" 
    :scroll="{ x: 1400 }"
      :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
      row-key="user_coupon_id" @selection-change="(selection) => {deleteData = selection;console.log(selection)}"
      @page-change="handlePageChange" @page-size-change="handlepage_sizeChange">
      <template #code="{record,rowIndex}">
        <div>{{(rowIndex+1)+(pager.page-1)*pager.page_size}}</div>
      </template>
      
      <template #coupon_use_date="{record}">
        <div v-if="parseTime(record.coupon_use_date)">{{parseTime(record.coupon_use_date)}}</div>
        <div v-else>-</div>
      </template>
      <template #valid_start_time="{record}">
        <div>{{parseTime(record.valid_start_time)+'——'+parseTime(record.valid_end_time)}}</div>
      </template>
      <template #coupon="{record}">
        <div>{{record.coupon.coupon_name}}</div>
      </template>
      
      <template #created_at="{record}">
        <div>{{parseTime(record.created_at)}}</div>
      </template>
      <template #user_coupon_status="{ record }">
        <!-- 0:未使用 1:已使用 3:已过期 -->
         <div v-if="record.user_coupon_status==0">未使用</div>
         <div v-else-if="record.user_coupon_status==1">已使用</div>
         <div v-else>已过期</div>
      </template>
    </a-table>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onMounted, nextTick, watch, computed } from 'vue';
  import { getUserCouponList} from '@/api/coupon/list';
  import { parseTime } from '@/utils/parseTime';
  const { proxy } = getCurrentInstance();
  const currentPage = ref(1);
 const tableData=ref([]);
 const loading=ref(false);
  // Pager
  const pager = {
    total: 0,
    page: 1,
    page_size: 10,
  };
  // form
  const queryForm = reactive({

  });
  

  // Table Columns
  const columns = ref([{
    title: '编号',
    dataIndex: 'code',
    slotName:'code',
    width:80
  },{
    title: '用户名称',
    dataIndex: 'user_name',
    width:180
  },
  {
    title: '优惠劵名称',
    dataIndex: 'coupon',
    slotName:'coupon',
    width:200
  },
  {
    title: '优惠劵状态',
    dataIndex: 'user_coupon_status',
    slotName:'user_coupon_status',
    width:100
  },
  {
    title: '使用时间',
    dataIndex: 'coupon_use_date',
    slotName:'coupon_use_date',
    width:180
  },
  {
    title: '有效期',
    dataIndex: 'valid_start_time',
    slotName:'valid_start_time',
    width:300
  },{
    title: '创建时间',
    dataIndex: 'created_at',
    slotName:'created_at', 
    width:180
  }])

  /**
   * 分页改变
   * @param {Number} [page]
   */
  const handlePageChange = (page) => {
    pager.page = page;

    // 修改当前页码
    currentPage.value = page;
    getInfo({ ...pager, ...queryForm });
  };

  // 每页数据量
  const handlepage_sizeChange = (page_size) => {
    pager.page_size = page_size;
    getInfo({ ...pager, ...queryForm });
  };

  // 获取患者信息
  const getInfo = async (params = {}) => {
    loading.value=true;
    const { data, code, message } = await getUserCouponList(params);
    if (code == 200) {
      tableData.value = data.data;
      Object.assign(pager, { total: data.total, page: data.page, page_size: data.page_size });
    }
     loading.value=false;
  };

  // 查询患者信息
  const handleQuery = async () => {
    pager.page = 1;
    const params = {
      page: pager.page,
      page_size: pager.page_size,
      ...queryForm,
    };

    getInfo(params);
  };

  // 重置搜索
  const handleResetQuery = () => {
    proxy.$refs.queryFormRef.resetFields();
    getInfo(queryForm);
  }

  onMounted(() => {
    getInfo(pager);
  });
</script>

<style lang="scss" scoped>
  .action {
    margin-bottom: 12px;
  }

  .okmodal div {
    text-align: center;
  }

  .hospital_name {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .headImg {
    margin-right: 20px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
  }

  .arco-form-item-layout-horizontal:first-child,
  .arco-form-item-layout-horizontal:nth-child(2) {
    align-items: center;
  }
  .cellbox{
    margin-top: 35px;
  }
  .cellbox .cell{
    width:50%;
    border-bottom:1px dashed #efefef;
    margin-bottom: 20px;
  }
  .cellbox .cell:first-child{
    border: none;
  }
  .cell{
    .arco-form-item{
      margin-bottom: 10px;
    }
  }
  .box {
    display: flex;
    align-items: center;
  }

  .cert .arco-form-item-label-col {
    flex: 0 0 8px !important;
  }

  .red {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    color: red;
    margin-top: 5px;
  }

  .cardNum {
    width: 148px;
  }
  .codbox{
    display: flex;
    align-items: center;
  }
  .reason{
    max-width:250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>