<template>
  <div class="warrper">
    <div class="pt32l24">
      <div class="gotoButton" @click="gotoCLick"><i class="gotoIcon"></i>返回</div>
      <div class="schoolpt24">
        <div class="sctitles">学校基本信息</div>
        <div class="schoolInfo"><span>学校编码</span>{{ ruleForm.schoolCode }}</div>
        <div class="schoolInfo"><span>学校名称</span>{{ ruleForm.schoolName }} </div>
        <div class="schoolInfo"><span>学校地址</span>{{ ruleForm.province }}-{{ ruleForm.city }}-{{ ruleForm.area }}-{{ ruleForm.schoolAdrss }}</div>
        <div class="schoolInfo"><span>超级管理员</span>{{ ruleForm.adminName }}</div>
        <div class="schoolInfo"><span>联系电话</span>{{ ruleForm.phone }}</div>
        <div class="schoolInfo"><span>学校类型</span>{{ ruleForm.sType }}</div>
        <div class="gjhqbtn " style="text-align:left;"><el-button class="gjhqprimarybtn" @click="editForm">更新信息</el-button></div>
      </div>
    </div>
    <!-- 弹框新增用户 -->
    <div class="dialogPopRigth" v-if="dialogVisible">
      <div class="dialogBox dialogPopRigthMain">
        <div class="diologBoxTile">学校基本信息</div>
        <div class="popSchool">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="学校编码">
              <div>{{ ruleForm.schoolCode }}</div>
            </el-form-item>
            <el-form-item label="学校名称" prop="schoolName">
              <span class="gjhqIpt"><el-input v-model="ruleForm.schoolName"></el-input></span>
            </el-form-item>
            <el-form-item label="学校类型" prop="schoolvalue">
              <span class="gjhqIpt">
                <el-select v-model="ruleForm.schoolvalue" placeholder="请选择" style="width:100%;" @change="schoolChange">
                <el-option
                  v-for="item in schooloptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </span>
          </el-form-item>
            <el-form-item label="省市区" prop="schoolAdrss">
              <span class="gjhqIpt">
                <el-cascader
                  size="large" style="width:100%"
                  :options="pcaTextArr"
                  v-model="selectedOptions">
                </el-cascader>
              </span>
            </el-form-item>
            <el-form-item label="学校地址" prop="schoolAdrss">
              <span class="gjhqIpt"><el-input v-model="ruleForm.schoolAdrss"></el-input></span>
            </el-form-item>
            <el-form-item label="超级管理员" prop="adminName">
              <span class="gjhqIpt"><el-input v-model="ruleForm.adminName"></el-input></span>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" style="margin-bottom:0;">
              <span class="gjhqIpt" v-if="ruleForm.phone != null">{{ ruleForm.phone }} </span>
              <span v-else> - </span>
              <span class="editPhone" @click="editPhone = true">更换手机号</span>
            </el-form-item>
            <el-form-item label="" v-show="editPhone">
              <div class="subPopDio">
                <div><strong><em>*</em> 新联系电话</strong><span class="gjhqIpt"><el-input class="inpptW120" v-model="ruleForm.phoneTwe" maxlength="11"></el-input></span></div>
                <div style="position:relative;">
                  <strong><em>*</em> 验证码</strong><span class="gjhqIpt"><el-input class="inpptW120" v-model="ruleForm.token"></el-input></span>
                  <div class="yzmtxtsUserEdit" @click="yzmClick" v-if="yzmShow == true">获取验证码</div>
                  <div class="yzmtxtsUserEdit" v-else>{{timers}}秒</div>
                </div>
                <div class="gjhqbtn ecitbutnlss">
                  <el-button class="gjhqmorenbtn" @click="editPhone = false">取 消</el-button>
                  <el-button class="gjhqprimarybtn" @click="submitEditPhoneForm">保 存</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttonDialog">
          <div class="gjhqbtn">
            <el-button class="gjhqmorenbtn" @click="resetForm">取 消</el-button>
            <el-button class="gjhqprimarybtn" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { adminschoolbaseGet, adminschoolbasePut, adminschoolbaseupdatephone, adminresetphonecode, schooltypelist } from '../../axios/api'
import { pcaTextArr } from 'element-china-area-data'
export default {
  name: 'schoolinfo',
  data () {
    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('手机号不能为空！'))
      } else if (!this.phoneRegex.test(value)) {
        callback(new Error('请输入有效的电话号码'))
      } else {
        callback()
      }
    }
    return {
      yzmShow: true,
      dialogVisible: false,
      schooloptions: '',
      ruleForm: {
        schoolCode: '',
        schoolName: '',
        schoolAdrss: '',
        adminName: '',
        phone: '',
        phoneTwe: '',
        token: '',
        province: '',
        city: '',
        area: '',
        id: '',
        schoolType: '',
        sType: '',
        schoolvalue: ''
      },
      pcaTextArr,
      selectedOptions: [],
      rules: {
        schoolName: [
          { required: true, message: '学校名称不能为空！', trigger: 'blur' }
        ],
        schoolAdrss: [
          { required: true, message: '学校地址不能为空！', trigger: 'blur' }
        ],
        schoolvalue: [
          { required: true, message: '请选择学校类型!', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空！', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        adminName: [
          { required: true, message: '超级管理员名称不能为空！', trigger: 'blur' }
        ]
      },
      phoneRegex: /^\d{11}$/,
      timers: 60,
      editPhone: false
    }
  },
  created () {
    let that = this
    if (navigator.onLine) {
    } else {
      that.$messageOne({message: '网络异常，请检测网络是否链接！', type: 'error', duration: 3000})
      return
    }
    // 获取页面高度
    var leftNavHeight = document.documentElement.clientHeight
    that.leftNavHeight = leftNavHeight
    adminschoolbaseGet(1).then(res => {
      if (res.code == 10000) {
        that.ruleForm.schoolCode = res.school_code
        that.ruleForm.schoolName = res.name
        that.ruleForm.province = res.province
        that.ruleForm.city = res.city
        that.ruleForm.area = res.area
        that.ruleForm.schoolAdrss = res.address
        that.ruleForm.adminName = res.administrator
        that.ruleForm.phone = res.tel
        that.ruleForm.id = res.id
        that.selectedOptions.push(res.province)
        that.selectedOptions.push(res.city)
        that.selectedOptions.push(res.area)
        that.ruleForm.sType = res.school_type
        that.ruleForm.schoolvalue = res.type
      } 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})
    })
    schooltypelist().then(res => {
      if (res.code == 10000) {
        that.schooloptions = res.data
      } else {
        that.$messageOne({message: res.message, type: 'error', duration: 3000})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
  },
  methods: {
    schoolChange (e) {
      console.log(e)
      let that = this
      for (var i = 0; i < that.schooloptions.length; i++) {
        if (e == that.schooloptions[i].id) {
          that.ruleForm.schoolvalue = e
        }
      }
    },
    submitEditPhoneForm () {
      let that = this
      let obj = {}
      obj.phone = that.ruleForm.phoneTwe
      obj.token = that.ruleForm.token
      adminschoolbaseupdatephone(obj).then(res => {
        if (res.code == 10000) {
          that.editPhone = false
          that.ruleForm.phone = that.ruleForm.phoneTwe
          that.$messageOne({message: '修改成功！', type: 'success', duration: 3000})
        } else {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log(error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    },
    djsTime () {
      let that = this
      const interval = setInterval(() => {
        that.timers--
        if (that.timers == 0) {
          clearInterval(interval) // 清除计时器
          that.yzmShow = true
          that.timers = 60 // 重置倒计时时长，根据需要可以省略此行，如果每次点击都应该重新开始倒计时
        }
      }, 1000) // 每秒更新一次倒计时
    },
    gotoCLick () {
      this.$router.push({name: 'homes'})
    },
    editForm () {
      this.dialogVisible = true
    },
    resetForm () {
      this.dialogVisible = false
    },
    submitForm (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {}
          obj.province = that.selectedOptions[0]
          obj.city = that.selectedOptions[1]
          obj.area = that.selectedOptions[2]
          obj.name = that.ruleForm.schoolName
          obj.address = that.ruleForm.schoolAdrss
          obj.administrator = that.ruleForm.adminName
          obj.tel = that.ruleForm.phone
          obj.id = that.ruleForm.id
          obj.type = that.ruleForm.schoolvalue
          adminschoolbasePut(obj).then(res => {
            if (res.code == 10000) {
              this.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
        }
      })
    },
    yzmClick () {
      let that = this
      let obj = {}
      obj.phone = that.ruleForm.phoneTwe
      adminresetphonecode(obj).then(res => {
        if (res.code == 10000) {
          that.yzmShow = false
          that.djsTime()
        } else if (res.code == 69002) {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        console.log(error)
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }
  }
}
</script>
<style scoped>
.schoolpt24{padding:24px 0 300px;}
.schoolpt24 .sctitles{height: 32px;font-weight: bold;font-size: 24px;color: #161617;line-height: 32px;margin-bottom:24px;}
.schoolpt24 .schoolInfo{font-size: 14px;color: #161617;line-height: 22px;margin-bottom:12px;}
.schoolpt24 .schoolInfo span{font-weight:bold;width:90px;display:inline-block;}
.popSchool{padding:24px 20px 0 0;}
.yzmtxtsUserEdit{cursor:pointer;font-size: 14px;color: #0071DB;position:absolute;top:1px;right:20px;z-index:999;}
.editPhone{color:#0071DB;cursor:pointer;}
.subPopDio{padding:16px 16px;background:#F6F6F6;position:relative;}
.subPopDio strong{width:90px;display:inline-block;overflow:hidden;color:#606266;padding-right:10px;text-align:right;}
.subPopDio .inpptW120{width:190px;overflow:hidden;}
.subPopDio strong em{color:#F56C6C;}
.subPopDio .ecitbutnlss{text-align:right;padding-right:9px;}
.dialogPopRigthMain{height:990px;}
.dialogPopRigth{height:1070px;}
</style>
