<template>
  <el-dialog :title="dialogTit" :visible.sync="userDialogVisible">
    <el-form
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">{{infoRow.account}}</el-form-item>
        </el-col>
        <el-col :span="12" v-if="infoPullId">
          <el-form-item label="真实姓名">{{infoRow.name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机账号">{{infoRow.loginPhone}}</el-form-item>
        </el-col>
        <el-col :span="12" v-if="infoPullId">
          <el-form-item label="性别">{{infoRow.sex==='0'?'男':(infoRow.sex==='1'?'女':'')}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在机构">{{infoRow.comp}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="infoPullId" class="is-required" label="拉黑理由">
            <el-input type="textarea" :rows="5" v-model="reason" placeholder="请用一句话概括该用户拉黑理由" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item v-else label="拉黑理由" class="el-to-block">
              <div class="textarea-div">{{infoRow.invalidReason}}</div>
            </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button v-if="infoPullId" type="primary" @click="submitForm">确定</el-button>
            <el-button v-else type="primary" @click="userDialogVisible=false">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24" v-if="!infoPullId">
          <el-form-item align="right">
            <span>拉黑时间: {{invalidTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { blackUser, queryBlackOne } from '@/api/userInfo'
  import queryBase from '@/utils/queryBase'
  import { parseTime } from '@/utils/index'

  export default {
    data() {
      return {
        infoPullId: '',
        userDialogVisible: false,
        infoRow: '',
        reason: ''
      }
    },
    computed: {
      dialogTit() {
        return this.infoPullId ? '拉黑用户' : '拉黑理由'
      },
      invalidTime() {
        return this.infoRow.invalidTime ? parseTime(this.infoRow.invalidTime) : ''
      }
    },
    methods: {
      queryNormalOne(id) {
        var that = this
        that.infoPullId = id
        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)
        }
      },
      submitForm() {
        var that = this
        if (this.reason.length === 0) {
          this.$message('请填写该需求关闭理由')
          return
        }
        this.$http.post(blackUser, {
          id: that.infoPullId,
          reason: that.reason
        }, function(res) {
          if (res.success) {
            if (res.data === 0) {
              that.$message('该用户已经被拉黑，不允许操作')
            } else {
              that.$parent.pageQueryUser()
            }
            that.userDialogVisible = false
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .form-main{
    width:100%;
    .form-line{
      border-top:1px dashed #ccc;
      margin-bottom:20px;
    }
  }    
</style>
