<template>
  <div>
    <PopoverForm
      :title="title"
      :with-submit-btn="false"
      :width="360"
      @on-change="handleCloseTechniciansSelectPopup"
    >
      <div
        slot="form"
        class="team-setting__technicians-popover"
      >
        <div class="team-setting__technicians-select">
          <el-input
            v-model="techniciansSearchQuery"
            placeholder="请输入姓名"
            @input="handleInputTechniciansSearch"
          />
        </div>
        <div
          v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
          class="team-setting__empty-technicians-options"
        >
          {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
        </div>
        <ul
          v-else
          class="team-setting__technicians-options"
        >
          <li
            class="team-setting__technicians-option"
            v-for="item in technicianOptions"
            :key="item[$attrs.showConfig.id]"
          >
            <div class="team-setting__technicians-option-left">
              {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
            </div>
            <el-button
              v-if="item.is_selected"
              type="text"
              disabled
            >
              已添加
            </el-button>
            <el-button
              v-else
              type="text"
              @click="handleAddTechnician($attrs.keyId, item)"
            >
              添加
            </el-button>
          </li>
        </ul>
      </div>
      <el-button
        slot="reference"
        type="text"
        icon="el-icon-plus"
      >
        {{ title }}
      </el-button>
    </PopoverForm>
  </div>
</template>

<script>
import PopoverForm from '../PopoverForm'
export default {
  name: 'AddMembers',
  components: {
    PopoverForm
  },
  props: {
    /** 成员数据 */
    technicianOptions: Array,
    /** 获取数据加载中 */
    fetchTechniciansLoading: Boolean,
    /** 弹窗标题 */
    title: {
      type: String,
      default: '添加成员',
    },
  },
  data() {
    return {
      techniciansSearchQuery: '',
    }
  },
  watch: {
  },
  methods: {
    handleCloseTechniciansSelectPopup(show) {
      if (show) return;
      this.techniciansSearchQuery = '';
      this.$emit('update:technicianOptions', []);
    },
    handleInputTechniciansSearch(query) {
      this.$emit('fetchTechniciansMethods', query);
    },
    handleAddTechnician(id, item) {
      const query = { id, item };
      this.$emit('handleAddTechnician', query);
    },
  },
};
</script>

<style lang="less">
.team-setting {
  &__technicians-popover {
    padding: 20px;
    height: 350px;
    overflow-y: auto;
  }
  &__technicians-select {
    width: 320px;
  }
  &__empty-technicians-options {
    font-size: 12px;
    color: #80838e;
    text-align: center;
    margin-top: 10px;
  }
  &__technicians-options {
    display: flex;
    flex-direction: column;
  }
  &__technicians-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    &-left {
      width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #80838e;
    }
    &-right {
      color: #1890ff;
      &--selected {
        color: #80838e;
      }
    }
  }
}

</style>
