<template>
  <div class="content">
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="100"
    >
      <FormItem label="管理员名称" prop="name">
        <Input
          style="width:60%"
          v-model="formValidate.name"
          placeholder="请输入"
        ></Input>
      </FormItem>
      <FormItem label="联系方式" prop="mobile">
        <Input
          style="width:60%"
          v-model="formValidate.mobile"
          placeholder="请输入"
        ></Input>
      </FormItem>
      <FormItem label="管理员账号" prop="account">
        <Input
          style="width:60%"
          v-model="formValidate.account"
          placeholder="请输入"
        ></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input
          style="width:60%"
          v-model="formValidate.password"
          placeholder="请输入"
        ></Input>
      </FormItem>
      <FormItem label="管理员身份" prop="group_uuid">
        <Select v-model="formValidate.group_uuid" style="width: 150px" placeholder="请选择">
          <Option v-for="i in groupsList" :key="i.uuid" :value="i.uuid">{{
            i.name
          }}</Option>
        </Select>
      </FormItem>
    </Form>
    <div class="btn">
      <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
    </div>
  </div>
</template>
<script>
import {
  groups,
  addAdmins,
  updateAdmins,
  adminsDe
} from "@/api/clock/activityClocks";
export default {
  data() {
    return {
      groupsList: [],
      formValidate: {
        name: "",
        mobile: "",
        account: "",
        password: "",
        group_uuid: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "请输入管理员姓名",
            trigger: "blur"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "请输入管理员账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        group_uuid: [
          {
            required: true,
            message: "请选择管理员身份",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.search();
    if (this.$route.query.id) {
      adminsDe(this.$route.query.id).then(res => {
          res.group_uuid=res.group_uuid
        this.formValidate = Object.assign(this.formValidate, res);
      });
    }
  },
  methods: {
    search() {
      let params = {
        language: "cn",
        page_index: 1,
        page_size: 100
      };
      groups(params).then(res => {
        this.groupsList = res.data;
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.$route.query.id) {
            updateAdmins(this.$route.query.id, this.formValidate).then(res => {
              this.$Message.success("编辑成功!");
              this.$router.push({ path: "/admin/list"});
            });
          } else {
            addAdmins(this.formValidate).then(res => {
              this.$Message.success("新增成功!");
              this.$router.push({ path: "/admin/list"});
            });
          }
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.pc-main {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff;
}
.btn {
  text-align: right;
  width: 80%;
  position: fixed;
  background-color: #fff;
  bottom: 10px;
  padding: 10px 30px;
}
</style>
