<style>
  .tw_account {
    margin: 40px auto;
    padding: 0 20px;
    width: 100%;
    max-width: 800px;
  }

  .tw_blocktitle {
    font-size: 25px;
    margin-bottom: 15px;
    color: #666;
    font-weight: 400;
  }

  .member-box {
    margin: 0 0 40px;
    width: 100%;
    padding: 30px 30px 40px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
    border-top: 4px solid #00afff;
  }

  .block-title-light {
    font-size: 23px;
    margin:10px 0 30px 0;
    line-height: 0;
    color: #666;
    font-weight: bold;
  }

  .account-group {
    position: relative;
    margin-bottom: 15px;
  }

  .account_labelName {
    margin-bottom: 10px;
    font-size: 15px;
  }

  .regisStar {
    color: red;
  }
  .tw_account .q-field__control {
    height: 46px;
  }
  .tw_account .q-field__control{
    min-height:46px!important;
  }
  .tw_account .q-field__native{
    min-height:46px;
  }
  .tw_account .q-field__marginal{
    height:46px;
  }

</style>
<template>
  <q-page>
    <div class="tw_account">
      <h1 class="tw_blocktitle">帳戶設定({{accountMsg.Account}})</h1>
      <div class="member-box">
        <h2 class="block-title-light">個人資訊</h2>
        <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
          <div class="account-group col-6">
            <div class="account_labelName"><span class="regisStar">*</span>姓名</div>
            <q-input outlined v-model="accountMsg.Name" class="bg-grey-1" />
          </div>
          <div class="account-group col-6">
            <div class="account_labelName">性別</div>
            <q-select filled v-model="accountMsg.Sex" :options="sexArray" emit-value map-options>
            </q-select>
          </div>
        </div>
        <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
          <div class="account-group col-6">
            <div class="account_labelName">手機</div>
            <q-input outlined v-model="accountMsg.Mobile" class="bg-grey-1" />
          </div>
          <div class="account-group col-6">
            <div class="account_labelName"><span class="regisStar">*</span>生日</div>
            <q-input filled v-model="accountMsg.Birthday" mask="date">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <q-date mask="YYYY-MM-DD" v-model="accountMsg.Birthday" @input="() => $refs.qDateProxy.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>
        <div class="account-group">
          <div class="account_labelName">地址</div>
          <q-input outlined v-model="accountMsg.Address" class="bg-grey-1" />
        </div>
        <div class="account-group">
          <q-btn color="primary" style="width:200px;height:50px;margin-top:20px;" @click="SaveBasic" label="儲存變更" />
        </div>
      </div>
      <div class="member-box">
        <h2 class="block-title-light">密碼變更</h2>
        <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
          <div class="account-group col-6">
            <div class="account_labelName">舊密碼</div>
            <q-input outlined v-model="updateMsg.oldPassword" type="password" class="bg-grey-1" />
          </div>
          <div class="account-group col-6">
            <div class="account_labelName">新密碼</div>
            <q-input outlined v-model="updateMsg.newPassword" type="password" class="bg-grey-1" />
          </div>
          <div class="account-group col-6">
            <div class="account_labelName">再輸入一次新密碼</div>
            <q-input outlined v-model="updateMsg.SurePassword" type="password" class="bg-grey-1" />
          </div>
        </div>
        <div class="account-group">
          <q-btn color="primary" style="width:200px;height:50px;margin-top:20px;" @click="SavePwd" label="儲存變更" />
        </div>

      </div>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        accountMsg: {
          AccountId: 0, //账号编号
          Name: "", //姓名
          Account: "", //账号
          Sex: 1, //性别(1-男,2-女)
          Birthday: "", //生日
          Password: "", //密码
          SurePwd: "", //确认密码
          Mobile: "", //联系电话
          Address: "", //地址
        },
        updateMsg: {
          AccountId: 0, //账户编号
          oldPassword: "", //旧密码
          newPassword: "", //新密码
          SurePassword: "", //确认密码
        },
        sexArray: [{
            value: 1,
            label: "男"
          },
          {
            value: 2,
            label: "女"
          },
        ]

      };
    },
    created() {

    },
    mounted() {
      if (localStorage.b2bUser) {
        var b2bUser = JSON.parse(window.localStorage.getItem('b2bUser'))
        if (b2bUser) {
          this.accountMsg.AccountId = b2bUser.accountId;
          this.updateMsg.AccountId = b2bUser.accountId;
          this.getAccountInfo();
        }
      }
    },
    methods: {
      //获取基础信息
      getAccountInfo() {
        this.apipost(
          "b2b_get_GetCustomerAccountService", {
            AccountId: this.accountMsg.AccountId
          },
          res => {
            if (res.data.resultCode == 1) {
              var jsonData = res.data.data;
              this.accountMsg.Account = jsonData.Account;
              this.accountMsg.Address = jsonData.Address;
              this.accountMsg.Birthday = jsonData.Birthday;
              this.accountMsg.Mobile = jsonData.Mobile;
              this.accountMsg.Name = jsonData.Name;
              this.accountMsg.Sex = jsonData.Sex;
            }else if (res.data.resultCode == 10000 || res.data.resultCode == 10001) {
              localStorage.removeItem("b2bUser");
              this.CommonJump('/login', {})
            }
          },
          err => {}
        );
      },
      //保存基础信息
      SaveBasic() {
        if(this.accountMsg.Name==''){
          this.$q.notify({
            type: 'negative',
            message:'请輸入姓名',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if(this.accountMsg.Birthday==''){
          this.$q.notify({
            type: 'negative',
            message:'请选择生日',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        this.$q.loading.show()
        this.apipost(
          "b2b_post_SetCustomerAccountService", this.accountMsg,
          res => {
            this.$q.loading.hide()
            if (res.data.resultCode == 1) {
              this.getAccountInfo();
              this.$q.notify({
                type: 'positive',
                message:'保存成功',
                position:'top',
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              })
            }else if (res.data.resultCode == 10000 || res.data.resultCode == 10001) {
              localStorage.removeItem("b2bUser");
              this.CommonJump('/login', {})
            }
          },
          err => {}
        );
      },
      //修改密码
      SavePwd() {
        if(this.updateMsg.oldPassword==''){
          this.$q.notify({
            type: 'negative',
            message:'请輸入舊密碼',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if(this.updateMsg.newPassword==''){
          this.$q.notify({
            type: 'negative',
            message:'请輸入新密碼',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if(this.updateMsg.SurePassword==''){
          this.$q.notify({
            type: 'negative',
            message:'再輸入一次新密碼',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        if(this.updateMsg.SurePassword!=this.updateMsg.newPassword){
          this.$q.notify({
            type: 'negative',
            message:'两次输入密码不一致',
            position:'top',
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          })
          return;
        }
        this.$q.loading.show()
        this.apipost(
          "b2b_post_ModifyAccountPassowrd", this.updateMsg,
          res => {
            this.$q.loading.hide()
            if (res.data.resultCode == 1) {
              this.$q.notify({
                type: 'positive',
                message:'保存成功',
                position:'top',
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              })
            }else if (res.data.resultCode == 10000 || res.data.resultCode == 10001) {
              localStorage.removeItem("b2bUser");
              this.CommonJump('/login', {})
            }
          },
          err => {}
        );
      },
    },
  };

</script>
