<template>

  <el-button :disabled="!contentId" @click="open=true" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Edit.'+catalogId">
      <i class="fa fa-share"></i>相关内容

    <el-dialog title="相关内容" :visible.sync="open" :append-to-body="true" class="pop-dialog">
        <div style="padding: 12px 0px;">
      <el-button @click="add">
        <i class="fa fa-plus"></i>添加
      </el-button>
      <el-button @click="auto">
        <i class="fa fa-refresh"></i>智能相关
      </el-button>
      </div>
      <el-table :data-read-url="getContents" :data="tableData" ref="dataTable1" tooltip-effect="dark" @selection-change="selectRowChange" :page-size="10">
        <el-table-column width="50" type="index" align="center"></el-table-column>
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="catalogName" label="所属栏目" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="right" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="sortClick(scope.row.ID,'up')" v-if="scope.$index > 0 && scope.row.ID" title="上移">
              <i class="fa fa-arrow-up" aria-hidden="true"></i></el-button>
            <el-button type="text" @click.stop="sortClick(scope.row.ID,'down')" v-if="scope.$index < tableData.length-1 && scope.row.ID && tableData[tableData.length-1].ID" title="下移">
              <i class="fa fa-arrow-down" aria-hidden="true"></i></el-button>
            <el-button type="text" @click="del(scope.row.ID)" title="删除">
              <i class="fa fa-remove f16"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

    <content-selector :show.sync="show" :siteID="siteID" :select-type="selectType" :from="from" @callback="contentSelectCallback"></content-selector>
    </el-button>

</template>
<script>
import util from '@src/common/util.js'
import contentSelector from '@src/components/contentComponent/ContentSelector.vue'

export default {
  components: {
    contentSelector
  },
  props: {
    contentId: {
      type: [String, Number]
    },
    buttonType: {
      type: String,
      default: ''
    },
    catalogId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      selectedRelatedRows: [],
      open: false,
      show: false,
      selectType: '',
      siteID: '',
      from: '',
      title: '选择内容',
      tableData: []
    }
  },
  watch: {
    open(val) {
      if (val && this.$refs.dataTable1) {
        this.$refs.dataTable1.getData()
      }
    }
  },

  methods: {
    getContents() {
      return ['/ui/contentcore/contents/' + this.contentId + '/rela', {}]
    },
    add() {
      this.show = true
      this.selectType = 'selection'
      this.siteID = ''
      this.form = ''
      this.title = '浏览内容'
    },
    async save(values) {
      let resp = await axios.post(`/ui/contentcore/contents/${this.contentId}/rela`, {ids: values.join(',')})
      util.showResponseMessage(resp.data)
      this.$refs.dataTable1.getData()
    },

    async auto() {
      let resp = await axios.put(`/ui/contentcore/contents/${this.contentId}/rela`)
      util.showResponseMessage(resp.data)
      this.$refs.dataTable1.getData()
    },
    async del(ID) {
      let resp = await axios.delete(`/ui/contentcore/contents/${this.contentId}/rela/${ID}`)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.$refs.dataTable1.getData()
      }
    },
    selectRowChange(val) {
      this.selectedRelatedRows = val
    },
    confirm() {
      let selections = this.$refs.commonContent.getSelected()
      let ids = []
      selections.forEach((row) => {
        ids.push(row.ID)
      })
      this.save(ids)
      this.show = false
    },
    contentSelectCallback(rows) {
      let ids = []
      rows.forEach((row) => {
        ids.push(row.ID)
      })
      this.save(ids)
    },

    async sortClick(ID, type) {
      let index = this.tableData.findIndex(val => val.ID === ID)
      let newData = [
        ...this.tableData.filter((val, i) => type === 'up' ? (i < index - 1) : (i < index)),
        ...this.tableData.filter((val, i) => type === 'up' ? (i === index) : (i === (index + 1))),
        ...this.tableData.filter((val, i) => type === 'up' ? (i === (index - 1)) : (i === index)),
        ...this.tableData.filter((val, i) => type === 'up' ? (i > index) : (i > index + 1))
      ]
      this.tableData = newData.concat()
      let ids = []
      newData.forEach(e => {
        ids.push(e.ID)
      })
      let resp = await axios.post(`/ui/contentcore/contents/${this.contentId}/rela`, {ids: ids.join()})
      util.showResponseMessage(resp.data)
    }
  }

}
</script>
<style>

</style>
