<template>
  <div class="layout-no-cols right-list-panel-card right-list-toolbar">
    <!--输出图片列表信息-->
    <el-row>
      <el-toolbar>
        <el-col :span="14">
          <el-button @click="add" priv="ImagePlayerManage.Add"><i class="fa fa-plus"></i>新建</el-button>
        </el-col>
        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="searchContent" @keyup.enter.native="search" placeholder="请输入名称或别名" class="search-bar-algin-toolbar"></el-input>
          <span class="search-icon">
            <i class="fa fa-search" @click="search" title="查询"></i>
          </span>
        </el-col>
      </el-toolbar>
    </el-row>
    <el-list-view ref="imagePlayerList" :data-read-url="getImagePlayerDataGrid" :pageSize="10" @selection-change="onSelectionChange">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row :gutter="20" class="card-body">
            <el-col :span="4">
              <div class="logoFile" :style="{backgroundImage:'url('+row.logoFile+'),url(assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png)'}"
                @click.stop="edit(row)"></div>
            </el-col>
            <el-col :span="20">
              <el-row>
                <a class="list-card-title" href="javascript:void(0)" @click.stop="edit(row)">{{row.name}}</a>
                <span class="gray">别名：{{row.code}}</span>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>关联栏目：</span>
                  <em>{{row.catalogName || '无'}}</em>
                </el-col>
                <el-col :span="8">
                  <span>最大显示张数：</span>
                  <em>{{row.displayCount || 0}} 张</em>
                </el-col>
                <el-col :span="8">
                  <span>是否逆序显示：</span>
                  <em>{{row.displayDesc=='N'?'否':'是'}}</em>
                </el-col>
              </el-row>
              <el-row class="middle-row">
                <el-col :span="8">
                  <span>显示宽度：</span>
                  <em>{{row.width || 0}} 像素</em>
                </el-col>
                <el-col :span="8">
                  <span>显示高度：</span>
                  <em>{{row.height || 0}} 像素</em>
                </el-col>
                <el-col :span="8">
                  <span>添加人：</span>
                  <em>{{row.addUser || '无'}}</em>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="24">
                  <span>添加时间：</span>
                  <em>{{row.addTime | fixDateTime }}</em>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row class="list-card-buttons">
            <el-col :span="10">
              <el-tag size="small">{{row.statusName}}</el-tag>
            </el-col>
            <el-col :span="14" class="tar">
              <el-button @click.stop="publish([row])" type="text" title="发布" :priv="`ImagePlayerManage.Publish.${row.ID}`">
                <i class="fa fa-share-square-o"></i>发布
              </el-button>
              <el-button @click.stop="preview(row.ID)" type="text" title="预览" priv="ImagePlayerManage">
                <i class="fa fa-eye"></i> 预览
              </el-button>
              <el-button v-if="row.status !== 'auditing' && row.status !== 'passed' && row.status !== 'published'"
                @click.stop="edit(row)" type="text" title="编辑" :priv="`ImagePlayerManage.Edit.${row.ID}`">
                <i class="fa fa-edit"></i> 编辑
              </el-button>
              <el-button v-if="row.status === 'auditing' || row.status === 'passed' || row.status === 'published'"
                @click.stop="edit(row)" type="text" title="查看" priv="ImagePlayerManage">
                <i class="fa fa-list-alt"></i> 查看
              </el-button>
              <el-button @click.stop="del([row])" type="text" title="删除" :priv="`ImagePlayerManage.Delete.${row.ID}`">
                <i class="fa fa-times"></i> 删除
              </el-button>
            </el-col>
          </el-row>

        </div>
      </template>
    </el-list-view>
  </div>
</template>

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

export default {
  props: {
    ID: Number
  },
  filters: {
    fixDateTime: function (val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      searchContent: '', // 搜索框文本绑定值
      selectedRows: [],
      imagePlayerID: this.ID, // 图片播放器ID
      imagePlayerDialogModal: false,
      detailDataChange: false
    }
  },
  watch: {
    ID(val) {
      this.imagePlayerID = val
    },
    imagePlayerID(val) {
      this.$emit('update:ID', val)
    },
    showDetailPage(val) {
      if (!val && this.detailDataChange) {
        this.search()
      }
    }
  },
  methods: {
    search() {
      this.$refs.imagePlayerList && this.$refs.imagePlayerList.getData()
      this.detailDataChange = false
    },
    getImagePlayerDataGrid() {
      return [
        '/ui/imageplayer',
        {
          params: {
            searchContent: encodeURIComponent(this.searchContent)
          }
        }
      ]
    },

    add() {
      this.imagePlayerID = null
      this.$router.push(`${this.$route.path}/new`)
    },
    checkStatus(row) {
      if (
        row.status === 'auditing' ||
          row.status === 'passed' ||
          row.status === 'published'
      ) {
        this.$alert('已发布、正在审核、审核通过状态的图片播放器不能编辑', '提示', {
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    edit(row) {
      if (!row.ID) {
        this.$alert('数据异常，请重新尝试！', '提示', {
          type: 'warning'
        })
        return
      }
      // let flag
      // if (row.isNeedAudit) {
      // flag = this.checkStatus(row)
      // if (!this.checkStatus(row)) {
      //   return
      // }
      // }
      this.imagePlayerID = row.ID

      this.$router.push(`${this.$route.path}/${row.ID}`)
    },
    async del(rows) {
      if (rows.length === 0) {
        this.$alert('请选择需要删除的播放器', '提示', {
          type: 'info'
        })
        return
      }
      let rowIds = []
      let flag = false
      rows.forEach(function (row) {
        if (row.isNeedAudit && !this.checkStatus(row)) {
          flag = true
          return
        }
        rowIds.push(row.ID)
      }, this)
      if (flag) {

      } else {
        try {
          await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          let res = await axios.delete(`/ui/imageplayer/${rowIds.join(',')}`)
          util.showResponseMessage(res.data)
          if (res.data.status === 1) {
            this.search()
          }
        } catch (e) {

        }
      }
    },
    async publish(rows) {
      let rowIds = []
      if (rows.length === 0) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      for (let i = 0; i < rows.length; i++) {
        let row = rows[i]
        if (row.isNeedAudit) {
          if (row.status !== 'passed' && row.status !== 'published') {
            this.$alert('审核通过的图片播放器才能发布', '提示', {
              type: 'warning'
            })
            return
          }
        }
      }
      rows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      try {
        await this.$confirm('发布之后将重新生成播放器，您确认要发布吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(`/ui/imageplayer/${rowIds.join(',')}/imgpublish`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },

    onSelectionChange(selection) {
      this.selectedRows = selection
      if (selection.length > 0) {
        this.imagePlayerID = selection[0].ID
      }
      if (window.eventHub && typeof window.eventHub.$emit === 'function') {
        window.eventHub.$emit('imagePlayerPicked', selection)
      }
    },
    dialogCallback(val) {
      if (val) {
        this.search()
      }
    },
    preview(id) {
      if (!id) {
        this.$alert('数据异常,请重新选择', '提示', {
          type: 'warning'
        })
        return
      }
      window.open(`preview.html?&ID=${id}&type=ImagePlayer`)
    },
    refreshCallback() {
      this.detailDataChange = true
    }
  }
}
</script>

<style scoped>
  .logoFile {
    position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  margin-top: 2px;
  margin-bottom: 2px;
    cursor: pointer;
  }

  .card-body {
    margin: 10px 0;
  }
</style>
