<template>
  <ai-list class="Family">
    <template slot="title">
      <ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
            <el-option
              v-for="(item,i) in girdList"
              :key="i"
              :label="item.girdName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template #right>
          <el-input
            v-model="search.name"
            class="search-input"
            size="small"
            @keyup.enter.native="search.current = 1, getList()"
            placeholder="姓名/身份证/联系方式"
            clearable
            @clear="search.current = 1, search.name = '', getList()"
            suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        style="margin-top: 6px;"
        :current.sync="search.current"
        :size.sync="search.size"
        @handleSelectionChange="handleSelectionChange"
        @getList="getList">
        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
      <ai-dialog
        :visible.sync="isShow"
        width="890px"
        @close="closeDialog"
        title="添加户主"
        @onConfirm="onConfirm">
        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
          <el-option
            v-for="(item,i) in girdList"
            :key="i"
            :label="item.girdName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div class="AiWechatSelecter-container">
          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
            <div class="AiWechatSelecter-header">
              <div class="AiWechatSelecter-header__left">
                <h2>户主信息列表</h2>
              </div>
              <el-input
               class="search-input"
                size="mini"
                placeholder="请输入姓名/身份证号"
                v-model="name"
                clearable
                @keyup.enter.native="getUserList()"
                @clear="name = '', getUserList()"
                suffix-icon="iconfont iconSearch">
              </el-input>
            </div>
            <el-scrollbar class="AiWechatSelecter-list">
              <el-checkbox-group v-model="chooseUser">
                <el-checkbox
                  :label="`${item.name}~${item.id}`"
                  v-for="(item, index) in userList"
                  :key="index">
                  {{ item.name }}-{{ item.idNumber }}
                </el-checkbox>
              </el-checkbox-group>
              <AiEmpty v-if="!this.userList.length"></AiEmpty>
            </el-scrollbar>
          </div>
          <div class="AiWechatSelecter-container__right">
            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
              <h2>已选择</h2>
              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
            </div>
            <el-scrollbar class="AiWechatSelecter-list">
              <div class="tags-wrapper">
                <el-tag
                  v-for="(item, index) in chooseUser"
                  :key="index"
                  closable
                  @close="del(item)"
                  size="small"
                  type="info">
                  {{ item.split('~')[0] }}
                </el-tag>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Family',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data() {
      return {
        search: {
          current: 1,
          size: 10,
          name: '',
          girdId: ''
        },
        isLoading: false,
        form: {

        },
        userList: [],
        name: '',
        chooseUser: [],
        isShow: false,
        total: 10,
        colConfigs: [
          { type: 'selection', label: '' },
          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
          { prop: 'idNumber', label: '身份证号', align: 'center' },
          { prop: 'phone', label: '联系方式', align: 'center' },
          { prop: 'girdName', label: '所属网格', align: 'center' },
          { prop: 'createTime', label: '添加时间', align: 'center' },
          { slot: 'options', label: '操作', align: 'center' }
        ],
        tableData: [],
        areaId: '',
        ids: [],
        disabledLevel: 0,
        girdList: [],
        girdId: '',
      }
    },

    computed: {
      ...mapState(['user'])
    },

    created() {
      this.areaId = this.user.info.areaId
      this.disabledLevel = this.user.info.areaList.length
      this.dict.load('epidemicDangerousAreaLevel').then(() => {
        this.getGirdList()
        this.getList()
        this.getUserList()
      })
    },

    methods: {
      getGirdList() {
        this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
          if (res.code == 0) {
            this.girdList = res.data
          }
        })
      },
      getListInit() {
        this.search.current = 1
        this.getList()
      },
      getList () {
        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
          params: {
            ...this.search,
            girdMemberId: this.params.id,
            areaId: this.areaId
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

    removeAll() {
        if (!this.ids) {
          return this.$message.error('请选择户主')
        }
        this.remove(this.ids.join(','))
      },
      handleSelectionChange(e) {
        this.ids = e.map(v => v.gmrId)
      },

      clearAll () {
        this.chooseUser = []
      },

      onConfirm () {
        if(!this.girdId) {
          return this.$message.error('请选择网格')
        }

        if (!this.chooseUser.length) {
          return this.$message.error('请选择户主')
        }

        const residentList = this.chooseUser.map(v => {
          return {
            girdMemberId: this.params.id,
            name: v.split('~')[0],
            residentId: v.split('~')[1],
            girdId: this.girdId
          }
        })
        this.instance.post(`/app/appgirdmemberresident/add`, {
          residentList
        }).then(res => {
          if (res.code == 0) {
            this.current = 1
            this.getList()
            this.$message.success('添加成功')
            this.closeDialog()
          }
        })
      },
      closeDialog() {
        this.isShow = false
        this.chooseUser = []
        this.girdId = ''
        this.name = ''
        this.areaId = this.user.info.areaId
      },

      del (e) {
        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
      },

      getUserList () {
        this.isLoading = true
        this.instance.post(`/app/appresident/list`, null, {
          params: {
            current: 1,
            size: 200,
            con: this.name,
            householdName: 1,
            areaId: this.areaId,
          }
        }).then(res => {
          if (res.code == 0) {
            this.userList = res.data.records
          }

          this.isLoading = false
        })
      },

      onBack () {
        this.$emit('change', {
          type: 'list'
        })
      },

      remove(id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Family {
    .AiWechatSelecter-container {
      display: flex;
      height: 380px;
      margin-top: 20px;

      .tree-container {
        & > span {
          display: block;
          margin-bottom: 4px;
        }

        .tree-user__item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
        }
        img {
          width: 27px;
          height: 27px;
          margin-right: 10px;
        }
      }

      ::v-deep .el-tree {
        background: transparent;

        .el-tree-node {
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .el-tree-node__content {
          height: auto;
          margin-top: 2px;
          // align-items: inherit;
        }
        
        .el-tree-node__expand-icon {
          height: 24px;
        }
      }

      .mask-btn__wrapper {
        position: relative;
      }

      .mask-btn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .userlist-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        padding: 0 17px;
        cursor: pointer;
        user-select: none;

        ::v-deep .el-checkbox__label {
          display: none;
        }

        .userlist-item__left {
          display: flex;
          align-items: center;

          span {
            color: #222222;
            font-size: 14px;
          }

          img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
          }
        }
      }

      & > div {
        width: 280px;
        background: #FCFCFC;
        border: 1px solid #D0D4DC;
      }

      .AiWechatSelecter-list {
        height: calc(100% - 40px);
        padding: 8px 0;

        ::v-deep .el-scrollbar__wrap {
          margin-bottom: 0!important;
          overflow-x: hidden;
        }

        ::v-deep .el-checkbox-group {
          padding: 0 8px;

          .el-checkbox {
            display: block;
            margin-right: 0;
          }
        }
      }

      .AiWechatSelecter-container__left {
        flex: 1;
      }

      .AiWechatSelecter-container__right {
        flex: 1;
        margin-left: 20px;

        .AiWechatSelecter-list {
          .tags-wrapper {
            padding: 0 8px;
          }
          .el-tag {
            margin: 0 8px 8px 0px;
            color: #222222;
            font-size: 14px;
          }
        }
      }

      .AiWechatSelecter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 8px 0 0;
        border-bottom: 1px solid #D0D4DC;
        background: #F5F7FA;

        .AiWechatSelecter-header__left {
          display: flex;
          align-items: center;
          padding: 0 8px;

          h2 {
            height: 100%;
            line-height: 40px;
            color: #222222;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;

            &.active {
              color: #2266FF;
              border-color: #2266FF;
            }
          }
        }

        .el-button {
          height: 28px;
          padding: 7px 5px;
        }

        .el-input {
          width: 160px;
        }
      }

      .AiWechatSelecter-header__right {
        padding: 0 8px;

        h2 {
          color: #222222;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
</style>
