<template>
  <div class="walkObject">
    <u-navbar title="选择走访慰问对象" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :border-bottom="false" :background="backgroundNavbar"> </u-navbar>

    <div class="header-top">
      <u-search v-model="keyword" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#CCCCCC" placeholder-color="#999999" @search="handerSearch" @clear="handerClear"></u-search>
    </div>

    <div class="header-middle">
      <div class="hint">可选范围</div>

      <div class="empty-div"></div>

      <div class="Checkbox">
        <div v-if="DiyList.length > 0">
          <u-collapse event-type="close" arrowaccordion>
            <u-collapse-item v-for="(item, index) in DiyList" :title="item.menuLevel2Name" :key="index" @change="selectUser(item)">
              <u-checkbox-group @change="checkboxGroupChange">
                <u-checkbox @change="checkboxChange" v-model="e.checked" v-for="(e, index) in userList" :key="index" :name="e.create_user_name" shape="circle">{{ e.name00 }}</u-checkbox>
              </u-checkbox-group>
            </u-collapse-item>
          </u-collapse>
        </div>

        <AiEmpty description="没有数据" class="emptyWrap" v-else> </AiEmpty>
      </div>
    </div>

    <div class="fixedBtn">
      <div class="typeName">
        <span class="typeName-box" v-for="(item, index) in list" :key="index" v-if="item.checked == true">
          {{ item.name }}
        </span>
      </div>

      <div class="subBtn" @click="submit">确定选择</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'walkObject',
  components: {},
  props: {},
  data() {
    return {
      DiyList: {},
      userList: {},
      backgroundNavbar: {
        backgroundColor: '#3975C6',
      },
      keyword: '',
      list: [
        {
          name: '残疾人',
        },
        {
          name: '精神病患者',
        },
        {
          name: '吸毒人员',
        },
      ],
      nameList: [],
      current: 1,
    }
  },
  computed: {},
  created() {
    this.getDiyList()
  },
  mounted() {},
  methods: {
    getDiyList() {
      this.$http.post('/app/appapplicationinfo/queryApplicationListByType?type=0').then((res) => {
        if (res.code == 0) {
          this.DiyList = res.data
        }
      })
    },

    selectUser(item) {
      console.log(item)
      this.$http.post(`/app/appapplicationinfo/list?appId=${item.id}&current=${this.current}&size=${99}`, { searchParam: this.keyword }).then((res) => {
        if (res.code == 0) {
          this.userList = res.data.records
        }
      })
    },

    checkboxGroupChange(a) {
      console.log(a)
    },

    checkboxChange(e) {
      console.log(e)
    },

    submit() {
      this.userList.map((item) => {
        if (item.checked == true) {
          console.log(11, 'back', 'item')
          this.$emit('back', item)
        }
      })
    },
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
.walkObject {
  background: #ffffff;
  padding-bottom: 118px;
  .header-top {
    background: #fff;
    padding: 20px 32px;
  }

  .header-middle {
    .hint {
      padding: 0 20px 0 32px;
      height: 112px;
      line-height: 112px;
      box-shadow: 0px 1px 0px 0px #e4e5e6;
      font-size: 30px;
      font-weight: 500;
    }
    .empty-div {
      height: 16px;
      background: #f5f5f5;
    }
    .Checkbox {
      padding: 0 20px 0 30px;
      ::v-deep .u-checkbox-group {
        .u-checkbox {
          // position: relative;
          height: 112px;
        }
      }
      ::v-deep .u-collapse {
        .u-collapse-item {
          .u-collapse-body {
            display: inline;
            .u-checkbox-group {
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    }
  }

  .fixedBtn {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px;
    .subBtn {
      margin: 20px 0 18px 0;
      padding: 18px 32px;
      background: #1365dd;
      border-radius: 4px;
      font-size: 32px;
      color: #ffffff;
    }
    .typeName {
      // margin: 48px 0 44px 0;
      margin: 36px 0 22px 0;
      .typeName-box {
        padding: 16px 14px;
        background: #eaeef1;
        border-radius: 8px;
        font-size: 30px;
        font-weight: 500;
        margin-left: 10px;
      }
      .typeName-box:first-child {
        margin-left: 0;
      }
    }
  }
}
</style>
