<!-- leaf -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input prefix-icon="el-icon-search" @keyup.enter.native="handleFilter" style="width: 200px;"
                class="filter-item" placeholder="请输入姓名" v-model="listQuery.realName" clearable>
      </el-input>
      <el-input prefix-icon="el-icon-search" @keyup.enter.native="handleFilter" style="width: 200px;"
                class="filter-item" placeholder="请输入手机号" v-model="listQuery.mobile" clearable>
      </el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top-start" :hide-after="toolTipTime">
        <el-button class="filter-item" style="margin-left: 10px;" v-waves @click="refresh" type="success"
                   icon="el-icon-refresh" size="medium" circle></el-button>
      </el-tooltip>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" fit
              highlight-current-row style="width: 100%">
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          {{scope.row.wxUser.realName}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          {{scope.row.wxUser.mobile}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="开始时间">
        <template slot-scope="scope">
          <span>{{scope.row.startTime | timeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结束时间">
        <template slot-scope="scope">
          <span v-if="scope.row.endTime">{{scope.row.endTime | timeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="总时长">
        <template slot-scope="scope">
          <span v-if="scope.row.totalHour">{{scope.row.totalHour}}分钟</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="金额">
        <template slot-scope="scope">

          <!--<el-tooltip content="免费时长" placement="right-start" effect="light">-->
          <!--<el-tag v-if="!scope.row.fee && scope.row.totalHour" type="primary">-->
          <!---->
          <!--</el-tag>-->
          <!--</el-tooltip>-->

          <el-tooltip content="已支付" placement="right-start" effect="light">
            <el-tag v-if="scope.row.fee && scope.row.status===2" type="primary">
              {{scope.row.fee}}元
            </el-tag>
          </el-tooltip>

          <el-tooltip content="未支付" placement="right-start" effect="light">
            <el-tag v-if="scope.row.fee && scope.row.status===1" type="danger">
              {{scope.row.fee}}元
            </el-tag>
          </el-tooltip>

        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">

          <el-popover
            placement="left"
            trigger="click"
          >
            <el-table :data="commentList" max-height="300" v-loading="commentListLoading">
              <el-table-column width="155" property="content" label="内容"></el-table-column>
              <el-table-column align="center" width="155" property="createTime" label="时间"
                               :formatter="formatterTime"></el-table-column>
            </el-table>
            <el-button slot="reference" size="mini" @click="getCommentList(scope.row)">查看评论</el-button>
          </el-popover>


          <el-dropdown size="small">
            <el-button type="primary" size="mini">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="!scope.row.endTime" @click.native.prevent="gameOver(scope.row)">
                结束计时
              </el-dropdown-item>
              <el-dropdown-item v-if="scope.row.totalHour" @click.native.prevent="handleComment(scope.row)"
                                :disabled="scope.row.wxUserCostComment">
                评价
              </el-dropdown-item>
              <el-dropdown-item @click.native.prevent="handleDelete(scope.row)" >
              删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页  -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="listQuery.currentPage" :page-sizes="[10, 20, 30, 40,50,100]"
                     :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog
      title="请您对本次练琴效果评价"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input type="textarea" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeComment()">取 消</el-button>
    <el-button type="primary" @click="submitComment()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import { parseTime } from '@/utils'

  export default {
    name: 'banner',
    data() {
      return {
        tableKey: 0,
        // 是否加载
        listLoading: true,
        // 查询参数
        listQuery: {
          currentPage: 1,
          pageSize: 10,
          name: undefined,
          code: undefined
        },
        // 表格的数据
        list: null,
        // 总数量
        total: null,
        // 临时的表单值
        temp: {},
        // 评价的对话框
        centerDialogVisible: false,
        // 评价信息
        comment: {
          id: undefined,
          content: undefined
        },
        // 历史评价
        commentList: [
          {
            content: '21',
            createTime: new Date()
          },
          {
            content: '21',
            createTime: new Date()
          }
        ],
        commentListLoading: false
      }
    },
    filters: {
      timeFilter(time) {
        return parseTime(time)
      }
    },
    created() {
      // 初始化数据
      this.getList()
    },
    computed: {
      // 提示--显示的时间
      toolTipTime() {
        return this.$store.getters.toolTipTime
      },
      // 加载显示的文字
      elementLoadingText() {
        return this.$store.getters.elementLoadingText
      }
    },
    methods: {
      getList() {
        // 初始化数据 开始加载数据
        this.listLoading = true
        this.$fetch.sysUserCost
          .pageList(this.listQuery)
          .then(({ data, total }) => {
            // 赋值数据
            this.list = data
            // 修改状态
            this.total = Number(total)
            // 数据加载完成
            this.listLoading = false
          })
      },
      // 获取评论列表
      getCommentList(row) {
        this.commentListLoading = true
        this.$fetch.sysUserCost
          .commentList({
            currentPage: 1,
            pageSize: 10,
            cId: row.id
          })
          .then(({ data }) => {
            // 赋值数据
            this.commentList = data
            // 数据加载完成
            this.commentListLoading = false
          })
      },
      // 处理搜索
      handleFilter() {
        this.listQuery.currentPage = 1
        this.getList()
      },
      // 处理每页条数
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      // 处理当前页面
      handleCurrentChange(val) {
        this.listQuery.currentPage = val
        this.getList()
      },
      // 结束计时
      gameOver(row) {
        this.$confirm('是否确定结束计时?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$fetch.sysUserCost.offline({ id: row.id }).then(() => {
            this.$message({
              message: '结束成功',
              type: 'success'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 删除
      handleDelete(row) {
        if (!row.id) {
          this.$message('请刷新后再试')
          return
        }
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$fetch.sysUserCost.deletes(row.id).then(() => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              const index = this.list.indexOf(row)
              this.list.splice(index, 1)
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      refresh() {
        // 初始化查询参数
        this.listQuery = {
          currentPage: 1,
          pageSize: 10
        }
        this.tableKey = this.tableKey + 1
        this.getList()
      },
      formatterTime(row, column, cellValue, index) {
        return parseTime(cellValue)
      },
      // 打开评论
      handleComment(row) {
        this.comment = {
          id: row.id,
          content: row.wxUserCostComment && row.wxUserCostComment.content
        }
        this.centerDialogVisible = true
      },
      // 添加评论
      submitComment() {
        this.$fetch.sysUserCost.insertComment(this.comment).then(() => {
          this.comment = {}
          this.$message({
            type: 'success',
            message: '评价成功'
          })
          this.getList()
          this.centerDialogVisible = false
        })
      },
      // 取消评论
      closeComment() {
        this.$message({
          type: 'info',
          message: '已取消评价'
        })
        this.centerDialogVisible = false
      }
    }
  }
</script>
<style scoped>
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>