<template>
  <el-dialog
   :close-on-click-modal="false"
:title="(dialogForm.id ? '修改' : '添加') + '账户信息'"
:visible.sync="dialogVisible"
width="450px"
top="15vh"
    @close="closeDialog">
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px" v-loading="dialogLoading">
      <el-row :gutter="20" class="small-title">
        服务账号类型
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="用户名" prop="username" required>
            <el-input v-model="dialogForm.username"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="账户名称" prop="name" required>
            <el-input v-model="dialogForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row :gutter="20">-->
      <!--  <el-col :span="22">-->
      <!--    <el-form-item label="关联项目ID" prop="projectId" required>-->
      <!--      <el-input v-model="dialogForm.projectId" disabled/>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="账户类型" prop="type" required>
            <!--<el-input v-model="dialogForm.type"></el-input>-->
              <el-select v-model="dialogForm.type" placeholder="请选择">
                <el-option label="basic" value="basic"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="密码" prop="password" required>
            <el-input v-model="dialogForm.password" type="password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row :gutter="20">-->
      <!--  <el-col :span="22">-->
      <!--    <el-form-item label="新口令" required>-->
      <!--      <el-input v-model="dialogForm.email" type="password"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <!--<el-row :gutter="20">-->
      <!--  <el-col :span="22">-->
      <!--    <el-form-item label="确认口令" required>-->
      <!--      <el-input v-model="dialogForm.email" type="password"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <el-row :gutter="20" class="small-title">
        一般信息
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="说明" prop="description">
            <el-input v-model="dialogForm.description" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { getUserDetail, saveUser, resetDefault } from '@/api/system_manage'
// import { getUserDetail, getAccountDetail } from '@/api/system_manage'
import { staticAccountSave, getAccountDetail } from '@/api/esb_service'
export default {
  name: 'UserAdd',
  data() {
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      dialogForm: {},
      projectId: localStorage.getItem('projectID'),
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '账户名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '账户类型不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    checkItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        if (this.checkItem.id) {
          this.requestData(this.checkItem.id)
        } else {
          this.dialogForm = {
            projectId: this.projectId
          }
        }
      }
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    requestData(id) {
      this.dialogLoading = true
      getAccountDetail(id).then((rt) => {
        this.dialogForm = rt.data
        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    async submit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.dialogLoading = true
          console.log(this.dialogForm)
          // return
          staticAccountSave(this.dialogForm).then((rt) => {
            this.dialogLoading = false
            if (rt.status === '200') {
              this.$emit('confirm')
              this.dialogVisible = false
              this.$message({
                message: `${this.dialogForm.id ? '修改' : '添加'}成功`,
                type: 'success'
              })
              // resetDefault({
              //   confirmedPassword: '123456',
              //   newPassword: '123456',
              //   originalPassword: '123456',
              //   token: 'string',
              //   userId: this.dialogForm.empuid
              // }).then(res => {
              //   console.log(res)
              // })
            }
          }).catch(() => {
            this.dialogLoading = false
          })
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .small-title{
    font-weight: 600;
    padding-left: 20px;
    margin-bottom: 20px;
  }
</style>
