<template>
  <div>
    <div class="row">
      <el-form :model="queryForm" inline>
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="AddBannerRef.show()">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.isShareable" style="width: 150px;">
            <el-option label="全部" :value="''" />
            <el-option label="开启" :value="1" />
            <el-option label="关闭" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.isEnabled" style="width: 150px;">
            <el-option label="全部" :value="''" />
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.name" placeholder="请输入名称搜索" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" :loading="tableData.loading" @click="queryHandle">搜索</el-button>
          <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="row">
      <el-table :data="tableData.list" border stripe v-loading="tableData.loading">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="图片" prop="imageUrl">
          <template v-slot="scope">
            <el-image :src="scope.row.imageUrl" style="width: 50px;height: 50px;"></el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column label="分享" prop="isShareable">
          <template v-slot="scope">
            <span v-if="scope.row.isShareable == 1">开启</span>
            <span v-else>关闭</span>
          </template>
        </el-table-column> -->
        <el-table-column label="启用状态" prop="isEnabled">
          <template v-slot="scope">
            <el-tag v-if="scope.row.isEnabled == 1" type="primary" disable-transitions>已启用</el-tag>
            <el-tag v-if="scope.row.isEnabled == 0" type="info" disable-transitions>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序值" prop="sort"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-button link type="primary" @click="AddBannerRef.show(scope.row)">编辑</el-button>
            <el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddBanner @success="queryHandle" ref="AddBannerRef" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AddBanner from './add_banner.vue';
import { shareCarouselGet, shareCarouselDel } from '@/api/coupon/index.js';

const AddBannerRef = ref(null);

const queryForm = ref({
  name: '',
  isShareable: '', // 是否可分享 1=开启 0=关闭
  isEnabled: '', // 是否启用 1=启用 0=禁用
})

const tableData = ref({
  loading: false,
  list: []
})

// 搜索
function queryHandle() {
  getTableData();
}

// 重置
function resetHandle() {
  queryForm.value = {
    name: '',
    isShareable: '',
    isEnabled: '',
  };
  queryHandle();
}

// 轮播图配置
async function getTableData() {
  try {
    tableData.value.loading = true;
    const res = await shareCarouselGet(queryForm.value);
    tableData.value.list = res;
  } catch (error) {
    console.log(error);
  }
  tableData.value.loading = false;
}

// 删除轮播图配置
async function deleteHandle(row) {
  try {
    await shareCarouselDel(row.id);
    getTableData();
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  getTableData();
})
</script>

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