<template>

  <div class="not_buy">
     <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
          <el-form-item label="用户ID">
            <el-input v-model="searchFrom.user_id"  @change="getList"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
           <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getList" 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>
            <el-button type="primary" plain @click="getList">搜索</el-button>
          </el-form-item>
    </el-form>
    <div class="head clear-both">
      <el-button plain type="success" style="float: right;margin-bottom:20px;" v-if="!$store.state.readonly" @click="entranceObj.show=true">无需登录入口</el-button>
    </div>
    <el-table :data="configList" style="width: 100%">
      <el-table-column label="用户ID" sortable prop="scope.row.user_id"  className="userInfo">
         <template slot-scope="scope">
           <img class="avatar" :src="scope.row.avatar">
          {{scope.row.nickname}}(ID:{{scope.row.user_id}})

        </template>
      </el-table-column>
      <el-table-column prop="class_name" label="班级名称">
      </el-table-column>
      <el-table-column label="期数标题" prop="periods_name">
      </el-table-column>
      <el-table-column label="商品名称" prop="goods_name">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" sortable>
      </el-table-column>
       <el-table-column label="备注" prop="desc">
      </el-table-column>
       <el-table-column
        label="操作"  v-if="!$store.state.readonly" width="220">
         <template slot-scope="scope">
            <el-button @click="editComment(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
          </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" />
    <entrance :entranceObj="entranceObj" />
  </div>
</template>

<script>
import entrance from "./entrance";
import { getClassConfigApi ,getGoodsListApi,updateDescApi} from "../../service/api";
import page from "../framework/page";
  import {GOODSTYPE} from "../../util/wordbook";


export default {
  name: "notBuyClass",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      configList: [],
      entranceObj: {
        title: "无需登录入口",
        show: false
      },
      searchFrom:{
          user_id:"",
          goods_id:"",

      },
      goodList:[],
    };
  },
  components: {
    entrance,
    page
  },
  filters:{
     filterGoods(val){
          return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
  },
  mounted() {
    this.getList();
    this.getGoodsOption();
  },

  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    getList() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
       // 搜索筛选
        if(this.searchFrom.user_id){
            json.user_id=this.searchFrom.user_id
        }
         if(this.searchFrom.goods_id){
            json.goods_id=this.searchFrom.goods_id
        }
      getClassConfigApi(json).then(res => {
        console.log(res);
         this.total = res.total;
        this.configList=res.list;
      });
    },
      getGoodsOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      },
       editComment(id, desc) {
        this.$prompt('', '编辑备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputValue: desc || ''
        }).then(({ value }) => {
            this.$confirm('确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              console.log(id,value)
              updateDescApi({desc: value},id).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑备注成功'
                });
                this.getList();
              });
            });
        })
      },
  }
};
</script>

<style scoped lang="less">
.not_buy {
  .head {
    margin-bottom: 10px;
  }
  width: 100%;
  padding: 20px 0;
  .page-div {
    text-align: center;
    padding-top: 20px;
  }
}
 .avatar {
   width: 50px;
   min-width:50px !important;
   height: 50px;
    border-radius: 50%;
   line-height:1;
  }
</style>
<style>
  .userInfo >div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
</style>


