<!-- 添加分销员 -->
<template>
  <el-dialog title="添加分销员" width="1000px" v-model="visible" @closed="resetHandle">
    <div class="row">
      <el-form inline :model="queryForm">
        <el-form-item>
          <el-select v-model="queryForm.isVip" style="width: 200px;">
            <el-option v-for="item in vipList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.key" placeholder="请输入昵称/手机号" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">搜索</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" stripe border v-loading="tableData.loading" height="400px" @select="tabSelect">
        <!-- <el-table-column type="selection"></el-table-column> -->
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="用户" prop="nickName" width="200">
          <template #default=scope>
            <div class="center">
              <el-avatar :src="scope.row.headImg" :size="40"></el-avatar>
              <span>{{ scope.row.nickName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex">
          <template #default="scope">
            <el-tag disable-transitions type="primary" v-if="scope.row.sex == 1">男</el-tag>
            <el-tag disable-transitions type="warning" v-if="scope.row.sex == 0">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="会员" prop="memberLevelName">
          <template #default="scope">
            <span v-if="scope.row.isVip == 1">
              <template v-if="scope.row.memberLevelName.length > 0"> {{ scope.row.memberLevelName }}</template>
              <template v-else>是</template>
            </span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="分销员" prop="distributionShops">
          <template #default="scope">
            <span v-if="isDistribtion(scope.row.distributionShops) == 1" style="color: red;">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone" width="150"></el-table-column>
        <el-table-column label="余额" prop="amount"></el-table-column>
        <el-table-column label="积分" prop="accountPoints"></el-table-column>
        <el-table-column label="消费累计" prop="consumeAmount" width="150"></el-table-column>
        <el-table-column label="消费次数累计" prop="consumeCount" width="150"></el-table-column>
        <el-table-column label="注册时间" prop="createTime" width="200"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" :disabled="isDistribtion(scope.row.distributionShops) == 1"
              @click="selectHandle(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, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle" :loading="confirmLoading">确 定</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getShopUserList, distributionUser } from '@/api/coupon'

const visible = ref(false)
const queryForm = reactive({
  isVip: '',
  key: ''
})

const vipList = ref([
  {
    label: '非会员',
    value: 0,
    type: 'info'
  },
  {
    label: '会员',
    value: 1,
    type: 'success'
  }
])

function resetHandle() {
  queryForm.isVip = ''
  queryForm.key = ''
  searchHandle()
}

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

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

const confirmLoading = ref(false)
function submitHandle() {

}

// 过滤条件
function isDistribtion(str) {
  let s = str.split('_')
  let shopId = s[0]
  return s[1] && shopId == localStorage.getItem('shopId') ? 1 : 0
}

const selectUser = ref([])
function tabSelect(e) {
  selectUser.value = e
}

const emit = defineEmits(['success'])
async function selectHandle(row) {
  try {
    await distributionUser({
      shopId: localStorage.getItem('shopId'),
      id: row.id,
      userId: row.userId,
      openingMethod: '手动添加'
    })
    visible.value = false
    emit('success')
    ElNotification({
      title: '注意',
      message: '添加成功',
      type: 'success'
    })
  } catch (error) {
    console.log(error);
  }
}

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

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

// 获取店铺用户列表
async function getShopUserListAjax() {
  try {
    tableData.loading = true
    const res = await getShopUserList({ ...queryForm, page: tableData.page, size: tableData.size })
    tableData.list = res.records
    tableData.total = res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

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

defineExpose({
  show
})
</script>

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

.center {
  display: flex;
  align-items: center;
  gap: 14px;
}
</style>