<template>
  <el-dialog title="排序" :visible.sync="mySortContentShow" class="sort-dialog">
    <!-- 判断是否选中任务来显示工具栏  -->
    <div class="explain-div div-color-extend">
      内容排序<br>
      调整内容顺序，使内容排列在当前对话框中选中的内容之前
    </div>
    <!-- 字段映射表格 -->
    <el-table tooltip-effect="dark" ref="dataTable" highlight-current-row  :data-read-url="getcontents"  :page-size="20" @row-click="onSelectChange">
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column  prop="title" label="标题" min-width="35%"></el-table-column>
      <el-table-column  prop="attributes" label="分类" min-width="15%">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span v-if="scope.row.CKEComment=='Y'" class="page"><img :src="imgList.notationImg" title="批注"/></span>
            <span v-if="scope.row.recommend=='Y'" class="page"><img :src="imgList.recommendingImg" title="推荐"/></span>
            <span v-if="scope.row.hot=='Y'" class="page"><img :src="imgList.hotImg" title="热点"/></span>
            <span v-if="scope.row.top=='Y'" class="page"><img :src="imgList.settopImg" title="置顶"/></span>
            <span v-if="scope.row.image=='Y'" class="page"><img :src="imgList.pictureImg" title="图片"/></span>
            <span v-if="scope.row.video=='Y'" class="page"><img :src="imgList.videoImg" title="视频"/></span>
            <span v-if="scope.row.attach=='Y'" class="page"><img :src="imgList.attachImg" title="附件"/></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  prop="statusName" label="状态" min-width="15%"></el-table-column>
      <el-table-column  prop="publishDate" label="发布时间" min-width="25%"></el-table-column>
    </el-table>
    <!-- 选择字段弹框 -->

    <!-- 底部确认按钮 -->
    <span slot="footer">
        <button type="button" class="el-button el-button--default" @click="mySortContentShow = false"><span>取 消</span>
        </button>
        <button type="button" class="el-button el-button--primary" @click="confirmContent" :loading="handlerLoading"><span>确 定</span>
        </button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['contentId', 'currentCatalogId', 'sortContentShow'],
  data() {
    return {
      imgList: {
        recommendingImg: '/assets/images/bullet/bullet_good.gif',
        hotImg: '/assets/images/bullet/bullet_hot.gif',
        settopImg: '/assets/images/bullet/bullet_up.gif',
        pictureImg: '/assets/images/bullet/bullet_picture.gif',
        videoImg: '/assets/images/bullet/bullet_video.gif',
        attachImg: '/assets/images/bullet/bullet_attach.gif',
        notationImg: '/assets/images/bullet/bullet_notation.gif'
      },
      contents: [],
      handlerLoading: false,
      currentRow: {}
    }
  },
  computed: {
    mySortContentShow: {
      get() {
        return this.sortContentShow
      },
      set(val) {
        this.$emit('update:sortContentShow', val)
      }
    }
  },
  methods: {
    getcontents() {
      return [
        '/ui/contentcore/contents',
        {
          params: {
            catalogID: this.currentCatalogId
            // contentID: this.contentId
          }
        }
      ]
    },
    loadData() {
      if (this.sortContentShow === true && !!this.$refs.dataTable) {
        this.$refs.dataTable.getData()
      }
    },
    async confirmContent() {
      let topFlag = this.currentRow.topFlag > 0 ? 'true' : 'false'

      let resp = await axios.put(
        '/ui/contentcore/contents/' + this.contentId + '/sort',
        {
          type: 'Before',
          target: this.currentRow.orderFlag,
          catalogID: this.currentCatalogId,
          topFlag: topFlag
        }
      )
      if (resp.data.status === 1) {
        this.$message({
          type: 'success',
          message: resp.data.message || '操作成功'
        })
        this.$emit('refreshlist')
        this.mySortContentShow = false
      } else {
        this.$alert({
          type: 'error',
          message: resp.data.message || '操作失败'
        })
      }
    },
    onSelectChange(val) {
      this.currentRow = val
    }
  },
  created() {},
  watch: {
    sortContentShow: 'loadData'
  }
}
</script>
<style>
  .sort-dialog .el-dialog {
    width: 700px;
  }

  @media (max-width: 480px) {
    .sort-dialog .el-dialog {
      width: 96%;
    }
  }
</style>
<style scoped>
.explain-div {
  padding:0 0 20px 0;
  color: gray;
}

.input-350 {
  width: 350px;
}

.pageBar {
  width: 100%;
  margin-top: 10px;
  text-align: right;
  padding-right: 15px;
}
.div-color-extend {
  background-color: aliceblue;
}
.button-style-extend {
  text-align: right;
}
.dialog-style {
  width: 75%;
}
</style>
