<!-- Home.vue -->
<template>
  <div>
    <el-row type="flex" justify="space-between" class="head-box">
      <el-col class="head-logo">
        <img class="head-logo" src="./images/head-logo.jpg" alt="">
      </el-col>
      <el-col>
        <el-row>
          <el-col>
            <span class="detail-strong">您好，{{userInfo.userFullname}}</span>
            <span class="detail-unauth" v-if="userInfo.isCertification === 1">已實名認證</span>
            <span class="detail-unauth" v-if="userInfo.isCertification !== 1">【未實名認證】請</span>
            <span class="to-auth" @click="openAuthPopbox" v-if="userInfo.isCertification !== 1">認證</span>
          </el-col>
          <el-col class="detail-hap">歡迎來到上海科技，祝您使用愉快！</el-col>
          <el-col class="edit-detail">
            <i class="el-icon-edit edit-icon"></i>
            <router-link :to="{'name':'setting'}">編輯個人資訊</router-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-collapse-transition>
        <el-col v-show="isShowGuide" class="guide-wrap">
          <el-row type="flex" justify="space-between">
            <el-col class="guide-tip"><span>如需辦理業務，請依照以下步驟</span></el-col>
            <el-col>
              <i class="el-icon-close close-tag cursor" @click="closeGuide"></i>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>實名認證</strong>
                  <span>提供您的身份資訊</span>
                  <el-button type="primary" size="mini" plain class="do-btn" :disabled="disabledLidt" @click="openAuthPopbox">立即認證</el-button>
                </el-col>
                <el-col :span="7">
                  <i class="do-bg-img realname-confirm"></i>
                </el-col>
                <el-col :span="6">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="el-icon-plus plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>資料完善</strong>
                  <span>填寫您的個人履歷</span>
                  <el-button @click="toProfile" type="primary" size="mini" plain class="do-btn">
                    立即填寫
                    <!-- <router-link :to="{'name':'profile'}">
                      立即填寫
                    </router-link> -->
                  </el-button>
                </el-col>
                <el-col :span="7">
                  <i class="do-bg-img add-info"></i>
                </el-col>
                <el-col :span="6">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="el-icon-plus plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>關聯單位</strong>
                  <span>申請您的單位認證</span>
                  <el-button type="primary" size="mini" plain class="do-btn" @click="openApplyPopbox">立即申請</el-button>
                </el-col>
                <el-col :span="6">
                  <i class="do-bg-img unit-confirm"></i>
                </el-col>
                <el-col :span="7">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="iconfont icon-icon-66 plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="13">
                  <strong>業務辦理</strong>
                  <span>進行您的業務辦理</span>
                  <el-button type="primary" size="mini" plain class="do-btn" :disabled="true">立即辦理</el-button>
                </el-col>
                <el-col :span="11">
                  <i class="do-bg-img do-deal"></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-collapse-transition>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card v-if="unitList.length > 0" class="grid-content pd0" shadow="never">
          <el-row type="flex" justify="space-between" class="header-top">
            <el-col class="card-title">
              <span>單位管理</span>
            </el-col>
            <el-col>
              <el-button class="head-btn fr" type="text" v-if="unitList.length > 0" @click="openApplyPopbox">關聯新單位</el-button>
              <el-button class="head-btn fr" type="text" v-if="unitList.length > 0" @click="userUnitSetDefault">設定為預設</el-button>
            </el-col>
          </el-row>
          <el-row v-for="(item, i) in unitList" :key="i" type="flex" justify="space-between" @click.native="checkUnit(item)" :class="{'unit-list':true, 'mb0': i+1 === unitList.length, 'active-list': item.isDefault === 1, 'selected-list': item.unit.id == checkedUnitId, 'cursor':true}">
            <el-col :span="16">
              <el-row class="unit-name">
                <span class='hiddle'>{{ item.unit.unitName }}</span><strong class="default-tip" v-if="item.isDefault === 1">預設單位</strong>
              </el-row>
              <el-row class="unit-address">
                <span>{{parseArea(item.unit.unitArea)}}</span>
              </el-row>
              <el-row class="info-status" v-if="item.percentage<100">
                <span v-if="item.isAdmin === 1">
                  當前公司資訊未完善，請及時<router-link :to="{name:'unitinfo', query:{id:item.unit.id}}" class="add-info">完善公司資訊</router-link>
                </span>
                <span v-else>
                  當前公司資訊未完善，請及時聯絡管理員
                </span>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row type="flex" justify="end" class="info-percent">
                <strong class="percent">{{item.percentage}}</strong>
                <span>%完善度</span>
              </el-row>
              <el-row type="flex" justify="end" class="edit-icons">
                <router-link v-if="item.isAdmin === 1" :to="{name:'unituser',query:{id:item.unit.id}}">
                  <i class="iconfont icon-icon-151 cursor" title="單位使用者管理"></i>
                </router-link>
                <router-link v-if="item.isAdmin === 1" :to="{name:'unitinfo', query:{id:item.unit.id}}">
                  <i class="el-icon-edit icon-space cursor" title="單位資訊管理"></i>
                </router-link>
                <i class="el-icon-delete icon-space cursor" title="與單位解綁" @click="deleteUserUnit(item)"></i>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card v-else class="grid-content-default" shadow="never">
          <el-row class="card-title-default">
            <span>單位管理</span>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button class="plus-wrap" @click="openApplyPopbox">
              <i class="el-icon-plus plus-icon"></i>
            </el-button>
          </el-row>
          <el-row type="flex" justify="center">
            <span class="apply-default" @click="openApplyPopbox">申請關聯單位</span>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" v-if="list">
        <el-row>
          <el-card class="grid-content" shadow="never">
            <el-row type="flex" justify="space-between" class="header-top">
              <el-col class="card-title">
                <span>指南征集</span>
              </el-col>
              <el-col>
                <el-button class="head-btn fr" type="text">更多</el-button>
              </el-col>
            </el-row>
            <ul class="guide-box">
              <li class="guide-list" v-for="o in 4" :key="o">
                <a href="javascript:void(0)" class="guide-detail"><span class="fr">2018-10-25</span>{{'列表內容 ' + o }}</a>
              </li>
            </ul>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="grid-content-default" shadow="never">
            <el-row class="card-title-default">
              <span>專家</span>
            </el-row>
            <el-row type="flex" justify="center">
              <el-button class="plus-wrap">
                <i class="el-icon-plus plus-icon"></i>
              </el-button>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="apply-default">申請專家</span>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
    <!-- 實名認證彈窗 -->
    <st-upfloat-panel :panel="panelAuth" @panelClose="cancelAuthPopbox">
      <div>
        <el-form ref="authentication" :model="authentication" :rules="authRules" label-width="120px">
          <el-form-item label="使用者姓名:" label-position="left" prop="userFullname">
            <el-input type="text" v-model.trim="authentication.userFullname" :disabled="disabledLidt" placeholder="請輸入真實姓名"></el-input>
          </el-form-item>
          <el-form-item label="證件型別:" label-position="left" prop="userCertificatetype">
            <!-- <el-input type="text" value="身份證" disabled></el-input> -->
            <el-select v-model.trim="authentication.userCertificatetype" class="select date-picker" placeholder="請選擇證件型別" disabled auto-complete="off">
              <!-- <i slot="prefix" class="el-input__icon el-icon-picture"></i> -->
              <i slot="prefix" class="el-input__icon iconfont icon-icon-31"></i>
              <el-option v-for="item in dict_zj" :key="item.dictionaryCode" :label="item.dictionaryName" :value="item.dictionaryCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="證件號碼:" label-position="left" prop="userCertificate">
            <el-input type="text" v-model="authentication.userCertificate" :disabled="disabledLidt" placeholder="請輸入證件號碼"></el-input>
          </el-form-item>
          <el-form-item label="手機號碼" label-position="left" prop="userMobile">
            <el-input type="text" v-model.trim="userInfo.userMobile" disabled></el-input>
          </el-form-item>
          <el-form-item label="驗證碼:" label-position="left" prop="verificationCode">
            <el-col :span="14">
              <el-input class="validate-code-input" type="text" v-model.trim="authentication.code" placeholder="請輸入簡訊驗證碼"></el-input>
            </el-col>
            <el-col class="line" :span="1">&nbsp;</el-col>
            <el-col :span="9">
              <getcode />
            </el-col>
          </el-form-item>
          <el-form-item label="" label-position="left">
            <el-row type="flex" justify="start">
              <el-button type="primary" size="medium" style="width: 100%" @click="authRealname('authentication')">提交</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </st-upfloat-panel>
    <!-- 申請關聯單位彈窗 -->
    <st-upfloat-panel :panel="panelApply" @panelClose="cancelApplyPopbox">
      <div>
        <el-form ref="applyUnitForm" label-width="120px" :rules="applyUnitRules" :model="applyUnitForm">
          <el-form-item label="單位名稱:" label-position="left" prop="queryUnitName">
            <el-autocomplete v-model.trim="applyUnitForm.queryUnitName" :fetch-suggestions="allUnits" placeholder="關鍵字模糊搜尋" @select="handleSelect" style="width:100%">
              <template slot-scope="{ item }">
                <div class="name">{{ item.unitName }}</div>
              </template>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="使用者姓名:" label-position="left" prop="userFullname">
            <el-input type="text" v-model="userInfo.userFullname" placeholder="請輸入真實姓名" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="手機號碼" label-position="left" prop="mobile">
            <el-input type="text" v-model="userInfo.userMobile" placeholder="請輸入手機號碼" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="" label-position="left">
            <el-row type="flex" justify="start">
              <el-button type="primary" size="medium" style="width: 100%" @click="userUnitBind">提交</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </st-upfloat-panel>
  </div>
</template>

<script>
import StUpfloatPanel from '@/components/stupfloatpanel/StUpfloatPanel'
import code from '@/components/code/Code'
import gql from 'graphql-tag'
import {
  count, // 姓名
  validateIdcard,
  validateAuthCode
} from '@/utils/validate'
import { prettyMobile } from '@/utils/index'
import { getErrorByCode } from '@/utils/errors'

export default {
  components: {
    StUpfloatPanel,
    getcode: code
  },
  data () {
    // 證件的判斷
    const valiDateCode = (rule, value, callback) => {
      // 證件號
      if (this.authentication.userCertificatetype === 'd82f57aaddb611e8b6a66c0b84d10001') {
        if (!value) {
          callback(new Error('請輸入身份證號'))
        } else if (!validateIdcard(value)) {
          callback(new Error('請輸入正確的身份證號'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('請輸入證件號碼'))
        } else {
          callback()
        }
      }
    }
    // 姓名的判斷
    const checkUserFullName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入真實姓名'))
      } else if (count(value) > 50) {
        callback(new Error('請輸入正確的姓名'))
      } else {
        callback()
      }
    }

    // 驗證碼驗證
    const codeCheck = (rule, value, callback) => {
      if (value) {
        if (!validateAuthCode(value)) {
          callback(new Error('請輸入正確的簡訊驗證碼'))
        } else {
          callback()
        }
      } else {
        callback(new Error('請輸入簡訊驗證碼'))
      }
    }

    return {
      list: false,
      // 實名認證panel設定
      panelAuth: {
        show: false,
        title: '實名認證',
        btnName: '',
        // 表單操作結果顯示 type:(-1,0,1),msg
        result: {
          type: 0,
          msg: ''
        }
      },
      // 申請關聯單位panel設定
      panelApply: {
        show: false,
        title: '申請關聯單位',
        btnName: '',
        // 表單操作結果顯示 type:(-1,0,1),msg
        result: {
          type: 0,
          msg: ''
        }
      },
      unitList: [],
      applyUnitForm: {
        queryUnitName: ''
      },
      // 被選中單位的ID
      checkedUnitId: '',
      disabledLidt: false,
      // 使用者資訊物件
      userInfo: {
        isCertification: 0,
        userFullname: '',
        userMobile: ''
      },
      isShowGuide: true,
      // 關聯新單位時已選擇的單位物件
      selectedUnit: {
        id: ''
      },
      // 實名認證引數
      authentication: {
        userFullname: '',
        userCertificatetype: 'd82f57aaddb611e8b6a66c0b84d10001',
        code: '',
        userCertificate: ''
      },
      dict_zj: [],
      dict_qy: [],
      userList: [],
      authRules: {
        userFullname: [
          { required: true, validator: checkUserFullName, trigger: 'blur' }
        ],
        userCertificate: [
          { required: true, validator: valiDateCode, trigger: 'blur' }
        ],
        code: [
          { required: true, validator: codeCheck, trigger: 'blur' }
        ],
        userCertificatetype: [
          { required: true, message: '請選擇證件型別', trigger: 'blur' }
        ]
      },
      applyUnitRules: {
        queryUnitName: [
          { required: true, message: '請選擇單位名稱', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 查詢字典表
    dictionary () {
      this.$apollo
        .query({
          query: gql`
           query dictionaries($type:String!,$code: String!,$type1:String!,$code1: String!) {
            card:dictionaries(type:$type,code:$code) {
                dictionaryCode:id
                dictionaryName:dictionary_name
            }
             area:dictionaries(type:$type1,code:$code1) {
                dictionaryCode:id
                dictionaryName:dictionary_name
            }
          }
          `,
          // fetchPolicy: 'no-cache',
          client: 'dictionary',
          variables: {
            type: 'dict_zj_type',
            code: 'dict_zj',
            type1: 'dict_qy_type',
            code1: 'dict_qy'
          }
        })
        .then(res => {
          console.log(res)
          if (res.data) {
            this.dict_qy = res.data.area
            this.dict_zj = res.data.card
            // res.data.dictionary.forEach((dictionary) => {
            //   switch (dictionary.dictionaryCode) {
            //     case 'dict_qy':
            //       this.dict_qy = dictionary.children
            //       break
            //     case 'dict_zj':
            //       this.dict_zj = dictionary.children
            //       break
            //     default:
            //       break
            //   }
            // })
          }
        }).catch(() => {
          this.$message.error('伺服器異常')
        })
    },
    // 開啟實名認證彈窗
    openAuthPopbox () {
      this.authentication.userFullname = this.userList.userFullname
      this.authentication.userCertificate = this.userList.userCertificate
      this.panelAuth = {
        show: true,
        title: '實名認證',
        result: {
          type: 0,
          msg: ''
        }
      }
    },
    toProfile () {
      this.$router.push('/profile')
    },
    // 取消實名認證彈窗
    cancelAuthPopbox () {
      this.$refs['authentication'] && this.$refs['authentication'].resetFields()
      // 清空所有實名認證輸入框中的內容
      this.$refs['authentication'] && this.$refs['authentication'].clearValidate()
      this.panelAuth.result.type = 0
      this.panelAuth.show = false
    },
    // 開啟申請關聯單位彈窗
    openApplyPopbox () {
      if (this.userInfo.isCertification !== 1) {
        this.$message.error('請先進行實名認證')
        return
      }
      this.panelApply = {
        show: true,
        title: '申請關聯單位',
        result: {
          type: 0,
          msg: ''
        }
      }
    },
    // 取消申請關聯單位彈窗
    cancelApplyPopbox () {
      this.$refs['applyUnitForm'] && this.$refs['applyUnitForm'].clearValidate()
      this.panelApply.show = false
    },
    resetClearForm (refName) {
      this.$refs[refName].resetFields()
      this.$refs[refName].clearValidate()
    },
    // 選擇單位
    checkUnit (item) {
      if (item.isDefault === 1) return
      this.checkedUnitId === item.unit.id
        ? (this.checkedUnitId = '')
        : (this.checkedUnitId = item.unit.id)
    },
    // 獲取單位列表資訊
    user () {
      this.$apollo
        .query({
          query: gql`
            query user($accountCode:String) {
              user(accountCode: $accountCode) {
                id
                userMobile
                userName
                userFullname
                isCertification
                userCertificatetype
                userCertificate
                userType
                headimgurl
                units{
                  id
                  isAdmin
                  applyStatus
                  isDefault
                  unit{
                    id
                    unitLogo
                    unitName
                    unitArea
                    unitUniformSocialCredit
                    unitOrganizationCode
                    unitAddress
                    unitZipCode
                    unitFax
                    unitLinkman
                    unitTelephone
                    unitEmail
                    unitLegal
                    unitLegalSex
                    unitLegalCertificatetype
                    unitLegalCertificate
                    unitLegalEducation
                    unitLegalServedtime
                    unitLegalTelephone
                    unitScientificEmail
                    unitFinanceEmail
                    unitAccountName
                    unitAccountBank
                    unitAccount
                    unitSubjection
                    unitRegistration
                    unitEmployTotal
                    unitEmployCollege
                    unitEmployResearch
                    unitEmployMiddleLevel
                    unitEmployUndergraduate
                    unitRegisteredCapital
                    unitRegisteredForeign
                    unitRegisteredTime
                    unitIncome
                    unitProfit
                    unitSale
                    unitEarner
                    unitAssets
                    unitLiabilities
                    unitProperties
                  }
                }
              }
            }
          `,
          fetchPolicy: 'network-only',
          client: 'center',
          variables: {
          }
        })
        .then(res => {
          const data = JSON.parse(JSON.stringify(res.data.user))
          this.userList = data
          const userFullnameShow = data.userFullname
            ? data.userFullname
            : prettyMobile(data.userMobile)

          let unitList = []
          // 資料完善度百分比計算
          data.units.map(userUnit => {
            const arr = Object.values(userUnit.unit)
            let num = 0
            Object.values(arr).map(value => {
              if (value) {
                num++
              }
              return num
            })
            userUnit.percentage = Math.round(((num - 1) / (arr.length - 1)) * 100) // 減1是為了排除id的影響
            unitList.push(userUnit)
            this.unitList = unitList
          })

          // 使用者基本資訊資料
          this.userInfo = {
            isCertification: data.isCertification,
            userFullname: data.userFullname,
            userFullnameShow: userFullnameShow,
            userMobile: data.userMobile
          }
          this.authentication.userFullname = data.userFullname
          this.authentication.userCertificate = data.userCertificate
          if (data.isCertification === 1) {
            this.disabledLidt = true
          } else {
            this.disabledLidt = false
          }
        })
        .catch((err) => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 設定為預設單位
    userUnitSetDefault () {
      if (!this.checkedUnitId) {
        this.$message.error('請先選擇預設單位')
        return
      }
      this.$confirm('確認將該單位設定為預設單位, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$apollo
            .mutate({
              mutation: gql`
              mutation userUnitSetDefault($unitId:ID!) {
                userUnitSetDefault(unitId: $unitId)
              }
            `,
            client: 'center',
              variables: {
                unitId: this.checkedUnitId
              }
            })
            .then(res => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '設定預設單位成功!'
                })
                this.checkedUnitId = ''
                this.user()
              } else {
                this.$message.error('設定預設單位失敗！')
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
    },
    // 關聯新單位
    userUnitBind () {
      if (this.selectedUnit.id) {
        this.$refs['applyUnitForm'].validate((valid) => {
          if (valid) {
            this.$apollo
              .mutate({
                mutation: gql`
            mutation userUnitBind($unitId:ID!) {
              userUnitBind(unitId: $unitId)
            }
          `,
          client: 'center',
                variables: {
                  unitId: this.selectedUnit.id
                }
              })
              .then(res => {
                if (res.data.userUnitBind) {
                  this.panelApply = {
                    show: true,
                    title: '申請關聯單位',
                    result: {
                      type: 1,
                      msg: '單位關聯提交成功'
                    }
                  }
                  this.$refs['applyUnitForm'].resetFields()
                  this.user()
                } else {
                  this.$message.error('單位關聯提交失敗！')
                }
              })
              .catch((err) => {
                this.$message.error(getErrorByCode(err))
              })
          } else {
            return false
          }
        })
      } else {
        this.$message.error('公司資訊不存在不能申請')
      }
    },
    // 刪除單位
    deleteUserUnit (item) {
      this.$confirm('此操作將永久解綁該單位, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$apollo
            .mutate({
              mutation: gql`
                mutation deleteUserUnit($id:ID!) {
                  deleteUserUnit(id: $id)
                }
              `,
              client: 'center',
              variables: {
                // id: item.unit.id
                id: item.id
              }
            })
            .then(res => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '單位解綁成功!'
                })
                this.user()
              } else {
                this.$message.error('單位解綁失敗')
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
    },
    // 單位模糊查詢
    allUnits (unitName, callback) {
      if (unitName === '') return
      this.$apollo
        .query({
          query: gql`
            query allUnits($unitName:String!) {
              allUnits(unitName: $unitName){
                id
                unitName
              }
            }
          `,
          client: 'center',
          fetchPolicy: 'network-only',
          variables: {
            unitName: unitName
          }
        })
        .then(res => {
          const data = res.data.allUnits
          callback(data)
        })
        .catch((err) => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 單位模糊查詢後選擇單位
    handleSelect (item) {
      this.applyUnitForm.queryUnitName = item.unitName
      this.selectedUnit = item
    },
    // 實名認證提交
    authRealname (formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          this.$apollo
            .mutate({
              mutation: gql`
                mutation authentication($authentication:AuthenticationInput) {
                  authentication(authentication: $authentication)
                }
              `,
              client: 'center',
              variables: {
                authentication: {
                  verificationCode: this.authentication.code,
                  userFullname: this.authentication.userFullname,
                  userMobile: this.userInfo.userMobile,
                  userCertificate: this.authentication.userCertificate
                }
              }
            })
            .then(res => {
              if (res.data.authentication) {
                this.$refs['authentication'].resetFields()
                this.panelAuth = {
                  show: true,
                  title: '實名認證',
                  result: {
                    type: 1,
                    msg: '實名認證成功'
                  }
                }
                this.user()
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        }
      })
    },
    parseArea (areaCode) {
      let area = ''
      this.dict_qy.forEach(qy => {
        if (qy.dictionaryCode === areaCode) {
          area = qy.dictionaryName
        }
      })
      return area
    },
    // 關閉引導欄
    closeGuide () {
      this.isShowGuide = false
    }
  },
  mounted () {
    // 獲取單位列表資訊
    this.dictionary()
    this.user()
  }
}
</script>
<style lang='stylus'  rel='stylesheet/stylus' scoped>
@import '../../assets/fonts/iconfont.css'
.head-box
  padding-top 14px
  margin-bottom 20px
  .head-logo
    margin-right 20px
    width 60px
    height 60px
    border-radius 60px
  .detail-hap, .detail-strong, .detail-unauth
    font-size 16px
    color #909399
    font-weight normal
    margin 0 auto
    height 20px
    line-height 20px
    margin-bottom 8px
  .detail-hap
    margin-top 8px
    font-size 14px
  .detail-strong
    font-size 20px
    font-weight 400
    color #303133
  .detail-unauth
    margin-left 10px
  .edit-detail
    margin-top 8px
    height 20px
    line-height 20px
    margin 0
    font-size 14px
    color #1989fa
    .edit-icon
      color #1989fa
      margin-right 10px
    .iconfont
      cursor pointer
      font-weight 200
      margin 0 10px 0 30px
  .to-auth
    cursor pointer
    font-size 16px
    color #1989fa
.grid-content, .grid-content-default
  min-height 240px
  background #fff
  padding-bottom 20px
  margin-bottom 20px
  .header-top
    margin-bottom 18px
  .card-title, .card-title-default
    font-size 16px
    color #909399
  .head-btn
    font-size 12px
    padding 3px 0
    margin-right 20px
  .guide-box
    margin 0 20px
    padding 0
    .guide-list
      height 28px
      line-height 28px
      margin-left 16px
      padding 0
      color #909399
      .guide-detail
        font-size 14px
  .mb0
    margin-bottom 0
.pd0
  padding-bottom 0
.unit-list
  height 130px
  border 1px solid #dcdfe6
  border-bottom 4px solid #c0c4cc
  border-radius 4px
  padding 0 20px 4px
  margin-bottom 20px
  .unit-name
    height 28px
    line-height 28px
    color #252631
    font-size 20px
    margin-top 20px
    .hiddle
      width 200px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      display inline-block
    .default-tip
      font-size 14px
      font-weight normal
      color #fa5555
      font-weight 400
      margin-left 10px
      display inline-block
      vertical-align top
  .unit-address
    font-size 14px
    color #909399
    height 21px
    line-height 21px
    margin 10px 0 20px 0
  .info-status
    height 17px
    line-height 20px
    font-size 12px
    color #909399
    .add-info
      color #1989fa
  .info-percent
    color #909399
    height 42px
    line-height 42px
    font-size 14px
    margin-top 15px
    .percent
      font-weight normal
      color #1989fa
      font-size 30px
  .edit-icons
    position absolute
    bottom 10px
    right 20px
    color #909399
    .icon-space
      margin-left 20px
.active-list
  border-color #1989fa
.selected-list
  border-color #303133
.card-title-default
  height 40px
  margin-bottom 20px
.plus-wrap
  width 80px
  height 80px
  border-radius 4px
  background-color #fff
  border 2px dashed #e4e7ed
  .plus-icon
    color #dcdfe6
    zoom 2
.apply-default
  margin-top 15px
  font-size 16px
  color #909399
  text-align center
  display block
.validate-code-row
  width 124px
  p
    display inline-block
    width 81px
    margin 0 auto
.get-code
  background #e6f1fc
  border-radius 4px
  font-size 12px
  color #1989fa
  float right
.cursor
  cursor pointer
.guide-wrap
  height 200px
  background #fff
  padding 20px
  margin-bottom 20px
  .guide-tip
    color #fa5555
    font-size 16px
    height 22px
    line-height 22px
  .close-tag
    float right
    font-size 22px
    color #999
  .guide-do-left
    margin-top 24px
    strong
      display block
      font-size 16px
      color #474747
      height 22px
      line-height 22px
      margin-bottom 6px
    span
      display block
      font-size 14px
      color #909399
      height 18px
      line-height 18px
      margin-bottom 20px
    .do-bg-img
      width 78px
      height 80px
      display block
    .plus-right
      font-size 30px
      color #1989fa
      font-weight 800
    .realname-confirm
      background url('./images/realname-confirm.svg') no-repeat
    .add-info
      background url('./images/add-info.svg') no-repeat
    .unit-confirm
      background url('./images/unit-confirm.svg') no-repeat
    .do-deal
      background url('./images/do-deal.svg') no-repeat
.select
  width 100%
</style>