<template>
  <div>
    <basic-form label-width="120px" ref="data" v-bind="$attrs">
      <basic-form-item label="原配置："> {{ itemData.params.size }}GB </basic-form-item>
      <basic-form-item label="配置：" validate="required">
        <sku-table :skus="skuList" style="max-width: 600px" :mode="itemData.params.mode" :show-price="true" :column-props="[{ label: '磁盘（GB）', value: 'disk' }]">
          <el-table-column show-overflow-tooltip label="规格名称" prop="name">
            <template v-slot="scope">
              <el-radio v-model="itemData.skuId" :label="scope.row.id">{{ scope.row.code }}</el-radio>
            </template>
          </el-table-column>
        </sku-table>
      </basic-form-item>
    </basic-form>
  </div>
</template>

<script>
import { getCategoriesByCode, getSkus, modifyResource, getSkusDetail } from 'services/services/product'
import { formatEqParams } from 'utils/index'
import { getDictChildren } from 'services/platform/index'
import { generateSpec, getSpecValue } from 'views/resource-apply/utils/index'

export default {
  props: {
    itemData: {
      type: Object
    }
  },
  data() {
    return {
      generateSpec,
      loading: false,
      skuList: []
    }
  },
  created() {
    this.getSku(this.itemData)
  },
  methods: {
    // 获取商品的sku
    getSku(item) {
      const { categoryId } = item
      this.loading = true
      getSkus(formatEqParams({ categoryId, serviceCode: 'openstack.standard.volume' }))
        .then((data) => {
          if (data.success) {
            if (!data.data.length) return this.$message.error('该产品类型下不存在产品，请检查')
            const cell = data.data[0]
            if (!item.skuId) this.$set(this.itemData, 'skuId', cell.id)
            if (item.instance) {
              this.$set(this.itemData, 'skuId', item.upgrade[0].skuId)
            }
            this.$set(
              this,
              'skuList',
              data.data.map((item) => {
                const spec = JSON.parse(item.spec)
                return {
                  ...item,
                  spec
                }
              })
            )
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    ok() {
      let data = false
      const { uuid, name, expiredTime, skuId, categoryId, params } = this.itemData
      const sku = this.skuList.find((item) => item.id == skuId)
      data = {
        service: sku.serviceCode,
        instance: uuid,
        instanceName: name,
        operation: 'EditDisk',
        newDiskSize: getSpecValue({ skuId, skuList: this.skuList }).disk,
        params: {
          ...params
        },
        upgrade: [
          {
            skuId,
            serviceCode: sku.serviceCode,
            categoryId,
            specs: [
              {
                ...getSpecValue({ skuId, skuList: this.skuList })
              }
            ],
            uuid
          }
        ],
        expiredTime
      }
      return data
    },
    getApplyData() {
      const { uuid, name, expiredTime, skuId, categoryId, params } = this.itemData
      const sku = this.skuList.find((item) => item.id == skuId)
      const obj = {
        ...this.itemData,
        newDiskSize: getSpecValue({ skuId, skuList: this.skuList }).disk,
        upgrade: []
      }
      obj.upgrade = [
        {
          skuId,
          serviceCode: sku.serviceCode,
          categoryId,
          specs: [
            {
              ...getSpecValue({ skuId, skuList: this.skuList })
            }
          ],
          uuid
        }
      ]
      return obj
    }
  }
}
</script>

<style lang="scss" scoped>
.w {
  width: 100px !important;
}
.add-border {
  padding: 2px;
  cursor: pointer;
  border: 1px dashed black;
  text-align: center;
}
</style>
