<template>
  <div class=''>
   <el-dialog :visible.sync="goodsDialogParams.show" width="90%" append-to-body>
    <div class="secTitle" >选择商品</div>
    <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-tabs v-model="goodSearchFrom.status" type="card" style="background: white;padding-top: 10px" @tab-click="getGoods()">
      <el-tab-pane label="上架" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="编辑中" name="0"></el-tab-pane> -->
      <el-tab-pane label="下架" name="2"></el-tab-pane>
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
    </el-tabs>
    <el-table
      size="small"
      :data="goodList"
      @select="goodsSelectionChange"
      @select-all="goodsSelectionAll"
      style="width: 100%"  fixed>
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
        <template slot-scope="scope">
          <router-link :to="{name:'periods', query: { goods_id: scope.row.id}}" >
            {{scope.row.name}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        label="商品类型">
        <template slot-scope="scope">
          {{scope.row.goods_type | goodsType}}
        </template>
      </el-table-column>
      <el-table-column
        prop="course_title"
        label="课程名称">
      </el-table-column>
      <el-table-column
        label="课程类别">
        <template slot-scope="scope">
          {{scope.row.course_type | lessonType}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status | goodsStatus}}
        </template>
      </el-table-column>
    </el-table>
        </div>
        <div class="item" >
          <p>选中列表</p>
          <el-table
      size="small"
      :data="secGoods"
      style="width: 100%"  fixed>
      <el-table-column
        prop="name"
        label="名称">
        <template slot-scope="scope">
          <router-link :to="{name:'periods', query: { goods_id: scope.row.id}}" >
            {{scope.row.name}}
          </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="goodsdel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
    </el-table>
        </div>
      </div>
    
    <!-- <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="goodsDialogParams.show = false">取 消</el-button>
        <el-button type="primary" @click="onGoodsConfirm">确 定</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 {
  getGoodsListApi,
} from "../../service/api";
  export default {
    name: 'tinymce1',
    props:[
      'lookData1'
    ],
    data () {
      return {
      goodList:[],
      goodSearchFrom:{
        status:"1"
      },
      secGoods:[],
      goodsDialogParams:{
        show:false,
      },
      }
    },
    created:function(){
    },
     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]
        },
      },
    components: {page},
    methods:{
       getGoods(){
        let json = {
          limit: "100",
          page: this.nowPage
        };
        if (this.goodSearchFrom.status && this.goodSearchFrom.status !== '-1') {
          json.status = this.goodSearchFrom.status
        }
        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
        })
      },
      goodsSelectionChange(val,el) {
      this.multipleSelection = val;
      for(let i=0;i<this.secGoods.length;i++){
        if(el.id==this.secGoods[i].id){
          return
        }
      }
      this.secGoods.push(el)
      console.log(el)
      },
      goodsSelectionAll(val){
        if(this.secGoods.length==0){
            this.secGoods = [...val]
          }else{
            let length = this.secGoods.length
            for(let j=0;j<val.length;j++){
              for(let i=0;i<=length;i++){
                if(val[j].id==this.secGoods[i].id){
                  break
                  }else{
                    if(i==length-1){
                      this.secGoods.push(val[j])
                      break
                    }
                  }
                }
            }
          }
      },
      goodsdel(el){
        for(let i=0;i<this.secGoods.length;i++){
          if(el.id==this.secGoods[i].id){
            this.secGoods.splice(i,1)
          }
        }
      },
    onSelectGood() {
      this.goodsDialogParams.show = true;
      this.getGoods();
    },
    onGoodsConfirm() {
      this.$emit('goodConfirm',this.secGoods)
      console.log(this.secGoods)
    },
    }
  }
</script>
<style scoped lang="less">
.tableBox{display: flex;}
.tableBox .item{flex: 1;}
</style>