<template>
  <div class="container">
    <NavBar
      :title="$t('lang.OrganizationEditPanel.departmentManagement')"
      :is-go-back="false"
    />

    <div class="grid-container">
      <div class="grid-item-row1-column1">
        <div>
          <div>
            <button
              class="btn btn-primary"
              @click="createOrganization()"
            >
              {{ $t('lang.OrganizationEditPanel.newDepartment') }}
            </button>
            <button
              class="btn btn-danger"
              @click="deleteOrganization()"
            >
              {{ $t('lang.OrganizationEditPanel.deleteDepartment') }}
            </button>
            <button
              class="btn btn-default"
              @click="refresh()"
            >
              {{ $t('lang.OrganizationEditPanel.refresh') }}
            </button>
          </div>
        </div>
      </div>

      <div class="grid-item-row2-column1">
        <div
          v-for="clientOrganization in clientOrganizations"
          :key="clientOrganization.id"
        >
          <TreeViewNode
            :node="clientOrganization"
            :is-root="true"
            :is-show-check="true"
            @node-expand="nodeExpand"
            @node-select="nodeSelect"
          />
        </div>
      </div>

      <div class="grid-item-row2-column2">
        <div>
          <div v-if="organization">
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
              <input
                v-if="organization.id"
                v-model="organization.clientName"
                autocomplete="off"
                type="text"
                class="form-control"
                readonly
              />
              <SearchWidget
                v-else
                info-window-no="286633"
                :field-value="clientFieldValue"
                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
                display-name="ct.name"
                :where-clause-source="clientAdditionHql"
                @value-changed="clientValueChanged"
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.departmentNumber') }}</label>
              <input
                v-model="organization.no"
                autocomplete="off"
                type="text"
                class="form-control"
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.departmentName') }}</label>
              <input
                v-model="organization.name"
                autocomplete="off"
                type="text"
                class="form-control"
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.superiorDepartment') }}</label>
              <SearchWidget
                info-window-no="20220420_233656"
                :field-value="parentOrganizationFieldValue"
                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
                display-name="name"
                :where-clause-source="parentOrganizationAdditionHql"
                @value-changed="parentOrganizationValueChanged"
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.departmentProfile') }}</label>
              <textarea
                v-model="organization.description"
                class="form-control"
                rows="3"
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.departmentManager') }}</label>
              <div>
                <v-select
                  id="departmentManagerSelect"
                  v-model="organization.managerUsers"
                  multiple
                  label="name"
                  :options="userList"
                  @search="fetchUserList"
                />
              </div>
            </div>

            <button
              type="button"
              class="btn btn-primary"
              @click="saveOrUpdate()"
            >
              {{ $t('lang.OrganizationEditPanel.save') }}
            </button>
          </div>
        </div>
        <div>
          <div v-if="selectedClient && selectedClient.selected">
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
              <div v-if="isInput">
                <input
                  v-model="selectedClient.name"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  readonly
                />
              </div>
              <div v-else>
                <input
                  v-model="companyName"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                />
              </div>
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.companyNumber') }}</label>
              <input
                v-model="selectedClient.no"
                autocomplete="off"
                type="text"
                class="form-control"
                readonly
              />
            </div>
            <div class="form-group">
              <label>{{ $t('lang.OrganizationEditPanel.companyManger') }}</label>
              <div>
                <v-select
                  id="companyMangerSelect"
                  v-model="selectedClient.managerUsers"
                  multiple
                  label="name"
                  :options="userList"
                  @search="fetchUserList"
                />
              </div>
            </div>
            <button
              type="button"
              class="btn btn-default"
              @click="edit()"
            >
              {{ isInput ? $t('lang.OrganizationEditPanel.edit') : $t('lang.OrganizationEditPanel.cancelEditing') }}
            </button>
            <button
              type="button"
              class="btn btn-primary"
              @click="updateCompany"
            >
              {{ $t('lang.OrganizationEditPanel.save') }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';


import TreeViewNode from '../widget/TreeViewNode.vue';

import vSelect from 'vue-select';
import OrganizationResource from '../api/base/OrganizationResource';
import UserResource from '../api/base/UserResource.js';

import 'vue-select/dist/vue-select.css';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  components: {
    TreeViewNode,
    vSelect,
  },
  data: function () {
    return {
      isInput: true,
      companyName: ' ',
      clientId: null,
      clientName: '',
      selectedClient: undefined, // 选择的公司
      selectedOrganization: undefined,
      organization: undefined,
      clientFieldValue: {
        displayValue: [],
        fieldType: 'Key',
        id: null,
      },
      parentOrganizationFieldValue: {
        displayValue: [],
        fieldType: 'Key',
        id: null,
      },
      //clientAdditionHql: "id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))",
      //parentOrganizationAdditionHql: "id IN (:EnvOrganizationIdList)",
      clientAdditionHql: '',
      parentOrganizationAdditionHql: '',
      // 其是树形结构
      clientOrganizations: [],
      subClienIds: [],
      // 用户清单
      userList: [],
      expandClientIds: [],        // 展开的公司节点id
      expandOrganizationIds: [],  // 展开的部门节点id
    };
  },

  mounted: function () {
    this.getClientOrganization();
  },

  methods: {
    createOrganization: function () {
      var _self = this;
      this.organization = {};
      (this.clientFieldValue = {
        displayValue: [],
        fieldType: 'Key',
        id: null,
      }),
      (this.parentOrganizationFieldValue = {
        displayValue: [],
        fieldType: 'Key',
        id: null,
      });

      // 新建的时候取消已经勾选的单位或部门
      if (this.selectedClient != undefined) {
        this.selectedClient.selected = false;
      }
      if (this.selectedOrganization != undefined) {
        this.selectedOrganization.selected = false;
      }

      this.parentOrganizationAdditionHql = '';
    },

    saveOrUpdate: function () {
      var _self = this;
      if (
        _self.organization.clientId == undefined ||
                _self.organization.clientId == '' ||
                _self.organization.name == undefined ||
                _self.organization.name == '' ||
                _self.organization.no == undefined ||
                _self.organization.no == ''
      ) {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe5'), true);
        return;
      }

      $.ajax({
        url: Common.getApiURL('organizationResource/saveOrUpdate'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: JSON.stringify(_self.organization),
        contentType: 'application/json; charset=utf-8',
        processData: false,
        success: function (data) {
          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe6'), true);
          _self.organization = {};

          _self.organization.clientId = _self.clientFieldValue.id;
          _self.parentOrganizationFieldValue = {
            displayValue: [],
            fieldType: 'Key',
            id: null,
          };

          if(data.parentId != null){
            _self.expandOrganizationIds.push(data.parentId);
          }
                    
          _self.expandOrganizationIds.push(data.id);

          _self.refresh();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    deleteOrganization: function () {
      var _self = this;
      if (_self.organization == undefined) {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe4'), true);
        return;
      }
      $.ajax({
        url: Common.getApiURL('organizationResource/delete'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: JSON.stringify(_self.organization),
        contentType: 'application/json; charset=utf-8',
        processData: false,
        success: function (data) {
          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe3'), true);
          _self.organization = undefined;
          _self.refresh();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 刷新
         */
    refresh: function () {
      this.getClientOrganization();
    },

    /**
         * 单位发生修改
         */
    clientValueChanged: function (newFieldValue) {
      var _self = this;
      _self.clientFieldValue = newFieldValue;
      _self.organization.clientId = newFieldValue.id;

      // 添加部门约束
      _self.parentOrganizationAdditionHql = ' client.id = ' + newFieldValue.id;
    },

    /**
     * 上级部门发生修改
     */
    parentOrganizationValueChanged: function (newFieldValue) {
      var _self = this;
      _self.parentOrganizationFieldValue = newFieldValue;
      _self.organization.parentId = newFieldValue.id;
    },

    // 节点打开事件
    nodeExpand: function (node) {
      var _self = this;
      console.log(node);
      if (node.open === true) {
        if (node.isClient) {
          _self.expandClientIds.push(node.id);
        } else {
          _self.expandOrganizationIds.push(node.id);
        }
      } else {
        if (node.isClient) {
          let index = _self.expandClientIds.indexOf(node.id);
          if(index >= 0){
            _self.expandClientIds.splice(index, 1);
          }
        } else {
          let index = _self.expandOrganizationIds.indexOf(node.id);
          if(index >= 0){
            _self.expandOrganizationIds.splice(index, 1);
          }
        }
      }

    },

    // 节点选择事件
    nodeSelect: function (node) {
      var _self = this;

      var nodeSelectStatus = node.selected;

      if (_self.selectedClient != undefined) {
        _self.selectedClient.selected = false;
      }

      if (_self.selectedOrganization != undefined) {
        _self.selectedOrganization.selected = false;
      }

      // 如果选择的是单位
      if (node.isClient == true) {
        console.log(node);
        _self.selectedClient = node;
        _self.selectedOrganization = undefined;
        _self.organization = undefined;
        _self.parentOrganizationFieldValue = undefined;
        _self.clientFieldValue = undefined;
      } else {
        // 如果选择的是部门
        _self.selectedClient = undefined;
        _self.organization = undefined;
        _self.parentOrganizationFieldValue = undefined;
        _self.clientFieldValue = undefined;
        _self.selectedOrganization = node;
        _self.loadOrganization(node.id);

      }

      node.selected = !nodeSelectStatus;


    },

    // 获取单位部门
    getClientOrganization: function () {
      var _self = this;
      $.ajax({
        type: 'get',
        dataType: 'json',
        url: Common.getApiURL('organizationResource/findByClientId'),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          // console.log(data);
          if(data.errorCode != 0){
            Notify.error(_self.$t('lang.OrganizationEditPanel.describe2'), data.errorCode, false);
            return;
          }
          function setOpen(node) {
            node.open = false;
            node.selected = false;
            node.isShowCheck = true;
            node.text = node.no + ' ' + node.name;
            if (node.isClient) {
              if (_self.expandClientIds.indexOf(node.id) >= 0) {
                node.open = true;
              };
            } else {
              if (_self.expandOrganizationIds.indexOf(node.id) >= 0) {
                node.open = true;
              };
            }
            if (
              node.childrenDatas != undefined &&
                            node.childrenDatas.length > 0
            ) {
              node.childrenDatas.forEach(function (item) {
                setOpen(item);
              });
            }
          }
          data.datas.forEach(function (item) {
            setOpen(item);
          });
          _self.clientOrganizations = data.datas;
          // 查询所有子部门
          _self.loadSubClients();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    // 从服务器加载Organization
    loadOrganization: function (id) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('organizationResource/unique') +
                    '?organizationId=' +
                    id,
        type: 'get',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        processData: false,
        success: function (data) {
          _self.organization = data;
          _self.parentOrganizationFieldValue = {
            displayValue: [data.parentName],
            fieldType: 'Key',
            id: data.parentId,
          };
          _self.clientFieldValue = {
            displayValue: [data.clientName],
            fieldType: 'Key',
            id: data.clientId,
          };


          //_self.userList.splice(0, _self.userList.length);
          _self.fetchUserList();
          // 添加到下拉菜单中
          // if(_self.organization != null && _self.organization.managerUsers != null){
          //     _self.organization.managerUsers.forEach(item => {
          //         _self.$set(_self.userList, _self.userList.length, item);
          //     });                    
          // }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    loadSubClients: function () {
      var _self = this;
      var rootClientId = null;
      for (let index = 0; index < _self.clientOrganizations.length; index++) {
        var clientOrganization = _self.clientOrganizations[index];
        if (clientOrganization.childrenDatas == null) {
          rootClientId = clientOrganization.id;
        }
      }
      $.ajax({
        url: Common.getApiURL('ClientResource/getSubClientIds'),
        type: 'get',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: {
          rootClientId: rootClientId,
        },
        success: function (data) {
          if (data) {
            data.push(rootClientId);
            _self.subClienIds = data;
            _self.clientAdditionHql = ' ct.id in (' + data.join(',') + ')';
          } else {
            // buy find by jack
            _self.clientAdditionHql = {
              customerDataDimensions:[{
                fieldName: 'ct.id',
                dataDimensionTypeNo: '202201191757',
                defaultDataDimensionTypeValueNo: '1',
              }],
            };
            // 'id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))';
            _self.parentOrganizationAdditionHql = {
              customerDataDimensions:[{
                fieldName: 'organization.id',
                dataDimensionTypeNo: '202201191700',
                defaultDataDimensionTypeValueNo: '1',
              }],
            };
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
         * 修改公司
         */
    updateCompany: function () {
      var _self = this;
      if (
        _self.selectedClient != null &&
                _self.companyName != null &&
                _self.companyName.length != 0
      ) {
        _self.selectedClient.name = _self.companyName;
      } else {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe1'));
        return;
      }
      OrganizationResource.update(_self.selectedClient).then(
        successData => {
          _self.isInput = true;
          _self.refresh();
          Notify.success(_self.$t('lang.Notify.prompt'), successData.message);
        },
        errorData => { },
      );
    },
    /**
         * 编辑/取消编辑
         */
    edit: function () {
      var _self = this;
      if (_self.isInput) {
        _self.companyName = _self.selectedClient.name;
      } else {
        _self.companyName = null;
      }
      _self.isInput = !_self.isInput;
    },

    /**
         * 输入的过滤条件发生改变
         * Triggered when the search text changes.
        *
        * @param search  {String}    Current search text
        * @param loading {Function}	Toggle loading class
         */
    fetchUserList: function (search, loading) {
      let _self = this;
      if (loading != null) {
        loading(true);
      }

      let searchQueryParam = {
        conditional: search,
        range: {
          start: 0,
          length: 100,
        },
      };

      UserResource.getUsersByName(searchQueryParam).then(successData => {
        if (loading != null) {
          loading(false);
        }

        _self.userList = successData.resultList;
      }, errorData => {
        if (loading != null) {
          loading(false);
        }

        Common.processException(errorData);
      });
    },
  },
};
</script>

<style scoped>
.grid-container {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: 35px auto;
    gap: 10px;
    justify-items: stretch;
    align-items: stretch;
    height: calc(100vh - 170px);
    overflow: auto;
}

.grid-item-row1-column1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}

.grid-item-row2-column1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    overflow: auto;
    border: 1px solid #e1e1e8;
    padding: 0px 10px 0px 10px;
}

.grid-item-row2-column2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    overflow: auto;
}
</style>
