<template>
  <div>
    <el-form class="mrb40" v-model="user" v-form="{formItemAlign: 'left'}" label-width="80px">
      <ht-h6 class="text-color" type="primary">基本信息</ht-h6>
      <el-row :gutter="20">
        <el-col :span="24">
          <ht-form-item class="mrb26" label="用户头像">
            <el-avatar class="avatar-wrap" :size="64"  :src="photoUrl">
              <img :src="photoUrl" />
            </el-avatar>
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="姓名">{{user.fullname || '-'}}</ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="账号">{{user.account || '-'}}</ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="手机">{{user.mobile || '-'}}</ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="邮箱">{{user.email || '-'}}</ht-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-show="showMore">
        <el-col :span="12">
          <ht-form-item label="性别">{{user.sex || '-'}}</ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="状态">
            <span :class="{'success': user.status == 1, 'danger': user.status == 0}">
              {{ user.status == 0 ? '禁用' : user.status == 1 ? '正常' : user.status == -2 ? '离职' : '-' }}
            </span>
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="地址">{{user.address || '-'}}</ht-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <ht-form-item label="角色">
            <template v-if="user.roleName">
              <el-tag v-for="roleName in user.roleName.split('|')" :key="roleName">{{roleName}}</el-tag>
            </template>
          </ht-form-item>
        </el-col> -->
      </el-row>
      <div class="check-more" @click="handleMore">
        查看更多属性
        <i class="el-icon-d-arrow-right" :style="{transform: showMore ? 'rotate(-90deg)' : 'rotate(90deg)'}"></i>
      </div>
    </el-form>
    <el-form class="mrb22" v-form="{formItemAlign: 'left'}" label-width="80px">
      <ht-h6 class="text-color" type="primary">用户参数</ht-h6>
      <!-- <el-row :gutter="20">
        <el-col :span="12" v-for="item in user.userParams" :key="item.key">
          <ht-form-item :label="item.name">
            <span v-if="item.ctlType == 'select' || item.ctlType == 'checkbox' || item.ctlType == 'radio'">{{item.json|formateJson}}</span>
            <span v-else-if="item.ctlType == 'date'">{{user.userParam && user.userParam[item.code]|dateFormat}}</span>
            <span v-else>{{user.userParam && user.userParam[item.code] || '-'}}</span>
            
          </ht-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="20" class="row-wrap">
                <el-col :span="12" v-for="param in user.userParams" :key="param.key">
                  <ht-form-item
                    :title="param.name"
                    :label="param.name"
                    prop="name"
                    label-width="90px"
                  >
                    <el-date-picker
                      v-model="user.userParam[param.code]"
                      type="datetime"
                      placeholder="选择日期时间"
                      disabled
                      class="width-wrap"
                      v-if="param.ctlType === 'date'"
                    ></el-date-picker>
                    <ht-input
                      v-model="user.userParam[param.code]"
                      disabled
                      v-if="param.ctlType === 'input'"
                    />
                    <ht-input
                      type="number"
                      v-model="user.userParam[param.code]"
                      disabled
                      v-if="param.ctlType === 'number'"
                      class="input-number_wrap"
                      width="170px"
                    />
                    <ht-select
                      v-model="user.userParam[param.code]"
                      disabled
                      v-if="param.ctlType === 'select' && param.json"
                      :options="JSON.parse(param.json)"
                      class="width-wrap"
                    />
                    <ht-radio
                      v-model="user.userParam[param.code]"
                      disabled
                      v-if="param.ctlType === 'radio' && param.json"
                      :options="JSON.parse(param.json)"
                    />
                    <ht-checkbox
                      v-model="user.userParam[param.code]"
                      disabled
                      v-if="param.ctlType === 'checkbox' && param.json"
                      :options="JSON.parse(param.json)"
                    />
                  </ht-form-item>
                </el-col>
              </el-row>
    </el-form>
    <el-form class="mrb40">
      <ht-h6 class="text-color" type="primary">所属角色</ht-h6>
      <el-table :data="roleList" border style="width: 100%">
        <ht-table-column type="index" width="50" align="left" label="序号" />
        <ht-table-column prop="name" align="left" label="角色名称" />
        <ht-table-column prop="code" align="left" label="编码" />
      </el-table>
    </el-form>
    <div class="mrb40">
      <ht-h6 class="text-color" type="primary">所属岗位信息</ht-h6>
      <el-table :data="user.orgPostList" border style="width: 100%">
        <ht-table-column type="index" width="50" align="left" label="序号" />
        <ht-table-column prop="orgName" align="left" label="所属组织" />
        <ht-table-column prop="postName" align="left" label="所属岗位">
          <template v-slot="{row}">
            <span>{{row.postName || '-'}}</span>
          </template>
        </ht-table-column>
        <ht-table-column prop="isMaster" align="left" label="主组织/主岗位" width="140">
          <template v-slot="{row}">
            <span type="danger">{{row.isMaster=='0' ? '否' : row.isMaster=='1' ? '是' : '-'}}</span>
          </template>
        </ht-table-column>
      </el-table>
    </div>
    <el-form class="mrb22" v-form="{formItemAlign: 'left'}" label-width="80px">
      <ht-h6 class="text-color" type="primary">签章信息</ht-h6>
      <el-row :gutter="20">
        <el-col :span="12">
          <ht-form-item label="签章">
            <el-image
              class="el-image"
              :src="user && user.electronicSealPic"
              v-if="user.electronicSealPic"
              />
              <span v-else>-</span>
          </ht-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import moment from 'moment'
import uc from '@/api/uc'
export default {
  name: "user-detail",
  props: ["user"],
   data() {
    return {
     photoUrl:require('@/assets/img/defaultPhoto.jpg'),
     showMore: false,
     roleList:[]
    }
  },
  watch:{
    'user.id':{
      handler(val){
        if(val){
          this.getRoleList()
        }
      },
      immediate:true
    }
  },
  mounted(){
    if(this.user.photo){
      this.$store.dispatch("menu/downloadImg", this.user.photo).then(res => {
      if (res != "") {
        this.photoUrl =  res;
      }});
    }
    
  },
  filters: {
    formateJson(arr) {
      return arr && arr.map(item => item.value).join('/');
    },
    dateFormat(val) {
      return moment(val).format('YYYY-MM-DD') || '-';
    }
  },
  methods: {
    phonoError(e) {
      this.user.photo = "/img/defaultPhoto.jpg";
    },
    handleMore() {
      this.showMore = !this.showMore;
    },
    getRoleList(){
      uc.getRoleListByUserId(this.user.id).then(res=>{
        if(res&&res.data){
          this.roleList = res.data
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.text-color {
  margin: 0 0 24px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  &:before {
    border-radius: 0;
    height: 16px;
    top: 3px;
  }
}
.avatar-wrap {
  position: absolute;
  top: -16px;
}
.success {
  color: #51B43A;
}
.danger {
  color: #E55555;
}
.check-more {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 26px;
  cursor: pointer;
}
.mrb40 {
  margin-bottom: 40px;
}
.mrb22 {
  margin-bottom: 22px;
}
.mrb26 {
  margin-bottom: 26px;
}

.row-wrap {
  /deep/ .el-form-item__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .inputs.ht-form-inputs__inline,.el-input-number .el-input,.el-date-editor.el-input {
    width: 170px;
  }
}

</style>