<template>
  <div style="width:100%">
    <LHeader :text="text"></LHeader>
    <!-- 搜索 -->
    <div class="content-wrap">
      <!-- <div class="search-wrap">
        <van-search v-model="searchVal" placeholder="搜索" />
      </div> -->
      <div class="upStep" v-show="showPre">
        <van-cell-group>
          <div class="upStep-content">{{ deptName }}</div>
          <div class="upStep-btn"><span @click="goBack">返回上级</span></div>
        </van-cell-group>
      </div>
      <!-- 部门列表 -->
      <div class="dept-list-wrap">
        <van-cell-group>
          <van-radio-group v-model="result" @change="changeRadio">
            <van-cell
              style="display:flex"
              v-for="item in deptList"
              clickable
              :key="item.deptId"
            >
              <van-radio :name="item.deptId" @click="selectDept(item)">
                <span>{{ item.deptName }}</span>
              </van-radio>
              <template #right-icon>
                <van-icon
                  name="arrow"
                  class="arrow-icon"
                  @click="nextDept(item)"
                />
              </template>
            </van-cell>
          </van-radio-group>
        </van-cell-group>
      </div>
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      <van-cell-group>
        <div class="selected">
          <span class="selected-title">已选择 ({{ result ? 1 : 0 }}) :</span>
          <label>{{ resultName }}</label>
        </div>
        <!-- <div class="operate">
          <van-button
            size="small"
            ttype="info"
            plain
            native-type="button"
            style="border-radius: 5px; background-color: #f0f1f5;"
            @click.native="cancel"
            >取消
          </van-button>
          <van-button
            size="small"
            type="info"
            native-type="button"
            style="margin:0 10px 0 20px;border-radius: 5px;"
            @click.native="save"
            >保存
          </van-button>
        </div> -->
      </van-cell-group>
    </footer>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table";
import { getUserInfo } from "@/utils/userInfo";
import { debounce } from "@/utils/common.js";
import { Toast } from "vant";

export default {
  name: "select-people",
  components: {
    LHeader
  },
  created() {
    this.getInsideUser(getUserInfo().secondaryUnit);
  },
  data() {
    return {
      text: "选择组织",
      personName: "",
      deptId: 0, // 部门id
      storageList: [], // 存储上级部门
      deptName: "",
      showPre: false,
      result: "",
      resultName: "",
      dutyList: [],
      searchVal: "",
      deptList: [], // 部门
      allDeptList: [], // 部门
      isFirstSearch: true
    };
  },
  methods: {
    changeRadio() {
      this.resultName = this.allDeptList.find(
        item => item.deptId == this.result
      ).deptName;
    },
    // 查询内部人员
    getInsideUser(id, val) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      getFun("/risk/plan/dept/list").then(res => {
        this.allDeptList = res.data;
        this.deptList = this.allDeptList.filter(item => item.parentId == 0);
        console.log(res.data);
      });
    },
    // // 待搜索框内容发生变化
    // onInput: debounce(function() {
    //   if (this.isFirstSearch) {
    //     this.getInsideUser(getUserInfo().secondaryUnit, this.searchVal);
    //   } else {
    //     this.getInsideUser(this.deptId, this.searchVal);
    //   }
    // }, 500),
    nextDept(data) {
      var depts = this.allDeptList.filter(item => item.parentId == data.deptId);
      if (!depts || depts.length <= 0) {
        Toast({
          message: "组织下暂无数据",
          position: "top"
        });
        return;
      }
      this.deptList = depts;
      if (data.deptId != 0) this.showPre = true;
      else this.showPre = false;
      this.deptName = data.deptName;
      this.deptId = data.deptId;
      console.log(this.deptList);
      //   this.deptId = data.deptId;
      //   this.searchVal = "";
      //   this.deptName = data.deptName;
      //   this.isFirstSearch = false; // 如果点击过部门，则不必再用死deptId了
      //   this.storageList.push({ deptId: data.parentId, deptName: data.deptName });
      //   this.getInsideUser(this.deptId);
    },
    goBack() {
      var parentId = this.allDeptList.find(item => item.deptId == this.deptId)
        .parentId;
      console.log(parentId);
      if (parentId != 0) {
        this.showPre = true;
        var dept = this.allDeptList.find(item => item.deptId == parentId);
        this.nextDept(dept);
      } else {
        this.deptList = this.allDeptList.filter(item => item.parentId == 0);
        this.showPre = false;
      }
    },
    selectDept(data) {
      // 先把数组清空 然后再放
      this.dutyList = [];
      this.dutyList.push({ userId: data.userId, userName: data.userName });
    },
    save() {
      // 把数据存到 session 的内部人员数组中
      // 先取出session中的值
      let obj = JSON.parse(sessionStorage.getItem("personObj"));
      obj.user = this.dutyList;
      // 再次存到session中
      sessionStorage.setItem("personObj", JSON.stringify(obj));
      // 可以见一个公共的字段  存储以后需要的人的信息
      history.go(-1);
    },
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
// 搜索
.content-wrap {
  padding-bottom: 2.666667rem;
  background-color: #f0f1f5;
  width: 100%;
}

.search-wrap {
  margin: 0.26667rem;

  .van-search {
    border-radius: 5px;
    padding: 5px 12px;
  }

  .van-search__content {
    background-color: #ffffff;
  }
}

.upStep {
  .van-cell-group {
    display: flex;
    height: 1.2rem;
    align-items: center;

    .upStep-btn {
      width: 25%;
      text-align: center;

      span {
        width: 1.866667rem;
        background-color: #1989fa;
        text-align: center;
        display: inline-block;
        color: white;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.346667rem;
        border-radius: 0.08rem;
      }
    }

    .upStep-content {
      width: 75%;
      height: 0.8rem;
      line-height: 0.8rem;
      padding-left: 0.42667rem;
      box-sizing: border-box;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.dept-list-wrap {
  margin-top: 0.266667rem;
}

.people-wrap {
  margin-top: 0.266667rem;

  /deep/ .van-radio__label {
    display: flex;
    align-items: center;
  }

  .dept-name {
    margin-left: 10px;
    font-size: 12px;
    color: #a3a4a6;
    margin-top: 1px;
  }
}

.footer {
  width: 100%;
  height: 2.4rem;
  z-index: 9;
  position: fixed;
  bottom: 0px;
  box-shadow: 0px 8px 15px #000;

  .van-cell-group {
    height: 100%;

    .selected {
      height: 1.066667rem;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #cacbcb;

      .selected-title {
        color: #4187f7;
      }

      .selected-content {
        width: 80%;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }

    .operate {
      height: 1.333333rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
        width: 1.6rem;
      }
    }
  }
}
</style>
