<template>
  <div class="warrper">
    <div class="pt32l24">
      <div class="gotoButton pb24" @click="gotoCLick"><i class="gotoIcon"></i>返回</div>
      <div class="gjhqTitle pb24">
        <div class="gjhqbtn rf">
          <el-button class="gjhqmorenbtn" @click="uploadClick">批量上传</el-button>
          <el-button class="gjhqprimarybtn" @click="addUserClick"><i class="gjhqicon gjhqmr4 gjhqaddIconT"></i>新增用户</el-button>
        </div>用户管理
      </div>
      <div class="elementUiTable">
        <el-table header-cell-class-name="my-header-class"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="姓名">
            <template slot-scope="scope">
              <span v-if="scope.row.shows">{{ scope.row.username }}</span>
              <span v-else class="gjhqIpt"><el-input v-model="scope.row.username"></el-input></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="gender"
            sortable
            label="性别">
            <template slot-scope="scope">
              <span v-if="scope.row.shows">
                <span v-if="scope.row.gender == 1">男</span>
                <span v-if="scope.row.gender == 2">女</span>
              </span>
              <span v-else class="gjhqIpt">
                <el-select v-model="scope.row.gender" placeholder="请选择">
                  <el-option
                    v-for="item in sexOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="电话">
            <template slot-scope="scope">
              <span v-if="scope.row.shows">{{ scope.row.name }}</span>
              <span v-else class="editPhoneUser" @click="editPhoneUserHandle(scope.row)">更改手机号</span>
            </template>
          </el-table-column>
          <el-table-column
            label="职位">
            <template slot-scope="scope">
              <span v-if="scope.row.shows">
                <span v-if="scope.row.zhiwei.length > 0"><span v-for="(item, i) in scope.row.zhiwei" :key="i">{{ item.name }}; </span></span>
                <span v-else>-</span>
              </span>
              <span v-else class="gjhqIpt">
                <el-select v-model="scope.row.zhiweiArray" placeholder="请选择" class="elselectUi" multiple @change="zhiweiHandle($event, scope.row)">
                  <el-option
                    v-for="item in pooptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                  <div class="eloption">
                    <div class="gjhqiconBtnT" style="width:80px;" v-if="scope.row.posiShow == true" @click="addPositionHandle(scope.row)"><i class="gjhqicon gjhqmr4 gjhqaddIconT"></i>添加职位</div>
                    <div class="gjhqIpt" v-else>
                      <el-input style="width:100px;" v-model="scope.row.positionVals" placeholder="输入新内容"></el-input>
                      <span class="eloptionbtn">
                        <span class="elbtn" @click="closeEditHandle(scope.row)">取消</span>
                        <span class="elbtn" @click="saveEditHandle(scope.row)">保存</span>
                      </span>
                    </div>
                  </div>
                </el-select>
              </span>
            </template>
          </el-table-column>
          <el-table-column
          label="操作">
            <template slot-scope="scope">
              <div class="gjhqbtn">
                <el-button class="gjhqformbtn" v-if="scope.row.shows" @click="editHandle(scope.row)">编辑</el-button>
                <el-button class="gjhqformbtn" v-else @click="saveHandle(scope.row)">保存</el-button>
                <el-button class="gjhqformbtn" @click.native.prevent="deleteRow(scope.row)" v-if="scope.row.system != 1">删除</el-button>
                <el-button class="gjhqformbtn" style="color:#979797;" v-else>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 弹框新增用户 -->
    <div class="dialogPopRigth" v-if="dialogVisible">
      <div class="dialogBox dialogPopRigthMain userlistaddHeight" v-if="userAddorEditPhone == true">
        <div class="diologBoxTile">新增用户</div>
        <div>
          <div class="diologsTile">用户信息</div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="username">
              <span class="gjhqIpt"><el-input class="w320" v-model="ruleForm.username" placeholder="请输入"></el-input></span>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <span class="gjhqIpt">
                <el-select v-model="ruleForm.gender" placeholder="请选择" style="width:320px;" name="gender">
                  <el-option
                    v-for="item in popsexOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item label="手机" prop="name">
              <span class="gjhqIpt"><el-input class="w320" maxlength="11" v-model="ruleForm.name" placeholder="请输入"></el-input></span>
            </el-form-item>
            <el-form-item label="职位" prop="zhiwei">
              <span class="gjhqIpt">
                <el-select v-model="ruleForm.zhiweiArr" placeholder="请选择" class="elselectUi" multiple style="width:320px;" @change="zhiweiAddHandle">
                  <el-option
                    v-for="item in pooptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                  <div class="eloption">
                    <div class="gjhqiconBtnT" style="width:80px;" v-if="ruleForm.popPosiShow == true" @click="popAddHandle"><i class="gjhqicon gjhqmr4 gjhqaddIconT"></i>添加职位</div>
                    <div class="gjhqIpt" v-else>
                      <el-input style="width:200px;" v-model="ruleForm.posiVals" placeholder="请输入"></el-input>
                      <span class="eloptionbtn">
                        <span class="elbtn" @click="closePopHandle">取消</span>
                        <span class="elbtn" @click="popSaveHandle">保存</span>
                      </span>
                    </div>
                  </div>
                </el-select>
              </span>
            </el-form-item>
          </el-form>
        </div>
        <div class="userDetails">
          <div class="diologsTile">账户信息</div>
          <el-form label-width="92px" class="demo-ruleForm">
            <el-form-item label="用户名">
              <div v-if="ruleForm.name == ''">-</div>
              <div v-else>
                <p>{{ ruleForm.name }}</p>
                <p>用户名默认为用户手机号</p>
                <p>如需更改用户名，请修改用户手机号</p>
              </div>
            </el-form-item>
            <el-form-item label="初始密码" v-if="ruleForm.name != ''">
              <span v-if="ruleForm.name != ''">123@Abc</span>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttonDialog">
          <div class="gjhqbtn">
            <el-button class="gjhqmorenbtn" @click="resetForm('ruleForm')">取 消</el-button>
            <el-button class="gjhqprimarybtn" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </div>
      </div>
      <div v-else class="dialogBox dialogPopRigthMain userlistaddHeight">
        <div class="diologBoxTile">更改手机号</div>
        <div>
          <div class="diologsTile">用户信息</div>
          <el-form :model="editPhoneForm" :rules="rulesTwe" ref="editPhoneForm" label-width="70px" class="demo-ruleForm">
            <el-form-item label="手机" prop="phone">
              <span class="gjhqIpt"><el-input class="w320" type="number" v-model="editPhoneForm.phone" maxlength="11" placeholder="请输入"></el-input></span>
            </el-form-item>
            <el-form-item label="验证码" prop="token" style="position:relative;">
              <span class="gjhqIpt"><el-input class="w320" v-model="editPhoneForm.token" placeholder="请输入"></el-input></span>
              <div class="yzmtxtsUserEdit" @click="yzmClick" v-if="yzmShow == true">获取验证码</div>
              <div class="yzmtxtsUserEdit" v-else>{{timers}}秒</div>
            </el-form-item>
          </el-form>
          <div class="userDetails">
            <div class="diologsTile">账户信息</div>
            <el-form label-width="92px" class="demo-ruleForm" :model="editPhoneForm" :rules="rulesTwe" >
              <el-form-item label="用户名" prop="phone">
                <div v-if="editPhoneForm.phone == ''">-</div>
                <div v-else>
                  <p>{{ editPhoneForm.phone }}</p>
                  <p>用户名默认为用户手机号</p>
                  <p>如需更改用户名，请修改用户手机号</p>
                </div>
              </el-form-item>
              <el-form-item label="初始密码" v-if="editPhoneForm.phone != ''">
                <span v-if="editPhoneForm.phone != ''">123@Abc</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="buttonDialog">
          <div class="gjhqbtn">
            <el-button class="gjhqmorenbtn" @click="closePhoneHandle">取 消</el-button>
            <el-button class="gjhqprimarybtn" @click="submitEditPhoneForm('editPhoneForm')">确 定</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框批量上传 -->
     <el-dialog
      title="批量导入"
      :visible.sync="uploadPiLShow"
      width="30%"
      class="pldrDialog"
      :before-close="handleClose">
      <div class="pldrDialogDiv">
        <div class="dialogSpan">
          <span class="lf">下载模板</span>
          <div class="gjhqiconBtnBox lf" @click="downUserMbHandle">
            <i class="gjhqicon gjhqmr4 gjhqdownIcon"></i>下载模版表格
          </div>
        </div>
        <div class="clear"></div>
        <div>2、导入步骤</div>
        <div>下载模版-按照模板填写内容-选择文件-系统执行上传-导入完成</div>
        <h4 class="dialogH4">导入模板</h4>
        <div class="downBox" v-if="donwLoadAnimite == false">
          <div>
            <el-upload
              class="upload-demo"
              name="file"
              :action="uploadImg"
              :headers="{
                  'laravel-session-admin' : userToken,
              }"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :limit="1"
              :file-list="fileList">
              <i class="downIcon"></i>
              <div class="dovnCLick">点击上传</div>
              <p class="ptxt">只能导入后缀为xlsx类型的文件、一次最多导入100行</p>
            </el-upload>
          </div>
        </div>

        <div class="downBox" v-else>
          <div class="downUpOk">
            <div class="upokIcon"></div>
            <div class="upokName">{{ uploadCsvName }}...{{ numCsvVal }}%</div>
            <div class="upokText">只能导入后缀为xlsx类型的文件、一次最多导入100行</div>
          </div>
          <div class="donwLoadNum" :class="donwLoadAnimite == true?'current':''"></div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer gjhqbtn">
        <el-button class="gjhqmorenbtn" @click="handleClose">取 消</el-button>
        <el-button class="gjhqprimarybtn" @click="uploadSubMitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { adminZhiwei, adminRolePost, adminZhiweiPost, adminAdmins, adminAdminsGet, adminAdminsPut, adminAdminsDetele, adminUpdateAdminPhoneCode, adminPhonePost, adminbattchadminmppath } from '../../axios/api'
export default {
  name: 'userlists',
  data () {
    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('手机号不能为空！'))
      } else if (!this.phoneRegex.test(value)) {
        callback(new Error('请输入11位正确手机号！'))
      } else {
        callback()
      }
    }
    return {
      userAddorEditPhone: true,
      dialogVisible: false,
      leftNavHeight: '',
      uploadPiLShow: false,
      positionVals: '',
      pooptions: '',
      tableData: '',
      sexOptions: [
        {
          value: 1,
          label: '男'
        }, {
          value: 2,
          label: '女'
        }
      ],
      ruleForm: {
        name: '',
        gender: 1,
        password: '123@Abc',
        password_confirmation: '123@Abc',
        avatar: '',
        introduction: '',
        username: '',
        phone: '',
        role_id: '',
        popPosiShow: true,
        posiVals: '',
        zhiwei: [],
        zhiweiArr: []
      },
      popsexOptions: [
        {
          value: 1,
          label: '男'
        }, {
          value: 2,
          label: '女'
        }
      ],
      rules: {
        username: [
          { required: true, message: '用户名不能为空！', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '性别不能为空！', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '手机号不能为空！', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        zhiwei: [
          { required: true, message: '职位不能为空！', trigger: 'blur' }
        ]
      },
      agesRegex: /^\d{2}$/,
      phoneRegex: /^\d{11}$/,
      fileList: [],
      userToken: '',
      uploadImg: '',
      editPhoneForm: {
        admin_id: '',
        phone: '',
        token: ''
      },
      rulesTwe: {
        phone: [
          { required: true, message: '手机号不能为空！', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        token: [
          { required: true, message: '验证码不能为空！', trigger: 'blur' }
        ]
      },
      donwLoadAnimite: false,
      uploadCsvName: '',
      numCsvVal: 0,
      yzmShow: true,
      timers: 60
    }
  },
  created () {
    let that = this
    if (navigator.onLine) {      
    } else {
      that.$messageOne({message: '网络异常，请检测网络是否链接！', type: 'error', duration: 3000})
      return
    }
    // 获取页面高度
    var leftNavHeight = document.documentElement.clientHeight
    that.leftNavHeight = leftNavHeight
    that.userToken = localStorage.getItem('UserToken')
    that.uploadImg = process.env.REQUEST_URL + '/admin/battch-admin'
    that.userListTable()
    adminZhiwei(1000).then(res => {
      if (res.code == 10000) {
        that.pooptions = res.data
      } else if (res.code == 10002) {
        that.$router.push({name: 'Login'})
      } else {
        that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
  },
  methods: {
    djsTime () {
      let that = this
      const interval = setInterval(() => {
        that.timers--
        if (that.timers == 0) {
          clearInterval(interval) // 清除计时器
          that.yzmShow = true
          that.timers = 60 // 重置倒计时时长，根据需要可以省略此行，如果每次点击都应该重新开始倒计时
        }
      }, 1000) // 每秒更新一次倒计时
    },
    handleClose () {      
      this.uploadPiLShow = false
      this.fileList = []
      this.uploadCsvName = ''
      this.numCsvVal = 0
      this.donwLoadAnimite = false
    },
    uploadSubMitClick () {
      this.userListTable()
      this.uploadPiLShow = false
      this.fileList = []
      this.uploadCsvName = ''
      this.numCsvVal = 0
      this.donwLoadAnimite = false
    },
    downUserMbHandle () {
      let that = this
      let url = process.env.REQUEST_URL + '/admin/battch-admin-tmp'
      let test = '反欺凌能力评估系统_用户管理_模版表格.xlsx'
      if (window.pywebview != undefined) {
        adminbattchadminmppath().then(res => {
          if (res.code == 10000) {
            const encrypted = window.pywebview.api.save_file(url, test)
            return encrypted.then(res => {
              return res
            })
          } else {
            that.$messageOne({message: res.message, type: 'error', duration: 3000})
          }
        }).catch(error => {
          that.$messageOne({message: error, type: 'error', duration: 3000})
        })
      } else {
        const link = document.createElement('a')
        link.href = url
        link.download = '反欺凌能力评估系统_用户管理_模版表格.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }
    },
    userListTable () {
      let that = this
      let obj = {}
      obj.limit = 1000
      obj.role_id = ''
      adminAdminsGet(obj).then(res => {
        if (res.code == 10000) {
          let datas = res.data
          for (var i = 0; i < datas.length; i++) {
            datas[i].shows = true
            datas[i].posiShow = true
            datas[i].zhiweiArray = []
            datas[i].zhiwei_id = []
          }
          that.tableData = datas
          console.log(that.tableData)
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    uploadClick () {
      this.uploadPiLShow = true
    },
    gotoCLick () {
      let that = this
      if (that.dialogVisible == true) {
        that.$messageOne({message: '请保存数据后在返回！', type: 'error', duration: 3000})
        return
      }
      that.$router.push({name: 'homes'})
    },
    zhiweiChange (e) {
      console.log(e)
    },
    zhiweiHandle (value, item) {
      const selectedObjects = value.map(val => this.pooptions.find(opt => opt.id === val))
      item.zhiwei = ''
      item.zhiwei = selectedObjects
    },
    zhiweiAddHandle (value) {
      const selectedObjects = value.map(val => this.pooptions.find(opt => opt.id === val))
      this.ruleForm.zhiwei = ''
      this.ruleForm.zhiwei = selectedObjects
    },
    editHandle (item) {
      item.shows = false
      this.editPhoneForm.admin_id = item.id
      if (item.gender == 0) {
        item.gender = ''
      } else {
        item.gender = item.gender
      }
      let positionDatas = item.zhiwei
      for (var i = 0; i < positionDatas.length; i++) {
        item.zhiweiArray.push(positionDatas[i].id)
      }
      this.$forceUpdate()
    },
    saveHandle (item) {
      let that = this
      if (item.username == '') {
        that.$messageOne({message: '姓名不能为空！', type: 'error', duration: 3000})
        return
      }
      if (item.zhiwei.length == 0) {
        that.$messageOne({message: '职位不能为空！', type: 'error', duration: 3000})
        return
      }
      console.log(item)
      item.zhiwei_id = item.zhiweiArray
      item.shows = true
      adminAdminsPut(item).then(res => {
        if (res.code == 10000) {
          that.userListTable()
          that.$messageOne({message: '修改成功', type: 'success', duration: 3000})
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    deleteRow (item) {
      let that = this
      that.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {}
        obj.id = item.id
        adminAdminsDetele(obj).then(res => {
          if (res.code == 10000) {
            that.userListTable()
            that.$messageOne({message: '删除成功', type: 'success', duration: 3000})
          } else {
            that.$messageOne({message: res.message, type: 'error', duration: 3000})
          }
        }).catch(error => {
          that.$messageOne({message: error, type: 'error', duration: 3000})
        })
      }).catch(() => {
        that.$messageOne({message: '已取消删除!', type: 'info', duration: 3000})
      })
    },
    addPositionHandle (item) {
      item.posiShow = false
    },
    closePositionHandle (item) {
      item.posiShow = true
    },
    editPhoneUserHandle (item) {
      this.dialogVisible = true
      this.userAddorEditPhone = false
      this.editPhoneForm.phone = item.name
    },
    closePhoneHandle () {
      this.dialogVisible = false
    },
    submitEditPhoneForm (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          adminPhonePost(that.editPhoneForm).then(res => {
            if (res.code == 10000) {
              that.userListTable()
              that.dialogVisible = false
              that.$messageOne({message: '修改成功！', type: 'success', duration: 3000})
            } else {
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
            }
          }).catch(error => {
            that.$messageOne({message: error, type: 'error', duration: 3000})
          })
        } else {
          return false
        }
      })
    },
    // 添加用户
    addUserClick () {
      this.dialogVisible = true
      this.userAddorEditPhone = true
    },
    submitForm (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          adminAdmins(that.ruleForm).then(res => {
            if (res.code == 10000) {
              that.ruleForm.popPosiShow = true
              that.dialogVisible = false
              that.ruleForm = {
                name: '',
                gender: 1,
                password: '123@Abc',
                password_confirmation: '123@Abc',
                avatar: '',
                introduction: '',
                username: '',
                phone: '',
                role_id: '',
                popPosiShow: true,
                posiVals: '',
                zhiwei: [],
                zhiweiArr: []
              }
              that.userListTable()
              that.$messageOne({message: '添加成功！', type: 'success', duration: 3000})
            } else if (res.code == 10001) {
              that.$messageOne({message: res.errors.name[0], type: 'error', duration: 3000})
            } else {
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
            }
          }).catch(error => {
            that.$messageOne({message: error, type: 'error', duration: 3000})
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.dialogVisible = false
      this.ruleForm.zhiweiArr = []
      this.$refs[formName].resetFields()
    },
    popAddHandle () {
      this.ruleForm.popPosiShow = false
    },
    closeEditHandle (item) {
      item.posiShow = true
      item.positionVals = ''
    },
    saveEditHandle (item) {
      let that = this
      let name = item.positionVals
      if (name == '') {
        that.$messageOne({message: '角色名不能为空！', type: 'info', duration: 3000})
        return false
      }
      let obj = {}
      obj.name = name
      adminZhiweiPost(obj).then(res => {
        if (res.code == 10000) {
          let obj = {}
          obj.id = res.id
          obj.name = res.name
          that.pooptions.push(obj)
          item.posiShow = true
          item.positionVals = ''
          that.$forceUpdate()
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    closePopHandle () {
      this.ruleForm.popPosiShow = true
      this.ruleForm.posiVals = ''
    },
    popSaveHandle () {
      let that = this
      let name = that.ruleForm.posiVals
      if (name == '') {
        that.$messageOne({message: '职位名不能为空！', type: 'error', duration: 3000})
        return false
      }
      let obj = {}
      obj.name = name
      adminZhiweiPost(obj).then(res => {
        if (res.code == 10000) {
          let obj = {}
          obj.id = res.id
          obj.name = res.name
          that.pooptions.push(obj)
          that.ruleForm.popPosiShow = true
          that.ruleForm.posiVals = ''
          that.$forceUpdate()
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    editSaveHandle (item) {
      let that = this
      let name = item.positionVals
      if (name == '') {
        that.$messageOne({message: '角色名不能为空！', type: 'info', duration: 3000})
        return false
      }
      let obj = {}
      obj.name = item.positionVals
      adminRolePost(obj).then(res => {
        if (res.code == 10000) {
          let obj = {}
          obj.id = res.id
          obj.name = res.name
          that.pooptions.push(obj)
          that.$forceUpdate()
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    // 上传功能
    handleSuccess (response, file, fileList) {
      let that = this
      that.fileList = []
      if (response.code == 10000) {
        that.donwLoadAnimite = true
        that.uploadCsvName = file.name
        setInterval(() => {
          let numCsvVal = that.numCsvVal
          if (numCsvVal < 100) {
            that.numCsvVal += 10
          }
        }, 50)
        that.$messageOne({message: '文件导入成功', type: 'success', duration: 3000})
      } else if (response.code == 10001) {
        that.$messageOne({message: response.errors.name[0], type: 'error', duration: 3000})
      } else {
        that.$messageOne({message: response.message, type: 'warning', duration: 3000})
      }
    },
    beforeUpload (file) {
      const fileSuffix = file.name.split('.')
      const isLt2M = file.size / 1024 / 1024 < 2
      console.log(fileSuffix[1])
      if ((fileSuffix[1]) != 'xlsx') {
        this.$messageOne({message: '上传文件只能是.xlsx格式', type: 'warning', duration: 3000})
        return false
      }
      if (!isLt2M) {
        this.$messageOne({message: '上传文件小不能超过 2MB!', type: 'warning', duration: 3000})
        return false
      }
    },
    yzmClick () {
      let that = this
      if (that.editPhoneForm.phone == '') {
        that.$messageOne({message: '手机号不能为空！', type: 'error', duration: 3000})
        return
      }
      adminUpdateAdminPhoneCode(that.editPhoneForm).then(res => {
        if (res.code == 10000) {
          that.donwLoadAnimite = true
          that.yzmShow = false
          that.djsTime()
        } else if (res.code == 69002) {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      })
    }
  }
}
</script>
<style scoped>
.eloption{margin:10px 10px 0;}
.eloptionbtn{font-size: 14px;color: #0071DB;text-align: left;font-style: normal;}
.eloptionbtn .elbtn{padding-left:8px;cursor:pointer;}
.elementUiTable{height:830px;overflow:hidden;overflow-y:auto;}
.elementUiTable >>> .my-header-class{background: #F7F7F7;border-radius: 2px;}
.elementUiTable >>> .el-table__empty-text{background:url('../../assets/icon24.png') no-repeat 0 0/100%;display:inline-block;width:64px;height:88px;margin:20px;text-indent:-9999px;}
.pldrDialog >>> .el-dialog__body{padding:16px 20px;background:#fafafa;border-top:1px solid #DCDFE6;border-bottom:1px solid #DCDFE6;}
.pldrDialog >>> .el-dialog__footer{padding:14px 20px;}
.pldrDialogDiv{line-height:36px;font-size: 14px;color: #303133;position:relative;}
.dialogSpan span{padding-right:12px;}
.dialogH4{height: 24px;font-weight:bold;font-size: 16px;color: #303133;line-height: 24px;margin:12px 0;}
.downBox{background: #FFFFFF;border: 1px dashed #979797;padding:24px 0;text-align:center;position:relative;}
.downBox .downIcon{background:url('../../assets/icon25.png') no-repeat 0 0/100%;display:inline-block;width:44px;height:44px;margin-bottom:0;}
.downBox .dovnCLick{text-align:center;font-size: 14px;color: #0071DB;height:24px;line-height:18px;}
.downBox .ptxt{color: #787A80;line-height: 17px;}
.pldrDialogDiv .donwLoadNum{width:0%;position:absolute;bottom:0;left:0;background:#0071DB;height:3px;overflow:hidden;}
.pldrDialogDiv .donwLoadNum.current{animation:widthexpand 1s forwards; /* 应用动画 */}
.editPhoneUser{cursor:pointer;font-size: 14px;color: #0071DB;}
.yzmtxtsUserEdit{cursor:pointer;font-size: 14px;color: #0071DB;position:absolute;top:1px;right:105px;z-index:999;}
.userDetails{border-top:1px solid #e6e6e6;}
.downUpOk{text-align:center;}
.downUpOk .upokIcon{background:url('../../assets/icon50.png') no-repeat 0 0/100%;width:44px;height:44px;display:inline-block;}
.downUpOk .upokName{font-size: 14px;color: #303133;line-height: 20px;margin-top:8px;}
.downUpOk .upokText{font-size: 12px;color: #787A80;line-height: 17px;margin-top:4px;}
.userlistaddHeight{height:754px;}
.dialogPopRigthMain{height:990px;}
.dialogPopRigth{height:1070px;}
@keyframes widthexpand {
0% {
  width: 0%;
}
100% {
  width: 100%;
}
}
</style>
