<template>
  <el-dialog v-model="visible" title="调整显示顺序" width="560px" @open="syncList">
    <div class="order-tip">移动端权益首页和列表页按照该顺序展示，点击【调整顺序】输入目标序号</div>
    <el-table v-if="list.length" :data="list" border size="small" max-height="360">
      <el-table-column label="序号" type="index" width="64" align="center" />
      <el-table-column label="权益名称" prop="equityName" min-width="160" show-overflow-tooltip />
      <el-table-column label="产品ID" prop="productId" min-width="140" />
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-popover
            placement="bottom"
            trigger="click"
            width="200"
            :teleported="false"
            :visible="sortVisibleIndex === scope.$index"
            @update:visible="val => onSortToggle(scope.$index, val)"
            @after-enter="focusSortInput"
          >
            <div>
              <div style="margin-bottom:8px;font-size:13px;color:#666">移动到序号：</div>
              <div style="display:flex;gap:8px">
                <el-input-number :ref="setSortInputRef" v-model="sortTarget" :min="1" :max="list.length" size="small" controls-position="right" style="width:110px" />
                <el-button size="small" type="primary" @click="moveItem(scope.$index, sortTarget - 1)">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-button size="small" type="primary" link>调整顺序</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-else description="暂无已上架且审核通过的权益" :image-size="80" />
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="!list.length" @click="onConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'EquityOrderDialog',
  props: {
    modelValue: { type: Boolean, default: false },
    items: { type: Array, default: () => [] }
  },
  emits: ['update:modelValue', 'confirm'],
  data() {
    return {
      list: [],
      sortTarget: null,
      sortVisibleIndex: -1
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      }
    }
  },
  methods: {
    syncList() {
      this.list = this.items.map(item => ({ ...item }))
      this.sortTarget = null
      this.sortVisibleIndex = -1
    },
    onSortToggle(index, visible) {
      this.sortVisibleIndex = visible ? index : -1
      if (visible) this.sortTarget = null
    },
    setSortInputRef(el) {
      this.sortInputRef = el
    },
    focusSortInput() {
      this.sortInputRef && this.sortInputRef.focus()
    },
    moveItem(from, to) {
      if (!Number.isInteger(to) || to < 0 || to >= this.list.length || from === to) return
      const item = this.list.splice(from, 1)[0]
      this.list.splice(to, 0, item)
      this.sortVisibleIndex = -1
    },
    onConfirm() {
      this.$emit('confirm', this.list.map(item => item.productId))
      this.visible = false
    }
  }
}
</script>

<style scoped>
.order-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

</style>
