<template>
  <el-dialog
    title="人员调整"
    v-model="innerVisible"
    width="520px"
    :close-on-click-modal="false"
    @close="reset"
  >
    <el-form label-width="100px" label-position="right">
      <el-form-item label="客群编号" required>
        <el-select
          v-model="form.listId"
          placeholder="请选择"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in availableLists"
            :key="item.id"
            :label="`${item.id}-${item.name}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="客户号" required>
        <el-input
          v-model.trim="form.customerId"
          placeholder="请输入客户号（5 位数字）"
          maxlength="10"
        />
      </el-form-item>

      <el-form-item label="调整方向" required>
        <el-select v-model="form.direction" placeholder="请选择" style="width: 100%">
          <el-option label="调增 - A" value="A" />
          <el-option label="调减 - D" value="D" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import crowdNameListStore from '@/store/crowdNameListStore'

export default {
  name: 'AdjustMemberDialog',
  props: {
    modelValue: { type: Boolean, default: false },
    defaultListId: { type: String, default: '' }
  },
  emits: ['update:modelValue', 'saved'],
  data() {
    return {
      form: { listId: '', customerId: '', direction: '' }
    }
  },
  computed: {
    innerVisible: {
      get() { return this.modelValue },
      set(v) { this.$emit('update:modelValue', v) }
    },
    availableLists() {
      return crowdNameListStore.list.filter((l) => l.status !== 'stopped')
    }
  },
  watch: {
    modelValue(v) {
      if (v) {
        this.reset()
        if (this.defaultListId) this.form.listId = this.defaultListId
      }
    }
  },
  methods: {
    reset() {
      this.form = { listId: '', customerId: '', direction: '' }
    },
    handleSave() {
      if (!this.form.listId) {
        ElMessage.error('请选择客群编号')
        return
      }
      if (!this.form.customerId) {
        ElMessage.error('请输入客户号')
        return
      }
      if (!this.form.direction) {
        ElMessage.error('请选择调整方向')
        return
      }
      const r = crowdNameListStore.adjustOne({
        listId: this.form.listId,
        customerId: this.form.customerId,
        direction: this.form.direction
      })
      if (r.ok) {
        ElMessage.success(`调整提交成功（${r.action === 'add' ? '已新增' : '已移除'}），审核通过后生效（demo 默认通过）`)
        this.innerVisible = false
        this.$emit('saved')
      } else {
        ElMessage.error(r.reason)
      }
    },
    handleCancel() {
      this.innerVisible = false
    }
  }
}
</script>

<style scoped>
.dialog-footer { text-align: center; }
</style>
