<template>
  <a-modal
    :visible="true"
    :width="700"
    :title="`${data ? '更改' : '新增'}权限`"
    @cancel="handcancel(thethis)"
    :footer="null"
    :maskClosable="false"
  >
    <a-spin :spinning="false">
      <a-form-model
        ref="ruleForm"
        :model="form"
        v-bind="formLayout"
        :rules="rules"
      >
        <a-form-model-item style="display: none">
          <a-input
            allow-clear
            autocomplete="off"
            v-decorator="['operateType']"
            type="hidden"
          />
        </a-form-model-item>
        <a-row class="form-row" :gutter="[16, 0]">
          <!-- 关键词 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item label="业务类型" prop="bizType">
              <a-select v-model="form.bizType">
                <a-select-option :value="1">账号创建 </a-select-option>
                <a-select-option :value="2">账号修改 </a-select-option>
                <a-select-option :value="3">角色申请</a-select-option>
                <a-select-option :value="4">角色授权审核</a-select-option>
                <a-select-option :value="5">角色授权执行</a-select-option>

              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 关键词 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item label="成员" prop="memberId">
              <a-select show-search option-filter-prop="children"  v-model="form.memberId">
                <a-select-option
                  
                  v-for="item in memberList"
                  :key="item.memberId"
                  :value="item.memberId"
                  >{{ item.realName }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 提交和重置 -->
        <div :style="{ margin: '20px auto', width: '140px' }">
          <a-button type="primary" @click="on_Submit">
            {{ data ? "更改" : "提交" }}
          </a-button>
          <a-button
            style="margin-left: 10px"
            @click="
              () => {
                $emit('closePopForm', that);
              }
            "
          >
            关闭
          </a-button>
        </div>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  formLayout,
  rules,
  isHaveData,
  clearInfo,
  handcancel
} from "@/common/components/Commonality/Form/js/form.js";
import { getServiceList } from "@/baseConfigComponents/api/member";
import { modifyMemberInfo } from "@/baseConfigComponents/api/memberConfig.js";

export default {
  props: ["data", "that"],
  mounted() {
    this.data ? (this.form = this.data) : "";
    this.getList(this.page, this.size);
  },
  data() {
    this.thethis = this;
    return {
      // 布局
      formLayout,
      // 表单初始格式
      form: { id: 0, bizType: "", memberId: "" },

      // 验证规则
      rules: {
        bizType: [rules.required],
        memberId: [rules.required]
      },
      memberList: [],
      page: 1,
      size: 30
    };
  },

  methods: {
    // 重置表单元素
    clearInfo,
    // 关闭
    handcancel,
    //获取成员列表
    getList(page, size, params) {
      return new Promise((resolve, reject) => {
        getServiceList({ Page: page, Size: 500, ...params })
          .then(res => {
            // console.log(res.data);
            page++;
            this.memberList = this.memberList.concat(res.data.data);
            if (res.data.haveNextPage) {
              this.getList(page, size, params);
            } else {
              //   return this.memberList
            }

            // console.log(this.memberList);
            resolve(this.memberList);
          })
          .catch(error => {
            reject();
          });
      });
    },

    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$confirm({
        title: "确认提交？",
        okText: "提交",
        cancelText: "取消",
        onOk() {
          // 点击确定
          console.log(that.form);
          let valPost = {
            bizType: that.form.bizType,
            memberId: that.form.memberId
          }
          that.$refs.ruleForm.validate(valid => {
            if (valid) {
              modifyMemberInfo(that.form.id,valPost).then(() => {
                that.$message.success("操作成功");
                that.$emit("refresh");
                that.clearInfo(that);
                that.handcancel(that);
              });
            }
          });
        },
        onCancel() {}
      });
    }
  },

  components: {}
};
</script>
<style lang="less" scoped>
.a {
  justify-content: center;
  align-items: center;
}
</style>
