<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <div class="mediapush-list">
      <el-row>
        <el-col :span="14">
          <el-toolbar>
            <el-button @click="flush" priv="SocialMedia.MediaPush">
              <i class="fa fa-refresh"></i>刷新</el-button>
            <!--<el-button priv="SocialMedia.MediaPush.Delete" :disabled="selectedRows.length === 0" @click="deleteClick"><i class="fa fa-remove"></i>删除</el-button>-->
          </el-toolbar>
        </el-col>
        <el-col :span="10" class="dropdown-search-box-r search-bar-algin-toolbar">
          <el-input placeholder="请输入推送标题" v-model="searchKey" size="medium" @keyup.enter.native="searchMediaPush">
            <el-select v-model="pushStatus" style="margin-left:-5px;width:120px;" class="select-status" clearable slot="prepend" placeholder="请选择推送状态" @change="searchMediaPush">
              <el-option v-for="item in optionsStatus" :key="item.pushStatus" :label="item.label" :value="item.pushStatus">
              </el-option>
            </el-select>
          </el-input>
          <span class="search-icon">
            <i class="fa fa-search" @click="searchMediaPush" title="查询"></i>
          </span>
        </el-col>
      </el-row>
      <el-list-view :data-read-url="getMediaPushListURL" ref="dataTable1" @selection-change="onSelectionChange" :page-size="10">
        <template slot-scope="row">
          <div class="panel-card">
            <el-row>
              <img :src="`assets/images/socialmedia/${row.PCode? row.PCode : 'default'}-logo-18x18.png`" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"
                :title="row.PName" />&nbsp;{{row.title}}</el-row>
            <el-row>
              <el-col :span="12">
                <span>媒体名称: </span>
                <em>{{row.MName || ''}}</em>
              </el-col>
              <el-col :span="12">
                <span>推送状态: </span>
                <em :style="row.pushStatus | setNameColor">{{row.PushStatusName|| ''}}</em>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>推送时间: </span>
                <em>{{row.addTime | fixDateTime}}</em>
              </el-col>
              <el-col :span="12">
                <span>推送结果: </span>
                <em>{{row.pushMsg || ''}}</em>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>原文链接: </span>
                <em>
                  <a :href="row.sourceURL" target="_blank">{{row.sourceURL || ''}}</a>
                </em>
              </el-col>
              <el-col :span="12">
                <span>推送链接: </span>
                <em>
                  <a :href="row.castContentLink" target="_blank">{{row.castContentLink || ''}}</a>
                </em>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="tar">
                <el-button @click.stop="del(row)" type="text" title="删除" priv="SocialMedia.MediaPush.Delete">
                  <i class="fa fa-times"></i>删除
                </el-button>
                <el-button @click.stop="revoke(row)" type="text" title="撤稿" priv="SocialMedia.MediaPush.Revoke">
                  <i class="fa fa-recycle"></i>撤稿
                </el-button>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-list-view>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      optionsStatus: [
        {
          pushStatus: '0',
          label: '推送成功'
        },
        {
          pushStatus: '1',
          label: '推送失败'
        },
        {
          pushStatus: '2',
          label: '已撤稿'
        }
      ],
      pushStatus: '',
      searchKey: '', // 查询词
      selectedRows: [] // 选择的行
    }
  },
  filters: {
    setNameColor: function(val) {
      switch (val) {
        case '0':
          return 'color:green'
        case '1':
          return 'color:red'
        case '2':
          return 'color:gray'
        default:
          break
      }
      return 'color:gray'
    },
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  computed: {
    mediaType() {
      let mediaType = this.$parent.mediaType
      if (mediaType === 'QQNewsPlat') {
        return 'QQNewsPlat,QQNewsSite'
      } else if (mediaType === 'WeChatMedia') {
        return 'WeChatMedia,WeChatAccount'
      } else {
        return mediaType
      }
    }
  },
  created() {},
  methods: {
    async deleteClick() {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds.length) {
        return
      }
      let IDs = rowIds.join(',')
      let data = await axios.delete(`/ui/mediapushs/${IDs}`)
      if (data.data.status === 1) {
        this.$refs.dataTable1.getData()
      }
      util.showResponseMessage(data.data)
    },
    flush() {
      this.pushStatus = ''
      this.searchKey = ''
      this.$refs.dataTable1.getData()
    },
    searchMediaPush() {
      this.$refs.dataTable1.getData()
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    del(row) {
      this.selectedRows[0] = row
      this.deleteClick()
    },
    async revoke(row) {
      let res = await axios.put(`/ui/mediacontentpush/${row.ID}/revoke`)
      if (res.data.status !== 1) {
        util.showErrorMessageBox(res.data.message)
        return
      }
      await util.showProgress(res.data.taskID, '正在从平台撤销稿件...')
    },
    getMediaPushListURL() {
      return [
        '/ui/mediapushs',
        {
          params: {
            title: encodeURIComponent(this.searchKey),
            pushStatus: this.pushStatus,
            pCode: this.mediaType
          }
        }
      ]
    }
  }
}
</script>
<style>
.mediapush-list .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner,
.role-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner a {
  font-weight: 400;
}
.search-bar-algin-toolbar .select-status .el-input__inner{
  padding-left: 0;
  padding-right: 20px;
}

.mediapush-list .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.mediapush-list .dropdown-search-box-r .el-select:first-child {
  /* border-right: 1px solid #e3e3e3 */
}
</style>
