<template>
  <view class="unqualified-container">
    <!-- 头部标题和加号 -->
    <template v-if="formData.checkedLevel !== 'PERSONNEL_LEVEL'">
      <view class="header">
        <text class="title">不合格人员</text>
        <!-- 人员选择组件，加号放在插槽中 -->
        <SelectPerson ref="selectPerson" :value="localPersonnelData" @input="handlePersonnelSelect" :disabled="disabled"
          @confirm="handlePersonnelConfirm">
          <uni-icons type="plus" size="24" :color="disabled ? '#999' : '#409EFF'" class="add-icon" />
        </SelectPerson>
      </view>

      <!-- 人员列表 -->
      <view class="personnel-list" v-if="localPersonnelData && localPersonnelData.length > 0">
        <list-user :data="localPersonnelData" :show-delete="showDelete" @delete="handlePersonnelDelete"
          :disabled="disabled" />
      </view>

      <view class="empty-tip" v-else>
        <text>暂无不合格人员</text>
      </view>
    </template>

    <!-- 问题描述输入框 -->
    <view class="problem-input">
      <uni-easyinput type="textarea" :placeholder="placeholder" v-model="problemDescription" @input="handleProblemInput"
        :maxlength="-1" :autoHeight="true" :disabled="disabled" />
    </view>
  </view>
</template>

<script>
import ListUser from '@/components/list-user/list-user.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import SelectPerson from './SelectPerson.vue'

export default {
  name: 'UnqualifiedPersonnel',
  components: {
    ListUser,
    uniIcons,
    uniEasyinput,
    SelectPerson
  },
  props: {
    formData: {
      type: Object,
      default: () => { }
    },
    roles: {
      type: Array,
      default: () => []
    },
    // 人员数据
    personnelData: {
      type: Array,
      default: () => []
    },
    // 是否显示删除按钮
    showDelete: {
      type: Boolean,
      default: true
    },
    // 问题描述
    value: {
      type: String,
      default: ''
    },
    // 输入框占位符
    placeholder: {
      type: String,
      default: '请输入问题描述'
    },
    // 父项目索引
    parentIndex: {
      type: Number,
      default: -1
    },
    // 子项目索引
    childIndex: {
      type: Number,
      default: -1
    },
    // 禁用状态
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      problemDescription: this.value,
      localPersonnelData: [...this.personnelData] // 创建本地副本
    }
  },
  watch: {
    value(newVal) {
      this.problemDescription = newVal
    },
    personnelData(newVal) {
      // 当父组件更新personnelData时，同步更新本地数据
      this.localPersonnelData = [...newVal]
    }
  },
  methods: {
    // 处理人员选择
    handlePersonnelSelect(selectedUsers) {
      this.localPersonnelData = [...selectedUsers]

      this.emitPersonnelChange()
    },

    // 回显 不合格人员
    handlePersonnelConfirm(selectedUsers) {
      this.localPersonnelData = [...selectedUsers]
      this.emitPersonnelChange()
    },



    // 处理人员删除
    handlePersonnelDelete({ item, index, newData }) {
      this.localPersonnelData.splice(index, 1)

      this.emitPersonnelChange()
    },

    // 处理问题描述输入
    handleProblemInput(value) {
      this.problemDescription = value

      this.emitPersonnelChange()
    },

    // 向外传递完整的对象
    emitPersonnelChange() {
      let personnelData = this.localPersonnelData.map(item => ({
        ...item,
        userName:item.nickName.replace(/\s+/g, ''),
        nickName:item.nickName.replace(/\s+/g, ''), // 去掉nickName中的所有空格
      }))
      const changeData = {
        parentIndex: this.parentIndex,
        childIndex: this.childIndex,
        personnelData: [...personnelData],
        problemDescription: this.problemDescription
      }
      this.$emit('personnel-change', changeData)
    }
  }
}
</script>

<style lang="scss" scoped>
.unqualified-container {
  background: #F5F5F5;
  border-radius: 12rpx;
  padding: 32rpx;
  margin: 24rpx 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    line-height: 44rpx;
  }

  .add-icon {
    padding: 8rpx;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
    cursor: pointer;
  }
}

.personnel-list {
  margin-bottom: 24rpx;
}

.empty-tip {
  text-align: center;
  padding: 48rpx 0;
  color: #999999;
  font-size: 28rpx;
}

.problem-input {
  ::v-deep .uni-easyinput__content {
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    min-height: 120rpx;
  }

  ::v-deep .uni-textarea-textarea {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333333;
  }

  ::v-deep .uni-easyinput__placeholder {
    color: #999999;
    font-size: 28rpx;
  }
}
</style>