<template>
  <div class="app-container" style=" width: 500px;padding-top:100px;">
    <el-form ref="dataForm" :rules="rules" :model="from" label-position="right" label-width="130px">
      <el-form-item label="姓名:" prop="accountName" :rules="rules.accountName">
        <el-input v-model="from.accountName" placeholder="请输入用户姓名" maxlength="6" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="手机号:" prop="account" :rules="rules.name">
        <el-input v-model="from.account" placeholder="请输入用户手机号" maxlength="11" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select v-model="from.status" placeholder="请选择" style="width: 250px;">
          <el-option label="上线" :value="1" />
          <el-option label="下线" :value="2" />
        </el-select>
      </el-form-item>
      <template v-if="editType !== 'edit'">
        <el-form-item label="密码:" prop="password">
          <el-input v-model="from.password" placeholder="请输入8-16位数字和字母的组合" maxlength="16" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="确认密码:" prop="oldPassword">
          <el-input v-model="from.oldPassword" placeholder="请输入8-16位数字和字母的组合" maxlength="16" style="width: 250px;" />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer" style="width:500px;margin:0 auto;padding:40px 0 80px 0;text-align: center;">
      <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" style="width: 100px;" @click="onSubmite()">保存</el-button>
      <el-button plain @click="backToList">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mallUserById, saveUser } from '@/api/sys'

export default {

  data() {
    const picValidator = (rule, value, callback) => {
      if (!this.from.oldPassword) {
        callback(new Error('请再次确认密码'))
      } else if (this.from.oldPassword !== this.from.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    const defaultForm = () => {
      return {
        accountName: '',
        account: '',
        status: 1,
        organizeId: this.$store.getters.organizeId,
        password: '',
        oldPassword: ''
      }
    }
    return {
      fullscreenLoading: false,
      from: defaultForm(),
      rules: {
        accountName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
        account: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { type: 'number',
            message: '手机号格式不正确',
            trigger: 'blur',
            transform(value) {
              const phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
              if (!phonereg.test(value)) {
                return false
              } else {
                return Number(value)
              }
            }
          }
        ],
        password: [
          { required: true, message: '请输入新的密码', trigger: 'blur' },
          { min: 8, max: 16, message: '密码长度在8到16个字符', trigger: 'blur' },
          {
            required: true,
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: '密码组合应为8-16位数字和字母组合',
            trigger: 'blur'
          }
        ],
        oldPassword: [{ required: true, validator: picValidator, trigger: 'blur' }]
      },
      editType: ''
    }
  },
  computed: {
    organizeId() {
      return this.$store.getters.organizeId
    }
  },
  created() {
    this.editType = this.$route.query.type
    if (this.editType === 'edit') {
      console.log('editType0', this.editType)
      this.mallUserById(this.$route.query.id)
    }
  },
  methods: {
    async mallUserById(id) {
      try {
        const res = await mallUserById(id)
        this.from = { ...this.from, ...res.data }
      } catch (error) {
        console.log(error)
      }
    },
    onSubmite() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          this.saveUser()
        }
      })
    },
    async saveUser() {
      try {
        const res = await saveUser(this.from)
        this.$message.success(res.msg)
        this.fullscreenLoading = false
        setTimeout(() => {
          this.$router.push({ path: '/sys/user' })
        }, 1000)
      } catch (error) {
        console.log(error)
        this.fullscreenLoading = false
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/sys/user'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss">

</style>
