<template>
  <div class="account-detail">
    <el-descriptions :column="2">
      <div slot="title" style="flex:1" class="flex-align-center flex-between">
        <p>联系人信息</p>
        <div>
          <slot name="edit" :data="infos"></slot>
          <slot name="del" :data="infos"></slot>
        </div>
      </div>
      <el-descriptions-item label="联系人">{{infos.name}}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{infos.phonenumber}}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{infos.idcard}}</el-descriptions-item>
      <el-descriptions-item label="性别">{{infos.sex === 0?'男':'女'}}</el-descriptions-item>
      <el-descriptions-item label="生日">{{infos.birthday}}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{infos.email}}</el-descriptions-item>
      <el-descriptions-item label="备注">
        {{infos.remarks}}
      </el-descriptions-item>
    </el-descriptions>
    <!-- <el-divider></el-divider> -->
    <el-descriptions title="账号信息" :column="1" style="margin-top:10px">
      <el-descriptions-item label="账 号">{{infos.accountno}}</el-descriptions-item>
      <!-- <el-descriptions-item label="密 码">{{infos.password}}</el-descriptions-item> -->
      <el-descriptions-item label="启 用">{{infos.status === 'ACTIVE'?'启用':'停用'}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions style="margin-top:10px">
      <div slot="title" style="flex:1" class="flex-align-center flex-between">
        <p>角色信息</p>
        <div>
          <slot name="role" :data="infos"></slot>
        </div>
      </div>
    </el-descriptions>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for = "site in infos['usersite']" :key="site.usersiteid" :label="site.sitename" :name="site.index">
        <el-table
          :data="site['userrole']"
          style="width: 100%"
          size="mini"
          stripe
          border
          :header-cell-style="{background:'#f1f2f3',color:'#333'}">
          <el-table-column
            prop="rolename"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="描述">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      infos:{},
      activeName:0
    }
  },
  methods:{
    queryAccountMain (row) {
      this.$api.requested({
        "classname": "webmanage.users.users",
        "method": "query_userMain",
        "content": {
          "userid":row.userid
        }
      }).then(res=>{
        this.infos = Object.assign({},this.infos,res.data[0])
        // this.querySite()
      })
    },
  }
}

</script>
<style>
.account-detail .el-descriptions__header {
  display: block !important;
}
</style>