<template>
  <div>
    <cb-detail-right v-if="detailFlag" :data="detail" @goBack="goBack" :title="detail.name">
      <template v-slot:item_container>
        <cb-detail-item label="规格名称">{{ detail.name }}</cb-detail-item>
        <cb-detail-item label="规格UUID">{{ detail.flavorUuid }}</cb-detail-item>
        <cb-detail-item label="所属平台">{{ detail.vendorName }}</cb-detail-item>
        <cb-detail-item label="VCPU数量">{{ detail.cpu + 'C' }}</cb-detail-item>
        <cb-detail-item label="内存大小">{{ detail.memory + 'GB' }}</cb-detail-item>
      </template>
    </cb-detail-right>

    <el-dialog :title="modifyName" :visible.sync="sizeFlag" width="40%" :before-close="handleClose">
      <div>
        <cb-form ref="sizeData" :model="sizeData" :status-icon="true" label-width="90px">
          <cb-form-item label="规格名称" prop="name" :rules="[required]" required-message="请输入名称">
            <el-input v-model="sizeData.name"></el-input>
          </cb-form-item>
          <cb-form-item label="虚拟内核" prop="cpu" :rules="[required]">
            <el-input type="number" v-model.number="sizeData.cpu"></el-input>
          </cb-form-item>
          <cb-form-item label="内存(GB)" prop="memory" :rules="[required]">
            <el-input type="number" v-model.number="sizeData.memory"></el-input>
          </cb-form-item>
          <cb-form-item label="磁盘(GB)" prop="disk" :rules="[required]">
            <el-input type="number" v-model.number="sizeData.disk"></el-input>
          </cb-form-item>
        </cb-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="ghost" @click="editCancel()">取 消</el-button>
        <el-button type="primary" @click="editOk('sizeData')">确 定</el-button>
      </div>
    </el-dialog>
    <el-card class="wrapper" v-if="!detailFlag">
      <cb-advance-table :card-border="false" title="规格列表" :search-configs="searchConfigs" :data="specificationData" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading">
        <template #name="val, record">
          <span class="detail-href" @click="getDetail(record.id)">{{ val }}</span>
        </template>
      </cb-advance-table>
    </el-card>
  </div>
</template>

<script>
import validate from '@/validate'
import { getRegion } from 'services/platform/index'
import { getFlavor, removeFlavor, removeFlavors, detailFlavor, createFlavor, modifyFlavor } from 'views/resource/ctstack/services/flavors'
const detailSetting = {
  type: 'spec',
  columns: [
    [
      { name: '规格名称', value: 'name' },
      { name: '规格UUID', value: 'flavorUuid' },
      { name: '所属平台', value: 'vendorName' }
    ],
    [
      { name: 'VCPU数量', value: 'cpu', unit: 'C' },
      { name: '内存大小', value: 'memory', unit: 'GB' }
    ]
  ]
}
export default {
  props: {
    platformObject: {
      type: Object,
      default: function() {
        return {
          vendorId: -1,
          operate: -1
        }
      }
    }
  },
  data() {
    return {
      required: validate.required,
      detailFlag: false,
      detailSetting,
      detail: {},
      sizeFlag: false,
      params: {
        page: 1,
        rows: 10
      },
      searchData: {
        name: '',
        regionId: ''
      },
      regionList: [],
      specificationData: [],
      total: 0,
      modifyName: '新增规格',
      sizeData: {
        name: '',
        cpu: '',
        memory: '',
        disk: ''
      },
      idList: [],
      selectList: [],
      columns: [
        {
          label: '规格名称',
          prop: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          label: 'CPU(核)',
          prop: 'cpu'
        },
        {
          label: '内存(GB)',
          prop: 'memory'
        },
        {
          label: '所属平台',
          prop: 'vendorName'
        },
        {
          label: '所属域',
          prop: 'regionName'
        }
      ],
      searchConfigs: [
        { label: '名称', value: 'name', type: 'Input' },
        {
          value: 'regionId',
          type: 'Select',
          data: [],
          label: '所属地域',
          props: { value: 'regionId' }
        },
        { type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId }
      ],
      loading: false
    }
  },
  methods: {
    refreshId() {
      this.idList = []
      this.selectList.forEach(item => {
        this.idList.push(item.id)
      })
    },
    // 单选
    handleSelectItem(selection, row) {
      this.refreshId()
      if (this.idList.indexOf(row.id) > -1) {
        for (let j = 0; j < this.selectList.length; j++) {
          const item = this.selectList[j]
          if (item.id == row.id) {
            this.selectList.splice(j, 1)
            break
          }
        }
      } else {
        this.selectList.push(row)
      }
    },
    // 全选
    handleSelectAll(selection) {
      this.refreshId()
      if (selection.length) {
        // 全选情况下
        selection.forEach(item => {
          if (this.idList.indexOf(item.id) == -1) {
            this.selectList.push(item)
          }
        })
      } else {
        // 全不选情况下
        this.specificationData.forEach(item => {
          if (this.idList.indexOf(item.id) > -1) {
            for (let j = 0; j < this.selectList.length; j++) {
              const row = this.selectList[j]
              if (item.id == row.id) {
                this.selectList.splice(j, 1)
                break
              }
            }
          }
        })
      }
    },
    goBack() {
      this.detailFlag = false
      this.getData()
    },
    getDetail(id) {
      detailFlavor(id).then(data => {
        if (data.success) {
          this.detail = data.data
          this.detailFlag = true
        }
      })
    },
    getData() {
      this.refreshId()
      this.loading = true
      getFlavor(this.params).then(data => {
        if (data.success) {
          this.specificationData = data.data.rows
          this.total = data.data.total
          this.selectList = []
          this.loading = false
          this.refreshId()
          this.specificationData.forEach(item => {
            const self = this
            setTimeout(function() {
              if (self.idList.indexOf(item.id) > -1) self.$refs.multipleTable.$refs.basicTable.toggleRowSelection(item, true)
            })
          })
        }
      })
    },
    handleSizeChange(val) {
      this.params.rows = val
      this.getData()
    },
    editSize(id) {
      this.sizeFlag = true
      this.modifyName = '新增规格'
      if (id) {
        detailFlavor(id).then(data => {
          if (data.success) {
            this.sizeData = {
              name: data.data.name,
              cpu: data.data.cpu,
              memory: data.data.memory,
              disk: data.data.disk,
              id: id
            }
            this.modifyName = '编辑规格'
          }
        })
      }
    },
    editOk(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.sizeData.vendorId = this.platformObject.vendorId
          if (this.modifyName == '新增规格') {
            createFlavor(this.sizeData).then(data => {
              if (data.success) {
                this.$message({
                  type: 'success',
                  message: data.message
                })
                this.editCancel()
                this.getData()
                this.$emit('goBack')
              }
            })
          } else {
            modifyFlavor(this.sizeData).then(data => {
              if (data.success) {
                this.$message({
                  type: 'success',
                  message: data.message
                })
                this.editCancel()
                this.getData()
                this.$emit('goBack')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    handleClose(done) {
      this.editCancel()
    },
    editCancel() {
      this.$refs.sizeData.resetFields()
      this.sizeFlag = false
    },
    dropdownClick(command) {
      switch (command.index) {
        case 1:
          this.editSize(command.id)
          break
        case 2:
          this.remove(command.id)
          break
      }
    },
    handleDelete() {
      this.refreshId()
      const list = this.idList
      this.$confirm('此操作将删除所选规格, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeFlavors(list).then(data => {
          if (data.success) {
            this.$message({
              type: 'success',
              message: data.message
            })
            this.getData()
            this.selectList = []
          }
        })
      })
    },
    remove(id) {
      this.$confirm('此操作将永久删除该规格, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeFlavor(id)
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
          .then(data => {
            if (data.success) {
              this.$message({
                type: 'success',
                message: data.message
              })
              this.getData()
              this.$emit('goBack')
            }
          })
      })
    },
    // 获取域
    getRegion() {
      getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
        if (data.success) {
          this.regionList = data.data
          this.searchConfigs[1].data = data.data
        }
      })
    }
  },
  mounted() {
    this.getRegion()
  },
  watch: {
    platformObject: {
      handler(newVal, oldVal) {
        this.searchConfigs = [
          { label: '名称', value: 'name', type: 'Input' },
          {
            value: 'regionId',
            type: 'Select',
            data: [],
            label: '所属地域'
          },
          { type: 'Const', value: 'vendorId', initValue: newVal.vendorId }
        ]
        this.getRegion()
      },
      deep: true
    }
  }
}
</script>

<style>
.no-searchBox {
  padding: 10px;
}
</style>
