<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-select v-model="query.consultType" clearable placeholder="请选择咨询类型" style="width: 120px">
        <el-option v-for="item in dict.consult_type" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="query.contactPersonProvince" clearable placeholder="请选择地区" style="width: 120px">
        <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="query.productName" clearable placeholder="请输入咨询产品名称" style="width:280px;" />
      <el-input v-model="query.productId" clearable placeholder="请输入产品ID" style="width:150px;" />
      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
        <el-option v-for="item in dict.consult_status" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <date-range-picker v-model="query.createTime" start-placeholder="咨询开始日期" style="width: 280px" />
      <date-range-picker v-model="query.handleTime" 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 />
      <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="consultType" label="咨询产品类型" width="180" :formatter="(row, col, val)=>{return dict.label.consult_type[val]}" />
        <el-table-column prop="area" label="地区" width="120" />
        <el-table-column prop="productName" label="咨询产品名称" />
        <el-table-column prop="productId" label="产品ID" width="100" />
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.consult_status[scope.row.status] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="咨询日期" align="center" width="180" />
        <el-table-column prop="handleTime" label="处理日期" align="center" width="180" />
        <el-table-column label="操作" align="right" width="140">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.status==='2'" 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-view" @click="toView(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>
    <view-page ref="viewPage" />
  </div>
</template>
<script>
import DateRangePicker from '@/components/DateRangePicker'
import { HttpReq } from '@/api/common'
import viewPage from './view'

export default {
  components: { DateRangePicker, viewPage },
  dicts: ['consult_status', 'consult_type', 'area_province'],
  data() {
    return {
      textColors: ['#ccc', '#000', '#32cd32', '#bba'],
      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.queryInformation({
        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.batchInformationProcessing({
        ids: row ? [row.informationId] : this.multipleSelection.map(item => { return item.informationId })
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        this.loadData()
      })
    },
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        data.enabled = !data.enabled
      })
    },
    toAdd() {

    },
    toView(item) {
      this.$refs.viewPage.loadData(item.informationId)
    },
    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>
