<template>
  <a-spin
    :spinning="spinning"
    :tip="tipContent"
  >
    <a-form
      :model="form"
      ref="formRef"
      label-align="left"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="角色名称"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
            name="roleId"
            required
            :rules="[{ required: true, message: '请选择角色名称' }]"
          >
            <a-select
              mode="multiple"
              style="width: 100%"
              placeholder="请选择角色名称"
              v-model:value="form.roleId"
            >
              <a-select-option
                v-for="(item) in roleLit"
                :key="item.id"
                :value="item.id"
              >{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="手机号码"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
            name="phone"
            required
            :rules="[{ required: true, message: '请输入手机号码' }]"
          >
            <a-input
              v-model:value="form.phone"
              placeholder="请输入手机号码"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="用户名称"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
            name="username"
            :extra="extraText"
            required
            :rules="[{ required: true, message: '请输入用户名称' }]"
          >
            <a-input
              v-model:value="form.username"
              placeholder="请输入用户名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="账号状态"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
            name="state"
            required
            :rules="[{ required: true, message: '请选择账号状态' }]"
          >
            <a-radio-group
              v-model:value="form.state"
              name="radioGroup"
            >
              <a-radio value="1">启用</a-radio>
              <a-radio value="0">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="关联行政区"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
            name="zoneId"
            required
            :rules="[{ required: true, message: '请选择关联行政区' }]"
          >
            <a-checkbox-group
              v-model:value="form.zoneId"
              name="channel"
              :options="options"
              @change="changeZoneId"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>
  
<script setup>
import { ref } from 'vue'
import { callUser, callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import _, { constant } from 'lodash'

const formRef = ref();
const form = ref({
  state: "1"
});
const roleLit = ref([])
const isAdd = ref(true);
const spinning = ref(false);
const tipContent = ref("加载中...");
const options = ref([])
const staffIdRef = ref(null);
const zoneId = ref([]);
const extraText = ref("新增账号默认密码为“123456”")


const openForm = (params = {}) => {

  isAdd.value = true;
  callOperate("/ebikeOrgZone/listZoneByLogin", {}, "get").then((res) => {
    if (res.code != 200) {
      message.error(res.message);
      return;
    }
    const data = res.data.map(item => {
      return { label: item['zoneName'], value: item['zoneId'] }
    })
    options.value = data;
  });
  callUser("/roles/listByOrgId", {}, "get").then((res) => {
    if (res.code != 200) {
      message.error(res.message);
      return;
    }
    const data = res.data.map(item => {
      return { id: item['roleId'], name: item['roleName'] }
    })
    roleLit.value = data;
    if (params['staffId']) {
      isAdd.value = false;
      extraText.value = ""
      staffIdRef.value = params['staffId']
      form.value = { ...params }
    } else {
      callOperate("/ebikesysrcostset/createSnowflakeId", {}, "get").then(res => {
        if (res.code == 200) {
          staffIdRef.value = res.data;
        }
      })
    }
  });
};

const changeZoneId = (zoneIds) => {
  const data = options.value.filter(item => zoneIds.includes(item['value']));
  const zone = data.map(item => {
    return { zoneName: item['label'], zoneId: item['value'] }
  })
  zoneId.value = zone
}

const formSave = (callBack) => {
  formRef.value.validate().then((res) => {
    tipContent.value = "保存中..."
    spinning.value = true;
    let url = "staffInfoAdd";
    if (!isAdd.value) {
      url = "staffInfoUpdate"
    }
    isAdd.value = false;
    const params = _.cloneDeep(form.value);
    params['staffId'] = staffIdRef.value;
    params['zoneId'] = zoneId.value;
    callUser("/staff/" + url, params).then((res) => {
      if (res.code == 200) {
        message.success(res.message)
        if (callBack) {
          res.data = params;
          callBack(res);
        }
      } else {
        message.error(res.message)
        spinning.value = false;
      }
    })
  });
};

const resetAll = (callBack) => {
  formRef.value.resetFields();
  if (callBack) {
    callBack(true, form.value);
  }
}

defineExpose({ openForm, formSave, resetAll });
</script>
  