<template>
  <div v-show="isShow" v-loading="dataLoading">
    <el-toolbar>
      <el-button @click="isShow = false" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="save" v-loading="saveLoading"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <el-card class="table-card">
      <div v-for="val in tmpMedia.articles" :key="val.ID">
        <div v-if="val.index === 0" class="appmsg-title">
          <a href="javascript:void(0);" onclick="return false;" target="_blank">
            <h4 class="appmsg_title">{{val.title}}</h4>
          </a>
          <img :src="tmpMedia.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture'+((row.ID||row.$index) % 4)+'.png'" width="100%" />
          <div class="button-div">
            <div style="position:absolute;top:45%;left:30%;">
              <el-button type="text" @click="editArticle(val)">编辑</el-button>
              <el-button type="text" @click="delArticle(val.index)">删除</el-button>
            </div>
          </div>
        </div>
        <div v-else class="appmsg-div">
          <el-row>
            <el-col :span="16">
              <a onclick="return false;" href="javascript:void(0);" target="_blank">{{val.title}}</a>
            </el-col>
            <el-col :span="8">
              <img :src="tmpMedia.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture'+((row.ID||row.$index) % 4)+'.png'" width="78" height="78"
              />
            </el-col>
          </el-row>
          <div class="button-div">
            <div style="position:absolute;top:40%;left:30%;">
              <el-button type="text" @click="editArticle(val)">编辑</el-button>
              <el-button type="text" @click="delArticle(val.index)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加素材图标 -->
      <div class="add-div">
        <a @click="addArticle" class="add-body">
          <i class="fa fa-plus" aria-hidden="true"></i>
        </a>
      </div>
    </el-card>
    <block-item-dialog :show.sync="createArticleModal" :item="tmpArticle" @callback="blockItemDialogCallback"></block-item-dialog>

  </div>
</template>
<script>
import util from '@src/common/util.js'
import blockItemDialog from '../block/blockItemDialog.vue'
export default {
  data() {
    return {
      dataLoading: false,
      saveLoading: false,
      editMode: 0,
      contentSelectDialogModal: false,
      resourceDialogProps: {
        dataType: 'block',
        resourceType: 'image',
        imageType: 'logo',
        imageHeight: 120,
        imageWidth: 120,
        inputType: 'radio'
      },
      tmpMedia: {},
      createArticleModal: false,
      tmpArticle: {},
      titleColor: '',
      previewPath: ''
    }
  },
  computed: {
    isShow: {
      get() {
        if (this.show) {
          this.loadData()
        }
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    contentSelectCallback(data) {
      this.tmpArticle = {
        ID: data.ID,
        publishDate: data.publishDate,
        title: data.title,
        logoFile: data.logoFile,
        URL: data.link,
        index: this.tmpArticle.index,
        summary: ''
      }
      this.previewPath = this.tmpMedia.prefix + data.logoFile
    },
    editArticle(data) {
      this.editMode = 1
      this.tmpArticle = Object.assign({}, data)
      this.previewPath = this.tmpMedia.prefix + data.logoFile
      this.titleColor = ''
      this.createArticleModal = true
    },
    delArticle(index) {
      this.tmpMedia.articles.splice(index, 1)
      this.tmpMedia.articles.forEach(o => {
        o.index = this.tmpMedia.articles.findIndex(val => val === o)
      })
    },
    async loadData() {
      this.saveLoading = false
      this.dataLoading = true
      let res = await axios.get('/ui/wechat/medias/init', {
        params: {
          ID: this.ID
        }
      })
      this.tmpMedia = res.data.data
      this.dataLoading = false
      if (!this.ID) {
        Vue.set(this.tmpMedia, 'articles', [])
      }
    },
    async save() {
      this.saveLoading = true
      let res
      if (this.ID) {
        res = await axios.put(`/ui/wechat/medias/${this.ID}`, this.tmpMedia)
      } else {
        res = await axios.post('/ui/wechat/medias', this.tmpMedia)
      }
      util.showResponseMessage(res.data)
      this.saveLoading = false
      if (res.data.status === 1) {
        this.isShow = false
        this.$emit('callback')
      }
    },
    addArticle() {
      this.editMode = 0
      this.titleColor = ''
      this.previewPath = ''
      this.tmpArticle = {
        ID: 0,
        publishDate: '',
        title: '',
        logoFile: '',
        URL: '',
        index: this.tmpMedia.articles.length,
        summary: ''
      }
      this.createArticleModal = true
    },
    blockItemDialogCallback(article) {
      article.publishDate = article.date
      if (this.editMode) {
        this.tmpMedia.articles.splice(article.index, 1, article)
      } else {
        this.tmpMedia.articles.splice(article.index, 0, article)
      }
    }
  },
  props: {
    ID: {
      default: 0
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  components: {
    'block-item-dialog': blockItemDialog
  }
}
</script>
<style scoped>
.el-button + .el-button {
  margin-left: 0px;
}

.table-card {
  width: 320px;
  margin: auto;
  margin-top:20px;
}

.appmsg-title {
  position: relative;
  margin: 0 15px 15px 15px;
}

.appmsg-title a {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  width: 100%;
}

.appmsg_title {
  background: rgba(0, 0, 0, 0.6) !important;
  position: absolute;
  bottom: 15px;
  width: 100%;
  padding: 18px 8px 8px 8px;
}

.appmsg-div,
.add-div {
  position: relative;
  padding: 20px 15px 30px 15px;
  border-top: 1px solid #ccc;
}

.appmsg-div a {
  font-size: 16px;
  padding: 24px 10px 0 0;
  display: block;
  color: #8d8d8d;
}

.appmsg-div a:hover {
  color: black;
  text-decoration: none;
}

.appmsg-div img {
  float: right;
}

.add-body {
  text-align: center;
  line-height: 60px;
  border: 2px dashed #d9dadc;
  display: block;
  color: #8d8d8d;
}

.button-div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 100%;
  background: rgba(229, 229, 229, 0.85) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d9e5e5e5', endcolorstr='#d9e5e5e5');
  text-align: center;
}

.appmsg-title:hover .button-div {
  display: inline;
}

.appmsg-div:hover .button-div {
  display: inline;
}
</style>
