<template>
  <div class="app-container page-nesting" style="position: relative">
    <!-- 左侧start -->

    <el-card class="box-card grid-content treeDom roleLeft">
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
        </div>
      </template>
      <div class="text item">
        <span class="text-left">租户名称：</span>
        <span class="text-right">{{tenantName}}</span>
      </div>
      <div class="text item">
        <span class="text-left">管理员：</span>
        <span class="text-right">{{nickName}}</span>
      </div>
      <div class="text item">
        <span class="text-left">管理员手机号：</span>
        <span class="text-right">{{phonenumber}}</span>
      </div>
      <div class="text item">
        <span class="text-left">系统平台：</span>
        <span class="text-right">智慧电力</span>
      </div>
      <div class="text item">
        <span class="text-left">地址：</span>
        <span class="text-right">{{address}}</span>
      </div>
      <div class="text item">
        <span class="text-left">到期时间：</span>
        <span class="text-right">{{tenantTerm}}</span>
      </div>
    </el-card>

    <!-- 左侧end -->

    <!-- 右侧start -->
    <el-card class="box-card grid-content nestingDom">
      <template #header>
        <div class="card-header">
          <span>基本资料</span>
          <!-- <el-button class="button" type="text">Operation button</el-button> -->
        </div>
      </template>

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="个人信息" name="first">
          <el-form :model="form" :rules="rules" label-width="120px">
            <el-form-item label="租户名称" prop="name">
              <el-input v-model="form.name" disabled />
            </el-form-item>
            <el-form-item label="管理员" prop="administrators">
              <el-input v-model="form.administrators" />
            </el-form-item>
            <el-form-item label="管理员手机号" prop="phone">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form :model="form2" :rules="rules2" label-width="120px">
            <el-form-item label="账号" prop="account">
              <el-input v-model="form2.account" disabled />
            </el-form-item>
            <el-form-item label="原密码" prop="oldPass" type="password">
              <el-input v-model="form2.oldPass" show-password />
            </el-form-item>
            <el-form-item label="密码" prop="pass" type="password">
              <el-input v-model="form2.pass" show-password />
            </el-form-item>
            <el-form-item label="再次输入" prop="passAgain" type="password">
              <el-input v-model="form2.passAgain" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 右侧end -->
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, reactive } from 'vue'
import * as api from '@/api/user.js'
// import { ElMessage } from 'element-plus'

import { useStore } from 'vuex'

export default defineComponent({
  components: {},
  setup() {
    const activeName = ref('first')

    const store = useStore()

    const tenantName = ref('')
    const phonenumber = ref('')
    const nickName = ref('')
    const address = ref('') 
    const tenantTerm = ref('') 

    const form = reactive({
      name: '西游科技有限公司',
      administrators: '孙悟空',
      phone: '13255666666',
      address: '上海市青浦区徐泾镇徐乐路208号',
    })
    const form2 = reactive({
      account: 'admin',
      oldPass: '',
      pass: '',
      passAggin: '',
    })

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if(!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(value)){
         callback(new Error('请输入6-18位特殊字符、字母、数字组合的密码'))

      }else {
        if (this.ruleForm.confirmPwd !== '') {
          this.$refs.ruleForm.validateField('confirmPwd')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('请再次输入密码'))
        
      } else if (value !== form2.pass) {
       
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    //根据不同的域名，显示不同的title和背景图
    function getUserData() {
      api
        .getUserData({
         
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
             console.log('request')
             tenantName.value=requset.data[0].tenantName
             phonenumber.value=requset.data[0].phonenumber
             nickName.value=requset.data[0].nickName
             address.value=requset.data[0].address 
               tenantTerm.value=requset.data[0].tenantTerm 

    
            // console.log(request)
            // this.backdropUrl = requset.data[0].loginBackUrl
            // this.companyName = requset.data[0].loginTitle
          } else {
            alert(requset.msg)
          }
        })
    }

    onMounted(() => {
      getUserData()
    })

    return {
      store,
      getUserData,
      tenantName,
      phonenumber,
      nickName,
      address,
      tenantTerm,
      activeName,
      form,
      form2,
      rules: {
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        administrators: [
          { required: true, message: '请输入管理员', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入管理员手机号', trigger: 'blur' },
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
      },
      rules2: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        oldPass: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
        passAgain: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true },
        ],
      },
    }
  },
})
</script>

<style scoped lang="scss">
// start

.nestingDom {
  margin-left: 285px;
}
.treeDom {
  width: 270px;
  position: absolute;
  left: 0;
  height: calc(100vh - 140px);
}
.grid-content {
  background: #fff;
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.app-container.page-nesting {
  padding: 0;
  background: rgba(0, 0, 0, 0);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  // width: 480px;
}

::v-deep .el-card__body {
  padding: 15px;
}
::v-deep .el-card__header {
  padding: 14px 15px 7px !important;
}
::v-deep .item {
  padding: 11px 0;
  border-bottom: 1px solid #e7eaec;
  margin: 0;
}

.text-left {
  width: 98px;
}
.text-right {
  width: calc(100% - 98px);
}
.text-left,
.text-right {
  display: inline-block;
  vertical-align: top;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-form-item {
  margin: 20px 0 !important;
  max-width: auto;
}
.el-form-item__content {
  width: calc(100% - 120px) !important;
}
// end

// .el-button + .el-button {
//   margin-left: 0;
// }

// .el-input__inner {
//   border-radius: 20px !important;
// }
</style>