<template>
  <div>
    <div class="model m1">
      <p>欢迎使用四维看看后台代理系统！</p>
      <p>四维时代致力于让数字化飞入寻常百姓家</p>
      <p>让人工智能真正服务于生活</p>
    </div>

    <div class="model m1">
      <h2 class="title">
        <span>首页新闻栏</span>
        <el-button type="primary" class="insert" icon="el-icon-plus" circle @click="previewData=getNew()"></el-button>
      </h2>
      <el-row>
        <el-col :span="7"  v-for="(_new, index) in news" :key="_new.id" :offset="index%3 === 0 ? 0 : 1">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="_new.cover" class="cad-cover">
            <div style="padding: 14px;" class="card-body">
              <h3>{{_new.title}}</h3>
              <div v-html="getTextShow(_new.text)"></div>
              <div class="opers">
                <a @click="previewData = _new">编辑</a>
                <a @click="delNew(_new)">删除</a>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="preview" v-if="previewData">
      <div class="preview-layer">
        <Edit :datap="previewData" class="layer" @quit="previewData = null" @submit="insert"/>
      </div>
    </div>
  </div>
</template>

<script>
import edit from './edit'

export default {
  data () {
    return {
      previewData: null,
      news: []
    }
  },
  methods: {
    getNew () {
      return {
        title: '',
        text: [''],
        cover: ''
      }
    },
    getTextShow (texts) {
      return JSON.parse(texts).map(text => '<p>' + text + '</p>').join('')
    },
    async insert (data) {
      let pdata = {...data}
      pdata.text = JSON.stringify(data.text)

      try {
        if (data.id) {
          await this.$http.put('/home_news', pdata)
        } else {
          await this.$http.post('/home_news', pdata)
        }
        this.previewData = null
        this.referNews()
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    },
    async delNew (data) {
      if (!confirm('删除后无法恢复，你确定要删除这个新闻栏吗？')) return

      try {
        await this.$http.delete('/home_news/' + data.id)
        this.referNews()
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    },
    async referNews () {
      try {
        let {content} = await this.$http.get('/home_news')
        this.news = content
      } catch (e) {
        this.$error('服务端发生错误！')
      }
    }
  },
  async mounted () {
    this.referNews()
  },
  components: {Edit: edit}
}
</script>

<style scoped>
.cad-cover {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.card-body div {
  margin: 10px 0;
}

.card-body h3 {
  text-align: center;
}

.opers a{
  color: #3a8ee6;
  font-size: 14px;
}
.model {
  background-color: #fff;
  margin-bottom: 30px;
  padding: 10px 18px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 3px;
}

.m1 {
  font-size: 16px;
  color: #333333;
  line-height: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.m1 p:first-child {
  color: #999999;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}

.m2 h4{
  font-size: 14px;
  color: #333333;
  line-height: 40px;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #f2f2f2;
}

.m2 div {
  color: #333333;
  font-size: 16px;
  line-height: 30px;
  padding-top: 15px;
  padding-bottom: 30px;
  /* max-width: 980px; */
  /* margin: 0 auto */
}

.m2 h5 {
  font-weight: bold;
  margin: 10px 0 20px;
}

.m2 * {
  word-wrap: break-word;
  word-break: break-all;
}

.title {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.insert {
  float: right;
}

.preview {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
}

.preview-layer {
  overflow-y: scroll;
  height: 100%;
}

.preview .layer {
  margin: 50px auto;
  max-width: 780px;
  text-align: center;
}

.el-icon-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 26px;
  color: #000;
  cursor: pointer;
}
</style>

<style>
.card-body div p {
  margin-bottom: 10px;
  font-size: 14px;
  text-indent: 2em;
}
</style>
