<template>
  <div>
    <!-- 按钮显示模式，type=1 -->
    <div v-if='item.showType==1'>
      <div>
        <el-button type="primary" round @click="isPersondialog=true" class="mr20 ">添加成员</el-button><span class="c999">不超过20人</span>
      </div>
      <div class="pt5" v-if="checkList.length > 0">
        <el-button v-for="(item,index) in checkList" :key="index" @click='removeItem(index)' class="delbut mr5" size='mini' icon="el-icon-delete" plain>{{item.name || item.userName}}</el-button>
        <span class="pl10 cursor" @click="removeAll">清空</span>
      </div>
    </div>
    <div v-else-if="disabled">{{names}}</div>
    <!-- input模式 默认模式 -->
    <el-input v-else v-model="names" v-bind="$attrs" v-on="$listeners" @focus="showPerson"></el-input>
    <mg-persondialog :check-list='checkList' :post='item.post' :department='item.department' :person='item.person' @on-submit="onSubmit" v-if='isPersondialog'></mg-persondialog>
  </div>

</template>

<script>
export default {
  name: "mgPerson",
  components: {},
  props: {
    item: {
      type: Object,
      required: true,
    },
    faNode: {
      type: Object,
      required: true,
    },
    nodeKey: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    // post: {
    //   type: Number,
    //   default: 0,
    // },
  },
  data() {
    return {
      isPersondialog: false,
      checked: false,
      deptStaffList: {}, //部门和人员列表
      keyword: "", //搜索关键字
      checkAll: false, //是否全选
      isIndeterminate: true, //表示 checkbox 的不确定状态，用于实现全选的效果
      checkList: [], //选择的数据
      options: {
        deptList: [],
        staffList: [],
      }, //转化后的部门和人员列表
      //面包屑
      breadList: [
        {
          name: "通讯录",
          id: 0,
        },
      ],
    };
  },
  watch: {
    faNode() {
      this.init();
    },
  },
  computed: {
    names() {
      let temp = [];
      if (this.checkList.length > 0) {
        this.checkList.forEach((item) => {
          temp.push(item.name);
        });
      }
      return temp.join(",");
    },
  },
  //生命周期，创建完成（可以访问当前this实例）
  created() {},
  //生命周期，挂载完成（可以访问dom元素）
  mounted() {
    this.init();
  },
  //方法集合
  methods: {
    init() {
      if (this.faNode[this.nodeKey]) {
        let jsonStr = JSON.parse(this.faNode[this.nodeKey]);
        this.checkList = jsonStr || [];
      } else {
        this.checkList = [];
      }
    },
    //显示人员弹窗
    showPerson() {
      this.isPersondialog = true;
    },
    //清除所有已选
    removeAll() {
      this.checkList = [];
    },
    //删除已选
    removeItem(index) {
      this.checkList.splice(index, 1);
    },
    onSubmit(data) {
      if (data) {
        this.checkList = data;
        this.$set(this.faNode, this.nodeKey, JSON.stringify(data));
      }
      this.isPersondialog = false;
    },
  },
};
</script>
<style scoped lang='less'>
@import "../../../static/base.less";
.delbut {
  padding: 5px;
}
</style>