<template>
  <div v-loading="loading">
    <div class="white-box">
      <template v-if="isEdit === false">
        <el-form ref="form" :model="form" label-width="250px" class="form-page">
          <el-tooltip class="item" effect="dark" content="输入编号后点击空白处，可检测该编号的信息" placement="top-center">
            <el-form-item label="会员编号">
              <el-input v-model="form.userName" @change="handleGetUser"></el-input>
            </el-form-item>
          </el-tooltip>
          <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.ID_CARD!==null">
            <el-input :value="userInfo.ID_CARD" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="会员状态" v-show="userInfo.STATUS_NAME!==null">
            <el-input :value="userInfo.STATUS_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-tooltip class="item" effect="dark" content="输入编号后点击空白处，可检测该编号的信息" placement="top-center">
            <el-form-item label="主会员编号">
              <el-input v-model="form.mainUserName" @change="handleGetMain"></el-input>
            </el-form-item>
          </el-tooltip>
          <el-form-item label="主会员会员姓名" v-show="mainInfo.REAL_NAME!==null">
            <el-input :value="mainInfo.REAL_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="主会员身份证号" v-show="mainInfo.ID_CARD!==null">
            <el-input :value="mainInfo.ID_CARD" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="主会员会员状态" v-show="mainInfo.STATUS_NAME!==null">
            <el-input :value="mainInfo.STATUS_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :loading="submitButtonStat" :disabled="btnDisabled">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <el-form ref="form" :model="form" label-width="150px" label-position="left">
          <el-form-item>
            <template slot="label">
              是否主会员
            </template>
            <el-row>
              <el-col :span="4">会员账号</el-col>
              <el-col :span="4">会员姓名</el-col>
              <el-col :span="6">身份证号</el-col>
              <el-col :span="4">会员状态</el-col>
            </el-row>
          </el-form-item>
          <el-form-item v-for="(item,index) in userBinds" :key="index">
            <template slot="label">
              <el-switch v-model="item.USER_ID==mainUid" active-color="#13ce66" @change="changeMainUid(item.USER_ID)">
              </el-switch>
            </template>
            <el-row>
              <el-col :span="4">{{item.BASE_INFO.USER_NAME}}</el-col>
              <el-col :span="4">{{item.BASE_INFO.REAL_NAME}}</el-col>
              <el-col :span="6">{{item.BASE_INFO.ID_CARD}}</el-col>
              <el-col :span="4">{{item.BASE_INFO.STATUS_NAME}}</el-col>
            </el-row>
          </el-form-item>

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

<script>
  import network from '@/utils/network'
  import {regionData} from '@/utils/region'

  export default {
    name: 'user_bind-edit',
    mounted() {
      this.isEdit = this.$route.path !== '/user/bind-add'
      this.getData()
    },
    data() {
      return {
        form: {
          id: null,
          type: 1,
          userName: null,
          mainUserName: null,
          mainUid: null,
        },
        userInfo: {
          REAL_NAME: null,
          ID_CARD: null,
          STATUS_NAME: null,
        },
        mainInfo: {
          REAL_NAME: null,
          ID_CARD: null,
          STATUS_NAME: null,
        },
        mainUid: null,
        userBinds: null,
        loading: true,
        submitButtonStat: false,
        btnDisabled: true,
        isEdit: false,
      }
    },
    methods: {
      handleGetUser() {
        if (this.form.userName !== null && this.form.userName !== '') {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.userName}).then(response => {
            this.userInfo = response
            this.loading = false
            if (this.form.mainUserName !== null && this.form.mainUserName !== '') this.btnDisabled = false
          }).catch(response => {
            this.btnDisabled = true
            this.loading = false
            this.userInfo= {
              REAL_NAME: null,
                ID_CARD: null,
                STATUS_NAME: null,
            }
          })
        } else {
          this.userInfo= {
            REAL_NAME: null,
            ID_CARD: null,
            STATUS_NAME: null,
          }
          this.loading = false
          this.btnDisabled = true
        }
      },
      handleGetMain() {
        if (this.form.mainUserName !== null && this.form.mainUserName !== '') {
          this.loading = true
          network.getData('user/full-info', {userName: this.form.mainUserName}).then(response => {
            this.mainInfo = response
            this.loading = false
            if (this.form.userName !== null && this.form.userName !== '') this.btnDisabled = false
          }).catch(response => {
            this.loading = false
            this.mainInfo= {
              REAL_NAME: null,
              ID_CARD: null,
              STATUS_NAME: null,
            }
            this.btnDisabled = true
          })
        } else {
          this.mainInfo= {
            REAL_NAME: null,
            ID_CARD: null,
            STATUS_NAME: null,
          }
          this.loading = false
          this.btnDisabled = true
        }
      },
      getData() {
        if (this.isEdit) {
          this.form.id = this.$route.params.id
          network.getData(`user/bind-edit/${this.$route.params.id}`).then(response => {
            this.loading = false
            this.userBinds = response.userBinds
            this.mainUid = response.mainUid
            this.form.mainUid = response.mainUid
          }).catch(() => {
          })
        } else {
          network.getData(`user/bind-add`).then(response => {
            this.loading = false
            this.allNation = response.allNation
            this.allOpenBank = response.allOpenBank
          }).catch(() => {
          })
        }

      },
      changeMainUid(uid) {
        this.mainUid = uid
        this.form.mainUid = uid
      },
      onSubmit() {
        this.submitButtonStat = true
        let path = 'user/bind-add'
        if (this.isEdit) {
          path = `user/bind-edit/${this.$route.params.id}`
        }
        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>

</style>