<template>
  <div class="right_con">
    <div class="staff_fgx fl"></div>
    <p class="fl staff_list">账户信息</p>
    <div class="clear"></div>
    <div class="content account_content">
      <Tabs type="card">
        <TabPane label="基本信息">
          <Form ref="baseForm" :model="baseForm" :rules="baseRule" :label-width="120" class="add-adminguild-form">
            <FormItem  label="账号" prop="">
              <span class="formStaticText">{{baseForm.name}}</span>
            </FormItem>                 
            <FormItem  label="姓名" prop="realname">
              <Input v-model="baseForm.realname" type="text" placeholder="请输入姓名" class="wid_347" />
            </FormItem>
            <FormItem  label="联系电话" prop="mobile">
              <Input v-model="baseForm.mobile" type="text" placeholder="请输入联系方式" :maxlength="11" class="wid_347" />
            </FormItem>
            <FormItem  label="QQ号" prop="qq">
              <Input v-model="baseForm.qq" type="text" placeholder="输入QQ号" class="wid_347" />
            </FormItem>
            <!-- <FormItem  label="工作室名称" prop="room" v-if="isAdmin" :class="{'ivu-form-item-required': isAdmin}">
              <Input v-if="!work" v-model="baseForm.room" type="text" placeholder="输入工作室名称" class="wid_347" />
              <span v-else class="formStaticText">{{baseForm.room}}</span>
            </FormItem> -->
            <FormItem  label="职务" prop="duty">
              <Input v-model="baseForm.duty" type="text" placeholder="输入职务" class="wid_347" />
            </FormItem>
            <FormItem  label="昵称" prop="nickname">
              <Input v-model="baseForm.nickname" type="text" placeholder="输入昵称" class="wid_347" />
            </FormItem>
            <FormItem  label="入职时间" prop="" v-if="entry_date">
              <span class="formStaticText">{{entry_date}}</span>
            </FormItem> 
            <FormItem class="form_btn">
              <Button type="primary" @click="infoSubmitClick('baseForm')">确认</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="银行信息" >
          <Form ref="bankAliForm" :model="bankAliForm" :rules="bankAliRule" :label-width="120" class="add-adminsale-form mar_T_20" v-show="bankForm.is_type==2">
            <FormItem  label="账号" prop="">
              <span class="formStaticText">{{baseForm.name}}</span>
            </FormItem>
            <FormItem label="支付方式" prop="is_type">
              <RadioGroup v-model="is_type">
                  <Radio :label="1">银行卡</Radio>
                  <Radio :label="2">支付宝</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="支付宝账户" prop="alipay_account">
              <Input type="text" placeholder="支付宝账户" v-model="bankAliForm.alipay_account" class="wid_347 zd1" />
            </FormItem>
            <FormItem label="真实姓名" prop="alipay_name">
              <Input type="text" placeholder="支付宝真实姓名" v-model="bankAliForm.alipay_name" class="wid_347 zd1" />
            </FormItem>
            <FormItem class="form_btn" prop>
              <Button type="primary" @click="bankAlisubmitClick('bankAliForm')">确认</Button>
            </FormItem>
          </Form>
          <Form ref="bankForm" :model="bankForm" :rules="bankRule" :label-width="120" class="add-adminsale-form mar_T_20" v-show="bankForm.is_type==1">
            <FormItem  label="账号" prop="">
              <span class="formStaticText">{{baseForm.name}}</span>
            </FormItem>
            <FormItem label="支付方式" prop="is_type">
              <RadioGroup v-model="is_type">
                  <Radio :label="1">银行卡</Radio>
                  <Radio :label="2">支付宝</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="银行卡号" prop="card_num" filterable>
              <Input v-model="bankForm.card_num" type="text" :maxlength="19" placeholder="输入卡号" class="wid_347 zd1" />
            </FormItem>
            <FormItem label="收款银行" prop="bank_name">
              <Select v-model="bankForm.bank_name" filterable placeholder="选择银行" class="wid_347 zd1">
                <Option v-for="(item,index) in BankList" :value="item.name" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="持卡人" prop="card_name">
              <Input v-model="bankForm.card_name" type="text" placeholder="持卡人姓名，2-25个字符" class="wid_347 zd1" />
            </FormItem>
            <FormItem label="手机号" prop="mobile">
              <Input v-model="bankForm.mobile" type="text" placeholder="银行预留手机号" class="wid_347 zd1" />
            </FormItem>
            <FormItem label="开户城市" prop="area" class="marbom">
              <Select style="width:113px" v-model="bankForm.province" placeholder="省" filterable>
                <Option v-for="(item,index) in city" :key="index" :value="item.name">{{item.name}}</Option>
              </Select>
              <Select style="width:113px" v-model="bankForm.city" placeholder="市" filterable>
                <Option v-for="(item,index) in citylist" :key="index" :value="item.name">{{item.name}}</Option>
              </Select>
              <Select style="width:113px" v-model="bankForm.district" placeholder="区/县" filterable>
                <Option v-for="(item,index) in coulist" :key="index" :value="item.name">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="开户网点" prop="branch">
              <Input type="text" placeholder="至少2个字符" v-model="bankForm.branch" class="wid_347 zd1" />
            </FormItem>
            <FormItem class="form_btn" prop>
              <Button type="primary" @click="bankAlisubmitClick('bankForm')">确认</Button>
            </FormItem>
          </Form>   
        </TabPane>
        <TabPane label="修改密码">
          <Form ref="passwordForm" :model="passwordForm" :rules="passwordRule" :label-width="90" class="mar_T_15">
            <FormItem  label="账号" prop="name">
              <span class="formStaticText">{{baseForm.name}}</span>
            </FormItem>
            <FormItem label="旧密码" prop="old_password">
              <Input type="password" class="wid_275" v-model="passwordForm.old_password" />
            </FormItem>
            <FormItem label="新密码" prop="password">
              <Input type="password" class="wid_275" v-model="passwordForm.password" />
            </FormItem>
            <FormItem label="确认密码" prop="repassword">
              <Input type="password" class="wid_275" v-model="passwordForm.repassword" />
            </FormItem>
            <FormItem class="form_btn">
              <Button type="primary" @click="editPsdSubmitClick('passwordForm')">确认</Button>
            </FormItem>
          </Form>  
        </TabPane>
        <TabPane label="二级密码">
          <Form ref="secondForm" :model="secondForm" :rules="secondRule" :label-width="90" class="mar_T_15">
            <FormItem  label="账号" prop="name">
              <span class="formStaticText">{{baseForm.name}}</span>
            </FormItem>
            <FormItem label="新密码" prop="verify_password">
              <Input type="password" class="wid_275" v-model="secondForm.verify_password" />
            </FormItem>
            <FormItem label="确认密码" prop="reverify_password">
              <Input type="password" class="wid_275" v-model="secondForm.reverify_password" />
            </FormItem>
            <FormItem class="form_btn">
              <Button type="primary" @click="submitClick('secondForm')">确认</Button>
            </FormItem>
          </Form> 
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import city from "@/common/js/newcity.js";
import { BankList } from "@/assets/js/common.js";
import { getStore, setStore } from "@/utils/utils";
export default {
  name: "edit_adminGuild",
  data() {
    const confirmName = (rule, value, cb) => {
      let reg = /^[\u2E80-\u9FFF]+$/;
      if(value===''){
        cb()
      }else if (!reg.test(value)) {
        cb(new Error("姓名格式错误"));
      } else if (value.length > 25 || value.length < 2) {
        cb(new Error("姓名长度需要在2-25个字符之间"));
      } else{
        cb();
      }
    };
    const confirmCity = (rule, value, cb) => {
      if (value === "") {
        cb(new Error("请选择开户城市"));
      } else if (this.cit === "") {
        cb(new Error("请选择开户城市"));
      } else if (this.cou === "") {
        cb(new Error("请选择开户城市"));
      } else {
        cb();
      }
    };
    const confirmBankName = (rule, value, cb) => {
      let reg = /^([1-9]{1})(\d{15}|\d{18})$/;
      if (!reg.test(value)) {
        cb(new Error("卡号格式错误"));
      } else {
        cb();
      }
    };
    const confirmnewPwd = (rule, value, cb) => {
      let reg = /^[a-zA-Z0-9]{6,30}$/;
      if (!reg.test(value)) {
        cb(new Error("密码为6-30位字母或数字"));
      } else if (value.length > 30 || value.length < 6) {
        cb(new Error("密码为6-30位字母或数字"));
      } else {
        cb();
      }
    };
    return {
      baseForm: {
        realname: '',
        mobile: '',
        room: '',
        qq: '',
        type: 1,
        nickname: '',
        name:''
      },
      bankForm: {
        mobile: '',
        card_num: '',
        bank_name: '',
        card_name: '',
        province: '',
        city: '',
        district: '',
        type: 2,
        is_type: 1
      },
      bankAliForm: {
        alipay_account: '',
        alipay_name: '',
        type: 2,
        is_type: 2
      },
      passwordForm: {
        old_password: '',
        password: '',
        repassword: '',
        type: 3
      },
      secondForm: {
        verify_password: '',
        reverify_password: '',
        type: 4
      },
      baseRule: {
        realname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        qq: [
          { required: true, message: "请输入QQ号", trigger: "blur" }
        ]
      },
      bankRule: {
        mobile: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
          { pattern: /^1(3|4|5|7|8)\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        card_num: [
          { required: true, message: "请输入银行卡号", trigger: "blur" }
        ],
        bank_name: [
          { required: true, message: "请选择选择银行", trigger: "change" }
        ],
        card_name: [
          { required: true, message: "请输入持卡人姓名", trigger: "blur" }
        ],
        branch: [
          { required: true, message: "请输入开户网点", trigger: "blur" }
        ],
      },
      bankAliRule: {
        alipay_account: [
          { required: true, message: "请输入支付宝账户", trigger: "blur" }
        ],
        alipay_name: [
          { required: true, message: "请输入支付宝真实姓名", trigger: "blur" }
        ]
      },
      passwordRule: {
        old_password: [
          { required: true, message: "原密码不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { required: true, validator: confirmnewPwd, trigger: "blur" }
        ],
        repassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: (rule, value, cb) => {
            let reg = /^[a-zA-Z0-9]{6,30}$/;
            if (!reg.test(value)) {
              cb(new Error("密码为6-30位字母或数字"));
            } else if (value !== this.passwordForm.password) {
              cb(new Error("请输入相同的密码"));
            } else {
              cb();
            }
          }, trigger: "blur" }
        ]
      },
      secondRule: {
        verify_password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { required: true, validator: confirmnewPwd, trigger: "blur" }
        ],
        reverify_password: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: (rule, value, cb) => {
            let reg = /^[a-zA-Z0-9]{6,30}$/;
            if (!reg.test(value)) {
              cb(new Error("密码为6-30位字母或数字"));
            } else if (value !== this.secondForm.verify_password) {
              cb(new Error("请输入相同的密码"));
            } else {
              cb();
            }
          }, trigger: "blur" }
        ]
      },
      BankList,
      city: city,
      citylist: [],
      salelist: [],
      coulist: [],
      name: '',
      entry_date: '',
      midDistrict: '',
      midCity:'',
      is_type: '1',
      work: 1,
    };
  },
  watch: {
    'bankForm.province'(n) {
      this.citylist = [];
      this.coulist = [];
      this.bankForm.city = "";
      this.bankForm.district = "";
      for (let i of city) {
        if (n === i.name) {
          this.citylist = i.sub;
        }
      }
    },
    'bankForm.city'(n) {
      this.coulist = [];
      this.bankForm.district = "";
      for (let i of this.citylist) {
        if (n === i.name) {
          this.coulist = i.sub;
        }
      }
    },
    midCity (n) {
      this.bankForm.city = n
    },
    midDistrict (n) {
      this.bankForm.district = n
    },
    is_type (n) {
      this.bankForm.is_type = n
      this.bankAliForm.is_type = n
    }
  },
  methods: {
      getDetail() {
        this.$api.getManagerAccount()
          .then(data => {
            if (data) {
              if(data.data.is_type) {
                this.is_type = data.data.is_type
              }else {
                this.is_type = 1
              }
              this.baseForm = data.data
              this.bankAliForm = data.data
              this.bankForm = data.data
            }
          })
      },
      infoSubmitClick(forname){
        this.$refs[forname].validate(valid => {
          if (valid) {
            this.$api.updateBaseInfoData(this.baseForm).then(response =>{
              if(response.code == 200) {
                 this.$Message.success('修改成功')
                  const user = getStore('userInfo');
                  if (this.baseForm.nickname) user.nickname = this.baseForm.nickname
                  if (this.baseForm.mobile) user.mobile = this.baseForm.mobile
                  setStore('userInfo', user) 
                  this.getDetail()
              }else {
                this.$Message.error(response.msg)
                return
              }
            })
          }
        })
      },
      bankAlisubmitClick(forname){
         this.$refs[forname].validate(valid => {
            if (valid) {
              let form = {}
              if(forname == 'bankAliForm') {
                  form = this.bankAliForm
              }else {
                 form =this.bankForm
              }
              this.$api.updateBankAliData(form).then(response =>{
                if(response.code == 200) {
                  this.$Message.success('修改成功')
                  this.getDetail()
                }else {
                  this.$Message.error(response.msg)
                  return
                }
              })
            }
         })
      },
      editPsdSubmitClick(forname){
         this.$refs[forname].validate(valid => {
            if (valid) {
              this.$api.updatePsdData(this.passwordForm).then(response =>{
                if(response.code == 200) {
                  this.$Message.success('修改成功')
                  this.getDetail()
                  this.passwordForm = {}
                }else {
                  this.$Message.error(response.msg)
                  return
                }
              })
            }
         })
      },
      submitClick (mark) {
        this.$refs[mark].validate(valid => {
          if (valid) {
            this.$api.updateReconfirmPsd(this.secondForm)
              .then(response => {
                if(response.code == 200) {
                  this.$Message.success('修改成功')
                  this.getDetail()
                  this.secondForm = {}
                } else {
                  this.$Message.error(response.msg)
                   return
                }
              })
          }
        })
      },
    },
    created() {
      this.getDetail()
    },
  };
</script>
<style>
.staff_list {
    width: 120px;
    margin-top: 15px;
    margin-left: 5px;
    font-size: 15px;
}
.content {
  padding-top: 20px;
}
.ivu-form-item-error .ivu-input-icon {
  color: #80848f !important;
}
.disable_btn {
  background: #e2e2e2 !important;
  border-color: rgba(224, 224, 224, 1) !important;
  color: rgba(51, 51, 51, 1) !important;
}
.account_content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
  height: 37px;
  border-top: 2px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.account_content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
  border-top-color: #3399ff;
}
</style>
