<!-- 商家申请记录 -->
<template>
  <el-dialog title="商家申请记录" width="1200" top="10vh" v-model="visible" @close="onClose">
    <div class="row">
      <el-form inline label-width="0">
        <el-form-item>
          <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期时间"
            end-placeholder="结束日期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            @change="timeChange" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.status" placeholder="状态" style="width: 200px;" @change="getTableData">
            <el-option label="全部" value=""></el-option>
            <el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="row mt14">
      <el-table :data="tableData.list" stripe border v-loading="tableData.loading" height="500px">
        <el-table-column label="申请商家" prop="shopName"></el-table-column>
        <el-table-column label="模版名称" prop="title"></el-table-column>
        <el-table-column label="模版内容" prop="content"></el-table-column>
        <el-table-column label="使用场景" prop="sceneDetail"></el-table-column>
        <el-table-column label="提交时间" prop="createTime"></el-table-column>
        <el-table-column label="审核状态" prop="status" width="100">
          <template #default="scope">
            {{statusList.find(item => item.value == scope.row.status).label}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="row mt14">
      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { smsTemplatePage } from '@/api/coupon/index.js'

const visible = ref(false)

// 0 待申请 1 审核中 2 成功 -1失败 -2 重新申请中
const statusList = reactive([
  {
    value: 0,
    label: '待申请'
  },
  {
    value: 1,
    label: '审核中'
  },
  {
    value: 2,
    label: '成功'
  },
  {
    value: -1,
    label: '1失败'
  },
  {
    value: -2,
    label: '重新申请中'
  }
])

const dateRange = ref([])
const queryForm = ref({
  startTime: '',
  endTime: '',
  status: ''
})

function onClose() {
  visible.value = false
}

function show() {
  visible.value = true
  getTableData()
}

// 选择时间
function timeChange(e) {
  if (e == null) {
    queryForm.value.startTime = ''
    queryForm.value.endTime = ''
  } else {
    queryForm.value.startTime = e[0]
    queryForm.value.endTime = e[1]
  }

  console.log(queryForm.value);


  tableData.page = 1
  getTableData()
}

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.size = e;
  getTableData();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  getTableData();
}

const tableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  list: []
})

// 获取数据
async function getTableData() {
  try {
    tableData.loading = true
    const res = await smsTemplatePage({
      page: tableData.page,
      size: tableData.size,
      ...queryForm.value
    })
    tableData.list = res.records
    tableData.total = +res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

defineExpose({
  show
})
</script>

<style scoped lang="scss">
.row {
  &.mt14 {
    margin-top: 14px;
  }
}
</style>