<template>

  <div class="not_buy">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline size="small">
      <el-form-item label="用户ID">
        <el-input v-model="searchFrom.user_id" style="width: 80px" @change="getList"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="searchFrom.nickname" @change="getList" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchFrom.mobile" @change="getList"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-select v-model="searchFrom.goods_id" filterable 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-button type="primary" plain @click="exportTable" v-if="$store.state.export">导出</el-button>
        <el-button plain type="success" v-if="!$store.state.readonly" @click="entranceObj.show=true">无需登录入口</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="configList" style="width: 100%" size="small">
      <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" width="170px">
        <template slot-scope="scope">
          <div v-html="periodName(scope.row)"></div>
          <!--{{periodName(scope.row)}}-->
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="goods_name"></el-table-column>
      <el-table-column label="手机号" prop="mobile">
      </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, exportExcelApi} 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: "",
          mobile: "",
        },
        goodList: [],
      };
    },
    components: {
      entrance,
      page
    },
    filters: {
      filterGoods(val) {
        return '[' + GOODSTYPE[val.goods_type] + ']' + '[' + val.current_price / 100 + '元]' + val.name
      }
    },
    mounted() {
      this.getList();
      this.getGoodsOption();
    },

    methods: {
      periodName(val) {
        let str = '';
        if (!val.periods_name) {
          str = '-'
        } else {
          if (val.goods_id) {
            str += `【${val.goods_id}】`
          }
          if (val.periods_name) {
            str += `${val.periods_name}<br>`
          }
          if (val.watch_num) {
            str += `${val.watch_num}课时`
          }
          if (val.start_at) {
            str += `（${val.start_at.slice(5).replace('-', '')}）`
          }
          if (val.has_watch_num || val.has_watch_num == 0) {
            str += `-d${val.has_watch_num}`
          }
        }
        return str
      },
      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
        }
        if (this.searchFrom.nickname) {
          json.nickname = this.searchFrom.nickname
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getClassConfigApi(json).then(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(() => {
            updateDescApi({desc: value}, id).then(res => {
              this.$message({
                type: 'success',
                message: '编辑备注成功'
              });
              this.getList();
            });
          });
        })
      },
      exportTable() {
        let json = {};
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id
        }
        if (this.searchFrom.goods_id) {
          json.goods_id = this.searchFrom.goods_id
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        if (this.searchFrom.nickname) {
          json.nickname = this.searchFrom.nickname
        }
        exportExcelApi('/api/admin/user/receive/course/log/export',json,'扫码入课列表')
      },
    }
  };
</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>