<template>
  <el-dialog :title="entranceObj.title"
             :visible.sync="entranceObj.show" center
             width="800px">

    <el-tabs v-model="activeName" type="card" style="line-height:1">
      <el-tab-pane label="商品名称" name="first">
        <el-form ref="searchFrom" :model="searchFrom" label-width="90px" inline>
          <el-form-item label="商品名称">
            <el-select v-model="searchFrom.value" placeholder="请选择">
              <el-option
                v-for="(data,index) in goodsList"
                :key="index"
                :label="data | filterGoods"
                :value="String(data.id)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="search-btn-block">
              <el-button type="primary" plain @click="getUser(searchFrom)">确定</el-button>
              <el-button type="primary" plain @click="copyUrl(link1)">复制链接</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="期数名称" name="second">
        <el-form label-width="90px" inline  :model="searchFrom2">
          <el-form-item label="期数名称">
                <el-cascader
                :options="periodsList"
                :props="{value:'id',label:'name'}"
                @active-item-change="handleItemChange"
                @change="changePeriods"
                v-model="selectedGoods"
              >
              </el-cascader>
          </el-form-item>
          <el-form-item>
            <div class="search-btn-block">
              <el-button type="primary" plain @click="getUser(searchFrom2)">确定</el-button>
                <el-button type="primary" plain @click="copyUrl(link2)">复制链接</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
  import {getConfigListApi,getGoodsListApi,getPeriodsApi,putConfigApi,getDefaultPeriodsApi} from "../../service/api";
  import {GOODSTYPE} from '../../util/wordbook';
  export default {
    name:"entrance",
    props:[
      'entranceObj'
    ],
    data(){
      return{
        goodsList:[],
        periodsList:[],
        goods_id:null,
        activeName: 'first',
        searchFrom:{
          key:'goods_receive_course ',
          desc: '商品',
          value: '',
        },
        searchFrom2:{
          key:'periods_receive_course',
          desc: '期数',
          value: '',
        },
        selectedGoods:[],
        link1:"https://w.url.cn/s/A45jJYk",  //商品链接
        link2:"https://w.url.cn/s/AJi1QsS",  //期数链接
      }
    },
    mounted(){
    },
    filters:{
       filterGoods(val){
        return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      },
    },
    methods:{
      initPage(){
        getConfigListApi({key:this.searchFrom.key}).then(res=>{
          if(res.list && res.list.length>0){
            this.searchFrom.value = res.list[0].value;
          }else{
            this.searchFrom.value = '';
          }
        });
        getConfigListApi({key:this.searchFrom2.key}).then(res=>{
          if(res.list && res.list.length>0){
            //  this.searchFrom2.desc = res.list[0].desc;
            //  this.selectedGoods = [parseInt(res.goods_id),parseInt(res.list[0].value)];
                  // console.log(res.list)
          }else{
            this.searchFrom2.value = '';
          }
          this.searchFrom2.value = '';
        })
      },
      getGoodsList(){
        let json = {
          limit: 2000,
          page: 1
        }
        getGoodsListApi(json).then(res=>{
          this.goodsList = res.list;
        })
      },
      getUser(data){
        console.log(data)
        if(data.value!=""){
          this.$confirm('此操作将设置系统指定配置为商品?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let json ={
              value:data.value,
              desc:data.desc,
              key:data.key
            }
            putConfigApi(json).then(res=>{
              this.$message({
                type: 'success',
                message: '设置成功!'
              });
            });
          });
        }else{
          this.$message({
            type: "error",
            message: "请设置选择项!"
          });
        }
      },
       changePeriods(data){
        if(data.length>1){
          this.searchFrom2.value=String(data[1]);
        }
      },
        handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.periodsList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
     
      getPeriodsList(){
        let json = {
          page: 1,
          limit: 100,
          goods_type:'1,2'
        };
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
            i.children = [];
          });
          this.periodsList = res.list;
        });
      },
      copyUrl(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
      },
    },
    watch:{
      'entranceObj.show':function(a){
        if(a){
          this.initPage()
          this.getGoodsList();
          this.getPeriodsList();
        }
      }
    }
  }
</script>
<style scoped lang="less">
</style>

