<template>
<div class="app-container calendar-list-container">
  <!-- 筛选条件 -->
  <div class="filter-container">
    <el-date-picker class="filter-item" v-model="params.search_eq_v$date" type="date"  placeholder="选择上课日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
    <el-time-picker class="filter-item" v-model="params.leftTime" style="width:120px" value-format="HH:mm" format="HH:mm" placeholder="上课时间"></el-time-picker>
    <el-time-picker class="filter-item" v-model="params.rightTime" style="width:120px" value-format="HH:mm" format="HH:mm" placeholder="下课时间"></el-time-picker>
    <el-select class="filter-item" clearable v-model="params.search_eq_v$coachId" filterable placeholder="请选择教练">
      <el-option
        v-for="item in coaches"
        :key="item.id"
        :label="item.nickname"
        :value="item.id">
      </el-option>
    </el-select>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleSearch">搜索</el-button>
    <el-button class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">添加</el-button>
  </div>

  <!-- 列表数据 -->
  <Pagination uri="/venue/lessons" :request-params="params" ref="pagination" :showIndex="false">

      <!-- 课程名称 -->
      <el-table-column align="center" label="课程名称">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="二维码">
        <template scope="scope">
          <img style="width:100px;cursor:pointer" :src="scope.row.qrCode" @click="showImage(scope.row.qrCode)"/>
        </template>
      </el-table-column>
    <el-table-column align="center" label="课程类型">
        <template scope="scope">
          <span v-if="scope.row.type === 0">普通课程</span>
          <span v-if="scope.row.type === 1">公益课</span>
        </template>
      </el-table-column>
      <!-- 上课日期 2018-03-30 -->
      <el-table-column align="center" label="日期">
        <template scope="scope">
          <span>{{scope.row.date }}</span>
        </template>
      </el-table-column>

      <!-- 课程开始时间 8 -->
      <el-table-column align="center" label="时间">
        <template scope="scope">
          <span>{{scope.row.startTime}} -{{scope.row.endTime}}</span>
        </template>
      </el-table-column>

      <!-- 课程总数量 -->
      <el-table-column align="center" label="课程总名额">
        <template scope="scope">
          <span>{{scope.row.num}}</span>
        </template>
      </el-table-column>

      <!-- 销售数量 -->
      <el-table-column align="center" label="销售数量">
        <template scope="scope">
          <span>{{scope.row.saleNum}}</span>
        </template>
      </el-table-column>

      <!-- 教练ID -->
      <el-table-column align="center" label="教练">
        <template scope="scope">
          <span>{{scope.row.coachName}}</span>
        </template>
      </el-table-column>
    <!-- 价格 -->
    <el-table-column align="center" label="价格">
      <template scope="scope">
        <span>{{scope.row.price}}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center" >
      <template scope="scope">
        <el-button size="small" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button size="small" type="text" v-if="scope.row.saleNum > 0" @click="handleInfo(scope.row.id)">预约记录</el-button>
        <el-button size="small" type="text" @click="showimg(scope.row.id)">复制</el-button>
        <el-button size="small" v-if="scope.row.saleNum <= 0" type="text" class="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </Pagination>
  <el-dialog title="添加相同课程" :visible.sync="dialogFormVisible">
    <div class="dialog_div">
      <span>选择上课日期：</span>
      <el-date-picker style="margin-left: 5%"
        @change="onDateChange"
        value-format="yyyy-MM-dd"
        v-model="data"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="dialog_div">
      <span>选择上课日期：</span>
      <el-time-picker style="margin-left: 5%;width:220px"
        @change="onTimeChange"
        is-range
        value-format="HH:mm"
        v-model="times"
        format="HH:mm"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </div>
    <div class="dialog_div">
      <span>课程总数量：　</span>
      <el-input-number style="margin-left: 5%" v-model.number="form.num" :min="1" :max="10000" :precision="0" ></el-input-number>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveLesson">保存</el-button>
      <el-button @click="dialogFormVisible = false">关  闭</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style>
.dialog_div{
  margin-bottom: 8px;
  padding-left: 12%;
}
</style>


<script>
import { findByVenueType } from '@/api//coach'
import { remove, find, save } from '@/api//venue/lesson'
import waves from '@/directive/waves.js' // 水波纹指令
import Pagination from '@/components/Pagination'
import moment from 'moment'

export default {
  name: 'venueLesson_list',
  components: { Pagination },
  directives: {
    waves
  },
  data() {
    return {
      coaches: [],
      dialogFormVisible: false,
      params: {
        search_eq_v$venueId: undefined,
        search_eq_v$date: undefined,
        search_eq_v$venueType: 2,
        search_eq_v$coachId: undefined,
        search_gt_v$startTime: undefined,
        search_lt_v$endTime: undefined,
        leftTime: undefined,
        rightTime: undefined
      },
      pickerOptions: {
        disabledDate(time) {
          return Date.now() > time
        }
      },
      time: undefined,
      times: '',
      data: '',
      form: {
        id: undefined,
        veneuType: '',
        venueId: '',
        name: '',
        date: '',
        startTime: '',
        endTime: '',
        num: '',
        saleNum: '',
        coachId: '',
        description: '',
        price: '',
        platformId: '',
        lessonImage: [],
        tags: [],
        note: ''
      }
    }
  },
  created() {
    this.params.search_eq_v$venueId = this.$route.query.venueId
    findByVenueType(2).then(response => {
      this.coaches = response.coaches
    })
  },
  methods: {
    showImage(url) {
      window.open(url)
    },
    /**
     * 搜索场馆课程
     */
    handleInfo(id) {
      this.$router.push({ path: '/venue/lesson/info', query: { id: id }})
    },
    handleSearch() {
      if (this.params.search_lt_v$endTime != null) {
        this.params.leftTime = this.params.search_gt_v$startTime
        this.params.rightTime = this.params.search_lt_v$endTime
      }
      this.$refs.pagination.handleSearch()
    },

    /**
     * 复制课程弹框
     */
    showimg(id) {
      this.times = null
      this.data = null
      this.dialogFormVisible = true
      this.findById(id)
    },
    onDateChange(value) {

    },
    onTimeChange(value) {
      if (value) {
        this.form.startTime = value[0] + ':00.000'
        this.form.endTime = value[1] + ':00'
      } else {
        this.form.startTime = undefined
        this.form.endTime = undefined
      }
    },
    /**
     * 保存复制的课程
     */
    saveLesson() {
      this.form.date = this.data
      this.time = this.times
      if (this.data === '' || this.data === null) {
        this.$message({
          message: '请选择日期！',
          type: 'warning'
        })
        return
      }
      if (this.times === '' || this.times === null) {
        this.$message({
          message: '请选择时间！',
          type: 'warning'
        })
        return
      }
      save(this.form)
      .then(response => {
        this.$refs.pagination.handleSearch()
      })
      .finally(() => {
        this.$refs.pagination.handleSearch()
      })
      this.dialogFormVisible = false
    },

    /**
     * 查询复制课程信息
     */
    findById(id) {
      find(id).then(response => {
        this.form.veneuType = response.venueLesson.veneuType
        this.form.venueId = response.venueLesson.venueId
        this.form.name = response.venueLesson.name
        this.form.date = moment(response.venueLesson.date).format('YYYY-MM-DD')
        this.form.startTime = response.venueLesson.startTime
        this.form.endTime = response.venueLesson.endTime
        this.form.num = response.venueLesson.num
        this.form.saleNum = ''
        this.form.coachId = response.venueLesson.coachId
        this.form.description = response.venueLesson.description
        this.form.price = response.venueLesson.price
        this.form.platformId = response.venueLesson.platformId
        this.form.lessonImage = response.venueLesson.lessonImage
        this.time = [this.form.startTime, this.form.endTime]
        this.form.tags = response.venueLesson.tags
        this.form.note = response.venueLesson.note
      })
    },

    /**
     * 编辑场馆课程
     */
    handleEdit(id) {
      this.$router.push({ path: '/venue/lesson/edit', query: { id: id }})
    },

    /**
     * 创建场馆课程
     */
    handleCreate() {
      this.$router.push({
        path: '/venue/lesson/edit',
        query: { venueId: this.params.search_eq_v$venueId }
      })
    },

    /**
     * 删除场馆课程
     */
    handleDelete(row) {
      this.$confirm('确认删除该场馆课程？')
        .then(_ => {
          remove(row.id).then(response => {
            this.$refs.pagination.removeItem(row)
          })
        })
        .catch(_ => {})
    }
  }
}
</script>

