<template>
  <div class=''>
<el-dialog :visible.sync="periodsDialogParams.show" width="90%" append-to-body>
  <div class="secTitle" >选择期数</div>
  <div class="form-block">
      <el-form label-width="85px" inline size="small">
        <el-form-item label="期数标题">
          <el-input v-model="periodTitle" placeholder="请输入内容" style="width: 150px" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select v-model="goodsId" placeholder="请选择" style="width: 150px" @change="onPeriodsSearch" 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="请选择" style="width: 150px"  @change="onPeriodsSearch" 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="periodStartTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
            @change="onPeriodsSearch">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onPeriodsSearch" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-tabs v-model="course_type" type="card" style="background: white;padding-top: 10px" @tab-click="onPeriodsSearch">
            <el-tab-pane label="日课" name="1"/>
            <el-tab-pane label="月课" name="0"/>
            <el-tab-pane label="全部" name="-1"/>
          </el-tabs>
          <el-table
            size="mini"
            :data="periodList"
            @select="periodsSelectionChange"
            @select-all="periodSelectionAll"
            style="width: 100%"  fixed>
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <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
              prop="start_at"
              label="起止时间" sortable>
              <template slot-scope="scope">
                {{scope.row.start_at}}
                <br>
                {{scope.row.over_at ? scope.row.over_at : ''}}
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间" sortable>
            </el-table-column>
          </el-table>
        </div>
        <div class="item" >
          <p>选中列表</p>
          <el-table
            size="mini"
            :data="secPeriods"
            style="width: 100%"  fixed>
            <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
           label="操作"
          width="148" v-if="!$store.state.readonly"  fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"  plain @click="perioddel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table>
        </div>
    </div>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPeriodsPageChange" @sizeChange="onPeriodsSizeChange"/>
    <span slot="footer" class="dialog-footer">
        <el-button @click="periodsDialogParams.show = false">取 消</el-button>
        <el-button type="primary" @click="onPeriodsConfirm">确 定</el-button>
      </span>
  </el-dialog>
  </div>
</template>


<script>
  import tinymce from 'tinymce/tinymce'
  import page from "../framework/page";
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
import {
  getLessonApi,
  getPeriodsApi,
  getGoodsListApi,
} from "../../service/api";
  export default {
    name: 'tinymce1',
    props:[
      'lookData1'
    ],
    data () {
      return {
       periodsDialogParams:{
        show:false,
      },
      secPeriods:[],
      goodsId:null,
      lessonId:null,
      lessonList:[],
      goodList:[],
      periodList:[],
      periodStartTime:null,
      periodTitle:null,
      course_type:'1',
      nowPage: 1,
      total: 0,
      limit: 10,
      }
    },
    created:function(){
    },
    components: {page},
    filters: {
    filterGoods(val){
        return '['+val.id+']['  + GOODSTYPE[val.goods_type] + ']' + '【' +val.current_price / 100 + '元】' + val.name
      },
    isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
    typeFilter(val) {
      if (!val) return;
      if (val === "text") return "文本";
      if (val === "image") return "图片";
      if (val === "video") return "视频";
      if (val === "news") return "图文";
    },
    typeListFilter(val) {
      if (!val) return "";
      if (val === 1) return "48时内关注但未购课用户";
      if (val === 2) return "有体验课但没有正式课用户";
      if (val === 3) return "未试听用户";
      if (val === 4) return "指定用户手机号";
    }
  },
    methods:{
         getLessonOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getLessonApi(json).then(res=>{
          this.lessonList = res.list;
        })
      },
      getGoods(){
        let json = {
          limit: "100",
          page: this.nowPage
        };
        console.log(613)
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
            if(i.conflict_goods_ids === ''){
              i.conflict_goods_ids=[]
            }else{
              i.conflict_goods_ids=i.conflict_goods_ids.split(',')
            }
          });
          this.goodList = res.list;
          // this.total = res.total
        })
      },
    onPeriodsPageChange(val){
        this.nowPage = val
        this.onPeriodsSearch()
      },
      onPeriodsSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.onPeriodsSearch()
      },
      onPeriodsSearch(){
        let json={
          limit: this.limit,
          page: this.nowPage
        };
        if (this.course_type !== '-1'){
          json.course_type = this.course_type
        }
        if(this.periodTitle){
            json.title = this.periodTitle;
        }
        if(this.goodsId){
          json.goods_id = this.goodsId;
        }
        if(this.lessonId){
          json.course_id = this.lessonId;
        }
        if(this.periodStartTime && this.periodStartTime.length > 0){
          json.start_start_at = CommonJs.dateFmt(this.periodStartTime[0],"yyyy-MM-dd")
          json.start_end_at = CommonJs.dateFmt(this.periodStartTime[1],"yyyy-MM-dd")
        }
        if(this.startAt){
          json.start_at = this.startAt;
        }
        getPeriodsApi(json).then(res=>{
          res.list.forEach(data=>{
            data.arrive_course_rate = 0;
            data.watch_course_rate = 0;
            data.over_course_rate = 0;
            data.work_rate = 0;
            data.over_work_rate = 0;
            data.clock_rate = 0;
            data.over_clock_rate = 0;
            data.transform_rate = 0
          });
          this.periodList = res.list;
          this.total = res.total
        });
      },
     periodsSelectionChange(val,el){
      this.multipleSelection = val;
      for(let i=0;i<this.secPeriods.length;i++){
        if(el.id==this.secPeriods[i].id){
          return
        }
      }
      this.secPeriods.push(el)
    },
    periodSelectionAll(val){
      if(this.secPeriods.length==0){
          this.secPeriods = [...val]
        }else{
          let length = this.secPeriods.length
          for(let j=0;j<val.length;j++){
            for(let i=0;i<=length;i++){
              if(val[j].id==this.secPeriods[i].id){
                break
                }else{
                  if(i==length-1){
                    this.secPeriods.push(val[j])
                    break
                  }
                }
              }
          }
        }
    },
    perioddel(el){
      for(let i=0;i<this.secPeriods.length;i++){
        if(el.id==this.secPeriods[i].id){
          this.secPeriods.splice(i,1)
        }
      }
      console.log(this.secPeriods)
      // perioddel
    },
    onSelectPeriods() {
      this.getLessonOption()
        this.onPeriodsSearch()
        this.getGoods()
        this.periodsDialogParams.show = true;
    },
    onPeriodsConfirm() {
      this.$emit('periodConfirm',this.secPeriods)
      console.log(this.secPeriods)
    },
    }
  }
</script>
<style scoped lang="less">
.tableBox{display: flex;}
.tableBox .item{flex: 1;}
</style>