<style scoped>
.flex-v-center {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.col-form-label {
  font-weight: bold;
  font-size: 1.1rem;
  padding-top: 0;
  padding-bottom: 0;
}
.title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 0.5;
}
.title::before {
  display: flex;
  align-items: baseline;
  content: "\2022";
  margin-right: 8px;
  color: #0ea1b8;
  font-size: 3rem;
}
input[type="radio"] {
  height: 1rem;
  width: 1rem;
  vertical-align: sub;
}
@media only screen and (max-width: 991px) {
  .mobile-mb {
    margin-bottom: 10px;
  }
}
</style>
<template>
  <form action="javascript:void(0)" @submit="saveData">
    <div class="container pb-3">
      <div class="row gy-sm-3">
        <div class="col-12">
          <h5 class="title mobile-mb flex-v-center">{{ $t('global.basic_information') }}</h5>
        </div>

        <label for="name" class="col-md-2 col-form-label flex-v-center">{{ $t('global.name') }}</label>
        <div class="col-md-10 mobile-mb flex-v-center">
          <input
            type="text"
            v-model="user.name"
            name="name"
            id="name"
            class="form-control"
          />
        </div>

        <label for="email" class="col-md-2 col-form-label flex-v-center">{{ $t('global.email') }}</label>
        <div class="col-md-10 mobile-mb flex-v-center">{{ user.email }}</div>
      </div>

      <div class="row gy-sm-3 mt-2">
        <div class="col-12">
          <h5 class="title mobile-mb flex-v-center">{{ $t('backend.user.role_settings') }}</h5>
        </div>

        <div class="row mt-3" v-for="item in filteredItems" :key="item.sub_system.id">
          <div class="col-1"></div>
          <label for="gender" class="col-md-4 col-form-label flex-v-center">
            {{ item.sub_system.name }}
          </label>
          <div class="row ms-2 col-md-7 mobile-mb">
            <select class="form-select" :id="'state'+item.sub_system.id" v-model="user.system_role.find(role => role.sub_system.id === item.sub_system.id).role" @change="roleChange(item.sub_system.id)" required>
              <option disabled selected value>{{ $t('backend.user.select_role') }}</option>
              <option value="none">{{ $t('global.none') }}</option>
              <option value="auditor">{{ $t('backend.user.auditor') }}</option>
              <option value="checker">{{ $t('backend.user.checker') }}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer pb-0">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        {{ $t('global.cancel') }}
      </button>
      <button type="submit" class="btn btn-primary">{{ $t('global.save') }}</button>
    </div>
  </form>
</template>
<script>
import { api } from "@/global/axios";
import { sendSuccessSwal, sendFailedSwal } from "@/global/swal";
import { systemRole } from "@/global/request";
export default {
  props: ["userId"],
  data() {
    return {
      systemRole: systemRole(),
      user: {
        items: [],
      },
      selfItems: [],
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  computed: {
    filteredItems() {
      return this.user.items.filter(item => item.state && this.systemRole[item.sub_system.id]);
    }
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      let tempUser = await api.get(`/api/user/${vm.userId}`).then((res) => {
        return res.data.data;
      });

      let userItems = await api
        .get(`/api/getUserHasSubSystem/${tempUser.belongs}`)
        .then((res) => {
          return res.data.data;
        })
        .catch(sendFailedSwal);

      vm.$nextTick(() => {
        vm.user = tempUser;
        vm.user.items = userItems;
      });
    },
    roleChange: function (sub_system_id) {
      let role = this.user.system_role.find(role => role.sub_system.id === sub_system_id);
      if (role.role === '' || role.role === 'none') {
        role.state = false;
      }else{
        role.state = true;
      }
    },
    saveData: function () {
      api
        .put(`/api/user/${this.userId}`, this.user)
        .then(() => {
          sendSuccessSwal(() => window.location.reload());
        })
        .catch(sendFailedSwal);
    },
  },
};
</script>
