<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
      <Row>
        <Col span="24">
          <Form-item label="角色" prop="roleIds">
            <div id="app2">
              <treeselect
                v-model="model.roleIds"
                :searchable="false"
                :multiple="true"
                :options="options"
                placeholder="请选择角色..."
              />
            </div>
          </Form-item>
        </Col>
      </Row>

      <Row class="buttonDiv">
        <Button
          :loading="loading"
          @click="submitForm(action)"
          type="primary"
          v-if="!(action == 'detail')"
        >确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { debuglog } from "util";
@Component({
  components: {
    Treeselect
  }
})
export default class GroupRoleForm extends Vue {
  private model: any = {};
  @Prop(String) private action!: string;

  loading: boolean = false;
  labelWidth: number = 60;
  rules: any = {};
  options: Array<any> = [];
  resGroup: Array<any> = [];
  mounted() {
    this.getOptions();
  }

  setModel(model) {
    // console.error(22222,model)
    this.model = model;
  }

  @Emit("getData") getGroupData() {}

  getOptions() {
    this.getApiData(
      "post",
      this.$msPrefix.base + "/api/v1/data/list/role",
      "",
      res => {
        if (res.rtnCode == 0) {
          res.data.content.forEach(element => {
            var pool: any = {
              id: "",
              label: ""
            };
            pool.id = element.id;
            pool.label = element.name;
            this.options.push(pool);
          });
          this.getGroupData();
        }
      },
      err => {}
    );
  }
  save() {
    console.log("999", this.model);
    if (this.model.roleIds.length !== 0) {
      this.getApiData(
        "post",
        this.$msPrefix.automation +
          "/api/v1/res/serverGroup/saveGroupPermission",
        this.model,
        res => {
          if (res.rtnCode == 0) {
            if (res.success == true) {
              this.close();
              this.$tools.message(
                "success",
                (this.action == "update" ? "修改" : "新增") + "成功！"
              );
            }
          }
        },
        err => {
          this.close();
        }
      );
    } else {
      this.$tools.message("warning", '请至少选择一个角色');
    }
  }
  /*提交*/
  submitForm(action) {
    this.save();
    // (this.$refs[action] as any).validate((valid) => {
    //   if (valid) {
    //   	if(!this.loading){
    //         this.loading=!0;
    //         this.save()
    //     }
    //   } else {
    //     this.$tools.message('info',"请完善必填项!")

    //   }
    // });
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.close();
    (this.$refs[this.action] as any).resetFields();
  }
}
</script>
