<template>
  <el-button @click="push" v-if="isArticle" :disabled="!contentIds" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Publish.'+ catalogId">
    <i class="fa fa-telegram"></i>社交媒体推送
  <el-dialog title="选择媒体帐号" :append-to-body="true" :visible.sync="dialogModal" class="media-account-selector">
  <!-- 底部确认按钮 -->
      <div v-for="row in accounts" :key="row.ID" @click.stop="selectAccount(row.ID)">
        <div class="list-item">
          <img :src="row.headImage ? row.headImage : (row.PCode ? `assets/images/socialmedia/${row.PCode.toLowerCase()}-logo.png` : 'assets/images/socialmedia/headimage/auto.jpg')"
          :title="row.MName" height="36px" width="36px" style="margin:10px 0;"/><br/>
          <div style="height:36px;">{{row.MName}}</div>
            <img   class="check-img-status"
                  :src="`assets/images/socialmedia/${selectedAccounts.includes(row.ID) ? 'icon_checked.png' : 'icon_uncheck.png'}`" :title="row.MName" height="20px"
                  width="20px" />
        </div>

      </div>
    <div slot="footer">
      <el-button @click="dialogModal = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
    </div>
  </el-dialog>
  </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  // props: ['contentIds', 'siteId', 'catalogId', 'contentType', 'buttonType', 'content'],
  props: {
    contentIds: {
      type: [Number, String],
      required: false
    },
    siteId: {
      type: [Number, String],
      required: false
    },
    catalogId: {
      type: [Number, String],
      required: false
    },
    contentType: {
      type: String,
      required: false
    },
    buttonType: {
      type: String,
      required: false
    },
    content: {
      type: Object,
      required: false,
      default: null
    }
  },
  data() {
    return {
      dialogModal: false,
      confirmLoading: false,
      accounts: [],
      isArticle: false,
      selectedAccounts: [],
      channels: []
    }
  },
  watch: {
    contentIds(val) {
      if (this.content !== null) {
        this.isArticle = this.content.contentTypeID === 'Article'
        return
      }
      if ((val && typeof val === 'string' && val.split(',').length === 1) || (val && typeof val === 'number' && val > 0)) {
        this.getContentInfo()
      }
    }
  },
  async created() {
    if (this.content !== null) {
      this.isArticle = this.content.contentTypeID === 'Article'
      return
    }
    if (this.contentIds) {
      this.getContentInfo()
    }
  },
  methods: {
    async getContentInfo() {
      let res = await axios.get(`/ui/contentcore/contents/${this.contentIds}`)
      this.channels = res.data.data.channelAttribute
      this.isArticle = res.data.data.contentTypeID === 'Article'
    },
    async selectAccount(ID) {
      if (this.selectedAccounts.includes(ID)) {
        this.selectedAccounts = this.selectedAccounts.filter(val => ID !== val)
        return
      }
      let res = await axios.put(`/ui/mediaaccounts/${ID}/verify/${this.contentIds}`)
      if (res.data.status !== 1) {
        util.showErrorMessageBox(res.data.message)
        return
      }
      this.selectedAccounts.push(ID)
    },
    async push() {
      let res = await Promise.all([
        axios.get('/ui/mediaaccounts', {
          params: {
            needDetailInfo: true,
            channels: this.channels.join(',')
          }
        }),
        axios.get(`/ui/contentcore/contents/${this.contentIds}`)
      ])
      if (res[0].data.data.length === 0) {
        this.$alert('没有可运营的媒体账号！', '提示', {
          type: 'warning'
        })
        return
      } else if (!res[1].data.data.isPublished) {
        this.$alert('该内容未发布！', '提示', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = false
      this.selectedAccounts = []
      this.accounts = res[0].data.data
      this.dialogModal = true
    },
    async preview(){
      if (this.selectedAccounts.length === 0) {
        this.$alert('请选择媒体帐号！', '提示', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = true
      let res = await axios.post(`/ui/mediacontentpush/${this.contentIds}`, {
        accountIDs: this.selectedAccounts.join(',')
      })
      this.confirmLoading = true
      if (res.data.status !== 1) {
        util.showErrorMessageBox(res.data.message)
        return
      }
      this.dialogModal = false
      util.showMessage(res.data.data)
    },
    async confirm() {
      if (this.selectedAccounts.length === 0) {
        this.$alert('请选择媒体帐号！', '提示', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = true
      let res = await axios.post(`/ui/mediacontentpush/${this.contentIds}`, {
        accountIDs: this.selectedAccounts.join(',')
      })
      this.confirmLoading = true
      if (res.data.status !== 1) {
        util.showErrorMessageBox(res.data.message)
        return
      }
      this.dialogModal = false
      if (res.data.media) {
        this.$alert('授权已过期或者还未授权，请先去社交媒体进行授权！', '提示', {
          type: 'warning'
        })
        return
      }
      await util.showProgress(res.data.taskID, '信息推送中...')
      this.$alert('操作完成，点击社交媒体查看推送记录！', '提示', {
        type: 'info'
      })
    }
  }
}
</script>

<style scoped>
  .el-toolbar .el-button {
    /* font-size: 17px; */
  }
</style>
<style>
.media-account-selector .el-checkbox,
.el-checkbox__input {
  white-space: normal;
  text-align: center;
}
.media-account-selector .el-dialog {
  width: 680px;
}
@media (max-width: 480px) {
  .media-account-selector .el-dialog {
    width: 96%;
  }
}
</style>
<style scoped>
.check-img-status {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.list-item {
  float: left;
  padding: 10px;
  text-align: center;
  width: 80px;
  height: 112px;
  font-size: 12px;
  position: relative;
  margin-left: 10px;
}
</style>
