<template>
	<el-dialog
      :close-on-click-modal="false"
      :visible.sync="interestCollection"
      :append-to-body="true"
      min-width="770px"
      max-width="950px"
       @close="closeDialog"
      >
      <div style="margin-top:10px">
        <div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
           <p class="portal-title-tow interest-title">{{sys.name}}</p>
           <el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
            <el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
          </el-checkbox-group>
         </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div><el-button type="primary" class="btn-one" @click="saveInterest()">生成我的兴趣偏好</el-button></div>
        <div><el-button @click="notYet()" class="btn-tow" type="text">暂不选择</el-button></div>
      </div>
    </el-dialog>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    import apiUserhobby from "@/api/phase2/userhobby.js"
	export default {
		props:{
          show:{
            type:Boolean,
            default:false
          }
		},
    data(){
    	return {
            checkboxGroup:[],
            interestCollection:false,// 兴趣采集 false - 不显示弹框;  true - 显示弹框
            sysTypeListMap:[],
            btn_insterest_status:0,
            dialog_session_show:0
    	}
    },
    created() {
          // this.userAvatar=require("@/assets/images/user/default.png");
          apiUserhobby.has().then(res=>{
            if(res.status != 200) {return;}
            // 1. 判断用户是否选择过兴趣偏好
            if(res.result == false){
              this.interestCollection = true;
            }
            if(res.result == true){this.interestCollection = false;return;}
            // 2. 判断用户是否点击过"暂不选择"按钮，如果用户点击过"暂不选择"按钮则判断点击"暂不选择"按钮天数是否大于15天，如果大于则弹出兴趣偏好框，否则不弹
            let time = localStorage.getItem('notYet'+this.userInfo.aid);
            if(!time == '' || time != null) {
                let day = (new Date() - new Date(time))/(1000*60*60*24);
                if(day > 15){
                  this.interestCollection = true;
                  return;
                }
            }
            // 3. 判断用户是否点击"关闭"按钮，如果点击"关闭"按钮则在当前session不在弹窗
            let current_session = sessionStorage.getItem('dialog_session_show'+this.userInfo.aid);
            if(current_session == 1){this.interestCollection = false;}
          })
        },
    mounted() {
      this.getSysTypeTree().then(rs => {
        this.sysTypeListMap = rs;
      });
    },
    methods:{
        notYet() {
            this.interestCollection = false;
            localStorage.setItem('notYet'+this.userInfo.aid,new Date());
        },
        ...mapActions({
            getSysTypeTree: 'sysType/getSysTypeTree',
        }),

        // 关闭兴趣偏好弹窗
        closeDialog() {
          sessionStorage.setItem('dialog_session_show'+this.userInfo.aid,1);
        },
        saveInterest() {
            let data = []
            if(this.checkboxGroup.length  < 3) {
                this.$message.error('至少选择三个兴趣偏好！')
                return
            }
            this.checkboxGroup.forEach(item=>{
                data.push({
                    type:1,
                    refId:item
                })
            })
            apiUserhobby.save(data).then(res=>{
               if(res.status == 200) {
                 this.interestCollection = false;
                 const h = this.$createElement;
                 this.$message({
                    type: 'success',
                    dangerouslyUseHTMLString: true,
                    message: `<span class="u-message">
                       选择个人偏好成功，U币+5
                        <span class="text"><a href="${this.webBaseUrl}/user/ucurrency">查看详情</a></span>
                    </span>`
                 });
               }
            })
        }
    },
    watch:{

    },
    computed:{
        ...mapGetters(['userInfo','studyTaskCount']),
		},

	}
</script>

<style scoped lang="scss">
::v-deep .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered{
  margin-left: 0 !important;
}
	::v-deep .el-dialog{
        background: #fff url('../../../public/images/homeWu/interest.png') no-repeat;
        border-radius: 8px;
        // height: 840px;
    }
.el-checkbox.is-bordered.el-checkbox--medium{
   width: 146px;
   height: 44px;
   line-height: 30px;
   text-align: center;
   margin-bottom: 20px;
   margin-left: 0px;
   margin-right: 23px;
}
.el-checkbox.is-bordered.is-checked{
    border-color: #4677F4;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #4677F4;
}
.el-checkbox{
    font-size: 14px;
    color: #333333;
}
.interest{
    margin-left: 40px;
    .interest-title{
       margin-bottom: 15px;
       margin-top: 10px;
    }
    ::v-deep .el-checkbox__input{
        display: none;
    }
}
.dialog-footer{
    text-align: center;
    .btn-one{
        width: 473px;
        height: 59px;
        background: linear-gradient(146deg, #4D7BF6 0%, #2F65EC 100%);
        border-radius: 30px;
    }
    .btn-tow{
        font-size: 14px;
        color: #333333;
    }
}
</style>
