<template>
  <el-dialog title="配置变更" append-to-body :visible.sync="config.visible" width="60%">
    <el-alert class="m-b" title="若虚拟机不支持运行时修改配置，须先关机后再申请配置变更" :closable="false" type="warning"> </el-alert>
    <UpgradeSpec ref="specRef" :item-data="itemData"></UpgradeSpec>
    <span slot="footer" class="dialog-footer">
      <el-button type="ghost" @click="config.visible = false">取 消</el-button>
      <el-button type="primary" @click="ok" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UpgradeSpec from 'views/personal/apply/components/UpgradeSpec.vue'
import { modifyResourceEFC } from 'services/services/product'
export default {
  components: { UpgradeSpec },
  props: {
    config: {
      type: Object
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    itemData() {
      const { service, uuid: instance, name: instanceName, categoryId, cpu, memory, disk, expiredTime, privateIpsList } = this.config.data
      return {
        service,
        instance,
        instanceName,
        expiredTime,
        preview: {
          categoryId,
          cpu,
          memory,
          disk,
          privateIpsList,
          specName: `${cpu}C/${memory}GB/${disk}GB`
        },
        upgrade: [
          {
            serviceCode: service,
            categoryId,
            specs: [
              {
                cpu
              },
              {
                memory
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    ok() {
      const obj = this.$refs.specRef.getApplyData()
      if (obj.preview.cpu === obj.upgrade[0].specs[0].cpu && obj.preview.memory === obj.upgrade[0].specs[1].memory) {
        return this.$message.error('变更规格不能与原规格相同')
      }
      this.loading = true
      modifyResourceEFC(obj)
        .then(data => {
          if (data.success) {
            this.$message.success(data.message)
            this.config.visible = false
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
