<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-input v-model="form.userName" :readonly="userNameOnlyRead" @change="getData"></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="修改状态">
          <el-select v-model="form.statusValue" placeholder="请选择状态" @change="_handleChangeStatus">
            <el-option v-for="(item,key) in statuses" :label="item.label" :value="item.value" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期加T" v-show="form.statusValue === '2'||form.statusValue === '4'">
          <el-switch v-model="form.isPeriodAddT"></el-switch>
        </el-form-item>
        <el-form-item label="加T期数" v-show="form.isPeriodAddT === true">
          <el-input v-model="form.addTPeriodNum" ></el-input>
        </el-form-item>
        <el-form-item label="到期开通" v-show="form.statusValue === '1' && userInfo.STATUS==='9'">
          <el-switch v-model="form.isPeriodOpen"></el-switch>
        </el-form-item>
        <el-form-item label="开通期数" v-show="form.isPeriodOpen === true">
          <el-input v-model="form.openPeriodNum" ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :row="2" placeholder="请输入内容" 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_status-audit-add',
    mounted() {
      network.getData('user/status-audit-get-statuses').then(response => {
        this.statuses = response.statuses
        if(this.$route.params.userName){
          this.form.userName = this.$route.params.userName
          this.userNameOnlyRead = true
          this.getData()
        }
        this.loading = false
      })
    },
    data() {
      return {
        form: {
          userName: null,
          statusValue: null,
          remark: null,
          isPeriodAddT: false,
          addTPeriodNum: null,
          isPeriodOpen: false,
          openPeriodNum: null,
        },
        userInfo: {
          REAL_NAME: null,
          IS_BIND_MAIN: 0,
          STATUS: 1,
        },
        statuses: null,
        loading: true,
        submitButtonStat: false,
        userNameOnlyRead: false,
      }
    },
    methods: {
      getData() {
        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
          }).catch(response => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      },
      onSubmit() {
        let thisObj = this
        if (thisObj.userInfo.IS_BIND_MAIN == 1) {
          thisObj.$confirm('多点位主会员编号修改后的会员状态影响会员提现，请确认是否继续操作', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            thisObj._handleSubmit()
          }).catch(() => {

          });
        } else {
          thisObj.$confirm('是否要修改会员状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            thisObj._handleSubmit()
          }).catch(() => {

          });
        }
      },
      _handleSubmit() {
        this.submitButtonStat = true
        let path = 'user/status-audit-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
        })
      },
      _handleChangeStatus(){
        this.form.isPeriodAddT=false
        this.form.isPeriodOpen=false
      }
    }
  }
</script>

<style scoped>

</style>