<template>
  <el-dialog :title="titleOptions[type]" v-model="visible" width="400px">
    <div v-if="type == 1">
      <el-form :model="form">
        <el-form-item label="分销组">
          <el-radio-group v-model="form.distributionLevelId">
            <el-radio v-for="item in levelConfigList" :key="item.id" :label="item.name" :value="item.id"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="type == 2">
      <div class="center">
        <el-icon color="red" size="24">
          <Warning />
        </el-icon>
        <span>是否确认取消分销员</span>
      </div>
    </div>
    <div v-else-if="type == 3">
      <div class="center">
        <el-icon color="red" size="24">
          <Warning />
        </el-icon>
        <span>是否确认重置分销组<br />重置后将会按照用户的实际数据匹配分销组</span>
      </div>
    </div>
    <div v-else-if="type == 9">
      <div class="center">
        <el-icon color="red" size="24">
          <Warning />
        </el-icon>
        <span>是否确认恢复分销员</span>
      </div>
    </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 } from 'vue'
import { distributionUser, distributionGet, distributionUserResetLevel } from '@/api/coupon'

const visible = ref(false)
const rowInfo = ref('')
const type = ref(1)
const titleOptions = ref({
  1: '更改分销组',
  2: '取消分销员',
  3: '重置分销组',
  9: '恢复分销员'
})

const confirmLoading = ref(false)
const form = ref({
  distributionLevelName: '',
  distributionLevelId: ''
})

// 提交修改
const emit = defineEmits(['success'])
async function submitHandle() {
  try {
    confirmLoading.value = true
    let data = {}
    data.id = rowInfo.value.id
    data.shopId = rowInfo.value.shopId
    if (type.value == 1) {
      data.isAssignLevel = 1
      data.distributionLevelId = form.value.distributionLevelId
      data.distributionLevelName = levelConfigList.value.find(item => item.id == form.value.distributionLevelId).name
      await distributionUser(data, 'put')
    } else if (type.value == 2) {
      data.status = 9
      await distributionUser(data, 'put')
    } else if (type.value == 3) {
      data.shopId = rowInfo.value.shopId
      await distributionUserResetLevel(data)
    } else if (type.value == 9) {
      data.status = 1
      await distributionUser(data, 'put')
    }
    ElNotification({
      title: '注意',
      message: '保存成功',
      type: 'success'
    })
    visible.value = false
    emit('success')
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    confirmLoading.value = false
  }, 500);
}

// 获取配置详情
const levelConfigList = ref([])
async function distributionGetAjax() {
  try {
    const res = await distributionGet()
    if (res.levelConfigList.length > 0) {
      levelConfigList.value = res.levelConfigList
      // form.value.distributionLevelId = levelConfigList.value[0].id
      // form.value.distributionLevelName = levelConfigList.value[0].distributionLevelName
    }
  } catch (error) {
    console.log(error);
  }
}

function show(t, row) {
  console.log('show.t', t);
  console.log('show.row', row);

  form.value.distributionLevelId = row.distributionLevelId

  rowInfo.value = { ...row }
  type.value = t
  visible.value = true
  distributionGetAjax()
}

defineExpose({
  show
})
</script>

<style scoped lang="scss">
.center {
  display: flex;
  align-items: center;
  gap: 14px;
}
</style>