<template lang="html">
  <div class="fieldDeleteVue pop-up">
    <div class="title">
      删除字段表
      <i class="close" @click="close()"></i>
    </div>
    <div class="main">
      <p>是否确认删除以下{{ checkedField.length }}个字段表？</p>
      <ul>
        <li class="lengthLimit" v-for="n,i in checkedField">{{ n.dbName }} -> {{ n.collection }}</li>
      </ul>
    </div>
    <div class="btns">
      <button type="button" class="btn3" @click="submit()">确认</button>
      <button type="button" class="btn3" @click="close()">返回</button>
    </div>
  </div>
</template>

<script>
import { bus, requestDeleteFields } from '@/vuex/request.js'

export default {
  data () {
    return {
    }
  },
  props: ['checkedField'],
  mounted () {
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.fieldDeleteVue.pop-up')
    })
  },
  methods: {
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.fieldDeleteVue.pop-up')
        setTimeout(() => {
          window.$('#generationTime').DatePickerClear()
          this.$emit('close')
        }, 500)
      })
    },
    submit () {
      let data = {
        id: this.checkedField.map((n, i) => {
          return n.id
        })
      }
      requestDeleteFields({}, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            bus.$emit('alert', response.data.message)
            this.$emit('update')
            this.$emit('clear-checkbox')
            this.$emit('close')
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fieldDeleteVue{
  width: 500px;
  .main{
    p{
      font-size: 16px;
      margin-bottom: 20px;
    }
    ul{
      padding-left: 20px;
      margin-bottom: 50px;
      max-height: 150px;
      overflow-y: auto;
      li{
        display: list-item;
        list-style-type: circle;
        line-height: 1.5;
        overflow: visible;
        max-width: 400px;
      }
    }
  }
}
</style>
