<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div class="container">
                <Spin fix v-if="spinShow"></Spin>
                <Row :gutter="25">
                    <Col span="10" offset="2">
                        <span class="title">用户名称：</span>
                        <span class="content">{{formItem.name}}</span>
                    </Col>
                    <Col span="10" offset="2">
                        <span class="title">登录账号：</span>
                        <span class="content">{{formItem.login_name}}</span>
                    </Col>
                </Row>
                <Row :gutter="25">
                    <Col span="10" offset="2">
                        <span class="title">手机：</span>
                        <span class="content">{{formItem.mobile}}</span>
                    </Col>
                    <Col span="10" offset="2">
                        <span class="title">邮箱：</span>
                        <span class="content">{{formItem.email ? formItem.email : '无'}}</span>
                    </Col>
                </Row>
                <Row :gutter="25">
                    <Col span="10" offset="2">
                        <span class="title">级别：</span>
                        <span class="content">
                        <span v-if="formItem.user_type === '1'">超级管理员</span>
                        <span v-if="formItem.user_type === '2'">机构管理员</span>
                        <span v-if="formItem.user_type === '3' || formItem.user_type === ''">普通员工</span>
                    </span>
                    </Col>
                    <Col span="10" offset="2">
                        <span class="title">是否可用：</span>
                        <span class="content">
                        <Icon v-if="formItem.login_flag === '0'" color="#F05050" size="20" type="md-close" />
                        <Icon v-if="formItem.login_flag === '1'" color="#27C24C" size="20" type="md-checkmark" />
                    </span>
                    </Col>
                </Row>
                <Row :gutter="25">
                    <Col span="20" offset="2">
                        <span class="title">拥有权限：</span>
                        <span class="content">
                        <Tag size="large" v-for="item in formItem.rolelist" :key="item.id" :name="item.name" >{{item.name}}</Tag>
                    </span>
                    </Col>
                </Row>
                <Row :gutter="25">
                    <Col span="20" offset="2">
                        <span class="title">备注：</span>
                        <span class="content">{{formItem.remarks ? formItem.remarks : '无'}}</span>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Row type="flex" justify="space-between">
                    <Col class="footer-tip" span="10">
                        <span>最新修改时间：</span>
                        <span>{{formItem.create_date}}</span>
                    </Col>
                    <Col span="4">
                        <Button type="text" @click="handleClose">关闭</Button>
                    </Col>
                </Row>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getById
} from '../../../../../api/system/sys-staff-manager'

export default {
  name: 'infoModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return '用户信息'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataId: {
      type: String,
      default: () => {
        return ''
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      spinShow: false,
      formItem: {}
    }
  },
  methods: {
    init () {
      if (this.dataId === '') {
        this.formItem = this.dataObj
      } else {
        this.getById({ contain_role: '1', id: this.dataId })
      }
    },
    getById (data) {
      this.spinShow = true
      getById(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = data.data
          this.spinShow = false
        } else {
          this.spinShow = false
          this.error(data)
        }
      })
    },
    handleClose () {
      this.$emit('showOption')
    }
  },
  mounted () {
    this.init()
  },
  computed: {
  }
}
</script>

<style scoped>
    .container {
        position: relative;
    }
    /deep/ .ivu-row {
        margin-bottom: 10px;
    }
    .title {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        width: 100px;
    }
    .content {
        font-size: 16px;
    }
    .footer-tip {
        font-size: 16px;
        text-align: left;
    }
</style>
