<template>
  <div>
    <el-card class="wrapper">
      <el-tabs v-model="searchData.type" @tab-click="modifyConfigs">
        <el-tab-pane label="公共镜像" name="PUBLIC"></el-tab-pane>
        <el-tab-pane label="私有镜像" name="PRIVATE"></el-tab-pane>
      </el-tabs>
      <cb-advance-table :title="imageTypeData[searchData.type] + '镜像列表'" :search-configs="searchConfigs" :data="imageData" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading" @selection-change="selectionChange">
        <template v-slot:action>
          <el-button type="primary" @click="handleCreate" v-if="searchData.type == 'PRIVATE'">
            新增
          </el-button>
          <el-button type="ghost" @click="handleDelete" :disabled="selectList.length == 0" v-if="searchData.type == 'PRIVATE'" icon="el-icon-delete"> 删除 </el-button>
        </template>
        <template #name="val, record">
          <span class="detail-href" @click="getDetail(record.id)">{{ val }}</span>
        </template>
        <template #status="status">
          <cb-status-icon :type="status | imageColor">{{ status | image }}</cb-status-icon>
        </template>
      </cb-advance-table>
    </el-card>
    <cb-detail-right :title="detail.name" v-if="detailFlag" :data="detail" @goBack="goBack">
      <template v-slot:item_container>
        <cb-detail-item label="镜像名称">{{ detail.name }}</cb-detail-item>
        <cb-detail-item label="镜像状态">{{ detail.status | image }}</cb-detail-item>
        <cb-detail-item label="云平台">{{ detail.vendorName }}</cb-detail-item>
        <cb-detail-item label="系统类别">{{ detail.osCategory }}</cb-detail-item>
        <cb-detail-item label="系统版本">{{ detail.osVersion }}</cb-detail-item>
        <cb-detail-item label="最小磁盘">{{ detail.minDisk + 'GB' }}</cb-detail-item>
        <cb-detail-item label="所属租户">{{ detail.tenantName }}</cb-detail-item>
      </template>
    </cb-detail-right>
    <el-dialog title="新增镜像" :visible.sync="addDialogVisible" width="35%" v-if="addDialogVisible">
      <el-row>
        <cb-form ref="addData" :model="addData">
          <el-col :span="24">
            <cb-form-item label="镜像名称" prop="name" :rules="[required,noChinese]" required-message="请输入名称">
              <el-input v-model="addData.name"></el-input>
            </cb-form-item>
          </el-col>
          <el-col :span="24">
            <cb-form-item label="云主机列表" prop="id" :rules="[required]" required-message="请选择云主机">
              <el-select v-model="addData.id">
                <el-option :label="item.name" :value="item.id" v-for="item in vmList" :key="item.id"></el-option>
              </el-select>
            </cb-form-item>
          </el-col>
          <el-col :span="24">
            <cb-form-item label="镜像描述" prop="remark">
              <el-input type="textarea" v-model="addData.remark"></el-input>
            </cb-form-item>
          </el-col>
        </cb-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="ghost" @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOk()" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import validate from '@/validate'
import { image, imageColor } from 'filters'
import { getRegion, getImage, detailImage, createImage, removeImages, getVm } from 'services/platform/index'
const detailSetting = {
  type: 'image',
  columns: [
    [
      { name: '镜像名称', value: 'name' },
      { name: '镜像状态', value: 'status', filter: image, icon: imageColor },
      { name: '云平台', value: 'vendorName' }
    ],
    [
      { name: '系统类别', value: 'osCategory' },
      { name: '系统版本', value: 'osVersion' },
      { name: '最小磁盘', value: 'minDisk', unit: 'GB' }
    ],
    [{ name: '所属租户', value: 'tenantName' }]
  ]
}
export default {
  props: {
    platformObject: {
      type: Object,
      default: function() {
        return {
          vendorId: -1,
          operate: -1
        }
      }
    }
  },
  data() {
    return {
      required: validate.required,
      noChinese: validate.noChinese,
      detailFlag: false,
      detailSetting,
      detail: {},
      addDialogVisible: false,
      params: {
        page: 1,
        rows: 10
      },
      searchData: {
        name: '',
        regionId: '',
        type: 'PUBLIC'
      },
      imageTypeData: {
        PUBLIC: '公有',
        PRIVATE: '私有'
      },
      regionList: [],
      vmList: [],
      imageData: [],
      total: 0,
      addData: {},
      idList: [],
      selectList: [],
      loading: false,
      searchConfigs: [
        { type: 'Input', value: 'name', label: '名称' },
        { type: 'Select', data: [], value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
        { type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
        { type: 'Const', value: 'imageType', initValue: 'PUBLIC' }
      ],
      columns: [
        {
          type: 'selection'
        },
        {
          label: '镜像名称',
          prop: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          label: '状态',
          prop: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          label: '操作系统',
          prop: 'osCategory'
        },
        {
          label: '系统版本',
          prop: 'osVersion'
        },
        {
          label: '最小磁盘(GB)',
          prop: 'minDisk'
        },
        {
          label: '所属云平台',
          prop: 'vendorName'
        }
      ]
    }
  },
  methods: {
    selectionChange(val) {
      this.selectList = val
    },
    handleDelete() {
      this.refreshId()
      const list = this.idList
      if (list.length == 0) return this.$message.error('请选择镜像')
      this.$confirm('此操作将删除所选镜像, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeImages(list).then(data => {
          if (data.success) {
            this.$message({
              type: 'success',
              message: data.message
            })
            this.getData()
            this.selectList = []
          }
        })
      })
    },
    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.imageData.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
              }
            }
          }
        })
      }
    },
    getDetail(id) {
      detailImage(id).then(data => {
        if (data.success) {
          this.detail = data.data
          this.detailFlag = true
        }
      })
    },
    goBack() {
      this.detailFlag = false
    },
    getVmList() {
      getVm({
        simple: true,
        params: JSON.stringify([{ param: { vendorId: this.platformObject.vendorId }, sign: 'EQ' }])
      }).then(data => {
        if (data.success) {
          this.vmList = data.data.rows
        }
      })
    },
    handleCreate() {
      this.addDialogVisible = true
      this.addData = {}
      this.getVmList()
    },
    addOk() {
      this.$refs.addData.validate(valid => {
        if (valid) {
          this.addData.vendorId = this.platformObject.vendorId
          this.loading = true
          createImage(this.addData).then(data => {
            if (data.success) {
              this.$message({
                type: 'success',
                message: data.message
              })
              this.getData()
              this.addDialogVisible = false
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    getData() {
      this.loading = true
      getImage(this.params).then(data => {
        if (data.success) {
          this.imageData = data.data.rows
          this.selectList = []
          this.loading = false
          this.imageData.forEach(data => {
            if ((data.projectVisibility && data.projectVisibility != 'GLOBAL_PROJECT') || data.tenantId || data.tenantIds || data.tenantName) {
              data.disabled = true
            }
          })
          this.total = data.data.total
        }
      })
    },
    handleModify(id) {
      detailImage(id).then(data => {
        if (data.success) {
          this.addDialogVisible = true
          this.addData = data.data
        }
      })
    },
    // 获取域
    getRegion() {
      getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
        if (data.success) {
          this.regionList = data.data
          console.log(this)
          this.searchConfigs[1].data = data.data
        }
      })
    },
    modifyConfigs () {
      this.searchConfigs = [
        { type: 'Input', value: 'name', label: '名称' },
        { type: 'Select', data: this.regionList, value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
        { type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
        { type: 'Const', value: 'imageType', initValue: this.searchData.type }
      ]
    }
  },
  created() {
    this.getRegion()
  },
  watch: {
    platformObject: {
      handler(newVal, oldVal) {
        this.searchConfigs = [
          { type: 'Input', value: 'name', label: '名称' },
          { type: 'Select', data: [], value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
          { type: 'Const', value: 'vendorId', initValue: newVal.vendorId },
          { type: 'Const', value: 'imageType', initValue: this.searchData.type }
        ]
        this.getRegion()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.no-searchBox {
  padding: 10px;
}
.table-container {
  border: none !important;
}
</style>
