<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="250px" class="form-page">

        <el-form-item label="移网类型">
          <el-select v-model="form.type" placeholder="请选择移网类型" @change="chkAlert">
            <el-option v-for="(item,key) in netType" :label="item.name" :value="item.id" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <div v-if="form.type==='network'">
          <el-form-item label="移动会员编号">
            <el-input v-model="form.moveUserName" @blur="handleChkUser"></el-input>
          </el-form-item>
          <el-form-item label="移动会员姓名" v-if="moveUser">
            <el-input v-model="moveUser.REAL_NAME" :disabled="true"></el-input>
          </el-form-item>
<!--          <el-form-item label="原上级编号" v-if="moveUser">-->
<!--            <el-input v-model="moveUser.CON_USER_NAME" :disabled="true"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="原上级姓名" v-if="moveUser">-->
<!--            <el-input v-model="moveUser.CON_REAL_NAME" :disabled="true"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="移动到节点会员编号">
            <el-input v-model="form.toConUserName"></el-input>
            <el-tag v-if="showToName==''?false:true">{{showToName}}</el-tag>
            <el-alert :title="toAlertTile" :type="toAlertType" :closable="false" v-show="toAlertShow"></el-alert>
          </el-form-item>
          <el-form-item label="移动到节点会员姓名">
            <el-input v-model="form.toConRealName"></el-input>
          </el-form-item>
        </div>
        <div v-if="form.type==='relation'">
          <el-form-item label="移动会员编号">
            <el-input v-model="form.moveUserName" @blur="handleChkUser"></el-input>
          </el-form-item>
          <el-form-item label="移动会员姓名" v-if="moveUser">
            <el-input v-model="moveUser.REAL_NAME" :disabled="true"></el-input>
          </el-form-item>
<!--          <el-form-item label="原开拓人编号" v-if="moveUser">-->
<!--            <el-input v-model="moveUser.REC_USER_NAME" :disabled="true"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="原开拓人姓名" v-if="moveUser">-->
<!--            <el-input v-model="moveUser.REC_REAL_NAME" :disabled="true"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="移动到开拓会员编号">
            <el-input v-model="form.toConUserName"></el-input>
            <el-tag v-if="showToName==''?false:true">{{showToName}}</el-tag>
            <el-alert :title="toAlertTile" :type="toAlertType" :closable="false" v-show="toAlertShow"></el-alert>
          </el-form-item>
          <el-form-item label="移动到开拓会员姓名">
            <el-input v-model="form.toConRealName"></el-input>
          </el-form-item>
        </div>

        <el-form-item v-if="form.type==='network'" label="移动到区位">
          <el-select v-model="form.location" placeholder="移动到区位">
            <el-option label="一市场" :value="1" key="location_1"></el-option>
            <el-option label="二市场" :value="2" key="location_2"></el-option>
            <el-option label="三市场" :value="3" key="location_3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" v-if="form.type">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/utils/vuexStore'
  import network from '@/utils/network'
  import tool from '@/utils/tool'

  export default {
    name: 'user_move-add',
    created() {

    },
    mounted() {
      network.getData('user/move-net-type').then(response => {
        this.netType = response.netType
        this.loading = false
      })
    },
    data() {
      return {
        form: {
          moveUserName: null,
          toConUserName: null,
          toConRealName: null,
          type: null,
          location: 1,
          remark: null,
        },
        moveUser: {},
        netType: null,
        loading: true,
        submitButtonStat: false,
        openBanks: null,
        toAlertShow:false,
        toAlertTile:'',
        toAlertType:'success',
        isRelation:false,
        showToName:'',
      }
    },
    methods: {
      chkAlert(){
        // if(this.form.type==='network'){
        //   this.chkRelation()
        // }else{
        //   this.toAlertShow=false
        // }

        this.toAlertShow=false
      },
      handleChkUser() {
        if (this.form.moveUserName) {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.moveUserName}).then(response => {
            this.moveUser = response
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      chkRelation(){
        if (this.form.toConUserName&&this.form.moveUserName) {
          this.loading = true
          this.toAlertShow=false
          network.getData('user/chk-relation', {userName: this.form.moveUserName,toUserName:this.form.toConUserName}).then(response => {
            if(response.is===1){
              this.isRelation=true
              this.toAlertTile='在同一推荐网络内'
              this.toAlertType='success'
            }else{
              this.isRelation=false
              this.toAlertTile='不同一推荐网络内'
              this.toAlertType='warning'
            }
            this.showToName=response.real_name
            this.toAlertShow=true
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      onSubmit() {
        let thisObj=this
        // if(thisObj.form.type==='network' && this.isRelation===false){
        //   thisObj.$confirm('不在同一推荐网络内是否确认处理', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     thisObj._handleSubmit()
        //   }).catch(() => {
        //
        //   })
        // }else{
        //   thisObj._handleSubmit()
        // }

        thisObj._handleSubmit()
      },
      _handleSubmit(){
        this.submitButtonStat = true
        let path = 'user/move-add'
        network.postData(path, this.form).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.submitButtonStat = false
          this.$router.go(-1)
        }).catch(response => {
          this.submitButtonStat = false
        })
      }
    }
  }
</script>

<style scoped>
.el-alert{line-height: 24px;width:400px;}
.form-page{width:800px;}
</style>
