<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <template>
      <el-tabs v-model="listQuery.level" @tab-click="handleTabToggle">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="代理公司" name="3" />
        <el-tab-pane label="销售经理" name="2" />
        <el-tab-pane label="销售主管" name="1" />
        <el-tab-pane label="已删除" name="4" />
        <el-tab-pane label="账户冻结" name="5" />
      </el-tabs>
    </template>
    <div class="filter-container">
      <!-- <el-input
        v-model="listQuery.search_name"
        placeholder="姓名/昵称/手机号/身份证号"
        style="width: 210px"
        @keydown.native.enter="handleSearch"
      />
      <el-input
        v-model="listQuery.recom_name"
        placeholder="邀请人姓名/手机号/昵称/身份证号"
        style="width: 250px"
        @keydown.native.enter="handleSearch"
      /> -->
      <el-select
        v-model="listQuery.info_select"
        placeholder="请选择"
        style="width: 180px; color: #606266"
      >
        <el-option label="代理信息" value="1" />
        <el-option label="邀请人信息" value="2" />
        <el-option label="上级信息" value="3" />
      </el-select>
      <el-input
        v-model="listQuery.search_name"
        placeholder="姓名/昵称/手机号/身份证号"
        style="width: 250px"
        suffix-icon="el-icon-search"
        class="input-with-select"
        @keydown.native.enter="handleSearch"
      />

      <el-date-picker
        v-model="listQuery.start_time"
        type="datetime"
        placeholder="开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-date-picker
        v-model="listQuery.end_time"
        type="datetime"
        :disabled="!listQuery.start_time"
        placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-select v-model="listQuery.commissar" style="width: 160px">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in staffList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.warea_id" style="width: 220px">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in stationList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <!-- <el-button slot="append" icon="el-icon-search"  @click="handleSearch"></el-button> -->
      <div style="margin-top: 10px">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >搜索</el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="handleAddMember"
        >添加销售</el-button>
        <el-button
          type="primary"
          :loading="downloadLoading"
          icon="el-icon-document"
          @click="exportMember"
        >导出</el-button>
      </div>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column prop="headimgurl" label="头像" align="center" width="60">
        <template slot-scope="{ row }">
          <!-- <el-image :src="row.headimgurl" fit="contain" class="hoverImg" /> -->
          <el-image
            style="width: 50px; height: 50px"
            :src="row.headimgurl"
            :preview-src-list="srcList"
          />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="微信昵称" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getOtherInfo(row.id)">{{
            row.nickname
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="备注昵称" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getOtherInfo(row.id)">{{
            row.remark_name
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="realname"
        align="center"
        label="真实姓名"
        width="130"
      />
      <el-table-column prop="mobile" align="center" label="电话号" />
      <el-table-column prop="recom" label="邀请人" align="center" width="130">
        <template slot-scope="{ row }">
          <span class="buttonText" @click="getOtherInfo(row.recom.id)">{{
            row.recom && row.recom.nickname
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="agent" label="上级代理" align="center" width="130">
        <template slot-scope="{ row }">
          <span class="buttonText" @click="getOtherInfo(row.agent.id)">{{
            row.agent && row.agent.nickname
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="level" align="center" label="代理级别" width="100">
        <template slot-scope="{ row }">
          <el-tag :color="levelStatus(row.level).color" style="color: #ffffff">
            {{ levelStatus(row.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="代理公司" align="center">
        <template slot-scope="{ row }">
          <span v-if="!row.crown">暂无</span>
          <el-button v-else type="text" @click="getOtherInfo(row.crown.id)">{{
            row.crown.nickname
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="所在战区" align="center">
        <span slot-scope="{ row: { warea } }">{{ warea && warea.name }}</span>
      </el-table-column>
      <el-table-column label="战区政委" align="center">
        <span slot-scope="{ row: { warea } }">{{
          warea && warea.admin_name
        }}</span>
      </el-table-column>
      <el-table-column
        prop="cert_status"
        align="center"
        label="认证状态"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ certStatus(row) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="账户状态" width="95">
        <!-- 账户状态判断顺序： 是否删除——> 是否禁用 ——> 是否冻结 ——> 是否为审核状态 -->
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.deleted === 1"
            size="mini"
            type="danger"
          >
            已删除
          </el-tag>
          <el-tag
            v-else
            size="mini"
            :type="
              row.status === 0 ? (row.freeze_status === 1 ? 'danger' : row.service_status == 1?'':'success') : 'warning'
            "
          >
            {{
              row.status === 0 ? (row.freeze_status === 1 ? '已冻结' : (row.service_status == 1?'待政委审核':'正常')) : "已禁用"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.level === '5'" label="冻结时间" align="center">
        <span v-if="row.freeze_status === 1" slot-scope="{ row }">{{ row.freeze_time }}</span>
      </el-table-column>
      <el-table-column v-if="listQuery.level === '5'" label="最后登录" align="center">
        <span v-if="row.freeze_status === 1" slot-scope="{ row }">{{ row.login_at }}</span>
      </el-table-column>
      <el-table-column v-if="listQuery.level === '5'" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handlejie(scope.row.id)">
            解除冻结
          </el-button>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.level !== '4' && listQuery.level !== '5'" label="操作" width="320">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.freeze_status === 1" type="text" @click="handlejie(scope.row.id)">
              解除冻结
            </el-button>
            <el-popover
              :ref="`popover_tel_${scope.$index}`"
              placement="right"
              width="300"
              @after-leave="edit.tel = ''"
            >
              <el-input
                v-model="edit.tel"
                placeholder="修改的手机号"
                size="mini"
                minlength="11"
                maxlength="11"
                style="width: 200px"
              />
              <el-button type="primary" size="mini" @click="handleEditTel(scope)">
                修改
              </el-button>
            </el-popover>
            <!-- <el-popover
              :ref="`popover_share_${scope.$index}`"
              placement="right"
              width="300"
              @after-leave="edit.share = ''"
            >
              <el-input
                v-model="edit.share"
                placeholder="邀请人手机号"
                size="mini"
                minlength="11"
                maxlength="11"
                style="width: 200px"
              />
              <el-button
                type="primary"
                size="mini"
                @click="handleEditShare(scope)"
              >
                修改
              </el-button>
              <el-button
                slot="reference"
                type="text"
                :disabled="scope.row.level === 0 || scope.row.delete === 1"
                @click="handleChangeShare"
              >
                变更邀请人
              </el-button>
            </el-popover> -->
            <el-button
              v-permit="7"
              :roles-permit="roles"
              type="text"
              :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
              @click="handleChangeShare(scope.row)"
            >
              变更邀请人
            </el-button>
            <div v-permit="4" :roles-permit="roles" style="display: inline-block">
              <el-button
                v-if="scope.row.level !== 3"
                type="text"
                style="margin-left: 0px"
                :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
                @click="handleEditLevel(scope.row, scope.row.level + 1)"
              >
                升级
              </el-button>
              <span v-if="scope.row.level === 2">/</span>
              <!-- <el-button
                v-if="scope.row.level !== 1"
                type="text"
                style="margin-left: 0px"
                :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
                @click="arr = scope.row, levelNow = scope.row.level - 1, visible.demotion = true"
              >
                降级
              </el-button> -->
              <el-button
                v-if="scope.row.level !== 1"
                type="text"
                style="margin-left: 0px"
                :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
                @click="handleDelete(scope.row, 0)"
              >
                降级
              </el-button>
            </div>
            <el-button
              v-permit="3"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
              @click="changeStatus(scope.row.id)"
            >
              {{ scope.row.status === 0 ? "禁用" : "启用" }}账号
            </el-button>
            <el-button
              v-permit="2"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.level === 0 || scope.row.deleted === 1 || scope.row.freeze_status === 1"
              @click="handleDelete(scope.row, 2)"
            >
              删除代理
            </el-button>
            <el-button
              v-if="scope.row.level === 3 && listQuery.level === '3'"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.level === 0 || scope.row.freeze_status === 1"
              @click="getStock(scope.row)"
            >
              查看库存
            </el-button>
            <el-button
              v-if="scope.row.level === 3 && listQuery.level === '3'"
              v-permit="5"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.freeze_status === 1"
              @click="handleCrownCloseWar(scope.row)"
            >
              选择战区
            </el-button>
            <el-popover
              :ref="`popover_pwd_${scope.$index}`"
              placement="right"
              width="300"
              @after-leave="edit.pwd = ''"
            >
              <el-input
                v-model="edit.pwd"
                placeholder="新的密码"
                size="mini"
                minlength="11"
                maxlength="11"
                style="width: 200px"
              />
              <el-button
                type="primary"
                size="mini"
                @click="handleEditPwd(scope)"
              >修改</el-button>
              <el-button
                slot="reference"
                v-permit="0"
                :roles-permit="roles"
                type="text"
                :disabled="scope.row.deleted === 1 || scope.row.freeze_status === 1"
              >修改密码</el-button>
            </el-popover>
            <el-button
              v-permit="1"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.deleted === 1 || scope.row.freeze_status === 1"
              @click="handleResetPwd(scope.row)"
            >重置密码</el-button>
            <el-button
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.deleted === 1 || scope.row.freeze_status === 1"
              @click="handleUpdateInfo(scope.row)"
            >修改信息</el-button>
            <!-- <el-button
              v-permit="7"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              @click="handleAddClosed(scope.row)"
              >添加内测</el-button
            >
            <el-button
            v-permit="0"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              @click="handleAddClosed(scope.row)"
              >取消内测</el-button
            > -->
            <el-button
              v-permit="7||8"
              :roles-permit="roles"
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.freeze_status === 1"
              @click="handleAddClosed(scope.row)"
            >{{ scope.row.is_test === 1 ? "添加" : "取消" }}内测</el-button>
            <el-button
              type="text"
              style="margin-left: 0px"
              :disabled="scope.row.freeze_status === 1"
              @click="handleUnbindWechat(scope.row)"
            >解绑</el-button>
          </div>
          <!-- <div v-else>
            <el-button type="primary" size="small" @click="handlejie(scope.row.id)">
              解除冻结
            </el-button>
          </div> -->
        </template>
      </el-table-column>
    </el-table>

    <div class="batch-container">
      <!-- 分页 -->
      <pagination
        :total="tableTotal"
        :limit="listQuery.page_size"
        :page="listQuery.page_index"
        style="margin-top: 0"
        @pagination="changePagination"
        @update:limit="changePagination"
      />
    </div>
    <el-dialog
      :title="visible.type === 'add' ? '添加销售' : '修改销售'"
      top="50px"
      :visible.sync="visible.member"
      :before-close="handleMemberClose"
    >
      <el-form
        ref="memberForm"
        :model="memberForm"
        :rules="memberRules"
        label-width="120px"
      >
        <el-form-item label="微信昵称:" prop="nickname">
          <el-input v-model="memberForm.nickname" placeholder="微信昵称" />
        </el-form-item>
        <el-form-item label="真实姓名:" prop="realname">
          <el-input v-model="memberForm.realname" placeholder="真实姓名" />
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input
            v-model="memberForm.cre_num"
            minlength="15"
            maxlength="18"
            placeholder="身份证号"
          />
        </el-form-item>
        <el-form-item label="电话号:" prop="mobile">
          <el-input
            v-model="memberForm.mobile"
            minlength="11"
            maxlength="11"
            placeholder="电话号"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="代理等级:" prop="level">
          <el-radio-group v-model="memberForm.level">
            <el-radio :label="1">销售主管</el-radio>
            <el-radio :label="2">销售经理</el-radio>
            <el-radio :label="3">代理公司</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邀请人手机号:" prop="share">
          <el-input
            v-model="memberForm.share"
            minlength="11"
            maxlength="11"
            placeholder="邀请人手机号"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="handleMemberClose">取消</el-button>
          <el-button type="primary" size="mini" @click="handleSubmitAddEdit">{{
            visible.type === "add" ? "添加" : "修改"
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看库存 -->
    <el-drawer
      :title="`${stockInfo.user.nickname}的商品库存`"
      :visible.sync="visible.stock"
      direction="rtl"
      size="40%"
    >
      <el-form label-width="0">
        <el-form-item style="padding: 0 20px">
          <el-table :data="stockInfo.goods" border>
            <el-table-column prop="img_url" label="图片" align="center">
              <template slot-scope="{ row }">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="row.img_url"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品" align="center" />
            <el-table-column prop="account" label="库存" align="center" />
          </el-table>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 查看代理详情 -->
    <el-drawer
      :title="`${memberInfo.realname} - ${levelStatus(memberInfo.level).name}`"
      :visible.sync="visible.memberInfo"
      direction="rtl"
      size="35%"
    >
      <MemberInfo
        :info="memberInfo"
        :team-type="true"
        :show-num="roles.includes(6) || user.role_name === 'root'"
        @getOtherInfo="changeOtherInfo"
      />
    </el-drawer>
    <!-- 代理公司选择战区 -->
    <el-dialog
      title="选择战区"
      :visible.sync="visible.war"
      :before-close="handleCloseWar"
    >
      <el-form label-width="100px">
        <el-form-item label="代理公司:">{{
          selectedCrown.nickname
        }}</el-form-item>
        <el-form-item label="战区:">
          <el-select
            ref="crownWarSelect"
            v-model="crownWarId"
            placeholder="请选择战区"
          >
            <el-option
              v-for="item in warList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleSureCrownWar"
          >确认</el-button>
          <el-button size="small" @click="handleCloseWar">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 删除/降级代理 -->
    <el-dialog
      :title="type === 0? '降级':'删除代理'"
      :visible.sync="visible.delete"
      :close-on-click-modal="false"
      :show-close="false"
      width="520px"
      class="dialog_delete"
    >
      <span class="desc">{{ type === 0? '请选择降级代理的原因:':'请选择删除代理的原因:' }}</span>
      <el-popover
        v-model="change_cause_vis"
        placement="bottom-start"
        trigger="click"
        popper-class="down-popover"
      >
        <div
          v-for="items in deleteReasonList"
          :key="items.id"
          class="options_item"
          @click="changeDelReason(items.cause)"
        >
          <p>{{ items.cause }}</p>
          <i class="el-icon-error" @click.stop="deleteReason(items.id)" />
        </div>
        <el-input
          slot="reference"
          v-model="deleteMemberInfo.remark"
          type="text"
          placeholder="请选择原因"
          :readonly="true"
          :suffix-icon="
            change_cause_vis ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
          "
          class="input_like_select"
        />
      </el-popover>
      <el-popover v-model="delete_cause_vis" placement="bottom" trigger="click">
        <div style="display: flex; align-items: center">
          <el-input
            v-model="delete_cause"
            type="textarea"
            :rows="1"
            resize="none"
            maxlength="10"
            show-word-limit
          />
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="addDeleteReason"
          >添加</el-button>
        </div>
        <el-button slot="reference" type="text">添加原因</el-button>
      </el-popover>
      <!-- <el-input v-model="deleteMemberInfo.remark" type="textarea" class="textarea_h" maxlength="250" show-word-limit /> -->
      <span class="desc">上传图片:</span>
      <div class="avatar-uploader-container">
        <template v-if="deleteUserImg.length > 0">
          <div v-for="(img, i) in deleteUserImg" :key="i" class="avatar">
            <el-image
              :src="img"
              fit="contain"
              style="width: 100%; height: 100%"
              :preview-src-list="[img]"
              :z-index="10000"
            />
            <div class="upload-delete" @click="removeDeleteUserImg(i)">
              <i class="el-icon-delete-solid" />
            </div>
          </div>
        </template>
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :multiple="true"
          :http-request="submitDeleteUploadImg"
        >
          <i class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
      <el-button @click="resetDialogDelete">取消</el-button>
      <el-button type="primary" @click="submitDelete">确定</el-button>
    </el-dialog>
    <!-- 变更邀请人 -->
    <el-dialog
      title="变更邀请人"
      :visible.sync="visible.share"
      :close-on-click-modal="false"
      :show-close="false"
      width="520px"
      class="dialog_delete"
    >
      <span class="desc">请输入要变更的邀请人手机号:</span>
      <el-input
        v-model="changeShare.mobile"
        class="desc"
        type="text"
        maxlength="11"
        show-word-limit
      />
      <span class="desc">请填写变更邀请人的原因:</span>
      <el-input
        v-model="changeShare.remark"
        type="textarea"
        class="textarea_h"
        maxlength="250"
        show-word-limit
      />
      <el-button @click="resetDialogShare">取消</el-button>
      <el-button type="primary" @click="handleEditShare">确定</el-button>
    </el-dialog>
    <!-- 删除代理 -->
    <el-dialog
      title="修改代理信息"
      :visible.sync="visible.updateInfo"
      :close-on-click-modal="false"
      :show-close="false"
      width="520px"
      class="dialog_delete"
    >
      <el-form>
        <el-form-item label="用户昵称">
          <el-input v-model="updateInfoData.nickname" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="updateInfoData.realname" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="updateInfoData.mobile" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="updateInfoData.cre_num" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="updateInfoData.remark" />
        </el-form-item>
        <el-form-item label="备注昵称">
          <el-input v-model="updateInfoData.remark_name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            visible.updateInfo = false;
            updateInfoData = {};
          "
        >取消</el-button>
        <el-button type="primary" @click="updateInfo">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  getList,
  editTel,
  addMember,
  deleteMember,
  changeStatus,
  editShare,
  editLevel,
  getStock,
  getWarList,
  crownWar,
  setPwd,
  exportMember,
  updateInfo,
  getStaff,
  deleteUploadImg,
  deleteMemberReason,
  addDelReason,
  delReason,
  addClose,
  cancelClose,
  CancelStatus,
  UnbindWechat
} from '@/api/team/member'
// 获取上级销售或邀请人信息
import { getOtherInfo } from '@/api/team/common'
import { get_jj_cause, add_jj_cause, destory_jj_cause } from '@/api/team/apply'
// 验证
import { validateMobile } from '@/filters/validate'
// 公共方法
import { certStatus, levelStatus } from '@/filters/common'
// 组件
import MemberInfo from './components/MemberInfo'
// 导出格式化时间
import { parseTime } from '@/utils'
import { mapState } from 'vuex'
export default {
  components: {
    MemberInfo
  },
  data() {
    // 获取页面的按钮操作权限
    const roles = this.$route.meta.buttonAuthList
      ? this.$route.meta.buttonAuthList
      : []
    return {
      demotion: {
        img: '',
        name: ''
      },
      arr: {},
      levelNow: '',
      table: [],
      tableTotal: 0,
      srcList: [],
      listQuery: {
        level: 'all',
        page_index: 1,
        page_size: 20,
        search_name: '',
        info_select: '1',
        commissar: '',
        warea_id: '',
        start_time: '',
        end_time: ''
      },
      edit: {
        tel: '',
        share: '',
        pwd: ''
      },
      memberForm: {
        nickname: '',
        realname: '',
        cre_num: '',
        mobile: '',
        level: '',
        share: ''
      },
      memberRules: {
        nickname: [
          { required: true, message: '请输入销售微信昵称', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入销售真实姓名', trigger: 'blur' }
        ],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        level: [
          { required: true, message: '请选择销售级别', trigger: 'change' }
        ],
        share: [{ required: true, validator: validateMobile, trigger: 'blur' }]
      },
      visible: {
        demotion: false,
        stock: false,
        member: false,
        type: false,
        memberInfo: false,
        war: false,
        delete: false,
        share: false,
        updateInfo: false
      },
      stockInfo: {
        user: {},
        goods: []
      },
      memberInfo: {
        realname: '',
        level: ''
      },
      roles,
      loadingFull: false,
      warList: [],
      crownWarId: '',
      selectedCrown: {},
      downloadLoading: false,
      changeShare: {
        id: '',
        mobile: '',
        remark: ''
      },
      updateInfoData: {},
      deleteMemberInfo: {
        id: '',
        remark: ''
      },
      type: '',
      staffList: [],
      stationList: [],
      deleteUserImg: [],
      deleteReasonList: [],
      delete_cause: '',
      delete_cause_vis: false,
      change_cause_vis: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    'listQuery.commissar'(a, b) {
      if (!a) {
        this.listQuery.warea_id = ''
        this.stationList = []
      } else {
        const arr = this.staffList.filter((item) => item.id === a)
        this.listQuery.warea_id = ''
        this.stationList = arr.length > 0 ? arr[0].warea : []
      }
    },
    'listQuery.level'() {
      this.listQuery.page_index = 1
    },
    'listQuery.start_time'(a) {
      if (!a) {
        this.listQuery.end_time = ''
      }
    }
  },
  created() {
    this.getStaff()
    this.getList()
    this.getWarList()
  },
  methods: {
    // 解除绑定
    handleUnbindWechat(row) {
      this.$confirm('确定解除绑定?', '提示').then(() => {
        UnbindWechat({
          id: row.id
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('解除绑定成功')
            this.getList()
          } else {
            this.$message.error(res.message || '解除绑定失败')
          }
        })
      })
    },
    // 解除冻结
    handlejie(id) {
      this.$confirm('确定解除冻结?', '提示').then(() => {
        CancelStatus({
          id: id
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('解除冻结成功')
            this.getList()
          } else {
            this.$message.error(res.message || '解除冻结失败')
          }
        })
      })
    },
    // 添加内测
    handleAddClosed(row) {
      const { is_test, nickname } = row
      this.$confirm(
        `确定要${is_test === 1 ? '添加' : '取消'}${nickname}的内测权限`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then((res) => {
          if (res === 'confirm') {
            this.closeOpear(row)
          } else {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    closeOpear(row) {
      const { mobile, nickname, realname, level, is_test } = row
      const http = is_test === 1 ? addClose : cancelClose
      const data =
        is_test === 1
          ? { nickname, realname, level, phone: mobile }
          : { phone: mobile }
      http(data).then((res) => {
        if (res.code === 200) {
          this.$message.success(`${is_test === 1 ? '添加' : '取消'}内测成功`)
          this.getList()
        } else {
          this.$message.error(
            res.message || `${is_test === 1 ? '添加' : '取消'}内测失败`
          )
        }
      })
    },
    changeDelReason(val) {
      this.deleteMemberInfo.remark = val
      this.change_cause_vis = false
    },
    // 删除代理原因
    deleteReason(id) {
      const loading = this.$loading()
      if (this.type === 0) {
        destory_jj_cause({ id })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '删除原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('删除原因失败')
          })
      } else {
        delReason({ id })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '删除原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('删除原因失败')
          })
      }
    },
    // 添加删除代理原因
    addDeleteReason() {
      if (!this.delete_cause) {
        this.$message.error('请选择原因')
        return false
      }
      const loading = this.$loading()
      if (this.type === 0) {
        add_jj_cause({
          cause: this.delete_cause
        })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.delete_cause_vis = false
              this.delete_cause = ''
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '添加失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('添加失败')
          })
      } else {
        addDelReason({
          cause: this.delete_cause
        })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.delete_cause_vis = false
              this.delete_cause = ''
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '添加失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('添加失败')
          })
      }
    },
    removeDeleteUserImg(i) {
      this.deleteUserImg.splice(i, 1)
    },
    // 删除代理上传图片
    submitDeleteUploadImg(params) {
      const { file } = params
      const formdata = new FormData()
      this.loadingFull = true
      formdata.append('file', file)
      deleteUploadImg(formdata)
        .then((res) => {
          this.loadingFull = false
          if (res.code === 200) {
            this.deleteUserImg.push(res.data)
          } else {
            this.$message.error(res.message || '上传图片失败')
          }
        })
        .catch(() => {
          this.loadingFull = false
          this.$message.error('上传图片失败')
        })
    },
    changeOtherInfo(id) {
      this.getOtherInfo(id, (data) => {
        // this.listQuery.search_name = data.nickname
        // this.listQuery.search_name = data.mobile
        this.getList()
      })
    },
    // 修改用户信息
    updateInfo() {
      if (
        this.updateInfoData.nickname.trim() &&
        this.updateInfoData.realname.trim() &&
        this.updateInfoData.mobile.trim().length === 11
      ) {
        this.$request(
          updateInfo({
            id: this.updateInfoData.id,
            mobile: this.updateInfoData.mobile.trim(),
            nickname: this.updateInfoData.nickname.trim(),
            realname: this.updateInfoData.realname.trim(),
            cre_num: this.updateInfoData.cre_num.trim(),
            remark: this.updateInfoData.remark.trim(),
            wechat_name: this.updateInfoData.remark_name
          }),
          (data) => {
            this.visible.updateInfo = false
            this.$message.success('修改成功')
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).nickname = this.updateInfoData.nickname.trim()
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).realname = this.updateInfoData.realname.trim()
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).mobile = this.updateInfoData.mobile.trim()
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).cre_num = this.updateInfoData.cre_num.trim()
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).remark = this.updateInfoData.remark.trim()
            // this.table.find(
            //   (e) => e.id === this.updateInfoData.id
            // ).remark_name = this.updateInfoData.remark_name.trim()
            this.getList()
            this.updateInfoData = {}
          }
        )
      } else {
        this.$message.error('用户填写不完整')
      }
    },
    // 点击修改信息
    handleUpdateInfo({ nickname, realname, mobile, cre_num, id, remark, remark_name }) {
      cre_num ? '' : (cre_num = '')
      this.updateInfoData = { nickname, realname, mobile, cre_num, id, remark, remark_name }
      this.visible.updateInfo = true
    },
    // 获取销售列表
    async getList() {
      this.loadingFull = true
      this.listQuery.start_time = this.listQuery.start_time || ''
      this.listQuery.end_time = this.listQuery.end_time || ''
      const res = await getList(this.listQuery)
      try {
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.tableTotal = total
          this.table = list
          this.table.forEach((item) => {
            item.wechat_name = item.nickname
            this.srcList.push(item.headimgurl)
          })
        } else {
          this.$message.error(message)
        }
        this.loadingFull = false
      } catch (e) {
        console.log(`获取销售列表失败:${e}`)
        this.loadingFull = false
      }
    },
    // 导航条切换
    handleTabToggle(tab) {
      this.listQuery.level = tab.name
      this.getList()
    },
    // 认证状态显示
    certStatus(row) {
      const { cert_status } = row
      return certStatus(cert_status)
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 修改手机号
    handleEditTel(scope) {
      const { id } = scope.row
      if (!this.edit.tel) {
        this.$message.warning('手机号不能为空')
        return false
      }
      this.editTel(
        {
          id,
          mobile: this.edit.tel
        },
        () => {
          this.edit.tel = ''
          scope._self.$refs[`popover_tel_${scope.$index}`].doClose()
        }
      )
    },
    // 修改手机号
    async editTel(data, callback) {
      const res = await editTel(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getList()
          callback()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`修改销售手机号失败:${e}`)
      }
    },
    // 关闭代理弹窗
    handleMemberClose() {
      this.visible.member = false
      this.$refs.memberForm.resetFields()
    },
    // 添加代理
    handleAddMember() {
      this.visible.type = 'add'
      this.visible.member = true
    },
    // 提交添加修改
    handleSubmitAddEdit() {
      this.$refs.memberForm.validate((valid) => {
        if (valid) {
          if (this.visible.type === 'add') {
            this.addMember(this.memberForm)
          } else {
            console.log('edit')
          }
        } else {
          return false
        }
      })
    },
    // 提交添加
    async addMember(data) {
      try {
        const res = await addMember(data)
        const { message, code } = res
        if (code === 200) {
          this.handleMemberClose()
          this.$message.success(message)
          this.getList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`添加销售失败:${e}`)
      }
    },
    // 获取降级/删除代理的理由
    getDeleteReason(cb) {
      const loading = this.$loading()
      if (this.type === 0) {
        get_jj_cause()
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.deleteReasonList = res.data
              cb && cb()
            } else {
              this.$message.error(res.message || '获取降级代理原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('获取降级代理原因失败')
          })
      } else {
        deleteMemberReason()
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.deleteReasonList = res.data
              cb && cb()
            } else {
              this.$message.error(res.message || '获取删除代理原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('获取删除代理原因失败')
          })
      }
    },
    // 删除代理
    handleDelete(row, type) {
      if (type === 0) {
        this.level = row.level - 1
        if (this.level === 0) {
          this.$message.error('该代理已经是销售主管，无法再进行降级操作！')
          return false
        }
        // this.handleEditLevel(row, row.level - 1)
        const _this = this
        this.type = 0
        this.getDeleteReason(() => {
          _this.deleteMemberInfo.id = row.id
          _this.visible.delete = true
        })
      } else if (type === 2) {
        const _this = this
        this.type = 2
        this.getDeleteReason(() => {
          _this.deleteMemberInfo.id = row.id
          _this.visible.delete = true
        })
      }
    },
    // 删除/降级代理
    submitDelete() {
      const { id, remark } = this.deleteMemberInfo
      if (!remark) {
        this.$message.error('请选择原因')
      } else {
        this.loadingFull = true
        if (this.type === 0) {
          editLevel({
            id,
            remark,
            level: this.level,
            img: JSON.stringify(this.deleteUserImg)
          })
            .then((res) => {
              this.loadingFull = false
              if (res.code === 200) {
                this.resetDialogDelete()
                this.getList()
                this.$message.success('操作成功')
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((e) => {
              this.loadingFull = false
            })
        } else {
          deleteMember({
            id,
            remark,
            img: JSON.stringify(this.deleteUserImg)
          })
            .then((res) => {
              this.loadingFull = false
              if (res.code === 200) {
                this.resetDialogDelete()
                this.getList()
                this.$message.success('操作成功')
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((e) => {
              this.loadingFull = false
            })
        }
      }
    },
    resetDialogDelete() {
      this.deleteMemberInfo = {
        id: '',
        remark: ''
      }
      this.deleteUserImg = []
      this.visible.delete = false
    },
    // 变更邀请人
    handleChangeShare(row) {
      this.changeShare.id = row.id
      this.visible.share = true
    },
    // 禁用启用
    async changeStatus(id) {
      const res = await changeStatus({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`禁用启用销售失败:${e}`)
      }
    },
    // 变更邀请人
    handleEditShare() {
      const { id, mobile, remark } = this.changeShare
      if (!mobile) {
        this.$message.warning('邀请人手机号不能为空')
      } else if (!remark) {
        this.$message.warning('请填写变更邀请人原因')
      } else {
        this.loadingFull = true
        editShare({
          id,
          mobile,
          remark
        })
          .then((res) => {
            this.loadingFull = false
            if (res.code === 200) {
              this.resetDialogShare()
              this.getList()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
          .catch((e) => {
            this.loadingFull = false
          })
      }
    },
    resetDialogShare() {
      this.changeShare = {
        id: '',
        mobile: '',
        remark: ''
      }
      this.visible.share = false
    },
    resetPublish() {
      this.demotion.name = ''
      this.demotion.img = ''
      this.visible.demotion = false
    },
    // 上传图片
    uploadModuleImg({ file }) {
      // const { size } = file
      // if (size > 1024 * 1024 * 5) {
      //   this.$message.error('模板最大不超过5M')
      //   return false
      // }
      this.publishMap.set('file', file)
      var reader = new FileReader()
      reader.readAsDataURL(file)
      const _this = this
      reader.onload = function(e) {
        _this.demotion.img = e.currentTarget.result
      }
    },
    // 降级代理
    handlejiangLevel(row, next) {
      console.log(row, next)
      const { id } = row
      this.editLevel({
        id,
        level: next
      })
    },
    // 变更销售级别
    handleEditLevel(row, next) {
      const { id, realname } = row
      let msg
      switch (next) {
        case 1:
          msg = '销售主管'
          break
        case 2:
          msg = '销售经理'
          break
        case 3:
          msg = '代理公司'
      }
      this.$confirm(
        `确认将代理${realname}的等级变更为-${msg}?`,
        '变更等级确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.editLevel({
          id,
          level: next
        })
      })
    },
    // 变更销售级别
    async editLevel(data) {
      const res = await editLevel(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`变更销售级别失败:${e}`)
      }
    },
    // 查看代理公司库存
    async getStock(row) {
      const { id } = row
      this.stockInfo.user = row
      const res = await getStock({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          if (data.length < 1) {
            this.$message.warning(`${row.nickname}还没有商品库存`)
          } else {
            this.stockInfo.goods = data
            this.visible.stock = true
          }
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`查看代理公司库存失败:${e}`)
      }
    },
    // 销售级别
    levelStatus(level) {
      return levelStatus(level)
    },
    // 查看代理详情
    handleSeeMemberInfo(row) {
      this.memberInfo = row
      this.visible.memberInfo = true
    },
    // 获取上级销售或邀请人信息
    async getOtherInfo(id, cb) {
      if (!id) {
        this.$message.error('获取用户id失败')
        return false
      }
      this.loadingFull = true
      try {
        const res = await getOtherInfo({ id })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          this.handleSeeMemberInfo(data)
          cb && cb(data)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取邀请人或上级销售信息失败:${e}`)
      }
      this.loadingFull = false
    },
    // 获取战区
    async getWarList() {
      try {
        const res = await getWarList()
        const { code } = res
        if (code === 200) {
          const { data } = res
          this.warList = data
        }
      } catch (e) {
        console.log(`获取战区失败:${e}`)
      }
    },
    // 代理公司选择战区
    async crownWar(data) {
      this.loadingFull = true
      await crownWar(data)
        .then((res) => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success(res.message)
            this.handleCloseWar()
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          this.loadingFull = false
        })
    },
    // 皇冠选择战区
    handleCrownCloseWar(row) {
      if (this.warList.length < 1) {
        this.$message.error('还没有战区,请前往: 政委管理->战区管理,添加战区')
        return false
      }
      this.crownWarId = row.warea_id ? row.warea_id : ''
      this.visible.war = true
      this.selectedCrown = row
    },
    // 确认
    handleSureCrownWar() {
      if (!this.crownWarId) {
        this.$message.warning('请选择战区')
        this.$refs.crownWarSelect.focus()
        return false
      }
      this.crownWar({
        id: this.selectedCrown.id,
        wid: this.crownWarId
      })
    },
    // 关闭
    handleCloseWar() {
      this.crownWarId = ''
      this.selectedCrown = {}
      this.visible.war = false
    },
    // 修改重置密码
    async setPwd(data, callback) {
      try {
        const res = await setPwd(data)
        const { code, message } = res
        if (code === 200) {
          this.$message.success(message)
          callback ? callback() : null
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`重置/修改密码失败:${e}`)
      }
    },
    // 重置密码
    handleResetPwd(row) {
      const { id, mobile } = row
      this.$confirm(
        `重置密码将会使用户当前密码失效,将重置为: ${mobile} ,是否确认这样做?`,
        '重置密码',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.setPwd({
          type: 1,
          password: mobile,
          id
        })
      })
    },
    // 修改密码
    handleEditPwd(scope) {
      const { id } = scope.row
      if (!this.edit.pwd) {
        this.$message.warning('修改的密码不能为空')
        return false
      }
      this.setPwd(
        {
          type: 2,
          password: this.edit.pwd,
          id
        },
        () => {
          this.edit.share = ''
          scope._self.$refs[`popover_pwd_${scope.$index}`].doClose()
        }
      )
    },
    // 导出
    async exportMember() {
      this.loadingFull = true
      try {
        this.listQuery.start_time = this.listQuery.start_time || ''
        this.listQuery.end_time = this.listQuery.end_time || ''
        const {
          search_name,
          info_select,
          level,
          commissar,
          warea_id,
          page_index,
          page_size,
          start_time,
          end_time
        } = this.listQuery
        const res = await exportMember({
          search_name,
          level,
          info_select,
          commissar,
          warea_id,
          page_index,
          page_size,
          start_time,
          end_time
        })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          if (data.length < 1) {
            this.$message.error('没有数据哦!!!')
            return false
          }
          import('@/vendor/Export2Excel').then((excel) => {
            const tHeader = [
              '昵称',
              '真实姓名',
              '电话号码',
              '身份证号',
              '代理级别',
              '代理公司',
              '代理公司手机号',
              '所在战区',
              '战区政委',
              '授权码',
              '授权开始时间',
              '授权结束时间',
              '邀请码',
              '认证状态',
              '账户状态',
              '上级代理昵称',
              '上级代理手机号',
              '邀请人昵称',
              '邀请人手机号',
              '备注',
              '微店铺开通',
              '冻结时间',
              '删除时间',
              '最后登录时间'
            ]
            const filterVal = [
              'nickname',
              'realname',
              'mobile',
              'cre_num',
              'level',
              'crown_name',
              'crown_phone',
              'station',
              'staff',
              'auth_code',
              'auth_startime',
              'auth_endtime',
              'recom_code',
              'cert_status',
              'status',
              'agent_name',
              'agent_mobile',
              'recom_name',
              'recom_mobile',
              'remark',
              'store_status',
              'freeze_time',
              'deleted_at',
              'login_at'
            ]
            data.map((item) => {
              item.agent_name =
                item.agent && item.agent.nickname ? item.agent.nickname : ''
              item.agent_mobile =
                item.agent && item.agent.mobile ? item.agent.mobile : ''
              item.recom_name =
                item.recom && item.recom.nickname ? item.recom.nickname : ''
              item.recom_mobile =
                item.recom && item.recom.mobile ? item.recom.mobile : ''
              item.level = this.levelStatus(item.level).name
              item.status = item.deleted === 1 ? '已删除' : item.status === 0 ? (item.freeze_status === 1 ? '已冻结' : (item.service_status === 1 ? '待政委审核' : '正常')) : '已禁用'
              item.cert_status = this.certStatus(item)
              item.station =
                item.warea && item.warea.name ? item.warea.name : ''
              item.staff =
                item.warea && item.warea.admin_name
                  ? item.warea.admin_name
                  : ''
              item.crown_name =
                item.crown && item.crown.nickname
                  ? item.crown.nickname
                  : '暂无'
              item.crown_phone = item.crown ? item.crown.mobile : '暂无'
              item.store_status = item.store_status ? '是' : '否'
              item.freeze_time = item.freeze_time || ''
              item.deleted_at = item.deleted_at || ''
              item.login_at = item.login_at || ''
            })
            const list = data
            console.log(list)
            const dataVal = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data: dataVal,
              filename: `代理详情`,
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.loadingFull = false
            this.$message.success('导出数据完成')
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`导出销售失败: ${e}`)
        this.loadingFull = false
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 搜藏
    handleSearch() {
      this.listQuery.page_index = 1
      this.getList()
    },
    async getStaff() {
      await getStaff()
        .then((res) => {
          if (res.code === 200) {
            this.staffList = res.data
          }
        })
        .catch((e) => {})
    }
  }
}
</script>
<style lang="scss">
.down-popover {
  // transform-origin: center top !important;
  // z-index: 2099 !important;
  // position: fixed !important;
  // top: 20% !important;
  // left: 495px !important;
  height: 60% !important;
  overflow: auto !important;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
:focus {
  outline: 0;
}
.dialog_delete {
  .textarea_h {
    height: 190px;
    margin-bottom: 30px;

    .el-textarea__inner {
      height: 100% !important;
      resize: none;
    }
  }

  .desc {
    display: block;
    margin: 15px 0;
  }
}
.avatar-uploader-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .upload-delete {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cccccc;
    color: #ffffff;
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 16px;
    &:hover {
      background: #409eff !important;
    }
  }
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
  margin-right: 20px;
  margin-bottom: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
}
.options_item {
  width: 276px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;
  cursor: pointer;
  p {
    margin: 0;
  }
  i {
    font-size: 16px;
    &:hover {
      color: #409eff !important;
    }
  }
}
.input_like_select {
  cursor: pointer !important;
  width: 300px;
  /deep/ .el-input__inner {
    cursor: pointer !important;
  }
}
</style>
