<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入姓名"
          style="width: 150px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <!-- <el-select
          v-model="query.sex"
          filterable
          clearable
          size="small"
          placeholder="请选择性别"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in optionsObj.Sex"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-select
          v-model="query.type"
          filterable
          clearable
          size="small"
          placeholder="请选择人员类型"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in optionsObj.PersonType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-cascader
          v-model="query.department"
          :options="optionsObj.Department"
          :props="{ checkStrictly: true, emitPath: false }"
          filterable
          clearable
          size="small"
          placeholder="请选择部门"
          style="width: 150px"
          class="filter-item"
        />
        <el-select
          v-model="query.position"
          filterable
          clearable
          size="small"
          placeholder="请选择职位"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in optionsObj.Position"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="query.labelStr"
          clearable
          size="small"
          placeholder="输入标签MAC或名称"
          style="width: 170px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.oneKeyAlarm"
          clearable
          size="small"
          placeholder="请选择一键报警"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option label="开启" :value="true" />
          <el-option label="关闭" :value="false" />
        </el-select>
        <el-select
          v-model="query.positioningOnline"
          clearable
          size="small"
          placeholder="请选择定位状态"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in 2"
            :key="item"
            :label="item == '1' ? '在线' : '离线'"
            :value="item == '1' ? true : false"
          />
        </el-select>
        <el-select
          v-model="query.commOnline"
          clearable
          size="small"
          placeholder="请选择通讯状态"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in 2"
            :key="item"
            :label="item == '1' ? '在线' : '离线'"
            :value="item == '1' ? true : false"
          />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!-- 报警设置 -->
    <el-dialog
      class="handle-record"
      width="700px"
      title="报警设置"
      :visible.sync="alarmInfoVisable"
    >
      <el-form size="small" label-width="70px">
        <el-row>
          <el-col
            :span="3"
            style="
              font-size: 14px;
              color: #606266;
              font-weight: 600;
              text-align: center;
              padding-top: 6px;
            "
          >
            区域报警
          </el-col>
          <el-col :span="21">
            <div v-for="item in personAreaAlarmConfigList" :key="item.areaId">
              <el-row>
                <el-col
                  :span="3"
                  style="
                    font-size: 14px;
                    color: #606266;
                    font-weight: 600;
                    text-align: center;
                    padding-top: 8px;
                  "
                >
                  <span>{{ item.areaName + '：' }}</span>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="进入报警" prop="crossInAlarm" label-width="80px">
                    <el-switch
                      v-model="item.crossInAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="离开报警" prop="crossOutAlarm" label-width="80px">
                    <el-switch
                      v-model="item.crossOutAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="滞留报警" prop="overstayAlarm" label-width="80px">
                    <el-switch
                      v-model="item.overstayAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="静止报警" prop="actionlessAlarm" label-width="80px">
                    <el-switch
                      v-model="item.actionlessAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="3"
            style="
              font-size: 14px;
              color: #606266;
              font-weight: 600;
              text-align: center;
              padding-top: 6px;
            "
          >
            围栏报警
          </el-col>
          <el-col :span="21">
            <div v-for="item in personRailAlarmConfigList" :key="item.railId">
              <el-row>
                <el-col
                  :span="3"
                  style="
                    font-size: 14px;
                    color: #606266;
                    font-weight: 600;
                    text-align: center;
                    padding-top: 8px;
                  "
                >
                  <span>{{ item.railName + '：' }}</span>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="进入报警" prop="crossInAlarm" label-width="80px">
                    <el-switch
                      v-model="item.crossInAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="离开报警" prop="crossOutAlarm" label-width="80px">
                    <el-switch
                      v-model="item.crossOutAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="滞留报警" prop="overstayAlarm" label-width="80px">
                    <el-switch
                      v-model="item.overstayAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="静止报警" prop="actionlessAlarm" label-width="80px">
                    <el-switch
                      v-model="item.actionlessAlarm"
                      active-color="#409EFF"
                      inactive-color="#F56C6C"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="crud.status.cu === 2" type="primary" @click="submitAlarmInfo"
          >保 存</el-button
        >
        <el-button @click="alarmInfoVisable = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="900px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select
                v-model="form.sex"
                filterable
                clearable
                size="small"
                placeholder="请选择性别"
                class="filter-item"
                style="width: 100%"
              >
                <el-option
                  v-for="item in optionsObj.Sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="department">
              <el-cascader
                v-model="form.department"
                :options="optionsObj.Department"
                :props="{ checkStrictly: true, emitPath: false }"
                filterable
                size="small"
                placeholder="请选择部门"
                style="width: 100%"
                class="filter-item"
              />
            </el-form-item>
            <el-form-item label="民族" prop="ethnicity">
              <el-select
                v-model="form.ethnicity"
                filterable
                size="small"
                placeholder="请选择"
                class="filter-item"
                style="width: 100%"
              >
                <el-option
                  v-for="item in optionEthnicity"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件类型" prop="idType">
              <el-select
                v-model="form.idType"
                filterable
                size="small"
                placeholder="请选择"
                class="filter-item"
                style="width: 100%"
              >
                <el-option
                  v-for="item in optionIdType"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="idNumber">
              <el-input v-model="form.idNumber" />
            </el-form-item>
            <el-form-item label="标签MAC" prop="labelId">
              <el-select
                v-model="form.labelId"
                filterable
                clearable
                size="small"
                placeholder="请选择标签"
                class="filter-item"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="item in optionsLabel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="人员类型" prop="type">
              <el-select
                v-model="form.type"
                filterable
                size="small"
                placeholder="请选择类型"
                class="filter-item"
                style="width: 100%"
              >
                <el-option
                  v-for="item in optionsObj.PersonType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
              <el-input v-model="form.companyName" />
            </el-form-item>
            <el-form-item label="职位" prop="position">
              <el-select
                v-model="form.position"
                filterable
                size="small"
                placeholder="请选择职位"
                class="filter-item"
                style="width: 100%"
              >
                <el-option
                  v-for="item in optionsObj.Position"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="请选择日期"
                size="small"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" />
            </el-form-item>
            <el-form-item label="联系电话" prop="telephone">
              <el-input v-model="form.telephone" />
            </el-form-item>
            <el-form-item label="一键报警" prop="oneKeyAlarm">
              <el-switch
                v-model="form.oneKeyAlarm"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="true"
                :inactive-value="false"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="" label-width="60px">
              <el-upload
                class="avatar-uploader"
                :action="VUE_APP_BASE_API + '/file/uploadFile'"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :on-error="handleUploadError"
                :on-remove="handleUploadRemove"
                :data="{ fileModule: 1 }"
                :file-list="fileList"
                :headers="{ token }"
                accept=".jpg,.jpeg,.gif,.png"
              >
                <img
                  v-if="form.photoPath"
                  :src="VUE_APP_BASE_API + form.photoPath"
                  class="avatar"
                />
                <img v-else src="/static/images/default.png" class="avatar" />
                <div style="height: 0">
                  <el-button style="position: relative; top: 20px" size="small" type="primary">
                    点击上传
                  </el-button>
                </div>

                <div style="margin-top: 20px; line-height: 20px" slot="tip" class="el-upload__tip">
                  只能上传 jpg / jpeg / gifx / png 文件，<br />且不超过 5 MB
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="item in visitorsTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      ></el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'visitors:edit', 'visitors:del'])"
        label="操作"
        width="260px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div style="display: flex">
            <el-button
              v-permission="['admin', 'visitors:edit']"
              type="danger"
              size="mini"
              @click="setAlarmInfo(scope.row)"
              style="margin-right: 10px"
              >报警设置</el-button
            >
            <udOperation
              :data="scope.row"
              :permission="permission"
              :disabledDle="scope.row.userName == 'admin'"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudPerson from '@/api/system/person'
import { getOptions } from '@/api/system/public'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import { visitorsTableOptions } from '../tableConfig'
import { getToken } from '@/utils/auth'
import { initData } from '@/api/data'

const defaultForm = {
  id: null,
  name: '',
  workNo: '',
  type: null,
  typeName: '',
  iconPath: '',
  department: null,
  departmentName: '',
  position: null,
  positionName: '',
  sex: '',
  sexName: '',
  labelId: null,
  labelMAC: '',
  photoPath: '', //照片链接
  oneKeyAlarm: true,
  oneKeyAlarmStr: '',
  entryTime: '',
  birthday: '',
  age: null,
  politicalStatus: '',
  politicalStatusStr: '',
  ethnicity: '',
  ethnicityStr: '',
  idType: '',
  idTypeStr: '',
  idNumber: '',
  telephone: '',
  officePhone: '',
  email: '',
  healthCondition: '',
  healthConditionStr: '',
  education: '',
  educationStr: '',
  speciality: '',
  registeredPermanent: '',
  contactAddress: '',
  zipCode: '',
  startWorkTime: '',
  jobTitle: '',
  duty: '',
  dutyOfWork: '',
  workExperience: '',
  positioningOnline: true,
  positioningOnlineStr: '',
  commOnline: true,
  commOnlineStr: '',
  userName: '',
  isSystem: 0,
  userStatus: 0,
  isOnline: 0,
  userRemark: '',
  isLogin: true,
  isLoginStr: '',
  personAlarmConfigList: [], //报警配置
  locationData: {},
  onOneKeyAlarm: true,
  onCrossInAlarm: true,
  onCrossOutAlarm: true,
  onOverstayAlarm: true,
  onRailAlarm: [],
  onactionlessAlarm: true,
  userName: '',
  isSystem: 0,
  userStatus: 1,
  userRemark: '',
  companyName: '',
}

export default {
  name: 'Person',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker },
  cruds() {
    return CRUD({
      title: '访客管理',
      url: 'system/person/getPageListJson',
      listOrder: [],
      crudMethod: { ...crudPerson },
      optShow: { add: true, edit: true, del: true, reset: true, import: true, export: true },
      params: {
        typeBelong: 2,
      },
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  data() {
    return {
      visitorsTableOptions,
      viewLoading: false,
      alarmInfoVisable: false,
      permission: {
        add: ['admin', 'visitors:add'],
        edit: ['admin', 'visitors:edit'],
        del: ['admin', 'visitors:del'],
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        //sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        type: [{ required: true, message: '请选择人员类型', trigger: 'blur' }],
        department: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        position: [{ required: true, message: '请选择职位', trigger: 'blur' }],
      },
      personRailAlarmConfigList: [],
      personAreaAlarmConfigList: [],
      optionsObj: {
        Sex: [],
        PersonType: [],
        Department: [],
        Position: [],
      },
      optionEthnicity: [],
      optionIdType: [],
      optionsLabel: [],
      fileList: [],
      token: getToken() ?? '',
      popUserDel: false,
      userForm: {
        personId: '',
        userName: '',
        password: '',
        userStatus: 1,
        isSystem: 0,
        remark: '',
      },
      alarmForm: {
        personAlarmConfigList: [], //报警配置
      },
    }
  },
  created() {
    this.getOptions()
    this.getRailData()
    this.getAreaData()
    this.getDictDOptions('151')
    this.getDictDOptions('150')
  },
  methods: {
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU]() {},
    [CRUD.HOOK.beforeToAdd]() {
      // console.log(this.form.id)
      this.getLabelOptions(this.form.id)
      this.getRailData()
      this.getAreaData()
    },
    [CRUD.HOOK.beforeToEdit]() {
      // console.log(this.form)
      this.getLabelOptions(this.form.id)
    },
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key, {})
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
    async getDictDOptions(type) {
      try {
        let res = await initData('system/dataDictDetail/getTypeListJson', {
          dictType: type,
        })
        if (res.code === 20000) {
          if (type == '151') {
            this.optionIdType = res.data.content
          }
          if (type == '150') {
            this.optionEthnicity = res.data.content
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getLabelOptions(id) {
      try {
        let res = await getOptions('Label', { id: id })
        if (res.code === 20000) this.optionsLabel = res.data.content
      } catch (error) {
        console.log(error)
      }
    },
    //获取弹窗内的围栏信息
    async getRailData() {
      try {
        const res = await initData('positioning/rail/getPageListJson', {
          PageIndex: 0,
          PageSize: 0,
        })
        const data = res.data.content
        this.personRailAlarmConfigList = data.map((item) => {
          return {
            railId: item.id,
            railName: item.railName,
            crossInAlarm: false,
            crossOutAlarm: false,
            overstayAlarm: false,
            actionlessAlarm: false,
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    //获取弹窗内的区域信息
    async getAreaData() {
      try {
        const res = await initData('positioning/area/getPageListJson', {
          PageIndex: 0,
          PageSize: 0,
        })
        const data = res.data.content
        this.personAreaAlarmConfigList = data.map((item) => {
          return {
            areaId: item.id,
            areaName: item.areaName,
            crossInAlarm: false,
            crossOutAlarm: false,
            overstayAlarm: false,
            actionlessAlarm: false,
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 5) {
        this.$message.warning('文件最大限制为 5MB')
        return false
      }
      let fileName = file.name
      let fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
      const whiteList = ['jpg', 'jpeg', 'gif', 'png']
      if (!whiteList.includes(fileExtension)) {
        this.$message.warning(`只能上传扩展名为 ${whiteList.join(' / ')} 的文件`)
        return false
      }
    },
    handleSuccess(res, file, fileList) {
      if (res.code === 20000) {
        this.form.photoPath = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    handleUploadError(err, file, fileList) {
      console.log(err)
      this.$message.error('上传失败')
    },
    handleUploadRemove(file, fileList) {
      if (fileList.length == 0) {
        this.form.Path = ''
      }
    },
    setAlarmInfo(row) {
      this.alarmInfoVisable = true
      this.alarmForm = row
      // console.log(row)
      if (row.personAlarmConfigList.length) {
        this.personRailAlarmConfigList.forEach((item) => {
          item.crossInAlarm = false
          item.crossOutAlarm = false
          item.overstayAlarm = false
          item.actionlessAlarm = false
          let config = row.personAlarmConfigList.find((formItem) => formItem.railId == item.railId)
          if (config) {
            const { crossInAlarm, crossOutAlarm, overstayAlarm, actionlessAlarm } = config
            item.crossInAlarm = crossInAlarm
            item.crossOutAlarm = crossOutAlarm
            item.overstayAlarm = overstayAlarm
            item.actionlessAlarm = actionlessAlarm
          }
        })
        this.personAreaAlarmConfigList.forEach((item) => {
          item.crossInAlarm = false
          item.crossOutAlarm = false
          item.overstayAlarm = false
          item.actionlessAlarm = false
          let config = row.personAlarmConfigList.find((formItem) => formItem.areaId == item.areaId)
          if (config) {
            const { crossInAlarm, crossOutAlarm, overstayAlarm, actionlessAlarm } = config
            item.crossInAlarm = crossInAlarm
            item.crossOutAlarm = crossOutAlarm
            item.overstayAlarm = overstayAlarm
            item.actionlessAlarm = actionlessAlarm
          }
        })
      } else {
        //this.getRailData()
        //this.getAreaData()
        this.personRailAlarmConfigList.forEach((item) => {
          item.crossInAlarm = false
          item.crossOutAlarm = false
          item.overstayAlarm = false
          item.actionlessAlarm = false
        })
        this.personAreaAlarmConfigList.forEach((item) => {
          item.crossInAlarm = false
          item.crossOutAlarm = false
          item.overstayAlarm = false
          item.actionlessAlarm = false
        })
      }
    },
    submitAlarmInfo() {
      if (this.personRailAlarmConfigList && this.personAreaAlarmConfigList) {
        this.alarmForm.personAlarmConfigList = []
        this.alarmForm.personAlarmConfigList.push.apply(
          this.alarmForm.personAlarmConfigList,
          this.personRailAlarmConfigList
        )
        this.alarmForm.personAlarmConfigList.push.apply(
          this.alarmForm.personAlarmConfigList,
          this.personAreaAlarmConfigList
        )
      }
      console.log(this.alarmForm.personAlarmConfigList)
      crudPerson
        .edit(this.alarmForm)
        .then((res) => {
          this.crud.refresh()
        })
        .catch((err) => {
          console.err(err)
        })
      this.alarmInfoVisable = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  // overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 200px;
  height: 232px;
  line-height: 232px;
  text-align: center;
}
::v-deep .avatar {
  width: 200px;
  height: 232px;
  display: block;
}
</style>
