<template>
  <el-dialog :title="dialogTit" :visible.sync="userDialogVisible">
    <el-form
      ref="infoRow"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-col :span="12">
            <el-form-item label="用户名">{{infoRow.account}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号状态">{{type?'黑名单用户':'正常用户'}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机账号">{{infoRow.loginPhone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名">{{infoRow.name}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">{{infoRow.sex==='0'?'男':(infoRow.sex==='1'?'女':'')}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位">{{infoRow.job}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在机构">{{infoRow.comp}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">{{infoRow.linkPhone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱">{{infoRow.email}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在城市">{{cityCaption}}</el-form-item>
          </el-col>
          <el-col :span="24" v-if="type">
            <el-form-item label="拉黑理由" class="el-to-block">
              <div class="textarea-div">{{infoRow.invalidReason}}</div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <div class="headImg" :style="{backgroundImage:'url('+ headUrl +')'}"></div>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="userDialogVisible=false">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item align="right">
            <span v-if='!type'>创建时间: {{infoRow.createTime ? parseTime(infoRow.createTime) : ''}}</span>
            <span v-else>拉黑时间: {{infoRow.invalidTime ? parseTime(infoRow.invalidTime) : ''}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { queryBlackOne } from '@/api/userInfo'
  import { defaultSet, parseTime } from '@/utils'
  import queryBase from '@/utils/queryBase'
  import queryDict from '@/utils/queryDict'
  export default {
    props: ['type'],
    data() {
      return {
        userDialogVisible: false,
        infoRow: '',
        parseTime: parseTime
      }
    },
    computed: {
      dialogTit() {
        return this.type ? '黑名单用户信息' : '用户信息'
      },
      headUrl() {
        return this.infoRow.head || defaultSet.img.user
      },
      cityCaption() {
        const that = this
        var city = ''
        queryDict.applyDict('XZQH', function(dictData) {
          for (let i = 0; i < dictData.length; ++i) {
            if (dictData[i].code === that.infoRow.addr) {
              city = dictData[i].fullCaption
              break
            }
          }
        })
        return city
      }
    },
    methods: {
      queryNormalOne(id) {
        var that = this
        if (id) {
          queryBase.getNormalOne(id, function(sc, value) {
            if (sc) {
              that.infoRow = value
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      },
      queryBlackOne(id) {
        var that = this
        if (id) {
          this.$http.get(queryBlackOne, {
            id: id
          }, function(res) {
            if (res.success) {
              that.infoRow = res.data
            }
          })
          setTimeout(function() {
            that.userDialogVisible = true
          }, 0)
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .form-main{
    width:100%;
  }
  .headImg{
    width: 140px;
    height: 140px;
    background-size: cover;
  }

</style>
