<!-- 选择人员组件
	@desc 多选 弹窗
 -->
<template>
  <view>
    <base-popup
      ref="basePopup"
      @handleConfirmClick="personConfirmClick"
      :title="'选择人员'"
    >
      <view>
        <u-collapse>
          <!-- 手风琴headImageUr1 -->
          <u-collapse-item
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.o_OrganName"
            class="department"
            :name="index"
          >
            <u-icon
              name="star-fill"
              size="20"
              slot="icon"
              :color="color"
              class="el-icon-star-on star"
              @click.native.stop="selectAll(item, index)"
              :class="{ active: item.active }"
            ></u-icon>
            <u-list :height="'auto'"  v-if="item.personList && item.personList.length > 0">
              <u-list-item
                v-for="(elItem, elIndex) in item.personList"
                :key="elIndex"
               
              >
                <u-cell
                  :title="elItem.p_PersonName + ' ' + elItem.p_Telphone"
                  @click="selectPerson(elItem)"
                >
                  <base-avatar
                    slot="icon"
                    shape="square"
                    size="35"
                    :text="
                      elItem.p_PersonName ? elItem.p_PersonName.slice(-2) : ''
                    "
                    bg-color="#3c9cff"
                    color="#ffffff"
                    font-size="10"
                    :src="elItem.headImageUrl"
                    customStyle="margin: -3px 5px -3px 0"
                  ></base-avatar>
                  <u-icon
                    name="checkbox-mark"
                    slot="right-icon"
                    size="20"
                    :color="color"
                    class="el-icon-star-on star"
                    :class="{ active: elItem.active }"
                  ></u-icon>
                </u-cell>
              </u-list-item>
            </u-list>
              <view v-else class="empty">暂无数据</view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </base-popup>
  </view>
</template>

<script>
import baseAvatar from "@/components/baseAvatar/index.vue";
import basePopup from "@/components/basePopup/index.vue";
import { PersonList, GetOrganTree } from "@/api/system/basePerson";
import config from "@/config";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    basePopup,
    baseAvatar,
  },
  watch: {
    selectedDataList: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        this.dataList.forEach((el) => {
          let personNum = 0;
          el.personList.forEach((personEl) => {
            if (personEl.active) {
              personNum = personNum + 1;
            }
          });
          if (personNum == 0) {
            el.active = false;
          } else {
            el.active = true;
          }
        });
      },
    },
    dataList: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        let selectedDataList = [];
        newV.forEach((el) => {
          el.personList.forEach((item) => {
            if (item.active) {
              selectedDataList.push(item);
            }
          });
        });
        this.selectedDataList = selectedDataList;
      },
    },
  },
  data() {
    return {
      dataList: [],
      selectedDataList: [],
      personLoading: false,
      color: "f0f0f0",
      configData: {},
    };
  },
  methods: {
    // 打开弹窗
    openDialog(selectedDataList = [], type) {
      this.configData = config;
      this.$refs.basePopup.isShowPopup = true;
      this.selectedDataList = [];
      this.getMenuData(selectedDataList);
    },
    // 人员确定
    personConfirmClick() {
      this.$emit("personConfirmClick", this.selectedDataList);
      this.$refs.basePopup.isShowPopup = false;
    },
    // 获得组织图
    async getMenuData(selectedDataList) {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 5000);
      let params = {
        CompanyID: getUserInfo().companyID,
      };

      let res = await GetOrganTree(params);
      let dataList = JSON.parse(res.data[0]);

      let departmentList = [];

      function setDepartmentList(data) {
        data.forEach((item) => {
          let arr = {
            o_OrganName: item.label,
            personList: [],
            active: false,
          };
          departmentList.push(arr);
          if (item.children && item.children.length > 0) {
            setDepartmentList(item.children);
          }
        });
      }
      setDepartmentList(dataList);
      this.getPersonList(departmentList, selectedDataList);
    },
    // 获得人员列表
    async getPersonList(departmentList, selectedDataList) {
      let params = {
        page: "1",
        limit: "999",
        departmentID: "",
      };
      let res = await PersonList(params);
      if (res.code === 1) {
        departmentList.forEach((el) => {
          res.data[1].forEach((item) => {
            if (el.o_OrganName == item.o_OrganName) {
              let personArr = {
                o_OrganName: item.o_OrganName,
                p_PersonName: item.p_PersonName,
                p_PersonID: item.p_PersonID,
                p_Telphone: item.p_Telphone,
                headImageUrl: item.headImageUrl ? this.configData.baseUrl + String(item.headImageUrl).split('/wwwroot')[1]:'',
                active: false,
              };
              el.personList.push(personArr);
            }
          });
        });
        this.dataList = departmentList;
        this.dataList.forEach((el) => {
          el.personList.forEach((elItem) => {
            selectedDataList.forEach((item) => {
              if (item.p_PersonID == elItem.p_PersonID) {
                elItem.active = true;
                this.selectedDataList.push(elItem);
              }
            });
          });
        });
        this.personLoading = false;
      }
    },
    selectPerson(val) {
      let personActive = false;
      val.active = !val.active;
    },
    // 全选
    selectAll(item) {
      item.active = !item.active;
      item.personList.forEach((el) => {
        el.active = item.active;
      });
    },
  },
};
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

::v-deep .u-collapse-item__content__text {
  padding: 0;
}
.empty {
  text-align: center;
  font-size: 14px;
  color: #919398;
  padding: 10px 0;
}

::v-deep .u-list-item.u-list-item- .u-cell .u-line {
  border-bottom: 0 solid rgb(214, 215, 217) !important;
}

.dataBox {
  padding: 10rpx 0;
  border-bottom: 2rpx solid #ccc;
  min-height: 100rpx;
  display: flex;
  align-items: center;
}

.personBox {
  border-radius: 6rpx;
  text-align: center;
  background-color: #f0f0f0;
  color: #817582;
  padding: 20rpx 0;
  cursor: pointer;
  min-width: 200rpx;

  .name {
  }

  .phone {
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}

.personBox {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.personBox.active {
  color: #fff;
  background-color: #3c9cff;
}

.department {
  .el-icon-star-on {
    color: #f0f0f0;
  }
}

.el-icon-star-on.active {
  color: #3c9cff;
}

.personItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>