<template>
  <div class="periods">
    <div class="form-block">
      <el-form label-width="90px" inline>
        <el-form-item label="期数标题">
          <el-input v-model="title" placeholder="请输入内容" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select v-model="goodsId" placeholder="请选择" clearable>
            <el-option
              v-for="(data,index) in goodList"
              :key="index"
              :label="data | filterGoods"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select v-model="lessonId" placeholder="请选择" clearable>
            <el-option
              v-for="(data,index) in lessonList"
              :key="index"
              :label="data.title"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="startTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSearch" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;" v-if="!$store.state.readonly">
          <el-button @click="onAdd" type="primary">添加期数</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="periodList"
      style="width: 100%">
      <el-table-column
        label="期数标题">
        <template slot-scope="scope">
          <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" >
            {{scope.row.title}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        label="商品价格">
        <template slot-scope="scope">
          {{scope.row.goods_price / 100 }}元
        </template>
      </el-table-column>
      <el-table-column
        prop="course_title"
        label="课程名称">
      </el-table-column>
      <el-table-column
        prop="start_name"
        label="开始主题/歌">
      </el-table-column>
      <el-table-column
        prop="current_category_name"
        label="当前歌曲">
      </el-table-column>
      <el-table-column
        label="看课情况"
        min-width="150">
        <template slot-scope="scope">
          可看课包数: {{scope.row.watch_num}}<br>  已看课包数:{{scope.row.has_watch_num}} <br>
          续看课包数: {{scope.row.duration_num}}<br>  已续看课包数:{{scope.row.has_duration_num}}
        </template>
      </el-table-column>
      <el-table-column
        label="不上课日期"
        min-width="120">
        <template slot-scope="scope">
          {{scope.row.rest_week_day | dayFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="总学员数">
        <template slot-scope="scope">
          {{scope.row.total_user_num ? scope.row.total_user_num : ''}}
        </template>
      </el-table-column>
      <el-table-column
        prop="start_at"
        label="开始时间">
      </el-table-column>
      <el-table-column
        label="结束时间">
        <template slot-scope="scope">
          {{scope.row.over_at ? scope.row.over_at : ''}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      width="148" v-if="!$store.state.readonly">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="onEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" v-if="$store.state.deletePermission" plain @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/>
    <new-dialog v-if="newDialog.show" :dialogObj="newDialog" @reflash="onSave"></new-dialog>
  </div>
</template>

<script>
  import goodDialog from './dialog'
  import newDialog from './newDialog'
  import page from '../framework/page'
  import {getPeriodsApi,delPeriodApi,getGoodsListApi,getLessonApi} from "../../service/api";
  import {WEEKDAY} from '../../util/wordbook';
  import CommonJs from '../../util/common';
  export default {
    name: "index",
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        title: '',
        goodsId: null,
        lessonId: null,
        startAt: '',
        periodList: [],
        startTime: [],
        newDialog: {
          form: {
          },
          show: false,
          title: ''
        },
        goodList: [],
        lessonList: []
      }
    },
    filters: {
      dayFilter: function (value) {
        let list = value ? value.split(',') : [];
        list = list.map((day) => {
            return WEEKDAY[day];
        })
        return list.join(',')
      },
      filterGoods(val){
        return val.name + '[' +val.current_price / 100 + '元]'
      }
    },
    components:{
      goodDialog,
      newDialog,
      page
    },
    methods: {
      onPageChange(val){
        this.nowPage = val
        this.onSearch()
      },
      onSearch(){
        let json={
          limit: this.limit,
          page: this.nowPage
        }
        if(this.title){
            json.title = this.title;
        }
        if(this.goodsId){
          json.goods_id = this.goodsId;
        }
        if(this.lessonId){
          json.course_id = this.lessonId;
        }
        if(this.startTime && this.startTime.length > 0){
          json.start_start_at = CommonJs.dateFmt(this.startTime[0],"yyyy-MM-dd")
          json.start_end_at = CommonJs.dateFmt(this.startTime[1],"yyyy-MM-dd")
        }
        if(this.startAt){
          json.start_at = this.startAt;
        }
        getPeriodsApi(json).then(res=>{
          this.periodList = res.list;
          this.total = res.total
        });
      },
      onAdd(){
        this.newDialog.form.id = '';
        this.newDialog.form.startNum = '';
        this.newDialog.form.goods_id = '';
        this.newDialog.form.title = '';
        this.newDialog.form.start_at = '';
        this.newDialog.form.rest_week_day = [];
        this.newDialog.form.teacher_ids = [];
        this.newDialog.title = '添加期数';
        this.newDialog.show = true;
      },
      onEdit(row){
          console.log('onEdit', row);
        let weekList = [];
        if(row.rest_week_day){
          row.rest_week_day.split(',').forEach((val)=>{
            weekList.push(parseInt(val));
          })
        }
        let teacherList = [];
        if(row.teacher_ids){
          row.teacher_ids.split(',').forEach((val)=>{
            teacherList.push(parseInt(val));
          })
        }
        this.newDialog.form = {
          id: row.id,
          startNum: row.start_num,
          start_at: row.start_at,
          title: row.title,
          goods_id: row.goods_id,
          rest_week_day: weekList,
          teacher_ids: teacherList,
          course_id: row.course_id
        }
        this.newDialog.title = '编辑期数';
        this.newDialog.show = true;
      },
      onSave(val){
        this.newDialog.show = false;
        this.onSearch();
      },
      del(row){
        this.$confirm('此操作将删除该期数?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPeriodApi(row.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onSearch()
          });
        });
      },
      getGoodsOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      },
      getLessonOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getLessonApi(json).then(res=>{
          this.lessonList = res.list;
        })
      }
    },
    mounted(){
      let _query = this.$route.query;
      if (_query && _query.goods_id) {
          this.goodsId = parseInt(_query.goods_id);
      }
      this.onSearch();
      this.getGoodsOption();
      this.getLessonOption();
    }
  }
</script>

<style scoped>
  .periods {
    padding: 20px 0;
  }
</style>
