<template>
  <div>
    <el-dialog class="article-sort-dim-dlg" :title="title" :visible.sync="isShow" @open="beforeDialogOpen">
      <div class="sort-tile">
        <h4>内容排序</h4>
        <h5>调整内容顺序，使内容排列在当前对话框中选中的内容之前</h5>
      </div>
      <el-table :data="contentList" @current-change="handleCurrentChange" tooltip-effect="dark" v-loading="dataLoading" class="dataList_dlg">
        <el-table-column width="65" align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="标题">
          <template slot-scope="scope">
            <el-radio
              v-model="checkedID"
              :title="scope.row.title"
              :label="scope.row.ID"
              class="table-radio">{{scope.row.title}}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="100" align="center"></el-table-column>
        <el-table-column prop="publishDate" label="发布时间" width="180" align="center"></el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination class="page" @current-change="currentChangeHandler" @size-change="chooseSizeChangeHandler" :page-sizes="[5,10, 15, 20, 30, 50]" :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, ->, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      required: true,
      default: false
    },
    catalogId: {
      type: [Number, String]
    },
    selectIds: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      dataLoading: false,
      contentList: [], //  排序文章
      currentPage: 1,
      pageSize: 10,
      total: 0,
      checkedID: 0,
      sortOpts: {} // 排序选项
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.sortOpts = {}
      this.checkedID = 0
      this.loadContentList()
    },
    async comfirm() {
      if (!this.checkedID) {
        this.$emit('dialog', '请先选择一条记录')
        return
      }
      this.submitLoading = true
      try {
        let res = await axios.put(`/ui/dimesion/${this.catalogId}/content/sort`, this.sortOpts)
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        util.showErrorNotification(e)
      }
    },
    // 排序文章选中行事件
    handleCurrentChange(row) {
      this.sortOpts.dimensionCatalogID = row.dimensionCatalogID
      this.sortOpts.topFlag = false
      this.sortOpts.target = row.relaOrderflag
      this.sortOpts.ids = this.selectIds
      this.sortOpts.type = 'before'
      if (row.dimtopflag > 0) {
        this.sortOpts.topFlag = true
      }
    },
    chooseSizeChangeHandler(val) {
      this.pageSize = val || this.pageSize
      this.loadContentList()
    },
    currentChangeHandler(val) {
      this.currentPage = val || this.currentPage
      this.loadContentList()
    },
    async loadContentList() {
      this.dataLoading = true
      let opts = {
        pageIndex: this.currentPage - 1,
        pageSize: this.pageSize
      }
      let res = await axios.get(`/ui/dimesion/${this.catalogId}/content`, {
        params: opts
      })
      this.dataLoading = false
      this.contentList = res.data.data
      this.total = res.data.total
    }
  }
}
</script>
<style scoped>
.table-radio {
  font-size: 12px;
  font-weight: normal;
}
.sort-tile {
  margin-top: -20px;
}
.sort-tile h4 {
  font-family: inherit;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}
.sort-tile h5 {
  font-size: 13px;
  margin-bottom: 5px;
}
</style>
<style>
.article-sort-dim-dlg .el-dialog {
  width: 800px;
}
@media (max-width: 480px) {
  .article-sort-dim-dlg .el-dialog {
    width: 96%;
  }
}
</style>
