<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-select
          v-model="query.type"
          clearable
          placeholder="请选择统计方式"
          class="filter-item"
          style="width: 185px"
        >
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <date-range-picker v-model="time" class="date-item" />
        <!-- <rrOperation :crud="crud" /> -->
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="getData"
        >搜索</el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="warning"
          icon="el-icon-refresh-left"
          @click="resetDate"
        >重置</el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          plain
          icon="el-icon-download"
          :loading="isDown"
          :disabled="isDown"
          @click="downTop"
        >导出受欢迎前三</el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          plain
          icon="el-icon-download"
          :loading="isDown"
          :disabled="isDown"
          @click="downStop"
        >导出不受欢迎前三</el-button>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />

      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="diningStatements"
        size="small"
        style="width: 100%"
        @row-dblclick="showInfo"
      >
        <el-table-column width="55" />
        <el-table-column label="菜品受欢迎前三-菜品名称">
          <template slot-scope="scope">
            <!-- {{ scope.row[0] != null ? scope.row[0].name : null }} -->
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="菜品受欢迎前三-购买次数">
          <template slot-scope="scope">
            <!-- {{ scope.row[0] != null ? scope.row[0].countPid : null }} -->
            {{ scope.row.countPid }}
          </template>
        </el-table-column>
        <el-table-column label="最不受欢迎菜品">
          <template slot-scope="scope">
            <!-- {{ scope.row[1] != null ? scope.row[1].name : null }} -->
            {{ scope.row.stopName }}
            <!-- {{ scope.row }} -->
          </template>
        </el-table-column>
        <el-table-column label="最不受欢迎菜品-购买次数">
          <template slot-scope="scope">
            <!-- {{ scope.row[1] != null ? scope.row[1].countPid : null }} -->
            {{ scope.row.stoCountPid }}
          </template>
        </el-table-column>
        <el-table-column
          prop="stop.content.price"
          label="最不受欢迎菜品-总消费"
        >
          <template slot-scope="scope">
            <!-- {{ scope.row[1] != null ? scope.row[1].price : null }} -->
            {{ scope.row.stopPrice }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <!-- <pagination /> -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import crudDmHaveDinner from '@/api/dm/haveDinner/dmHaveDinner'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import DateRangePicker from '@/components/DateRangePicker'
import { downloadFile } from '@/utils'
// import pagination from "@crud/Pagination";

const defaultForm = { type: null }
const defaultQuery = {
  type: 'month'
}

export default {
  name: 'DmEvaluate',
  components: {
    // pagination,
    crudOperation,
    DateRangePicker
  }, //, rrOperation
  mixins: [presenter(), header(), crud(), form(defaultForm)],
  cruds() {
    return CRUD({
      title: '用餐报表',
      url: '/api/dmHaveDinner',
      tempBtnShow: { user: false },
      selectOne: true,
      crudMethod: { ...crudDmHaveDinner },
      optShow: {
        del: false,
        edit: false,
        add: false,
        download: false,
        reset: true
      },
      query: defaultQuery
    })
  },
  data() {
    return {
      isDown: false,
      time: [],
      permission: {
        add: ['admin', 'dmEvaluate:add'],
        edit: ['admin', 'dmEvaluate:edit'],
        del: ['admin', 'dmEvaluate:del']
      },
      options: [
        {
          id: 'month',
          name: '按月统计'
        },
        {
          id: 'year',
          name: '按年统计'
        },
        {
          id: 'day',
          name: '按天统计'
        },
        {
          id: 'week',
          name: '按周统计'
        }
      ],
      diningStatements: null,
      // 分页组件
      total: 0,
      currentPage: 1,
      pageSize: 10,
      stopArr: '',
      topArr: ''
    }
  },
  watch: {
    time(newVal) {
      console.log(newVal)
      if (newVal == null) {
        this.time = []
      }
    }
  },
  created() {
    this.crud.query.type = 'month'
    this.getData()
  },
  methods: {
    resetDate() {
      this.time = []
      this.query.time = 'month'
      this.getData()
    },
    async getData() {
      this.crud.query.stateDate = this.time[0] || ''
      this.crud.query.endDate = this.time[1] || ''
      this.crud.loading = true
      // const res1 = await crudDmHaveDinner.dmZgHaveDinner({
      //   ...this.crud.form,
      //   ...this.crud.query
      // })
      // const res2 = await crudDmHaveDinner.dmZdHaveDinner({
      //   ...this.crud.form,
      //   ...this.crud.query
      // })
      // Promise.all([res1, res2])
      //   .then(([res1, res2]) => {
      //     const stopArr = res2.stop.content
      //     const topArr = res1.top.content
      //     for (const outSide in stopArr) {
      //       for (const key in topArr) {
      //         if (key === outSide) {
      //           topArr[key].stopName = stopArr[outSide].name
      //           topArr[key].stoCountPid = stopArr[outSide].countPid
      //           topArr[key].stopPrice = stopArr[outSide].price
      //           this.total = res1.top.totalElements
      //         } else if (stopArr > topArr.length) {
      //           // 最低多于最多的时候
      //           topArr.push({
      //             stopName: stopArr[outSide].name,
      //             stoCountPid: stopArr[outSide].countPid,
      //             stopPrice: stopArr[outSide].price
      //           })
      //           this.total = res2.stop.totalElements
      //         }
      //       }
      //     }
      //     this.diningStatements = topArr
      //     this.crud.loading = false
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
      crudDmHaveDinner
        .dmZgHaveDinner({
          ...this.crud.form,
          ...this.crud.query
        })
        .then((res) => {
          // this.diningStatements = res.top.content;
          this.topArr = res.top.content
        })
      crudDmHaveDinner
        .dmZdHaveDinner({
          ...this.crud.form,
          ...this.crud.query
        })
        .then((res) => {
          this.stopArr = res.stop.content
          console.log(this.topArr)
          for (const outSide in this.stopArr) {
            for (const key in this.topArr) {
              if (key === outSide) {
                this.topArr[key].stopName = this.stopArr[outSide].name
                this.topArr[key].stoCountPid = this.stopArr[outSide].countPid
                this.topArr[key].stopPrice = this.stopArr[outSide].price
                this.total = top.top.totalElements
              } else if (this.stopArr.length > this.topArr.length) {
                // 最低多于最多的时候
                this.topArr.push({
                  stopName: this.stopArr[outSide].name,
                  stoCountPid: this.stopArr[outSide].countPid,
                  stopPrice: this.stopArr[outSide].price
                })
                this.total = res.stop.totalElements
              }
            }
          }
          this.diningStatements = this.topArr
          this.crud.loading = false
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    downTop() {
      this.isDown = true
      crudDmHaveDinner
        .downloadTop({
          ...this.crud.form,
          ...this.crud.query
        })
        .then((res) => {
          downloadFile(res, '用餐报表受欢迎前三' + '数据', 'xlsx')
          this.isDown = false
        })
        .catch((e) => {
          this.isDown = false
        })
    },
    downStop() {
      this.isDown = true
      crudDmHaveDinner
        .downloadStop({
          ...this.crud.form,
          ...this.crud.query
        })
        .then((res) => {
          downloadFile(res, '用餐报表不受欢迎前三' + '数据', 'xlsx')
          this.isDown = false
        })
        .catch((e) => {
          this.isDown = false
        })
    },
    showInfo() {},

    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return false
    }
  }
}
</script>
