<!-- 所属行业 操作弹框 -->
<template>
  <el-dialog
    title="密码修改"
    :show-close="!isOpen"
    :visible.sync="dataFormVisible"
    :close-on-click-modal="false"
    width='520px'
    @close="closeHandle">
    <div class="view-body">
      <div class="view-form">
        <div class="form-cnt">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form label-position="right" label-width="100px" :model="formData" :disabled="type === 2 || type === 3">
                <el-form-item :label="$t('user.oldPassword')+'：'" class="require">
                  <el-input
                    v-model="formData.oldPassword"
                    ref="oldPassword"
                    :key="oPwdType"
                    :type="oPwdType"
                    autocomplete="on"
                  />
                  <span class="show-pwd" @click="showPwd('oPwdType', 'oldPassword')">
                    <img v-if="oPwdType === 'password'" src="@/assets/images/eye.png" alt="">
                    <img v-if="oPwdType !== 'password'" src="@/assets/images/eye_open.png" alt="">
                  </span>
                </el-form-item>
                <el-form-item :label="$t('user.password')+'：'" class="require">
                  <el-input
                    v-model="formData.password"
                    ref="password"
                    :key="pwdType"
                    :type="pwdType"
                    autocomplete="on"
                  />
                  <span class="show-pwd" @click="showPwd('pwdType', 'password')">
                    <img v-if="pwdType === 'password'" src="@/assets/images/eye.png" alt="">
                    <img v-if="pwdType !== 'password'" src="@/assets/images/eye_open.png" alt="">
                  </span>
                </el-form-item>
                <el-form-item :label="$t('user.confirmPassword')+'：'" class="require">
                  <el-input
                    v-model="formData.confirmPassword"
                    ref="confirmPassword"
                    :key="cPwdType"
                    :type="cPwdType"
                    autocomplete="on"
                  />
                  <span class="show-pwd" @click="showPwd('cPwdType', 'confirmPassword')">
                    <img v-if="cPwdType === 'password'" src="@/assets/images/eye.png" alt="">
                    <img v-if="cPwdType !== 'password'" src="@/assets/images/eye_open.png" alt="">
                  </span>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="dialog-footer but_icon" >
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="submitHandle">
            {{ $t('table.sbumit') }}
        </el-button>
        <el-button v-if="!isOpen" v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dataFormVisible = false">
            {{ $t('table.cancel') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import waves from '@/directive/waves';
import http from '@/api/http';
import { validatenull } from '@/utils/validate.js'
export default {
  data() {
    return {
      dataFormVisible: false,
      isOpen: undefined,
      type: undefined,
      oPwdType: 'password',
      pwdType: 'password',
      cPwdType: 'password',
      formData: {
        oldPassword: undefined, // 旧密码
        password: undefined, // 新密码
        confirmPassword: undefined // 确认密码
      },
      userInfo: {
        id: undefined,
        name: undefined,
        employeeNumber: undefined,
        orgName: undefined,
        account: undefined,
        password: undefined,
      }
    }
  },
  directives: { waves },
  filters: {
    titleFilter(title) {
      const tilteMap = {
        0: '新增',
        1: '修改',
        2: '详情'
      }
      return tilteMap[title]
    }
  },
  methods: {
    init(userInfo, isOpen) {
      this.dataFormVisible = true
      this.isOpen = isOpen
      // this.type = type
      this.$nextTick(() => {
        Object.keys(this.userInfo).forEach((v) => {
        this.userInfo[v] = userInfo[v]
      })
      //   if (type === 0) {
      //     this.id = undefined
      //   } else if (type === 1 || type === 2 || type === 3) {
      //     this.id = row.id
      //     this.queryById(this.id)
      //   }
      })
    },
    showPwd(pName, refName) {
      if (this[pName] === 'password') {
        this[pName] = ''
      } else {
        this[pName] = 'password'
      }
      this.$nextTick(() => {
        this.$refs[refName].focus()
      })
    },

    // 通过id查询资金用途
    queryById(id) {
      http.post('/share/fundingPurpose/get', { id: id }).then((res) => {
        Object.keys(this.formData).forEach((v) => {
          this.formData[v] = res.data[v] ? res.data[v] : undefined
        })
      }).catch(() => {})
    },

    // 提交
    submitHandle() {
      // oldPassword: undefined, // 旧密码
      // password: undefined, // 新密码
      // confirmPassword: undefined // 确认密码
      let { oldPassword, password, confirmPassword } = this.formData
      if (validatenull(oldPassword)) {
        this.$message.error('旧密码不能为空')
        return
      }
      if (validatenull(password)) {
        this.$message.error('新密码不能为空')
        return
      }
      if (validatenull(confirmPassword)) {
        this.$message.error('确认密码不能为空')
        return
      }
      if(password != confirmPassword){
        this.$message.error('新密码和确认密码不一致')
        return false
      }
      let params = {
        id: this.userInfo.id,
        oldPassword: oldPassword,
        password: password,
      }
      params = Object.assign(params, { status: 1 })
      // 修改用户密码
      http.post('/sys/userinfo/modifyPasswd', params).then((res) => {
        this.$message.success('密码修改成功')
        this.dataFormVisible = false
        this.logout()
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },

    closeHandle() {
      this.dataFormVisible = false
      Object.keys(this.formData).forEach((v) => { this.formData[v] = undefined })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.view-body {
  padding: 10px 31px;
  .view-form {
    display: flex;
    .form-title {
      font-size: 13px;
      font-weight: 500;
      color: #616E9C;
      background: url('~@/assets/images/ffrers.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 20px 10px;
      line-height: 22px;
      @include flex-center;
    }
    .base {
      width: 38px;
      height: 290px;
    }
    .run {
      width: 38px;
      height: 132px;
    }
    .form-cnt {
      flex: 1;
      padding: 15px 0;
    }
  }
}

.el-form .el-form-item {
  margin-bottom: 8px !important;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 4px;
  cursor: pointer;
  user-select: none;
  img {
    width: 14px;
    height: 14px;
    transition: all .3s;
  }
}
.el-dialog__wrapper ::v-deep .el-dialog__title {
  font-family: 'sourceHanSansCN';
}
</style>
