<template>
  <div class="app-container">
    <div class="scoped-news xl-form">
      <div class="sn-op" v-for="(item, index) in newsList" :key="index">
        <div class="n">{{index + 1}}</div>
        <el-input class="i" v-model="item.text" placeholder="请输入内容"></el-input>
        <el-button class="xl-form-btn t4" @click="delHandle(index)">删除</el-button>
      </div>
      <div class="sn-op">
        <div class="n">M</div>
        <el-input class="i" v-model="moreText" placeholder="请输入内容"></el-input>
      </div>
      <div class="sn-op">
        <div class="n">N</div>
        <el-input class="i" v-model="newsUrl" placeholder="请输入链接"></el-input>
      </div>
      <div slot="footer">
        <el-button class="xl-form-btn t1" @click="confirmHandle">保存</el-button>
        <el-button class="xl-form-btn t3" @click="unshiftHandle">前+1</el-button>
        <el-button class="xl-form-btn t3" @click="addHandle">后+1</el-button>
        <el-button class="xl-form-btn t4" @click="updateHandle">采集</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'todayNews',
  data() {
    return {
      newsList: [],
      moreText: '',
      newsUrl: '',
    }
  },
  computed: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    fetchData () {
      this.$api.other.admnewslist().then(res => {
        const allData = res || {}
        const newsList = allData.news || []
        this.newsList = newsList.map(item => {
          return {text: item}
        })
        this.moreText = allData.jt || ''
      })
    },
    delHandle (index) {
      let newsList = [...this.newsList]
      newsList.splice(index, 1)
      this.newsList = [...newsList]
    },
    unshiftHandle () {
      let newsList = [...this.newsList]
      newsList.unshift({text: ''})
      this.newsList = [...newsList]
    },
    addHandle () {
      let newsList = [...this.newsList]
      newsList.push({text: ''})
      this.newsList = [...newsList]
    },
    updateHandle () {
      this.$msg(`您确定要采集吗？`, 'confirm', () => {
        this.$api.other.admnewscollect({
          link: this.newsUrl,
        }).then(data => {
          this.$msgs(`已采集！`)
          this.fetchData()
        })
      })
    },
    confirmHandle() {
      this.$msg(`您确定要保存吗？`, 'confirm', () => {
        const news = this.newsList.map(item => {
          return item.text
        })
        this.$api.other.admnewschange({
          news: JSON.stringify(news),
          jt: this.moreText,
        }).then(data => {
          this.$msgs(`已保存！`)
          this.fetchData()
        })
      }, null, true)
    },
  }
}
</script>
<style lang="scss" scoped>
.scoped-news {
  .sn-op {
    display: flex;
    padding-bottom: 10px;
    .n {
      width: 18px;
      height: 18px;
      line-height: 18px;
      background: #fc5f5b;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 50%;
      margin-top: 10px;
      margin-right: 6px;
    }
    .i {
      flex: 1;
    }
  }
}
</style>
