<template>
  <el-container>
    <el-main>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="工号" prop="id">
              <el-input
                v-model="ruleForm.id"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="ruleForm.username"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="3" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="角色" prop="roles">
              <el-checkbox-group v-model="ruleForm.roles" size="mini">
                <el-checkbox
                  v-for="role in allRoles"
                  :key="role.id"
                  border=""
                  :label="role"
                >{{ role.description }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="ruleForm.createTime" type="text" />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="8" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="更新时间" prop="updateTime">
              <el-input v-model="ruleForm.updateTime" type="text" />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="8" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="ruleForm.remark" type="text" />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="8" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
              >修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
// import { updateUser } from '@/api/user'

export default {
  data() {
    return {
      ruleForm: {
        id: '',
        username: '',
        name: '',
        remark: '',
        roles: [],
        createTime: '',
        updateTime: ''
      },
      user: {
        username: '',
        name: '',
        password: '',
        remark: '',
        sysRoles: [],
        createTime: '',
        updateTime: ''
        // locked:'',
      },
      rules: {
        id: [
          { required: true, message: '', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 4,
            max: 12,
            message: '账号长度在4-12个字符之间',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '姓名长度在2-10个字符之间',
            trigger: 'blur'
          }
        ],
        roles: [
          { required: true, message: '', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    allRoles() {
      return this.$store.getters.allRoles
    },
    allUsers() {
      return this.$store.getters.allUsers
    }
  },

  created() {
    console.log('created')
    this.$store.dispatch('role/getAllRoles')
    // this.$store.dispatch('authority/getAllAuthorities')
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('ruleForm', this.ruleForm)
          this.user.username = this.ruleForm.username
          this.user.password = this.ruleForm.password
          this.user.remark = this.ruleForm.remark
          this.user.sysRoles = this.ruleForm.roles
          this.user.name = this.ruleForm.name

          this.$store
            .dispatch('user/updateUser', this.user)
            .then((res) => {
              console.log('update  User res0', res)
              if (res.data.success) {
                this.$message({ message: '用户修改成功!!!', type: 'success' })
                this.$refs[formName].resetFields()
              } else {
                this.$message.error('用户修改失败!!!')
              }
            })
            .catch((error) => {
              console.log('error', error)
              this.$message.error('用户修改失败!!!')
            })
        } else {
          console.log('error submit!!')
          this.$message.error('请认真填写!')
          return false
        }
      })
    },
    close() {
      this.$tab.closePage()
    },
    resetForm(formName) {
      console.log('roles', this.$store.getters.allRoles)
      this.$refs[formName].resetFields()
    }
  }
}
</script>
