<template>
  <div class="dept-user-list">
    <div class="content-wrapper">
      <!-- 左侧：人员池 -->
      <div class="left-panel">
        <div class="panel-header">可选人员</div>

        <div class="user-list">
          <div
            v-for="user in availableUsers"
            :key="user.id"
            class="user-row"
          >
            <span>
              {{ user.realname }} / {{ user.phone }}
              <span v-if="user.post_dictText">
                / {{ user.post_dictText }}
              </span>
            </span>

            <a-button
              type="primary"
              size="small"
              @click="addUser(user)"
            >
              添加
            </a-button>
          </div>
        </div>
      </div>

      <!-- 右侧：已选人员 -->
      <div class="right-panel">
        <div class="panel-header">已选人员</div>

        <a-table
          rowKey="executor"
          :dataSource="modelValue"
          :pagination="false"
          :columns="columns"
          :scroll="{ y: 360 }"
        >
          <template slot="torTypeSlot" slot-scope="text, record">
            <j-dict-select-tag
              type="list"
              style="width: 100px"
              v-model="record.torType"
              dictCode="tor_type"
              :getPopupContainer="getPopupContainer"
              @change="emitChange"
            />
          </template>

          <template slot="actionSlot" slot-scope="text, record">
            <a-button type="link" @click="removeUser(record.executor)">
              移除
            </a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeptUserList',

  props: {
    /** 左侧人员池 */
    data: {
      type: Array,
      required: true
    },

    /** 已选人员（由父组件维护） */
    modelValue: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'executorName', align: 'center' },
        { title: '电话', dataIndex: 'execPhone', align: 'center' },
        { title: '资质', dataIndex: 'postage_dictText', align: 'center' },
        {
          title: '人员类型',
          dataIndex: 'torType',
          align: 'center',
          scopedSlots: { customRender: 'torTypeSlot' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'actionSlot' }
        }
      ]
    }
  },

  computed: {
    availableUsers() {
      const usedIds = this.modelValue.map(i => i.executor)
      return this.data.filter(u => !usedIds.includes(u.id))
    }
  },

  methods: {
    getPopupContainer(triggerNode) {
      return document.body
    },
    addUser(user) {
      const list = [
        ...this.modelValue,
        {
          executor: user.id,
          executorName: user.realname,
          execPhone: user.phone,
          postage_dictText: user.post_dictText,
          torType: 1
        }
      ]
      this.$emit('update:modelValue', list)
    },

    removeUser(executor) {
      const list = this.modelValue.filter(i => i.executor !== executor)
      this.$emit('update:modelValue', list)
    },

    emitChange() {
      this.$emit('update:modelValue', [...this.modelValue])
    }
  }
}
</script>

<style scoped>
.content-wrapper {
  display: flex;
  gap: 16px;
}

.left-panel,
.right-panel {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.left-panel {
  flex: 1;
}

.right-panel {
  flex: 2;
}

.panel-header {
  padding: 10px 12px;
  font-weight: 500;
  border-bottom: 1px solid #e8e8e8;
}

.user-list {
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.user-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
</style>
