<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-select v-model="query.area" clearable placeholder="请选择地区" style="width: 150px">
        <el-option v-for="item in dict.area_province" :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>
      <el-input v-model="query.username" 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.createTime" 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(true)">批量发布</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="area" label="标识" width="200" />
        <el-table-column prop="xxx" 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="xxx" label="最后维护日期" align="center" width="200" />
        <el-table-column prop="xxx" 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="toEdit(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() {
      var sort = 'id,desc'
      var param = { ...this.query }
      param.page = this.page
      param.pageSize = this.pageSize
      param.sort = sort
      this.tableData = [
        { username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' },
        { username: '张三', area: '火星', status: '2', enabled: false, xxx: '2023-05-09' },
        { username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' }
      ]
      this.total = 2
    },
    batchOperate(opt) {
      if (!this.multipleSelection.length) {
        return this.$message({
          message: '未选取数据',
          type: 'info'
        })
      }
      if (opt) {
        console.log('启用', this.multipleSelection)
      } else {
        console.log('启用', this.multipleSelection)
      }
    },
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        data.enabled = !data.enabled
      })
    },
    toEdit(item) {
      this.$refs.editPage.loadData(item.customerId)
    },
    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>
