<template>
  <div>
    <el-button class="select-clerk-trigger" v-if="!Array.isArray(data) || data.length == 0" @click="showSelectClerk = true">
      <i class="iconfont-hb3 icontianjia trigger-icon"></i>
      添加成员
    </el-button>
    <template v-if="Array.isArray(data) && data.length > 0">
      <div v-if="multiple" class="multiple-preview">
        <dm-sub-title style="margin-left: 4px; width: calc(100% - 4px)" title-align="space-between">
          <div>{{ `已选成员（${data.length}）` }}</div>
          <div class="edit-btns">
            <el-button class="del-btn" type="text" @click="onDelAll">清除</el-button>
            <el-button class="update-clerk-trigger" type="text" @click="showSelectClerk = true">编辑</el-button>
          </div>
        </dm-sub-title>
        <div class="clerk-list">
          <selected-clerk-item v-for="el in data" :key="el.clerkId" :clerk-data="el" @del="onDel" class="clerk-item"></selected-clerk-item>
        </div>
      </div>
      <div v-else class="single-preview">
        <selected-clerk-item :clerk-data="data[0]" :show-del="false"></selected-clerk-item>
        <el-button type="text" class="update-clerk-trigger" @click="showSelectClerk = true">修改成员</el-button>
      </div>
    </template>
    <select-clerk :visible.sync="showSelectClerk" :multiple="multiple" :max="max" :data="data" @save="onChange"></select-clerk>
  </div>
</template>

<script>
import SelectClerk from './select-clerk.vue';
import SelectedClerkItem from './selected-clerk-item.vue';
export default {
  name: 'Index',
  components: { SelectClerk, SelectedClerkItem },
  props: {
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 多选时最多可以选几条数据，默认100条
    max: {
      type: Number,
      default: 100
    },
    // 选中的数据
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showSelectClerk: false
    };
  },
  methods: {
    onChange(data) {
      this.$emit('change', data);
    },
    onDel(clerkId) {
      const data = JSON.parse(JSON.stringify(this.data));
      this.onChange(data.filter(el => el.clerkId != clerkId));
    },
    onDelAll() {
      this.onChange([]);
    }
  }
};
</script>

<style lang="scss" scoped>
.select-clerk-trigger {
  color: #2f54eb;
  border-color: #2f54eb;
  .trigger-icon {
    font-size: 12px;
  }
}
.multiple-preview {
  padding: 10px 12px 12px;
  width: 720px;
  max-height: 500px;
  overflow-y: auto;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  .edit-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .del-btn {
      color: #f5222d;
    }
    .update-clerk-trigger {
      margin-left: 20px;
    }
  }
  .clerk-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6px;
    .clerk-item {
      margin: 4px;
    }
  }
}
.single-preview {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .update-clerk-trigger {
    margin-left: 16px;
  }
}
</style>
