<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--      <el-select v-model="query.productType" clearable placeholder="请选择产品类型" style="width: 150px">-->
      <!--        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />-->
      <!--      </el-select>-->
      <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 class="content">
      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh">
        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
        <el-table-column prop="productType" label="产品类型名称" />
        <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 icon="el-icon-s-tools" @click="toEdit(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>
    <edit-page ref="editPage" />
  </div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import editPage from './edit'

export default {
  components: { DateRangePicker, editPage },
  dicts: ['issue_status', 'product_type', 'area_province'],
  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.queryProductListPage({
        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.releaseProductListPage({
        ids: row ? [row.productListPageId] : this.multipleSelection.map(item => { return item.productListPageId })
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        this.loadData()
      })
    },
    toEdit(item) {
      this.$refs.editPage.loadData(item.productListPageId)
    },
    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>
