<template>
  <el-dialog title="复制链接" append-to-body :visible.sync="show" :modal="false" width="80%">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px" class="search-form" inline>
      <el-form-item label="商品名称">
        <el-input v-model="searchFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select v-model="searchFrom.goods_type" placeholder="请选择" @change="getList">
          <el-option value="" label="请选择"></el-option>
          <el-option
            :label="'普通商品'"
            :value="1">
          </el-option>
          <el-option
            :label="'团购商品'"
            :value="2">
          </el-option>
          <el-option
            :label="'续课商品'"
            :value="3">
          </el-option>
          <el-option
            :label="'优惠券商品'"
            :value="4">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-select v-model="searchFrom.course_id" placeholder="请选择" @change="getList">
          <el-option value="" label="请选择"></el-option>
          <el-option
            v-for="(data,index) in classList"
            :key="index"
            :label="data.title"
            :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品现价/团购价" label-width="120px">
        <el-input-number v-model="searchFrom.current_price"></el-input-number>
      </el-form-item>
      <el-form-item>
        <div class="search-btn-block">
          <el-button type="primary" plain @click="getList" icon="el-icon-search">搜索</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table
      :data="goodsList"
      style="width: 100%">
      <el-table-column prop="id" width="50px" label="编号"/>
      <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
        label="商品原价/直购价">
        <template slot-scope="scope">
          {{scope.row.original_price/100}}元
        </template>
      </el-table-column>
      <el-table-column
        label="商品现价/团购价">
        <template slot-scope="scope">
          {{scope.row.current_price/100}}元
        </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.desc | goodsDesc}}
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="success" @click="copyUrl(scope.row.id)">
            复制链接
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </el-dialog>
</template>

<script>
  import {getGoodsListApi,getLessonApi} from "../../service/api";
  import page from '../framework/page'
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";

  export default {
    name: "goodsList",
    props:[
      'dialogObj'
    ],
    data(){
      return {
        searchFrom:{
          name:'',
          goods_type: '',
          status: '1',
          course_id: ''
        },
        goodsList:[],
        classList: [],
        total:0,
        nowPage:1,
        limit: 10,
        show:false,
        code: ''
      }
    },
    components:{
      page,
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
      goodsDesc(value){
        let _desc = JSON.parse(value)
        return _desc.desc
      }
    },
    methods:{
      getList(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if (this.searchFrom.name) {
          json.name = this.searchFrom.name
        }
        if (this.searchFrom.goods_type){
          json.goods_type = this.searchFrom.goods_type
        }
        if (this.searchFrom.course_id) {
          json.course_id = this.searchFrom.course_id
        }
        if (this.searchFrom.status) {
          json.status = this.searchFrom.status
        }
        if (this.searchFrom.current_price) {
          json.current_price = this.searchFrom.current_price * 100
        }
        getGoodsListApi(json).then(res=>{
          this.goodsList = res.list;
          this.total = res.total
        })
      },
      getClassList(){
        let json = {
          limit: 200,
          page: 1
        }
        getLessonApi(json).then(res=>{
          console.log(res)
          this.classList = res.list;
        })
      },
      copyUrl(data){
        if (!this.code) return;
        let url = `${process.env.INVITE_URL}#/buyDetail?shopId=${data}&invite_code=${this.code}`;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
        this.$emit("changeShow");
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getList()
      },
      initDialog(){
        this.show = this.dialogObj.show;
        if (this.dialogObj.code) {
          this.code = this.dialogObj.code;
        }
      },
    },
    // mounted(){
    //   this.initDialog();
    // },
    watch:{
      'dialogObj.show'(value){
        if(value){
          this.initDialog();
          this.getClassList();
          this.getList();
        }
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style>
 .f-c > div{
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
 }
</style>