<!-- 分销 商家充值 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <div class="row">
        <div class="center">
          <el-input v-model="searchValue" style="width: 300px;" placeholder="请输入内容" clearable @clear="getTableData">
            <template #prepend>名称</template>
          </el-input>
          <el-button type="primary" @click="searchHandle">搜索</el-button>
        </div>
      </div>
      <div class="row  mt14">
        <el-table :data="tableData.list" stripe border v-loading="tableData.loading">
          <el-table-column prop="name" label="店铺名称" width="300">
            <template #default="scope">
              <div class="shop_info">
                <el-avatar :src="scope.row.logo" shape="square" :size="50"></el-avatar>
                <div class="info">
                  <div class="name">
                    {{ scope.row.shopName }}
                  </div>
                  <div class="tag">
                    <el-tag effect="dark" type="success" disable-transitions
                      v-if="scope.row.profiles == 'release'">正式</el-tag>
                    <el-tag effect="dark" type="warning" disable-transitions
                      v-if="scope.row.profiles == 'trial'">试用版</el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="店铺类型">
            <template #default="scope">
              <div class="column">
                <div>{{shopTypeList.find(item => item.value == scope.row.shopType).label}}</div>
                <div v-if="scope.row.shopType == 'join' && scope.row.isHeadShop === 0">（主店：{{ scope.row.headShopName }}）
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="可用余额">
            <template #default="scope">
              {{ multiplyAndFormat(scope.row.amount || 0) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="addBlanceRef.show(scope.row, 1)">充值</el-button>
              <el-button link type="primary" @click="addBlanceRef.show(scope.row, 2)">扣减</el-button>
              <el-button link type="primary" @click="recordRef.show(scope.row)">查看记录</el-button>
            </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>
    </div>
    <addBlance ref="addBlanceRef" @success="getTableData" />
    <record ref="recordRef" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { shopInfoList } from '@/api/coupon'
import addBlance from '../components/addBlance.vue'
import record from '../components/record.vue'
import { multiplyAndFormat } from '@/utils'

const addBlanceRef = ref(null)
const recordRef = ref(null)

const searchValue = ref('')

function searchHandle() {
  tableData.page = 1
  getTableData()
}

const shopTypeList = ref([
  {
    value: 'only',
    label: '单店'
  },
  {
    value: 'chain',
    label: '连锁店'
  },
  {
    value: 'join',
    label: '加盟店'
  },
])

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

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

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

// 店铺列表
async function getTableData() {
  try {
    tableData.loading = true
    const res = await shopInfoList({
      page: tableData.page,
      size: tableData.size,
      shopName: searchValue.value
    })
    tableData.list = res.records
    tableData.total = +res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

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

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.shop_info {
  display: flex;
  align-items: center;

  .info {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    .name {
      font-size: 16px;
      color: #333;
    }
  }
}

.column {
  display: flex;
  flex-direction: column;
}
</style>