<template>

  <div class="create-card">

    <div class="create-card-block" @click="$emit('click')">

      <t-icon icon="plus-outline"></t-icon>

      <span>新增监控</span>

    </div>

  </div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

.create-card {

  display: inline-block;

  overflow: hidden;

  cursor: pointer;

  height: 100%;

  padding: 10px;

  margin-bottom: 10px;

  &-block {

    display: flex;

    height: calc(100% - 0px);

    justify-content: center;

    align-items: center;

    border: 1px dotted #D9D9D9;

    &:hover {

      border-color: transparent;

      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15), -1px -1px 5px rgba(0, 0, 0, 0.15);

    }

  }

}

</style>

<template>

  <div ref="box" class="draggable-container">

    <draggable :list="list" v-bind="dragOptions" v-on="$listeners">

      <transition-group>

        <slot :scope="{width: gridWidth, height: gridHeight}" name="prepend"></slot>

        <template v-for="item in list">

          <div v-if="item && keyWord in item" :key="item[keyWord]" :style="{width: gridWidth + 'px', height: gridHeight + 'px'}" class="draggable-item">

            <slot :scope="{data: item, width: gridWidth, height: gridHeight}"></slot>

          </div>

        </template>

      </transition-group>

    </draggable>

    <template v-if="showPage">

      <div v-for="descr in pageDescrs" :key="descr.text" :style="descr.style" class="page-descr">

        <span>{{ descr.text }}</span>

      </div>

    </template>

  </div>

</template>

<script>

import ViewCard from '../ViewCard'

import Draggable from 'vuedraggable'

export default {

  components: { ViewCard, Draggable },

  model: {

    prop: 'list',

    event: 'input'

  },

  props: {

    list: {

      type: Array,

      default: () => []

    },

    keyWord: {

      type: String,

      required: true

    },

    grid: {

      type: Array,

      default: () => [4, 1]

    },

    gridPer: { // 长宽比

      type: Number,

      default: 1.3

    },

    showPage: {

      type: Boolean,

      default: false

    }

  },

  data() {

    return {

      boxWidth: 0,

      dragOptions: {

        animation: 300,

        group: 'viewData',

        draggable: '.draggable-item',

        filter: '.page-descr',

        // disabled: this.disabled,

        ghostClass: 'ghost'

      }

    }

  },

  computed: {

    gridHeight() {

      return this.boxWidth / this.grid[0] / this.gridPer

    },

    gridWidth() {

      return this.boxWidth / this.grid[0]

    },

    pageSize() {

      return this.grid[0] * this.grid[1]

    },

    pageDescrs() {

      let pageSum = Math.ceil(this.list.length / this.pageSize)

      const descrs = []

      for (let i = 0; i < pageSum; i++) {

        descrs.push({

          text: `第 ${i + 1} / ${pageSum} 页`,

          style: {

            // 分页高 + 分页间隔和 + 基础偏移

            top: (this.gridHeight * this.grid[1] * (i + 1)) + (10 * i) + 5 + 'px'

          }

        })

      }

      return descrs

    }

  },

  mounted() {

    this.boxWidth = this.$refs.box.clientWidth

  },

  methods: {

  }

}

</script>

<style lang="scss">

.draggable-container {

  position: relative;

  line-height: 0;

  .page-descr {

    text-align: right;

    position: absolute;

    right: 0;

  }

}

.draggable-item {

  display: inline-block;

  overflow: hidden;

  margin-bottom: 10px;

}

</style>

<template>

  <div class="update-name">

    <div v-if="text_tatus == 0" @mouseover="mouseOver">

      {{ name }}

    </div>

    <div v-else-if="text_tatus == 1" @mouseleave="mouseLeave">

      {{ name }}

      <div class="iconChange" @click="iconChange">

        <t-icon icon="edit-outline" size="24"> </t-icon>

      </div>

    </div>

    <div v-else @mouseleave="mouseLeave">

      <t-input

        v-model="name"

        size="sm"

        icon="check-outline"

        icon-placement="right"

        @icon-click="iconSubmit"

      >

      </t-input>

    </div>

  </div>

</template>

<script>

export default {

  name: 'UpdateName',

  props: {

    name: String

  },

  data() {

    return {

      text_tatus: 0

    }

  },

  watch: {},

  mounted() {},

  methods: {

    // 移入

    mouseOver() {

      this.text_tatus = 1

    },

    // 移出

    mouseLeave() {

      this.text_tatus = 0

    },

    // 修改

    iconChange() {

      this.text_tatus = 2

    },

    // 提交

    iconSubmit() {

      this.text_tatus = 1

      this.$emit('nameSubmit', this.name)

    }

  }

}

</script>

<style lang="scss">

.update-name {

  font-size: 14px;

  padding: 0 5px;

  .iconChange {

    height: 20px;

    float: right;

  }

}

</style>

<template>

  <div :class="{ active: showConfirm, lock: loadingDelete }" :style="{ width, height }" class="masonry__item div-block">

    <div class="card card-has-shadowed card-main">

      <div :style="`backgroundImage:url(${data.imgsrc})`" class="card-bg" />

      <div class="opt">

        <t-button shape="round" icon="arrow-expand-all-outline" style="margin: 0px 0px 0px 0px">移动</t-button>

        <t-button shape="round" icon="swap-outline" style="margin: 0px 2px 0px 2px" @click="handleEdit">替换</t-button>

        <t-button shape="round" icon="delete" @click="handleDelete">删除</t-button>

        <div v-show="showConfirm" class="popover">

          <t-icon color="warning" icon="alert-circle" style="vertical-align: middle" />

          你确定删除该监控吗？

          <div class="btn-block">

            <t-button :loading="loadingDelete" size="sm" color="primary" @click="handleConfirmDelete">确定</t-button>

            <t-button size="sm" color="secondary" style="margin-right: 8px" @click="handleCancelDelete">取消</t-button>

          </div>

        </div>

      </div>

    </div>

    <div class="card card-has-shadowed card-title">

      <update-name :name="data.title" @nameSubmit="nameChange" />

    </div>

  </div>

</template>

<script>

import UpdateName from './UpdateName'

export default {

  components: {

    UpdateName

  },

  props: {

    data: {

      type: Object,

      require: true

    },

    width: {

      type: String,

      default: '100%'

    },

    height: {

      type: String,

      default: '100%'

    }

  },

  data() {

    return {

      showConfirm: false,

      loadingDelete: false

    }

  },

  mounted() {

  },

  methods: {

    nameChange: function (name) {

      // 修改名称

      alert(name)

    },

    handleDelete() {

      this.showConfirm = true

    },

    handleConfirm() {},

    handleCancelDelete() {

      this.showConfirm = false

    },

    handleConfirmDelete() {

      // this.loadingDelete = true;

      // 把事件抛出去，保持控件的干净

      this.$emit('deleted', this.data)

      //   sysapi

      //     .deleteSchedule(this.data.scheduleId)

      //     .then(

      //       (resp) => {

      //         console.log(resp);

      //         this.$emit("deleted", this.data);

      //       },

      //       (err) => {

      //         console.log(err);

      //         this.$Message.danger("删除失败，请稍后再试！", 3);

      //       }

      //     )

      //     .finally(() => {

      //       this.loadingDelete = false;

      //       this.showConfirm = false;

      //     });

    },

    handleEdit() {

      this.$emit('edit', this.data)

    }

  }

}

</script>

<style lang="scss">

  @import "@/assets/styles/aid-theme/_variable.scss";

  .div-block {

    display: inline-block;

    .card-bg {

      background-size: cover;

      height: 100%;

      width: 100%;

    }

    .card-main {

      height: calc(100% - 37px);

      margin-bottom: 5px;

    }

    .card-title {

      padding: 5px;

      height: 32px;

      line-height: 22px;

    }

    .opt {

      position: absolute;

      left: 0;

      top: 0;

      width: 100%;

      height: 100%;

      opacity: 0;

      display: flex;

      justify-content: center;

      align-items: center;

      &::before {

        content: "";

        display: block;

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        background-color: black;

        border-radius: 4px;

        opacity: 0.8;

      }

      &::after {

        content: "";

        display: none;

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        background-color: black;

        border-radius: 4px;

        opacity: 0;

      }

      &>.btn {

        color: rgba(255, 255, 255, 0.65);

        border-color: rgba(0, 0, 0, 0);

        background-color: rgba(0, 0, 0, 0);

        &:hover {

          color: white;

          background-color: $brand-primary;

        }

      }

      &:hover {

        opacity: 1;

      }

    }

    &.active &__opt {

      opacity: 1;

    }

    &.lock &__opt::after {

      display: block;

    }

    .popover {

      width: 213px;

      background-color: white;

      color: rgba(0, 0, 0, 0.65);

      position: absolute;

      bottom: 12px;

      left: 12px;

      padding: 16px 20px;

      border-radius: 4px;

    }

    .btn-block {

      display: flex;

      flex-direction: row-reverse;

      margin-top: 14px;

    }

  }

  .div-footer {

    height: 32px;

    margin-top: 6px;

  }

</style>

    path: '/dashboard',

    component: Layout,

    meta: { icon: 'home' },

    children: [

      {

        name: 'dashboard',

        path: '',

        component: () => import(/* webpackChunkName: "dashboard" */ './modules/dashboard'),

        meta: { title: '首页', icon: 'home' }

      }

    ]

  },

  {