<template>
  <a-modal
    :title="title"
    width="100%"
    :dialog-style="{ top: '0', height: '100vh'}"
    :keyboard="false"
    :visible="visible"
    :mask="false"
    :closable="closable"
    :footer="false"
    :maskClosable="false"
    @cancel="visible = false"
  >
    <div class="house-content-box">
      <div class="box" :class="{'active': currentCode === item.communityCode}" v-for="item in houseList" :key="item.id" @click="selectHouse(item)">
        <img class="image" :src="item.imgUrl" alt="" />
        <div class="describe">
          <p class="name">{{item.communityName}}</p>
          <p class="address">{{item.communityArea}}{{item.addressInfo}}</p>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>

import Vue from 'vue'
import { putAction } from '@/api/manage'
import { welcome } from "@/utils/util"
import { mapActions } from 'vuex'
import { ACCESS_TOKEN,TENANT_ID, USER_NAME,USER_INFO,UI_CACHE_DB_DICT_DATA, HOUSE_LIST } from "@/store/mutation-types"
let username = ''

export default {
    name: 'LoginSelectTenant',
    props: {
      title: {
        type: String,
        default: '请选择小区'
      },
      closable: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        visible: false,
        houseList:[],
        currentCode:''
      }
    },
    methods:{
      ...mapActions(['changeHouse']),
      clear(){
        this.houseList = []
        Vue.ls.remove(HOUSE_LIST)
        this.visible=false
      },
      bizDepart(loginResult){
        let multi_community = loginResult.multi_community
        if( multi_community === 2 ) {
          this.visible = true
          let list = loginResult.communitys.map(item=> {
            let imgList = item.communityImage.split(',')
            return {
              ...item,
              imgUrl: process.env.VUE_APP_API_BASE_URL + '/sys/common/static/' + imgList[0]
            }
          })
          Vue.ls.set(HOUSE_LIST, list, 7 * 24 * 60 * 60 * 1000)
          this.houseList = list
        // }
        // if( multi_community == 0 ){
        //   this.$notification.warn({
        //     message: '提示',
        //     description: `您尚未认证小区,请确认账号信息`,
        //     duration:3
        //   });
        // } else if(multi_community === 1) {
        //   this.visible = false
        } else {
          this.visible = false
        }
      },
      show(loginResult){
        if(loginResult) {
          this.clear();
          this.bizDepart(loginResult);
  
          if(this.visible === false){
            this.$emit('success')
          }
        } else {
          const list = Vue.ls.get(HOUSE_LIST)
          const code = Vue.ls.get(TENANT_ID)
          this.houseList = list
          this.currentCode = code
          this.visible = true
        }
      },
      requestFailed (err) {
        this.$notification[ 'error' ]({
          message: '登录失败',
          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
          duration: 4,
        });
      },
      departResolve(row){
        return new Promise((resolve, reject)=>{
          putAction("/sys/selectCommunity", {
            platformCode: row.communityCode,
            username: Vue.ls.get(USER_NAME)
          }).then(res=>{
            if(res.success){
              const result = res.result
              const userInfo = result.userInfo
              Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(TENANT_ID, result.userInfo.platformCode, 7 * 24 * 60 * 60 * 1000)
              this.$store.commit('SET_TOKEN', result.token)
              this.$store.commit('SET_INFO', userInfo)
              this.$store.commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() })
              this.$store.commit('SET_AVATAR', userInfo.avatar)
              resolve();
            } else{
              this.requestFailed(res)
              this.$store.dispatch('Logout');
              reject();
            }
          })
        })
      },
      selectHouse(row){
        // console.log(this.changeHouse)
        // debugger
        // let loginParams = {
        //   platformCode: row.communityCode,
        //   username,
        //   platformType: 'community'
        // }
        // this.changeHouse(loginParams).then(()=> {
        //   this.$store.dispatch('saveTenant', row.communityCode);
        //   this.$emit('success')
        // }).catch(err=> {
        //   this.requestFailed(err)
        //   this.$store.dispatch('Logout');
        // })
        this.departResolve(row).then(()=>{
          this.visible = false
          this.$store.dispatch('saveTenant', row.communityCode);
          this.$emit('success')
        }).catch(()=>{
          console.log('登录选择出问题')
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .ant-modal-content {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto;
  }
  .house-content-box {
    display: flex;
    .box {
      box-sizing: border-box;
      flex: none;
      width: 300px;
      height: 300px;
      border-radius: 10px;
      margin-right: 20px;
      border: 1px solid #cbcbcb;
      overflow: hidden;
      cursor: pointer;
      transition: all .5s;
      &:hover {
        box-shadow: 0px 0px 10px #a9a4a4;
      }
      &.active {
        box-shadow: 0px 0px 10px #a9a4a4;
      }
      .image {
        width: 100%;
        height: 200px;
        border-radius: 10px 10px 0 0;
      }
      .describe {
        height: 100px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 16px;
          color: #666;
          margin-bottom: 10px;
        }
        .address {
          font-size: 14px;
          color: #999;
          margin-bottom: 0;
        }
      }
    }
  }
</style>