<template>
  <div>
    <basic-form label-width="80px" :model="itemData" ref="data">
      <PreviewItem :item-data="itemData"></PreviewItem>
      <basic-form-item label="规格：">
        <el-form :inline="true" v-if="itemData.service.indexOf('aliyun') == -1">
          <basic-form-item>
            <el-input placeholder="名称" v-model="searchData.name"></el-input>
          </basic-form-item>
          <basic-form-item>
            <el-button type="ghost" icon="el-icon-search" @click="getList">搜索</el-button>
          </basic-form-item>
        </el-form>
        <basic-table :data="list" :params="params" :get-list="getList" :total="total">
          <el-table-column label="名称">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="itemData.flavorId" @change="flavorDetail = scope.row">
                {{ scope.row.name }}
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column label="id" prop="flavorUuid"> </el-table-column>
          <el-table-column label="cpu" prop="cpu"> </el-table-column>
          <el-table-column label="内存(GB)" prop="memory"> </el-table-column>
        </basic-table>
      </basic-form-item>
    </basic-form>
  </div>
</template>

<script>
import { generateSpec, getSpecValue } from 'views/resource-apply/utils/index'
import { getFlavor } from 'services/platform/index'
import PreviewItem from './PreviewItem.vue'
export default {
  components: { PreviewItem },
  props: {
    itemData: {
      type: Object
    }
  },
  data() {
    return {
      generateSpec,
      loading: false,
      list: [],
      total: 0,
      params: {
        page: 1,
        rows: 10
      },
      searchData: {
        name: ''
      },
      flavorDetail: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getFlavor({
        ...this.params,
        params: this.$tools.handleSearchParam({
          'name:lk': this.searchData.name,
          ...this.itemData.params
        })
      }).then(data => {
        if (data.success) {
          this.list = data.data.rows
          this.total = data.data.total
        }
      })
    },
    ok() {
      if (this.itemData.flavorId == this.itemData.flavor.id) {
        this.$message.error('变更规格不可与原规格相同')
        return false
      }
      const { service, preview } = this.itemData
      const obj = {
        preview,
        service,
        instance: this.itemData.uuid,
        instanceName: this.itemData.name,
        operation: 'Upgrade',
        flavorId: this.itemData.flavorId,
        params: this.itemData.params,
        upgrade: [
          {
            serviceCode: service,
            specs: [{ cpu: this.flavorDetail.cpu }, { memory: this.flavorDetail.memory }]
          }
        ]
      }
      return obj
    },
    getApplyData() {
      const obj = {
        ...this.itemData,
        upgrade: this.flavorDetail
          ? [
            {
              serviceCode: this.itemData.service,
              specs: [{ cpu: this.flavorDetail.cpu }, { memory: this.flavorDetail.memory }]
            }
          ]
          : this.itemData.upgrade
      }
      return obj
    }
  }
}
</script>

<style></style>
