<template>
  <el-dialog class="dialog" :visible.sync="dialogVisible" center title="详情"
             append-to-body @close="onClose" top="8vh" width="820px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">{{ data.nickname }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ data.phone }}</el-descriptions-item>
      <el-descriptions-item label="技能" :span="2">{{ data.skillList.join("、") }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ data.gender === 1 ? '男' : '女' }}</el-descriptions-item>
      <el-descriptions-item label="添加时间">{{ data.createTime | dateFormat("yyyy-MM-dd") }}</el-descriptions-item>
      <el-descriptions-item label="用户头像" :span="2">
        <el-avatar :src="data.avatarUrl"></el-avatar>
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer">
      <el-button @click="onCancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "dialogDetail",
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: Object,
      required: true
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {}
  },

  mounted() {
  },

  methods: {
    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 关闭
    onClose() {
      this.$emit("close");
    }
  }
}
</script>

<style scoped lang="scss">
.h40-center {
  height: 40px;
  display: flex;
  align-items: center;
}

.label {
  line-height: 40px;
}
</style>
