// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <a-row :gutter="12" v-if="isPageAllowed">
    <a-col :md="24">
      <a-card class="breadcrumb-card">
        <a-col :md="24" style="display: flex">
          <breadcrumb style="padding-top: 6px; padding-left: 8px" />
          <a-button
            style="margin-left: 12px; margin-top: 4px"
            :loading="viewLoading"
            size="small"
            shape="round"
            @click="fetchData()" >
            <template #icon><reload-outlined /></template>
            {{ $t('label.refresh') }}
          </a-button>
        </a-col>
      </a-card>
    </a-col>
    <a-col
      :md="24">
      <div>
        <a-card>
          <a-alert
            type="info"
            :showIcon="true"
            :message="$t('label.desc.import.unmanage.volume')"
          >
            <template #description>
              <span v-html="$t('message.desc.import.unmanage.volume')" />
            </template>
          </a-alert>
          <br />
          <a-row :gutter="12">
            <!-- ------------ -->
            <!-- TOP -->
            <!-- ------------ -->
            <a-card class="source-dest-card">
              <template #title>
                {{ $t('label.storagepool') }}
              </template>
              <a-col :md="24" :lg="48">
                <a-form
                  style="min-width: 170px"
                  :ref="formRef"
                  :model="form"
                  :rules="rules"
                  layout="vertical"
                >
                <a-form-item name="scope" ref="scope">
                  <template #label>
                    <tooltip-label :title="$t('label.scope')" :tooltip="$t('label.scope.tooltip')"/>
                  </template>
                  <a-select
                    v-model:value="this.poolscope"
                    @change="onSelectPoolScope"
                    showSearch
                    optionFilterProp="label"
                    :filterOption="(input, option) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }" >
                    <a-select-option :value="'zone'" :label="$t('label.zoneid')"> {{ $t('label.zoneid') }} </a-select-option>
                    <a-select-option :value="'cluster'" :label="$t('label.clusterid')"> {{ $t('label.clusterid') }} </a-select-option>
                    <a-select-option :value="'host'" :label="$t('label.hostid')"> {{ $t('label.hostid') }} </a-select-option>
                  </a-select>
                </a-form-item>
                  <a-form-item
                    name="zoneid"
                    ref="zoneid"
                    :label="$t('label.zoneid')"
                  >
                    <a-select
                      v-model:value="form.zoneid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="(input, option) => {
                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }"
                      @change="onSelectZoneId"
                      :loading="optionLoading.zones"
                    >
                      <a-select-option v-for="zoneitem in zoneSelectOptions" :key="zoneitem.value" :label="zoneitem.label">
                        <span>
                          <resource-icon v-if="zoneitem.icon" :image="zoneitem.icon" size="1x" style="margin-right: 5px"/>
                          <global-outlined v-else style="margin-right: 5px" />
                          {{ zoneitem.label }}
                        </span>
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showPod"
                    name="podid"
                    ref="podid"
                    :label="$t('label.podid')">
                    <a-select
                      v-model:value="form.podid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="filterOption"
                      :options="podSelectOptions"
                      :loading="optionLoading.pods"
                      @change="onSelectPodId"
                    ></a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showCluster"
                    name="clusterid"
                    ref="clusterid"
                    :label="$t('label.clusterid')">
                    <a-select
                      v-model:value="form.clusterid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="filterOption"
                      :options="clusterSelectOptions"
                      :loading="optionLoading.clusters"
                      @change="onSelectClusterId"
                    ></a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showHost"
                    name="hostid"
                    ref="hostid">
                    <template #label>
                      <tooltip-label
                        :title="$t('label.hostname')"
                        :tooltip="$t('label.hostname.tooltip')"/>
                    </template>
                      <a-select
                        v-model:value="form.hostid"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="filterOption"
                        :options="hostSelectOptions"
                        :loading="optionLoading.hosts"
                        @change="onSelectHostId"
                      ></a-select>
                  </a-form-item>
                  <a-form-item
                    name="poolid"
                    ref="poolid">
                    <template #label>
                      <tooltip-label
                        :title="$t('label.storagepool')"
                        :tooltip="$t('label.storagepool.tooltip')"/>
                    </template>
                      <a-select
                        v-model:value="form.poolid"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="filterOption"
                        :options="poolSelectOptions"
                        :loading="optionLoading.pools"
                        @change="onSelectPoolId"
                      ></a-select>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-card>
          </a-row>

          <a-row :gutter="12">
            <a-col :md="24" :lg="12">
              <a-card class="volumes-card">
                <template #title>
                  {{ $t('label.unmanaged.volumes') }}
                  <a-tooltip :title="$t('message.volumes.unmanaged')">
                    <info-circle-outlined />
                  </a-tooltip>
                  <a-button
                    style="margin-left: 12px; margin-top: 4px"
                    :loading="unmanagedVolumesLoading"
                    size="small"
                    shape="round"
                    @click="fetchUnmanagedVolumes()" >
                    <template #icon><reload-outlined /></template>
                  </a-button>
                  <span style="float: right; width: 50%">
                    <search-view
                      :searchFilters="searchFilters.unmanaged"
                      :searchParams="searchParams.unmanaged"
                      :apiName="listVolumesApi.unmanaged"
                      @search="searchUnmanagedVolumes"
                    />
                  </span>
                </template>
                <a-table
                  class="volumes-card-table"
                  :loading="unmanagedVolumesLoading"
                  :rowSelection="unmanagedVolumeSelection"
                  :rowKey="(record, index) => index"
                  :columns="unmanagedVolumesColumns"
                  :data-source="unmanagedVolumes"
                  :pagination="false"
                  size="middle"
                  :rowClassName="getRowClassName"
                >
                  <template #bodyCell="{ column, text }">
                    <template v-if="column.key === 'state'">
                      <status :text="text ? text : ''" displayText />
                    </template>
                  </template>
                </a-table>
                <div class="volumes-card-footer">
                  <a-pagination
                    class="row-element"
                    size="small"
                    :current="page.unmanaged"
                    :pageSize="pageSize.unmanaged"
                    :total="itemCount.unmanaged"
                    :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page.unmanaged-1)*pageSize.unmanaged))}-${Math.min(page.unmanaged*pageSize.unmanaged, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
                    @change="fetchUnmanagedVolumes"
                    showQuickJumper>
                    <template #buildOptionText="props">
                      <span>{{ props.value }} / {{ $t('label.page') }}</span>
                    </template>
                  </a-pagination>
                  <div :span="24" class="action-button-right">
                    <a-button
                      :loading="importUnmanagedVolumeLoading"
                      :disabled="!(('importVolume' in $store.getters.apis) && unmanagedVolumesSelectedRowKeys.length > 0)"
                      type="primary"
                      @click="onImportVolumeAction">
                      <template #icon><import-outlined /></template>
                      {{ $t('label.import.volume') }}
                    </a-button>
                  </div>
                </div>
              </a-card>
            </a-col>
            <a-col :md="24" :lg="12">
              <a-card class="volumes-card">
                <template #title>
                  {{ $t('label.managed.volumes') }}
                  <a-tooltip :title="$t('message.volumes.managed')">
                    <info-circle-outlined />
                  </a-tooltip>
                  <a-button
                    style="margin-left: 12px; margin-top: 4px"
                    :loading="managedVolumesLoading"
                    size="small"
                    shape="round"
                    @click="fetchManagedVolumes()" >
                    <template #icon><reload-outlined /></template>
                  </a-button>
                  <span style="float: right; width: 50%">
                    <search-view
                      :searchFilters="searchFilters.managed"
                      :searchParams="searchParams.managed"
                      :apiName="listVolumesApi.managed"
                      @search="searchManagedVolumes"
                    />
                  </span>
                </template>
                <a-table
                  class="volumes-card-table"
                  :loading="managedVolumesLoading"
                  :rowSelection="managedVolumeSelection"
                  :rowKey="(record, index) => index"
                  :columns="managedVolumesColumns"
                  :data-source="managedVolumes"
                  :pagination="false"
                  size="middle"
                  :rowClassName="getRowClassName"
                >
                  <template #bodyCell="{ column, text, record }">
                    <template v-if="column.key === 'name'">
                      <router-link :to="{ path: '/volume/' + record.id }">{{ text }}</router-link>
                    </template>
                    <template v-if="column.key === 'state'">
                      <status :text="text ? text : ''" displayText />
                    </template>
                  </template>
                </a-table>
                <div class="volumes-card-footer">
                  <a-pagination
                    class="row-element"
                    size="small"
                    :current="page.managed"
                    :pageSize="pageSize.managed"
                    :total="itemCount.managed"
                    :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page.managed-1)*pageSize.managed))}-${Math.min(page.managed*pageSize.managed, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
                    @change="fetchManagedVolumes"
                    showQuickJumper>
                    <template #buildOptionText="props">
                      <span>{{ props.value }} / {{ $t('label.page') }}</span>
                    </template>
                  </a-pagination>
                  <div :span="24" class="action-button-right">
                    <a-button
                      :disabled="!(('unmanageVolume' in $store.getters.apis) && managedVolumesSelectedRowKeys.length > 0)"
                      type="primary"
                      @click="onUnmanageVolumeAction">
                      <template #icon><disconnect-outlined /></template>
                      {{ managedVolumesSelectedRowKeys.length > 1 ? $t('label.action.unmanage.volumes') : $t('label.action.unmanage.volume') }}
                    </a-button>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>

        <a-modal
          v-if="showImportForm"
          :visible="showImportForm"
          :title="$t('label.import.volume')"
          :closable="true"
          :maskClosable="false"
          :footer="null"
          :cancelText="$t('label.cancel')"
          @cancel="onCloseImportVolumeForm"
          centered
          width="auto">
          <a-alert type="warning" style="margin-bottom: 20px">
            <template #message>
              <label v-html="$t('message.import.volume')"></label>
            </template>
          </a-alert>
          <a-form
            :ref="importFormRef"
            :model="importForm"
            @finish="handleSubmitImportVolumeForm"
            v-ctrl-enter="handleSubmitImportVolumeForm"
            class="import-form"
          >
            <a-form-item
              name="name"
              ref="name"
              :label="$t('label.name')">
              <a-input v-model:value="importForm.name" />
            </a-form-item>

            <a-form-item
              name="accounttype"
              ref="accounttype"
              :label="$t('label.accounttype')">
              <a-select
                @change="changeAccountType"
                v-model:value="importForm.selectedAccountType"
                v-focus="true"
                showSearch
                optionFilterProp="value"
                :filterOption="(input, option) => {
                  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }">
                <a-select-option :value="null"></a-select-option>
                <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
                <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item
              v-if="importForm.selectedAccountType === $t('label.account') || importForm.selectedAccountType === $t('label.project')"
              name="domain"
              ref="domain"
              :label="$t('label.domain')">
              <a-select
                @change="changeDomain"
                v-model:value="importForm.selectedDomain"
                showSearch
                optionFilterProp="label"
                :filterOption="(input, option) => {
                  return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }" >
                <a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id" :label="domain.path || domain.name || domain.description">
                <span>
                  <resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
                  <block-outlined v-else style="margin-right: 5px" />
                  {{ domain.path || domain.name || domain.description }}
                </span>
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item
              v-if="importForm.selectedAccountType === $t('label.account')"
              name="account"
              ref="account"
              :label="$t('label.account')">
              <a-select
                @change="changeAccount"
                v-model:value="importForm.selectedAccount"
                showSearch
                optionFilterProp="value"
                :filterOption="(input, option) => {
                    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }" >
                <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
                  <span>
                    <resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
                    <team-outlined v-else style="margin-right: 5px" />
                    {{ account.name }}
                  </span>
                </a-select-option>
              </a-select>
              <span v-if="importForm.accountError" class="required">{{ $t('label.required') }}</span>
            </a-form-item>

            <a-form-item
              v-if="importForm.selectedAccountType === $t('label.project')"
              name="project"
              ref="project"
              :label="$t('label.project')">
              <a-select
                @change="changeProject"
                v-model:value="importForm.selectedProject"
                showSearch
                optionFilterProp="label"
                :filterOption="(input, option) => {
                  return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }" >
                <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
                <span>
                  <resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
                  <project-outlined v-else style="margin-right: 5px" />
                  {{ project.name }}
                </span>
                </a-select-option>
              </a-select>
              <span v-if="importForm.projectError" class="required">{{ $t('label.required') }}</span>
            </a-form-item>

            <a-form-item
              name="diskoffering"
              ref="diskoffering"
              :label="$t('label.diskoffering')">
              <a-select
                v-model:value="importForm.selectedDiskoffering"
                :placeholder="$t('label.diskofferingid')"
                showSearch
                optionFilterProp="label"
                :filterOption="(input, option) => {
                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }" >
                <a-select-option
                  v-for="(offering, index) in diskOfferings"
                  :value="offering.id"
                  :key="index"
                  :label="offering.displaytext || offering.name">
                  {{ offering.displaytext || offering.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <div :span="24" class="action-button">
              <a-button @click="onCloseImportVolumeForm">{{ $t('label.cancel') }}</a-button>
              <a-button type="primary" ref="submit" @click="handleSubmitImportVolumeForm">{{ $t('label.ok') }}</a-button>
            </div>
          </a-form>
        </a-modal>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { ref, reactive, toRaw } from 'vue'
import { api } from '@/api'
import _ from 'lodash'
import Breadcrumb from '@/components/widgets/Breadcrumb'
import Status from '@/components/widgets/Status'
import SearchView from '@/components/view/SearchView'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel.vue'

export default {
  components: {
    TooltipLabel,
    Breadcrumb,
    Status,
    SearchView,
    ResourceIcon
  },
  name: 'ManageVolumes',
  data () {
    const unmanagedVolumesColumns = [
      {
        title: this.$t('label.filename'),
        dataIndex: 'name',
        width: 250
      },
      {
        key: 'format',
        title: this.$t('label.format'),
        dataIndex: 'format'
      },
      {
        title: this.$t('label.size'),
        dataIndex: 'size'
      },
      {
        title: this.$t('label.virtualsize'),
        dataIndex: 'virtualsize'
      }
    ]
    const managedVolumesColumns = [
      {
        key: 'name',
        title: this.$t('label.name'),
        dataIndex: 'name',
        width: 100
      },
      {
        key: 'state',
        title: this.$t('label.state'),
        dataIndex: 'state'
      },
      {
        title: this.$t('label.type'),
        dataIndex: 'type'
      },
      {
        title: this.$t('label.account'),
        dataIndex: 'account'
      },
      {
        title: this.$t('label.vmname'),
        dataIndex: 'vmname'
      }
    ]
    return {
      domains: [],
      accounts: [],
      projects: [],
      diskOfferings: [],
      options: {
        zones: [],
        pods: [],
        clusters: [],
        hosts: [],
        pools: []
      },
      rowCount: {},
      optionLoading: {
        zones: false,
        pods: false,
        clusters: false,
        hosts: false,
        pools: false
      },
      page: {
        unmanaged: 1,
        managed: 1
      },
      pageSize: {
        unmanaged: 10,
        managed: 10
      },
      searchFilters: {
        unmanaged: [],
        managed: []
      },
      searchParams: {
        unmanaged: {},
        managed: {}
      },
      itemCount: {},
      zone: {},
      pod: {},
      cluster: {},
      values: undefined,
      zoneId: undefined,
      podId: undefined,
      clusterId: undefined,
      hostId: undefined,
      poolId: undefined,
      diskpath: undefined,
      poolscope: 'zone',
      listVolumesApi: {
        unmanaged: 'listVolumesForImport',
        managed: 'listVolumes'
      },
      unmanagedVolumesColumns,
      unmanagedVolumesLoading: false,
      unmanagedVolumes: [],
      unmanagedVolumesSelectedRowKeys: [],
      importUnmanagedVolumeLoading: false,
      managedVolumesColumns,
      managedVolumesLoading: false,
      managedVolumes: [],
      managedVolumesSelectedRowKeys: [],
      showImportForm: false,
      selectedUnmanagedVolume: null,
      query: {}
    }
  },
  created () {
    this.page.unmanaged = parseInt(this.$route.query.unmanagedpage || 1)
    this.page.managed = parseInt(this.$route.query.managedpage || 1)
    this.initForm()
    this.fetchData()
    this.fetchDomains()
  },
  computed: {
    isPageAllowed () {
      if (this.$route.meta.permission) {
        for (var apiName of this.$route.meta.permission) {
          if (!(apiName in this.$store.getters.apis)) {
            return false
          }
        }
      }
      return true
    },
    isUnmanaged () {
      return this.selectedSourceAction === 'unmanaged'
    },
    showPod () {
      return this.poolscope !== 'zone'
    },
    showCluster () {
      return this.poolscope !== 'zone'
    },
    showHost () {
      return this.poolscope === 'host'
    },
    params () {
      return {
        zones: {
          list: 'listZones',
          isLoad: true,
          field: 'zoneid',
          options: {
            showicon: true
          }
        },
        pods: {
          list: 'listPods',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id')
          },
          field: 'podid'
        },
        clusters: {
          list: 'listClusters',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId
          },
          field: 'clusterid'
        },
        hosts: {
          list: 'listHosts',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId,
            clusterid: this.clusterId
          },
          field: 'hostid'
        },
        pools: {
          list: 'listStoragePools',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId,
            clusterid: this.clusterId,
            hostid: this.hostId,
            scope: this.poolscope
          },
          field: 'poolid'
        }
      }
    },
    viewLoading () {
      for (var key in this.optionLoading) {
        if (this.optionLoading[key]) {
          return true
        }
      }
      return this.unmanagedVolumesLoading || this.managedVolumesLoading
    },
    zoneSelectOptions () {
      return this.options.zones.map((zone) => {
        return {
          label: zone.name,
          value: zone.id,
          icon: zone?.icon?.base64image || ''
        }
      })
    },
    podSelectOptions () {
      const options = this.options.pods.map((pod) => {
        return {
          label: pod.name,
          value: pod.id
        }
      })
      return options
    },
    clusterSelectOptions () {
      const options = this.options.clusters.map((cluster) => {
        return {
          label: cluster.name,
          value: cluster.id
        }
      })
      return options
    },
    hostSelectOptions () {
      const options = this.options.hosts.map((host) => {
        return {
          label: host.name,
          value: host.id
        }
      })
      return options
    },
    poolSelectOptions () {
      const options = this.options.pools.map((pool) => {
        return {
          label: pool.name,
          value: pool.id
        }
      })
      return options
    },
    unmanagedVolumeSelection () {
      return {
        type: 'radio',
        selectedRowKeys: this.unmanagedVolumesSelectedRowKeys || [],
        onChange: this.onUnmanagedVolumeSelectRow
      }
    },
    managedVolumeSelection () {
      return {
        type: 'checkbox',
        selectedRowKeys: this.managedVolumesSelectedRowKeys || [],
        onChange: this.onManagedVolumeSelectRow,
        getCheckboxProps: (record) => {
          return {
            disabled: record.virtualmachineid !== undefined || record.state !== 'Ready' || record.hypervisor !== 'KVM'
          }
        }
      }
    },
    selectedCluster () {
      if (this.options.clusters &&
        this.options.clusters.length > 0 &&
        this.clusterId) {
        return _.find(this.options.clusters, (option) => option.id === this.clusterId)
      }
      return {}
    },
    selectedHost () {
      if (this.options.hosts &&
          this.options.hosts.length > 0 &&
          this.hostId) {
        return _.find(this.options.hosts, (option) => option.id === this.hostId)
      }
      return {}
    },
    selectedPool () {
      if (this.options.pools &&
          this.options.pools.length > 0 &&
          this.poolId) {
        return _.find(this.options.pools, (option) => option.id === this.poolId)
      }
      return {}
    }
  },
  methods: {
    initForm () {
      this.formRef = ref()
      this.form = reactive({
      })
      this.rules = reactive({
      })
      this.importFormRef = ref()
      this.importForm = reactive({
      })
    },
    fetchData () {
      this.unmanagedVolumes = []
      this.managedVolumes = []
      _.each(this.params, (param, name) => {
        if (param.isLoad) {
          this.fetchOptions(param, name)
        }
      })
    },
    filterOption (input, option) {
      return (
        option.label.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },
    fetchOptions (param, name, exclude) {
      if (exclude && exclude.length > 0) {
        if (exclude.includes(name)) {
          return
        }
      }
      this.optionLoading[name] = true
      param.loading = true
      param.opts = []
      const options = param.options || {}
      if (!('listall' in options) && !['zones', 'pods', 'clusters', 'hosts', 'pools'].includes(name)) {
        options.listall = true
      }
      api(param.list, options).then((response) => {
        param.loading = false
        _.map(response, (responseItem, responseKey) => {
          if (Object.keys(responseItem).length === 0) {
            this.rowCount[name] = 0
            this.options[name] = []
            return
          }
          if (!responseKey.includes('response')) {
            return
          }
          _.map(responseItem, (response, key) => {
            if (key === 'count') {
              this.rowCount[name] = response
              return
            }
            if (name === 'clusters') {
              response = response.filter(cluster => ['KVM'].includes(cluster.hypervisortype))
            }
            param.opts = response
            this.options[name] = response
          })
          this.handleFetchOptionsSuccess(name, param)
        })
      }).catch(function (error) {
        console.log(error.stack)
        param.loading = false
      }).finally(() => {
        this.optionLoading[name] = false
      })
    },
    getRowClassName (record, index) {
      if (index % 2 === 0) {
        return 'light-row'
      }
      return 'dark-row'
    },
    handleFetchOptionsSuccess (name, param) {
      if (['zones', 'pods', 'clusters', 'hosts', 'pools'].includes(name)) {
        let paramid = ''
        const query = Object.assign({}, this.$route.query)
        if (query[param.field] && _.find(this.options[name], (option) => option.id === query[param.field])) {
          paramid = query[param.field]
        }
        if (!paramid && this.options[name].length > 0) {
          paramid = (this.options[name])[0].id
        }
        if (paramid) {
          this.form[param.field] = paramid
          if (name === 'zones') {
            this.onSelectZoneId(paramid)
          } else if (name === 'pods') {
            this.form.podid = paramid
            this.onSelectPodId(paramid)
          } else if (name === 'clusters') {
            this.form.clusterid = paramid
            this.onSelectClusterId(paramid)
          } else if (name === 'hosts') {
            this.form.hostid = paramid
            this.onSelectHostId(paramid)
          } else if (name === 'pools') {
            this.form.poolid = paramid
            this.onSelectPoolId(paramid)
          }
        }
      }
    },
    updateQuery (field, value) {
      const query = Object.assign({}, this.$route.query)
      if (query[field] === value + '') {
        return
      }
      query[field] = value
      if (['zoneid', 'podid', 'clusterid', 'hostid', 'poolid'].includes(field)) {
        query.managedpage = 1
        query.unmanagedpage = 1
        this.searchParams.managed.keyword = null
        this.searchParams.unmanaged.keyword = null
      }
      this.$router.push({ query })
    },
    resetLists () {
      this.page.unmanaged = 1
      this.unmanagedVolumes = []
      this.unmanagedVolumesSelectedRowKeys = []
      this.page.managed = 1
      this.managedVolumes = []
      this.managedVolumesSelectedRowKeys = []
    },
    onSelectZoneId (value) {
      this.zoneId = value
      this.podId = null
      this.clusterId = null
      this.hostId = null
      this.poolId = null
      this.zone = _.find(this.options.zones, (option) => option.id === value)
      this.resetLists()
      this.form.clusterid = undefined
      this.form.podid = undefined
      this.form.hostid = undefined
      this.form.poolid = undefined
      this.updateQuery('zoneid', value)
      this.fetchOptions(this.params.pods, 'pods')
    },
    onSelectPodId (value) {
      this.podId = value
      this.pod = _.find(this.options.pods, (option) => option.id === value)
      this.resetLists()
      this.clusterId = null
      this.form.clusterid = undefined
      this.hostId = null
      this.poolId = null
      this.form.hostid = undefined
      this.form.poolid = undefined
      this.updateQuery('podid', value)
      this.fetchOptions(this.params.clusters, 'clusters', value)
    },
    onSelectClusterId (value) {
      this.clusterId = value
      this.cluster = _.find(this.options.clusters, (option) => option.id === value)
      this.resetLists()
      this.hostId = null
      this.poolId = null
      this.form.hostid = undefined
      this.form.poolid = undefined
      this.updateQuery('clusterid', value)
      if (this.showHost) {
        this.fetchOptions(this.params.hosts, 'hosts', value)
      } else {
        this.fetchOptions(this.params.pools, 'pools', value)
      }
    },
    onSelectHostId (value) {
      this.hostId = value
      this.updateQuery('scope', 'local')
      this.updateQuery('hostid', value)
      this.fetchOptions(this.params.pools, 'pools', value)
    },
    onSelectPoolId (value) {
      this.poolId = value
      this.updateQuery('poolid', value)
      this.fetchVolumes()
    },
    onSelectPoolScope (value) {
      this.poolscope = value
      this.zoneId = null
      this.podId = null
      this.clusterId = null
      this.poolId = null
      this.updateQuery('scope', value)
      this.fetchOptions(this.params.zones, 'zones', value)
    },
    fetchDomains () {
      api('listDomains', {
        response: 'json',
        listAll: true,
        showicon: true,
        details: 'min'
      }).then(response => {
        this.domains = response.listdomainsresponse.domain || []
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    fetchAccounts () {
      this.loading = true
      api('listAccounts', {
        response: 'json',
        domainId: this.importForm.selectedDomain,
        showicon: true,
        state: 'Enabled',
        isrecursive: false
      }).then(response => {
        this.accounts = response.listaccountsresponse.account || []
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    fetchProjects () {
      this.loading = true
      api('listProjects', {
        response: 'json',
        domainId: this.importForm.selectedDomain,
        state: 'Active',
        showicon: true,
        details: 'min',
        isrecursive: false
      }).then(response => {
        this.projects = response.listprojectsresponse.project || []
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    changeAccountType () {
      this.importForm.selectedDomain = null
      this.importForm.selectedAccount = null
      this.importForm.selectedProject = null
      this.importForm.selectedDiskoffering = null
      this.diskOfferings = {}
    },
    changeDomain () {
      this.importForm.selectedAccount = null
      this.importForm.selectedProject = null
      this.importForm.selectedDiskoffering = null
      this.diskOfferings = {}
      this.fetchAccounts()
      this.fetchProjects()
    },
    changeAccount () {
      this.importForm.selectedProject = null
      this.importForm.selectedDiskoffering = null
      this.diskOfferings = {}
      this.fetchDiskOfferings()
    },
    changeProject () {
      this.importForm.selectedAccount = null
      this.importForm.selectedDiskoffering = null
      this.diskOfferings = {}
      this.fetchDiskOfferings()
    },
    fetchDiskOfferings () {
      this.loading = true
      const selectedPool = this.options.pools.filter(pool => pool.id === this.poolId)
      const storagetype = selectedPool[0].scope === 'HOST' ? 'local' : 'shared'
      var params = {
        zoneid: this.zoneId,
        storageid: this.poolId,
        storagetype: storagetype,
        encrypt: false,
        listall: true
      }
      if (this.importForm.selectedAccountType === 'Account') {
        params.domainid = this.importForm.selectedDomain
        params.account = this.importForm.selectedAccount
      } else if (this.importForm.selectedAccountType === 'Project') {
        params.domainid = this.importForm.selectedDomain
        params.projectid = this.importForm.selectedProject
      }

      api('listDiskOfferings', params).then(json => {
        this.diskOfferings = json.listdiskofferingsresponse.diskoffering || []
      }).finally(() => {
        this.loading = false
      })
    },
    fetchVolumes () {
      this.fetchUnmanagedVolumes()
      this.fetchManagedVolumes()
    },
    fetchUnmanagedVolumes (page, pageSize) {
      const params = {
        storageid: this.poolId
      }
      const query = Object.assign({}, this.$route.query)
      this.page.unmanaged = page || parseInt(query.unmanagedpage) || this.page.unmanaged
      this.updateQuery('unmanagedpage', this.page.unmanaged)
      params.page = this.page.unmanaged
      this.pageSize.unmanaged = pageSize || this.pageSize.unmanaged
      params.pagesize = this.pageSize.unmanaged
      this.unmanagedVolumes = []
      this.unmanagedVolumesSelectedRowKeys = []
      if (this.searchParams.unmanaged.keyword) {
        params.keyword = this.searchParams.unmanaged.keyword
      }
      if (!this.poolId) {
        return
      }
      this.unmanagedVolumesLoading = true
      this.searchParams.unmanaged = params

      const apiName = this.listVolumesApi.unmanaged

      api(apiName, params).then(json => {
        const response = json.listvolumesforimportresponse
        const listUnmanagedVolumes = response.volumeforimport
        if (this.arrayHasItems(listUnmanagedVolumes)) {
          for (let index = (this.page.unmanaged - 1) * this.pageSize.unmanaged; index < this.page.unmanaged * this.pageSize.unmanaged - 1; index++) {
            if (listUnmanagedVolumes[index]) {
              this.unmanagedVolumes.push(listUnmanagedVolumes[index])
            }
          }
        }
        this.itemCount.unmanaged = response.count
      }).finally(() => {
        this.unmanagedVolumesLoading = false
      })
    },
    searchUnmanagedVolumes (params) {
      this.searchParams.unmanaged.keyword = params.searchQuery
      this.fetchUnmanagedVolumes()
    },
    fetchManagedVolumes (page, pageSize) {
      const params = {
        listall: true,
        projectId: -1,
        storageid: this.poolId
      }
      const query = Object.assign({}, this.$route.query)
      this.page.managed = page || parseInt(query.managedpage) || this.page.managed
      this.updateQuery('managedpage', this.page.managed)
      params.page = this.page.managed
      this.pageSize.managed = pageSize || this.pageSize.managed
      params.pagesize = this.pageSize.managed
      this.managedVolumes = []
      this.managedVolumesSelectedRowKeys = []
      if (this.searchParams.managed.keyword) {
        params.keyword = this.searchParams.managed.keyword
      }
      if (!this.poolId) {
        return
      }
      this.managedVolumesLoading = true
      this.searchParams.managed = params
      api(this.listVolumesApi.managed, params).then(json => {
        const response = json.listvolumesresponse
        const listManagedVolumes = response.volume
        if (this.arrayHasItems(listManagedVolumes)) {
          this.managedVolumes = this.managedVolumes.concat(listManagedVolumes)
        }
        this.itemCount.managed = response.count
      }).finally(() => {
        this.managedVolumesLoading = false
      })
    },
    searchManagedVolumes (params) {
      this.searchParams.managed.keyword = params.searchQuery
      this.fetchManagedVolumes()
    },
    onUnmanagedVolumeSelectRow (value) {
      this.unmanagedVolumesSelectedRowKeys = value
    },
    onManagedVolumeSelectRow (value) {
      this.managedVolumesSelectedRowKeys = value
    },
    isValidValueForKey (obj, key) {
      return key in obj && obj[key] != null
    },
    arrayHasItems (array) {
      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
    },
    isObjectEmpty (obj) {
      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
    },
    updateManageVolumeActionLoading (value) {
      this.importUnmanagedVolumeLoading = value
      if (!value) {
        this.fetchVolumes()
      }
    },
    onImportVolumeAction () {
      this.selectedUnmanagedVolume = null
      if (this.unmanagedVolumes.length > 0 &&
        this.unmanagedVolumesSelectedRowKeys.length > 0) {
        this.selectedUnmanagedVolume = this.unmanagedVolumes[this.unmanagedVolumesSelectedRowKeys[0]]
        this.importForm.name = this.selectedUnmanagedVolume.name
      }
      this.fetchDiskOfferings()
      this.showImportForm = true
    },
    handleSubmitImportVolumeForm () {
      if (this.selectedUnmanagedVolume === null) {
        return
      }
      this.values = toRaw(this.importForm)
      const volumeName = this.selectedUnmanagedVolume.name

      let variableKey = ''
      let variableValue = ''
      if (this.values.selectedAccountType === 'Account') {
        if (!this.values.selectedAccount) {
          this.importForm.accountError = true
          return
        }
        variableKey = 'account'
        variableValue = this.values.selectedAccount
      } else if (this.values.selectedAccountType === 'Project') {
        if (!this.values.selectedProject) {
          this.importForm.projectError = true
          return
        }
        variableKey = 'projectid'
        variableValue = this.values.selectedProject
      }

      var params = {
        diskofferingid: this.importForm.selectedDiskoffering,
        domainid: this.importForm.selectedDomain,
        [variableKey]: variableValue,
        storageid: this.poolId,
        path: this.selectedUnmanagedVolume.path,
        name: this.values.name
      }
      api('importVolume', params).then(json => {
        const jobId = json.importvolumeresponse.jobid
        this.$pollJob({
          jobId,
          title: this.$t('label.import.volume'),
          description: volumeName,
          loadingMessage: `${this.$t('label.import.volume')} ${volumeName} ${this.$t('label.in.progress')}`,
          catchMessage: this.$t('error.fetching.async.job.result'),
          successMessage: this.$t('message.success.import.volume') + ' ' + volumeName,
          successMethod: result => {
            this.fetchVolumes()
          }
        })
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loading = false
      })
      this.selectedUnmanagedVolume = null
      this.onCloseImportVolumeForm()
    },
    onCloseImportVolumeForm () {
      this.showImportForm = false
      this.importForm.selectedAccountType = null
      this.importForm.selectedDomain = null
      this.importForm.selectedAccount = null
      this.importForm.selectedProject = null
    },
    onUnmanageVolumeAction () {
      const self = this
      const title = this.managedVolumesSelectedRowKeys.length > 1
        ? this.$t('message.action.unmanage.volumes')
        : this.$t('message.action.unmanage.volume')
      var volumeNames = []
      for (var index of this.managedVolumesSelectedRowKeys) {
        volumeNames.push(this.managedVolumes[index].name)
      }
      const content = volumeNames.join(', ')
      this.$confirm({
        title: title,
        okText: this.$t('label.ok'),
        okType: 'danger',
        content: content,
        cancelText: this.$t('label.cancel'),
        onOk () {
          self.unmanageVolumes()
        }
      })
    },
    unmanageVolumes () {
      for (var index of this.managedVolumesSelectedRowKeys) {
        const vm = this.managedVolumes[index]
        var params = { id: vm.id }
        api('unmanageVolume', params).then(json => {
          const jobId = json.unmanagevolumeresponse.jobid
          this.$pollJob({
            jobId,
            title: this.$t('label.unmanage.volume'),
            description: vm.name,
            loadingMessage: `${this.$t('label.unmanage.volume')} ${vm.name} ${this.$t('label.in.progress')}`,
            catchMessage: this.$t('error.fetching.async.job.result'),
            successMessage: this.$t('message.success.unmanage.volume') + ' ' + vm.name,
            successMethod: result => {
              if (index === this.managedVolumesSelectedRowKeys[this.managedVolumesSelectedRowKeys.length - 1]) {
                this.fetchVolumes()
              }
            }
          })
        }).catch(error => {
          this.$notifyError(error)
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
:deep(.ant-table-small) > .ant-table-content > .ant-table-body {
  margin: 0;
}

.import-form {
  width: 85vw;

  @media (min-width: 760px) {
    width: 500px;
  }

  display: flex;
  flex-direction: column;

  &__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
  }

  &__label {
    display: flex;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .required {
    margin-right: 2px;
    color: red;
    font-weight: bold;
  }
}
.volumes-card {
  height: 100%;
}
.source-dest-card {
  width: 50%;
  height: 100%;
}
.volumes-card-table {
  overflow-y: auto;
  margin-bottom: 100px;
}
.volumes-card-footer {
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 10px;
  right: 0;
  margin-right: 10px;
}
.row-element {
  margin-top: 10px;
  margin-bottom: 10px;
}
.action-button-left {
  text-align: left;
}
.action-button-right {
  text-align: right;
}
.fetch-volumes-column {
  width: 50%;
  margin-left: 50%;
  padding-left: 24px;
}

.breadcrumb-card {
  margin-left: -24px;
  margin-right: -24px;
  margin-top: -16px;
  margin-bottom: 12px;
}

.ant-breadcrumb {
  vertical-align: text-bottom;
}

</style>