<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-form-item label="是否已有会员编号">
            <el-select v-model="form.type" placeholder="请选择是否已有会员编号" @change="handleClearUserName">
              <el-option label="已有会员编号" :value="1"></el-option>
              <el-option label="没有会员编号" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员编号">
            <el-input v-model="form.userName" :disabled="form.type === 0" @change="handleGetUser"></el-input>
            <el-button type="primary" plain :loading="userNameBtnLoading" @click="handleGetUserName"
                       v-if="form.type === 0">生成编号
            </el-button>
          </el-form-item>
          <el-form-item label="会员姓名" v-show="form.type === 1 && userInfo.REAL_NAME!==null">
            <el-input :value="userInfo.REAL_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="会员状态" v-show="form.type === 1 && userInfo.STATUS_NAME!==null">
            <el-input :value="userInfo.STATUS_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" v-show="form.type === 1 && userInfo.ID_CARD!==null">
            <el-input :value="userInfo.ID_CARD" :disabled="true" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="手机号" v-show="form.type === 1 && userInfo.MOBILE!==null">
            <el-input :value="userInfo.MOBILE" :disabled="true" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="开户行" v-show="form.type === 1 && userInfo.OPEN_BANK!==null">
            <el-select v-model="userInfo.OPEN_BANK" placeholder="请选择开户行" :disabled="true">
              <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="开户行地址" v-show="form.type === 1 && userInfo.BANK_ADDRESS!==null">
            <el-input :value="userInfo.BANK_ADDRESS" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" v-show="form.type === 1 && userInfo.BANK_NO!==null">
            <el-input :value="userInfo.BANK_NO" :disabled="true" minlength="16" maxlength="19"></el-input>
          </el-form-item>
          <el-form-item label="银行所在地区" prop="bankAreaSelected" v-show="form.type === 1 && userInfo.bankAreaSelected!==null">
            <el-cascader
              :disabled="true"
              size="large"
              :options="regionData"
              v-model="userInfo.bankAreaSelected">
            </el-cascader>
          </el-form-item>
          <el-form-item label="主会员编号">
            <el-input v-model="form.mainUserName" @change="handleGetMain"></el-input>
          </el-form-item>
          <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.STATUS_NAME!==null">
            <el-input :value="mainInfo.STATUS_NAME" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="主会员当前分成比例" v-show="mainInfo.STATUS_NAME!==null">
            <el-input :value="form.mainDivide+'%'" :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" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="手机号" v-show="mainInfo.MOBILE!==null">
            <el-input :value="mainInfo.MOBILE" :disabled="true" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="开户行" v-show="mainInfo.OPEN_BANK!==null">
            <el-select v-model="mainInfo.OPEN_BANK" placeholder="请选择开户行" :disabled="true">
              <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="开户行地址" v-show="mainInfo.BANK_ADDRESS!==null">
            <el-input :value="mainInfo.BANK_ADDRESS" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" v-show="mainInfo.BANK_NO!==null">
            <el-input :value="mainInfo.BANK_NO" :disabled="true" minlength="16" maxlength="19"></el-input>
          </el-form-item>
          <el-form-item label="银行所在地区" prop="bankAreaSelected" v-show="mainInfo.bankAreaSelected!==null">
            <el-cascader
              :disabled="true"
              size="large"
              :options="regionData"
              v-model="mainInfo.bankAreaSelected">
            </el-cascader>
          </el-form-item>
          <el-form-item label="分成比例% ">
            <el-slider
                v-model="form.dividePercent"
                :max="(form.mainDivide-1)"
                show-input>
            </el-slider>
          </el-form-item>
          <template v-if="form.type === 0">
            <el-form-item label="民族">
              <el-select v-model="form.nation" placeholder="请选择民族">
                <el-option v-for="(item,index) in allNation" :key="index" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="会员姓名">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard"></el-input>
            </el-form-item>
            <el-form-item label="身份证地址">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.mobile" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="常用地区" prop="areaSelected">
              <el-cascader
                  size="large"
                  :options="regionData"
                  v-model="form.areaSelected">
              </el-cascader>
            </el-form-item>
            <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="开户行地址">
              <el-input v-model="form.bankAddress"></el-input>
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input v-model="form.bankNo" minlength="16" maxlength="19"></el-input>
            </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.tel" maxlength="11"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="备注">
            <el-input v-model="form.remark"></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" style="width:600px;">
          <el-row style="color: #999;">
            <el-col :span="6" style="line-height: 40px;">会员编号</el-col>
            <el-col :span="6" style="line-height: 40px;">会员姓名</el-col>
            <el-col :span="12" style="line-height: 40px;">所占比例(%)</el-col>
          </el-row>
          <el-row v-for="(item,key) in form.divideArr" :key="item.ID">
            <el-col :span="6" style="line-height: 40px;">{{item.USER_NAME}} <span v-if="item.USER_ID===item.MAIN_UID"
                                                                                  style="color:red">[主]</span></el-col>
            <el-col :span="6" style="line-height: 40px;">{{item.REAL_NAME}}</el-col>
            <el-col :span="12">
              <el-slider
                  v-model="form.divideArr[key].DIVIDE_PERCENT"
                  show-input
                  @change="handleChangeDivide($event,item.USER_ID)"
              >
              </el-slider>
            </el-col>
          </el-row>
          <p></p>
          <el-form-item label="当前总比例%">
            <el-input v-model="totalPercent" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <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>
      </template>
    </div>
  </div>
</template>

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

  export default {
    name: 'user_teamwork-edit',
    mounted() {
      this.isEdit = this.$route.path !== '/user/teamwork-add'
      this.getData()
    },
    data() {
      return {
        form: {
          id: null,
          type: 1,
          userName: null,
          mainUserName: null,
          nation: null,
          realName: null,
          idCard: null,
          mobile: null,
          address: null,
          openBank: null,
          bankAddress: null,
          bankNo: null,
          bankAreaSelected: null,
          areaSelected: null,
          tel: null,
          dividePercent: null,
          mainDivide: 100,
          divideArr: null,
          remark: null,
        },
        userInfo: {
          REAL_NAME: null,
          STATUS_NAME: null,
          ID_CARD: null,
          MOBILE: null,
          OPEN_BANK: null,
          BANK_ADDRESS: null,
          BANK_NO: null,
          BANK_PROVINCE: null,
          BANK_CITY: null,
          BANK_COUNTY: null,
          bankAreaSelected: null,
        },
        mainInfo: {
          REAL_NAME: null,
          STATUS_NAME: null,
          ID_CARD: null,
          MOBILE: null,
          OPEN_BANK: null,
          BANK_ADDRESS: null,
          BANK_NO: null,
          BANK_PROVINCE: null,
          BANK_CITY: null,
          BANK_COUNTY: null,
          bankAreaSelected: null,
        },
        loading: true,
        userNameBtnLoading: false,
        submitButtonStat: false,
        isEdit: false,
        regionData: store.state.regionInfo.regionData,
        allNation: null,
        allOpenBank: null,
        totalPercent: 100,
        btnDisabled: true,
      }
    },
    methods: {
      getData() {
        if (this.isEdit) {
          this.form.id = this.$route.params.id
          network.getData(`user/teamwork-edit/${this.$route.params.id}`).then(response => {
            this.loading = false
            this.form.divideArr = response
            for (let i in this.form.divideArr) {
              this.form.divideArr[i].DIVIDE_PERCENT = Number.parseInt(this.form.divideArr[i].DIVIDE_PERCENT)
            }
          }).catch(() => {
          })
        } else {
          network.getData(`user/teamwork-add`).then(response => {
            this.loading = false
            this.allNation = response.allNation
            this.allOpenBank = response.allOpenBank
          }).catch(() => {
          })
        }
      },
      handleClearUserName() {
        this.form.userName = null
        this.form.realName = null
        this.form.idCard = null
        this.form.mainUserName = null
        this.userInfo.REAL_NAME = null
        this.userInfo.STATUS_NAME = null
        this.userInfo.ID_CARD = null
        this.userInfo.MOBILE = null
        this.userInfo.OPEN_BANK = null
        this.userInfo.BANK_ADDRESS = null
        this.userInfo.BANK_NO = null
        this.userInfo.BANK_PROVINCE = null
        this.userInfo.BANK_CITY = null
        this.userInfo.BANK_COUNTY = null
        this.userInfo.bankAreaSelected = null
        this.mainInfo.REAL_NAME = null
        this.mainInfo.STATUS_NAME = null
        this.mainInfo.ID_CARD = null
        this.mainInfo.MOBILE = null
        this.mainInfo.OPEN_BANK = null
        this.mainInfo.BANK_ADDRESS = null
        this.mainInfo.BANK_NO = null
        this.mainInfo.BANK_PROVINCE = null
        this.mainInfo.BANK_CITY = null
        this.mainInfo.BANK_COUNTY = null
        this.mainInfo.bankAreaSelected = null
        this.btnDisabled = true
      },
      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.userInfo.bankAreaSelected = [response.BANK_PROVINCE,response.BANK_CITY,response.BANK_COUNTY]
            this.form.realName = response.REAL_NAME
            this.form.idCard = response.ID_CARD
            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,
              STATUS_NAME: null,
            }
          })
        } else {
          this.btnDisabled = true
          this.loading = false
          this.userInfo= {
            REAL_NAME: null,
            STATUS_NAME: null,
          }
        }
      },
      handleGetMain() {
        if (this.form.mainUserName !== null && this.form.mainUserName !== '') {
          this.loading = true
          let _this = this
          network.getData('user/full-info', {userName: this.form.mainUserName}).then(response => {
            _this.mainInfo = response
            _this.mainInfo.bankAreaSelected = [response.BANK_PROVINCE,response.BANK_CITY,response.BANK_COUNTY]
            network.getData('user/main-divide', {userId: _this.mainInfo.ID}).then(response => {
              _this.form.mainDivide = Number.parseFloat(response)
              _this.loading = false
            }).catch(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,
              STATUS_NAME: null,
            }
            _this.btnDisabled = true
          })
        } else {
          this.mainInfo= {
            REAL_NAME: null,
            STATUS_NAME: null,
          }
          this.loading = false
          this.btnDisabled = true
        }
      },
      handleGetUserName() {
        this.userNameBtnLoading = true
        network.getData(`user/generate-user-name`).then(response => {
          this.userNameBtnLoading = false
          this.form.userName = response.userName
        }).catch(() => {
          this.userNameBtnLoading = false
        })
      },
      onSubmit() {
        if(this.totalPercent!==100){
          this.$message({
            message: '请确保总比例为100',
            type: 'warning'
          })
          return false
        }
        this.submitButtonStat = true
        let path = 'user/teamwork-add'
        if (this.isEdit) {
          path = `user/teamwork-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
        })
      },
      handleChangeDivide($event, id) {
        let total = 0
        for (let i in this.form.divideArr) {
          total += this.form.divideArr[i].DIVIDE_PERCENT
        }
        this.totalPercent = total
      }
    }
  }
</script>
