
<template>
  <div class="app-container">
    <el-button
      type="primary"
      class="update"
      @click="clickFun('编辑资料')"
    >编辑资料</el-button>
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item v-if="getInfo.type == 2">
        <template slot="label"> 账号类型 </template>
        <span v-if="getInfo.type == 1">民航总局账号</span>
        <el-tag v-if="getInfo.type == 2" type="success">{{
          getInfo.adminType == 1 ? "机场公司" : "机场公安局"
        }}</el-tag>
        <span v-if="getInfo.type == 3">{{ getInfo.unitAllName }}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 账号名称 </template>
        {{ getInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 单位简称 </template>
        {{ getInfo.unitConciseName }}
      </el-descriptions-item>
      <el-descriptions-item v-if="getInfo.type == 3 && getInfo.adminType == 1">
        <template slot="label"> 单位类型 </template>
        <div
          v-if="getInfo.unitType"
          style="background-color: #ecf5ff;
            border: 1px solid #d9ecff;
            padding: 0 10px;
            line-height: 24px;
            font-size: 12px;
            color: #409EFF;
            border-radius: 4px;"
        >{{ (unitTypeList||[])[getInfo.unitType - 1].desc }}【{{ (unitTypeList||[])[getInfo.unitType - 1].detail }}】</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 管理员姓名 </template>
        {{ getInfo.manageName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 管理员手机号 </template>
        {{ getInfo.managePhone }}
      </el-descriptions-item>
      <el-descriptions-item v-if="role == 2 && adminType == 1">
        <template slot="label"> 关联机场公安局 </template>
        {{ getInfo.linkName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 密码 </template>
        <el-button type="primary" @click="clickFun('重置密码')">
          重置密码
        </el-button>
      </el-descriptions-item>
      <template v-if="getInfo.type == 3 && getInfo.adminType == 1">
        <el-descriptions-item>
          <template slot="label"> 单位全称 </template>
          {{ getInfo.unitAllName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单位简称 </template>
          {{ getInfo.unitConciseName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 企业代码 </template>
          {{ getInfo.unitCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 营业执照 </template>
          <el-image
            v-if="getInfo.unitBusinessImg"
            class="table-img"
            :src="getInfo.unitBusinessImg"
            :preview-src-list="[getInfo.unitBusinessImg]"
          />
          <span v-else>暂无</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单位准入函件 </template>
          <el-image
            v-if="getInfo.unitAllowInFile"
            class="table-img"
            :src="getInfo.unitAllowInFile"
            :preview-src-list="[getInfo.unitAllowInFile]"
          />
          <span v-else>暂无</span>
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <!--对话框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <template v-if="dialogTitle === '重置密码'">
          <el-form-item
            label-width="80px"
            label="旧密码"
            class="form-item-style"
            prop="oldPassword"
          >
            <el-input
              v-model.trim="form.oldPassword"
              placeholder="请输入旧密码"
              show-password
            />
          </el-form-item>
          <el-form-item
            label-width="80px"
            label="新密码"
            class="form-item-style"
            prop="newPassword"
          >
            <el-input
              v-model.trim="form.newPassword"
              placeholder="请输入新密码"
              show-password
            />
          </el-form-item>
        </template>

        <div v-if="dialogTitle === '编辑资料'" class="flex">
          <el-form-item
            label="管理员姓名"
            class="form-item-style"
            prop="manageName"
          >
            <el-input
              v-model.trim="form.manageName"
              maxlength="20"
              show-word-limit
              placeholder="请输入管理员姓名"
            />
          </el-form-item>
          <el-form-item
            label="管理员手机号"
            class="form-item-style"
            prop="managePhone"
          >
            <el-input
              v-model.trim="form.managePhone"
              maxlength="11"
              show-word-limit
              placeholder="请输入管理员手机号"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'
import { passwordUpdate, infoUpdate, getUnitList } from '@/api/user_manage'
export default {
  components: {},
  filters: {},
  data() {
    return {
      role: this.$store.getters.role,
      adminType: this.$store.getters.adminType,
      unitTypeList: [
        // { id: 1, name: '本级单位' },
        // { id: 2, name: '驻场单位' }
      ],
      getInfo: {},
      // 是否显示对话框
      dialogVisible: false,
      dialogTitle: '重置密码',
      // 添加角色参数
      form: {
        newPassword: null,
        oldPassword: null,
        manageName: null,
        managePhone: null
      },
      // 验证规则
      rules: {
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
            message:
              '必须大小写字母、数字、特殊字符,4种组合中至少满足3种，且密码长度在10-32位之间'
          }
        ],
        oldPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
            message:
              '必须大小写字母、数字、特殊字符,4种组合中至少满足3种，且密码长度在10-32位之间'
          }
        ],
        manageName: [{ required: true, message: '请输入', trigger: 'change' }],
        managePhone: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.selectInit()
    this.fetchData()
    this.form_copy = JSON.parse(JSON.stringify(this.form))
  },
  methods: {
    async selectInit() {
      this.enumLoading = true
      const unitAxios = await getUnitList()
      await Promise.all([
        unitAxios
      ]).then(res => {
        const unitAxiosRes = res[0]
        this.unitTypeList = unitAxiosRes.data
      }).finally(() => {
        this.enumLoading = false
      })
    },
    // 获取列表数据
    fetchData() {
      getInfo().then((res) => {
        this.getInfo = res.data
        this.form = res.data
      })
    },
    clickFun(type) {
      this.dialogTitle = type
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          let res
          if (this.dialogTitle === '重置密码') {
            res = await passwordUpdate(this.form)
          } else {
            res = await infoUpdate(this.form)
          }
          if (res.code === 200) {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } else {
            this.$message.err(res.mgs)
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.update {
  margin-bottom: 20px;
}
</style>
