<template>
  <div class="ele-body">
    <el-row :gutter="24">
      <el-col>
        <el-card shadow="never" body-style="padding: 20px;">
          <el-tabs v-model="active" class="user-info-tabs">
            <el-tab-pane label="基本信息" name="info">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="300px"
                style="padding: 34px 20px 0 20px"
                @keyup.enter.native="save"
                @submit.native.prevent
              >
                <el-form-item label="姓名:" prop="username">
                  <div> {{ form.username }} </div>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                  <div class="phone-container">
                    {{ form.phone }}
                    <el-button
                      type="primary"
                      size="small"
                      style="margin-left: 10px"
                    >
                      换绑
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item label="工号:">
                  <div class="phone-container">
                    {{ form.userCode }}
                  </div>
                </el-form-item>
                <el-form-item label="城市:">
                  <div class="phone-container">
                    {{ form.cityName }}
                  </div>
                </el-form-item>
                <el-form-item label="机构:">
                  <div class="phone-container">
                    {{ form.orgName }}
                  </div>
                </el-form-item>
                <el-form-item label="中心:">
                  <div class="phone-container">
                    {{ form.centerNumber }}
                  </div>
                </el-form-item>
                <!--
                <el-form-item label="经营区域:">
                  <div class="phone-container"> {{ form.cityName }} </div>
                </el-form-item>
                -->
                <!--
                <el-form-item label="团队长:">
                  <div class="phone-container"> 222 </div>
                </el-form-item>
                -->
                <!--
                <el-form-item>
                  <el-button type="primary" :loading="loading" @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
                -->
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="提现信息" name="cashInfo">
              <el-form
                ref="form2"
                :model="form2"
                :rules="rule2"
                label-width="300px"
                style="padding: 34px 20px 0 20px"
                @keyup.enter.native="save"
                @submit.native.prevent
              >
                <el-form-item label="姓名:">
                  {{ form.username }}
                </el-form-item>
                <el-form-item label="手机号:">
                  {{ form.phone }}
                </el-form-item>
                <el-form-item label="身份证正反面:" prop="cardImg">
                  <el-row>
                    <el-col :md="6" :sm="12">
                      <upload-img v-model="form2.cardA" :images="form2.cardA" />
                      <div style="margin-left: 12px">身份证正面</div>
                    </el-col>
                    <el-col :md="6" :sm="12">
                      <upload-img v-model="form2.cardB" :images="form2.cardB" />
                      <div style="margin-left: 12px">身份证反面</div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="身份证号:" prop="cardId">
                  <el-input
                    placeholder="请输入身份证号"
                    v-model="form2.cardId"
                  />
                </el-form-item>
                <el-form-item label="银行卡号:" prop="bankCardNum">
                  <el-input
                    placeholder="请输入银行卡号"
                    v-model="form2.bankCardNum"
                  />
                </el-form-item>
                <el-form-item label="银行开户行:" prop="bankName">
                  <el-input
                    placeholder="请输入银行开户行"
                    v-model="form2.bankName"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    :loading="loading"
                    @click="saveCardInfo"
                  >
                    保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { updateUserInfo, getUserInfo } from '@/api/user/userinfo';
  import UploadImg from '@/components/UploadImg/index.vue';

  export default {
    name: 'UserProfile',
    components: { UploadImg },
    data() {
      return {
        // tab页选中
        active: 'info',
        // 表单数据
        form: {
          username: '',
          phone: '',
          cityName: '',
          centerNumber: '',
          userCode: '',
          orgName: ''
        },
        // 表单验证规则
        rules: {
          nickname: [
            {
              required: true,
              message: '请输入昵称',
              trigger: 'blur'
            }
          ],
          sex: [
            {
              required: true,
              message: '请选择性别',
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            }
          ]
        },
        // 保存按钮loading
        loading: false,
        // 是否显示裁剪弹窗
        visible: false,
        form2: {
          cardA: [],
          cardB: [],
          cardId: '',
          bankCardNum: '',
          bankName: ''
        },
        rule2: {
          // cardImg: [
          //   {
          //     required: true,
          //     message: '请上传身份证正面',
          //     trigger: 'blur'
          //   }
          // ],
          cardId: [
            {
              required: true,
              message: '请输入身份证号',
              trigger: 'blur'
            }
          ],
          bankCardNum: [
            {
              required: true,
              message: '请输入银行卡号',
              trigger: 'blur'
            }
          ],
          bankName: [
            {
              required: true,
              message: '请输入银行开户行',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    computed: {
      // 登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      },
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      Object.assign(this.form, this.loginUser);
      this.loadUserInfo();
    },
    methods: {
      loadUserInfo() {
        getUserInfo()
          .then((res) => {
            console.log(res);
            Object.assign(this.form2, res);
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      /* 保存更改 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.$message.success('保存成功');
            this.updateLoginUser(this.form);
          }, 800);
        });
      },
      saveCardInfo() {
        this.$refs.form2.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          updateUserInfo({ ...this.form2 })
            .then((res) => {
              this.loading = false;
              this.$message.success(res);
              this.loadUserInfo();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      /* 修改登录用户 */
      updateLoginUser(data) {
        this.$store.dispatch('user/setInfo', { ...this.loginUser, ...data });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    padding-bottom: 0;
  }
</style>
