<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-select v-model="query.type" clearable placeholder="请选择位置" style="width: 150px">
        <el-option v-for="item in dict.home_setting" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="query.operationName" clearable placeholder="请输入操作名称" style="width:280px;" />
      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
        <el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <date-range-picker v-model="query.updateTime" start-placeholder="维护开始日期" style="width: 280px" />
      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
    </div>
    <div class="toolbar">
      <div>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加</el-button>
      </div>
      <div style="text-align: right">
        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量发布</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="content">
      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
        <el-table-column prop="type" label="位置" width="200" :formatter="(row, col, val)=>{return dict.label.home_setting[val]}" />
        <el-table-column prop="operationName" label="操作名称" />
        <el-table-column prop="sort" label="顺序" width="100" />
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后维护日期" align="center" width="200" />
        <el-table-column label="操作" align="right" width="240">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="batchOperate(1, scope.row)" /></el-tooltip>
            <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toView(scope.row)" /></el-tooltip>
            <el-tooltip content="删除"><el-button round plain type="danger" icon="el-icon-delete" @click="toDelete(scope.row)" /></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
    </div>
    <add-page ref="addPage" />
    <view-page ref="viewPage" />
  </div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import addPage from './add'
import viewPage from './view'

export default {
  components: { DateRangePicker, addPage, viewPage },
  dicts: ['issue_status', 'home_setting'],
  data() {
    return {
      textColors: ['#ccc', '#bba', '#32cd32'],
      loading: false,
      page: 1,
      pageSize: 20,
      total: 0,
      query: {},
      tableData: [],
      currentTime: '',
      multipleSelection: []
    }
  },
  mounted() {
    this.currentTimeFn()
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    indexMethod(index) {
      return 1 + index + this.page * this.pageSize - this.pageSize
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    loadData() {
      Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
        if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
      })
      HttpReq.backstageApi.queryHomePage({
        page: this.page - 1,
        pageSize: this.pageSize,
        ...this.query
      }).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    batchOperate(type, row) {
      if (!row && !this.multipleSelection.length) {
        return this.$message({
          message: '未选取数据',
          type: 'info'
        })
      }
      HttpReq.backstageApi.releaseHomePage({
        ids: row ? [row.homePageId] : this.multipleSelection.map(item => { return item.homePageId })
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        this.loadData()
      })
    },
    toAdd() {
      this.$refs.addPage.loadData()
    },
    toEdit(item) {
      this.$refs.addPage.loadData(item.homePageId)
    },
    toView(item) {
      this.$refs.viewPage.loadData(item.homePageId)
    },
    toDelete(item) {
      HttpReq.backstageApi.hpBatchDelete({
        ids: [item.homePageId]
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        this.loadData()
      })
    },
    toSearch() {
      this.page = 1
      this.loadData()
    },
    clearLimit() {
      this.query = {}
      this.currentTimeFn()
      this.loadData()
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.pageSize = e
      this.loadData()
    },
    currentTimeFn() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day
      }
      this.currentTime = year + '-' + month + '-' + day
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
}
.content {
  margin-top: 15px;
  overflow: auto;
}
</style>
