<template>
  <div class="right-detail-toolbar right-list-panel-card" v-loading="dataLoading">
    <el-toolbar align="right" v-if="tmpPanel.imageSource === 'upload'">
      <el-button @click="uploadImage" plain :priv="`ImagePlayerManage.Edit.${ID}`">
        <i class="fa fa-plus"></i> 添加图片</el-button>
      <el-button @click="banchUploadImage" plain :priv="`ImagePlayerManage.Edit.${ID}`">
        <i class="fa fa-upload"></i> 批量添加</el-button>
    </el-toolbar>

    <el-row>
      <el-col v-for="(item,index) in imageListData" :key="item.ID">
        <div>
          <el-card class="image-card" :body-style="{ height:'210px'}">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="image">
                  <img :src="item.sPath" style="width:100%; height:168px; cursor:pointer;" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" @click.stop="editImage(item.ID)"
                  />
                  <div v-if="tmpPanel.imageSource === 'upload'" class="operation-btn">
                    <el-button type="text" v-if="!item.path.toLowerCase().startsWith('http')" @click.stop="cutImage(item.path)" title="图片裁剪" :priv="`ImagePlayerManage.Edit.${ID}`">
                      <i class="f18 fa fa-crop"></i>
                    </el-button>
                    <el-button type="text" @click.stop="editImage(item.ID)" title="图片编辑" :priv="`ImagePlayerManage.Edit.${ID}`">
                      <i class="f18 fa fa-edit"></i>
                    </el-button>
                  </div>
                </div>
              </el-col>
              <el-col :span="18">
                <el-row :gutter="20">
                  <el-col class="cell" :span="24">
                    <span class="gray">名称：</span>
                    <span class="content">{{item.oldName}}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col class="cell" :span="24">
                    <span class="gray">链接：</span>
                    <span class="content">{{item.linkURL}}</span>
                  </el-col>
                </el-row>
                <el-row class="description-panel">
                  <div class="description">
                    <span>{{item.info?item.info:'描述'}}</span>
                  </div>
                </el-row>
                <el-row v-if="tmpPanel.imageSource === 'upload'" class="read-mode">
                  <el-button plain type="text" @click.stop="orderImages(ID,item.ID,imageListData[index-1].orderFlag)" v-if="imageListData[index-1] && imageListData[index-1].ID"
                    :priv="`ImagePlayerManage.Edit.${ID}`">
                    <i class="fa fa-arrow-up"></i>上移</el-button>
                  <el-button plain type="text" @click.stop="orderImages(ID,item.ID,imageListData[index+1].orderFlag)" v-if="imageListData[index+1] && imageListData[index+1].ID"
                    :priv="`ImagePlayerManage.Edit.${ID}`">
                    <i class="fa fa-arrow-down"></i>下移</el-button>
                  <el-button plain type="text" @click.stop="del([item])" :priv="`ImagePlayerManage.Delete.${ID}`">
                    <i class="f16 fa fa-times"></i>删除
                  </el-button>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- </div> -->

    <imageUpload-dialog :imagePlayerID="ID" :catalogID="tmpPanel.catalogID" :ID="tmpImgID" :imgPlayerType="tmpPanel.imgPlayerType"
      :show.sync="imageUploadDialogModal" @callback="refreshCallback"></imageUpload-dialog>
    <batchImageUpload-dialog :show.sync="batchImageUploadDialogModal" :imagePlayerID="ID" @callback="refreshCallback"></batchImageUpload-dialog>
    <imagecutting-dialog :show.sync="imageCuttingModal" :siteID="siteId" :imagePath="imgPath" @callback="imageCuttingCallback"></imagecutting-dialog>
    <content-selector title="浏览内容" :show.sync="contentSelectorDialogModal" @callback="contentSelectorCallback"></content-selector>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import imageUpload from './imageUpload.vue'
import batchImageUpload from './batchImageUpload.vue'
import commonImageCuttingDialog from '../contentcore/commonImageCuttingDialog.vue'
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'

export default {
  components: {
    'imageUpload-dialog': imageUpload,
    'batchImageUpload-dialog': batchImageUpload,
    'imagecutting-dialog': commonImageCuttingDialog,
    'content-selector': ContentSelector
  },
  props: {
    ID: {
      required: true
    },
    tmpPanel: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      contentSelectorDialogModal: false,
      currentImgeIndex: 0,
      siteId: '',
      imgPath: '',
      imageCuttingModal: false,
      dataLoading: false,
      imageListData: [],
      imageData: {},
      imageUploadDialogModal: false,
      batchImageUploadDialogModal: false,
      tmpImgID: '', // 当前图片ID
      cardOffsetHeight: 0,
      // 最大显示数下拉选项数据
      thumbModeOptions: [{ value: 1, label: '原图' }, { value: 2, label: '裁剪缩放' }, { value: 3, label: '原比例缩放' }],
      // 是否逆序显示下拉选项
      displayDescOptions: [{ value: 'Y', label: '是' }, { value: 'N', label: '否' }]
    }
  },
  async updated() {
    let el = this.$el.querySelectorAll('.image-card')
    await this.$nextTick()
    if (el[0]) {
      this.cardOffsetHeight = el[0].offsetHeight
    }
  },

  created () {
    this.init()
  },

  methods: {
    // 图片资源排序
    async orderImages(ID, ImageID, orderFlag) {
      let res = await axios.put(`/ui/imageplayer/${ID}/sortcolumn`, { imageID: ImageID, targetOrderFlag: orderFlag })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.init()
      }
    },
    async init() {
      let res = await axios.get('/ui/imageplayer/getimageplayerresoueces', {
        params: { ID: this.ID }
      })
      this.imageListData = res.data.data
    },
    handleCommand(method) {
      if (method && typeof this[method] === 'function') {
        this[method]()
      } else {
        // console.warn(`未找到改菜单对应的方法:${method}`)
      }
    },
    refreshCallback() {
      this.init()
    },
    uploadImage() {
      if (this.tmpPanel.isNeedAudit) {
        if (!this.checkStatus()) {
          return
        }
      }
      if (!this.ID || this.ID === null) {
        this.$alert('图片上传错误，请先选择一个图片播放器', '提示', {
          type: 'warning'
        })
        return
      }

      this.tmpImgID = null
      this.imageUploadDialogModal = true
    },
    // 编辑图片
    editImage(id) {
      if (!this.ID) {
        return
      }
      if (this.tmpPanel.isNeedAudit) {
        if (!this.checkStatus()) {
          return
        }
      }
      this.tmpImgID = id
      this.imageUploadDialogModal = true
    },

    // 图片裁剪
    cutImage(path) {
      if (path.toLowerCase().startsWith('http')) {
        this.$alert('网络图片不能剪切！', '提示', {
          type: 'info'
        })
        return
      }
      this.imageCuttingModal = true
      this.imgPath = path
    },

    // 图片裁剪回调
    imageCuttingCallback(value) {
      this.init()
    },

    // 设置正在编辑的图片
    setIndex(index) {
      this.currentImgeIndex = index
    },

    // 选择文章
    selectContent() {
      this.contentSelectorDialogModal = true
    },

    // 选择文章回调
    contentSelectorCallback(value) {
      let imageData = Object.assign({}, this.imageData)
      imageData.oldName = value.title
      imageData.cName = value.contentTypeID + '：' + value.title
      imageData.linkURL = value.link
      this.imageListData.splice(this.currentImgeIndex, 1, imageData)
    },

    // 检查图片播放器状态
    checkStatus() {
      if (this.tmpPanel.status === 'auditing' || this.tmpPanel.status === 'passed' || this.tmpPanel.status === 'published') {
        this.$alert('已发布、正在审核、审核通过状态的图片播放器不能编辑', '提示', {
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    // 批量上传图片
    banchUploadImage() {
      if (this.tmpPanel.isNeedAudit) {
        if (!this.checkStatus()) {
          return
        }
      }
      this.batchImageUploadDialogModal = true
    },
    // 删除图片等信息
    async del(rows) {
      if (this.tmpPanel.isNeedAudit) {
        if (!this.checkStatus()) {
          return
        }
      }
      if (rows.length === 0) {
        this.$alert('请选择需要删除的图片', '提示', {
          type: 'info'
        })
        return
      }
      let rowIds = [this.ID]
      rows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/imageplayer/${rowIds.join(',')}/deleteimage`, {data: {imagePlayerID: this.ID}})
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.init()
        }
      } catch (e) {

      }
    }
  }
}
</script>
<style scoped>
.image-card {
  border: #fff solid 1px;
  position: relative;
}

.image-card.selected {
  border: #28b06e solid 1px;
  box-shadow: 0px 2px 16px 0px rgba(92, 153, 122, 0.2);
}

.image-card.selected:before {
  position: absolute;
  right: -3px;
  top: -2px;
  color: #28b06e;
  font-size: 27px;
  line-height: 1;
  font-family: monospace;
  content: '◥';
}

.image-card.selected:after {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  right: 0px;
  top: -2px;
  color: #fff;
  content: '√';
  font-family: cursive;
}

.image-card .image {
  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;
}

.image-card .operation-btn {
  color: #fff;
  position: absolute;
  bottom: 3px;
  right: 0;
  padding: 3px 0 0 7px;
  background: rgba(0, 0, 0, 0.5);
}

.image-card .operation-btn .el-button {
  padding: 5px;
  margin-left: 0;
}

.image-card .cell {
  line-height: 40px;
}

.image-card .description-panel {
  padding-top: 4px;
}

.image-card .description {
  padding: 10px;
  height: 75px;
  background-color: rgb(246, 247, 249);
  border-radius: 4px;
  color: #a9a9a9;
}

.image-card .content-select-btn {
  padding: 10px;
  width: 100%;
}

.image-card .read-mode {
  padding-top: 6px;
  color: #658072;
}

.image-card .edit-mode {
  padding: 15px 0;
}
</style>
