<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="手动添加" name="first" v-if="permission.hasPermission(`user/user-add`)">
          <el-form ref="form" :model="form" label-width="250px" class="form-page">

            <div class="hr-tip"><span>账号信息</span></div>

            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                会员编号
              </template>
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                实时报单级别
              </template>
              <el-select v-model="form.decLv" placeholder="请选择报单级别">
                <el-option v-for="(item,index) in allDecLevel" :key="index" :label="item.LEVEL_NAME"
                           :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否报单中心">
              <el-switch v-model="form.isDec"></el-switch>
            </el-form-item>
            <el-form-item label="报单中心级别" v-show="form.isDec">
              <el-select v-model="form.decRoleId" placeholder="请选择报单中心级别">
                <el-option v-for="(item,index) in allDecRole" :key="index" :label="item.ROLE_NAME"
                           :value="item.ID"></el-option>
              </el-select>
            </el-form-item>

            <div class="hr-tip"><span>网络信息</span></div>

            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                报单中心编号
              </template>
              <el-tooltip class="item" effect="dark" content="输入编号后点击空白处，可检测该编号的会员姓名" placement="top-start">
                <el-input v-model="form.decUserName" @change="handleChkDecUser">
                  <template slot="append">【{{decRealName}}】</template>
                </el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                接点人
              </template>
              <el-input v-model="form.conUserName" @change="handleChkConUser">
                <template slot="append">【{{conRealName}}】</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                安置区位
              </template>
              <el-radio-group v-model="form.location">
                <el-radio-button :label="1">左区</el-radio-button>
                <el-radio-button :label="2">中区</el-radio-button>
                <el-radio-button :label="3">右区</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                开拓人
              </template>
              <el-input v-model="form.recUserName" @change="handleChkRecUser">
                <template slot="append">【{{recRealName}}】</template>
              </el-input>
            </el-form-item>

            <div class="hr-tip"><span>个人资料</span></div>

            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                会员姓名
              </template>
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                <span class="text-danger">*</span>
                身份证号
              </template>
              <el-input v-model="form.idCard" maxlength="18" @change="handleChkBirth"></el-input>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                身份证地址
              </template>
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item>
              <template slot="label">
                手机号
              </template>
              <el-input v-model="form.mobile" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item prop="areaSelected">
              <template slot="label">
                常用地区
              </template>
              <el-cascader
                  size="large"
                  :options="regionData"
                  v-model="form.areaSelected" @change="handleGetSubCom">
              </el-cascader>
            </el-form-item>
            <el-collapse style="margin-bottom: 20px;">
              <el-collapse-item title="其他信息" name="1">
                <el-form-item label="生日" v-show="false">
                  <el-date-picker
                      v-model="form.birthday"
                      type="date"
                      placeholder="根据身份证获取" :readonly="true">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="备用手机号" v-show="false">
                  <el-input v-model="form.tel" maxlength="11"></el-input>
                </el-form-item>

                <div class="hr-tip"><span>银行信息</span></div>

                <el-form-item label="开户行">
                  <el-select v-model="form.openBank" placeholder="请选择开户行">
                    <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME"
                               :value="item.BANK_CODE"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="银行所在地区" prop="bankAreaSelected">
                  <el-cascader
                      size="large"
                      :options="regionData"
                      v-model="form.bankAreaSelected">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="开户支行">
                  <el-input v-model="form.bankAddress"></el-input>
                </el-form-item>
                <el-form-item label="银行账号">
                  <el-input v-model="form.bankNo" maxlength="19"></el-input>
                </el-form-item>

              </el-collapse-item>
            </el-collapse>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!--<el-tab-pane label="空单删除" name="third" v-if="permission.hasPermission(`user/user-del`)">-->
          <!--<el-form ref="delForm" :model="delForm" label-width="250px" class="form-page">-->
            <!--<el-form-item label="空单会员编号">-->
              <!--<el-input v-model="delForm.delUserName" @change="handleChkDelUser"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="会员姓名" v-show="userInfo.REAL_NAME!==null">-->
              <!--<el-input :value="userInfo.REAL_NAME" :disabled="true"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="报单中心编号" v-show="userInfo.DEC_USER_NAME!==null">-->
              <!--<el-input :value="userInfo.DEC_USER_NAME" :disabled="true">-->
                <!--<template slot="append">【{{userInfo.DEC_REAL_NAME}}】</template>-->
              <!--</el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="接点人" v-show="userInfo.CON_USER_NAME!==null">-->
              <!--<el-input :value="userInfo.CON_USER_NAME" :disabled="true">-->
                <!--<template slot="append">【{{userInfo.CON_REAL_NAME}}】</template>-->
              <!--</el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="安置区位" v-show="userInfo.LOCATION!==null">-->
              <!--<el-radio-group v-model="userInfo.LOCATION" disabled>-->
                <!--<el-radio-button :label="1">左区</el-radio-button>-->
                <!--<el-radio-button :label="2">中区</el-radio-button>-->
                <!--<el-radio-button :label="3">右区</el-radio-button>-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="开拓人" v-show="userInfo.REC_USER_NAME!==null">-->
              <!--<el-input :value="userInfo.REC_USER_NAME" :disabled="true">-->
                <!--<template slot="append">【{{userInfo.REC_REAL_NAME}}】</template>-->
              <!--</el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item>-->
              <!--<el-button type="primary" @click="onDel" :loading="delButtonStat" :disabled="delButtonDisabled">删除空单-->
              <!--</el-button>-->
            <!--</el-form-item>-->
          <!--</el-form>-->
        <!--</el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import store from '@/utils/vuexStore'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import baseInfo from '../../utils/baseInfo'
  import LeoExcelUploader from '../../components/ExcelUploader'
  import {CDN_BASE_URL} from '../../utils/config'
  import permission from '@/utils/permission'

  export default {
    name: 'user_user-add-opt',
    components: {LeoExcelUploader},
    mounted() {
      this.getData()
    },
    data() {
      return {
        form: {
          userName: '',
          nation: '',
          realName: '',
          idCard: '',
          mobile: '',
          address: '',
          openBank: '',
          bankAddress: '',
          bankNo: '',
          bankAreaSelected: [],
          decLv: '',
          areaSelected: [],
          tel: '',
          subComId: '',
          isDec: false,
          decUserName: '',
          birthday: '',
          decRoleId: '',
          conUserName: '',
          recUserName: '',
          location: 1,
        },
        decRealName: '-',
        conRealName: '-',
        recRealName: '-',
        excelForm: {
          rowCount: 0,
        },
        loading: false,
        tabActiveName: 'first',
        submitButtonStat: false,
        importButtonStat: false,
        allNation: null,
        allOpenBank: null,
        regionData: store.state.regionInfo.regionData,
        allDecLevel: baseInfo.decLevels(),
        allDecRole: [],
        delForm: {
          delUserName: ''
        },
        userInfo: {
          REAL_NAME: '',
          DEC_USER_NAME: '',
          DEC_REAL_NAME: '',
          CON_USER_NAME: '',
          CON_REAL_NAME: '',
          LOCATION: '',
          REC_USER_NAME: '',
          REC_REAL_NAME: '',
        },
        delButtonStat: false,
        delButtonDisabled: true,
        permission: permission,
      }
    },
    methods: {
      getData() {
        this.$message({
          message: '正在获取数据，请稍后',
        })
        if (permission.hasPermission(`user/user-del`)) {
          this.tabActiveName = 'third'
        }
        if (permission.hasPermission(`user/import-users-to-excel-table`) && permission.hasPermission(`user/import-users-add`)) {
          this.tabActiveName = 'second'
        }
        if (permission.hasPermission(`user/user-add`)) {
          this.tabActiveName = 'first'
          network.getData(`user/user-add`).then(response => {
            this.loading = false
            this.allNation = response.allNation
            this.allOpenBank = response.allOpenBank
            this.allDecRole = response.allDecRole
            this.form.userName = response.userName
          }).catch(() => {
          })
        } else {
          this.loading = false
        }
      },
      onSubmit() {
        this.submitButtonStat = true
        network.postData(`user/user-add`, this.form).then(response => {
          this.submitButtonStat = false
          this.$message({
            message: response,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.submitButtonStat = false
        })
      },
      handleExcel() {
        window.open(CDN_BASE_URL + `/files/bonus_user_add.xlsx`)
      },
      handleChkBirth() {
        if (this.form.idCard) {
          let birth = this.form.idCard.substring(6, 10) + "-" + this.form.idCard.substring(10, 12) + "-" + this.form.idCard.substring(12, 14)
          this.form.birthday = birth
        }
      },
      handleChkDecUser() {
        if (this.form.decUserName) {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.decUserName}).then(response => {
            this.decRealName = response.REAL_NAME
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      handleChkConUser() {
        if (this.form.conUserName) {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.conUserName}).then(response => {
            this.conRealName = response.REAL_NAME
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      handleChkRecUser() {
        if (this.form.recUserName) {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.recUserName}).then(response => {
            this.recRealName = response.REAL_NAME
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      handleGetSubCom() {
        if (this.form.areaSelected) {
          this.loading = true
          network.getData('user/get-sub-com', {areaSelected: JSON.stringify(this.form.areaSelected)}).then(response => {
            this.loading = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      handleChkDelUser() {
        if (this.delForm.delUserName) {
          this.loading = true
          network.getData('user/chk-del-user', {userName: this.delForm.delUserName}).then(response => {
            this.userInfo = response
            this.loading = false
            this.delButtonDisabled = false
          }).catch(response => {
            this.loading = false
          })
        }
      },
      onDel() {
        let _this = this
        _this.$confirm('确定要删除该会员？此操作不可撤销！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this._handleDel()
        }).catch(() => {
        })
      },
      _handleDel() {
        this.delButtonStat = true
        this.loading = true
        network.postData('user/user-del', this.delForm).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.delButtonStat = false
          this.loading = false
        }).catch(response => {
          this.delButtonStat = false
          this.loading = false
        })
      },
    }
  }
</script>

<style scoped>
  .hr-tip {
    font-size: 12px;
    position: relative;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #999;
    margin-bottom: 20px;
  }

  .hr-tip:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    border-bottom: 1px dashed #ddd;
    height: 1px;
  }

  .hr-tip span {
    display: inline-block;
    background: #fff;
    position: relative;
    padding: 0 10px;
  }
</style>
