<template>
  <div class="putForward">
    <el-form :model="search" class="demo-form-inline" inline label-width="80px">
      <el-form-item label="昵称">
        <el-input v-model="search.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="search.user_id" placeholder="用户ID"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="search.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-date-picker
          type="daterange"
          v-model="search.payTime"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="success" @click="exportTable" v-if="$store.state.export">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border fixed
      style="width: 100%">
      <el-table-column
        label="用户"
        width="200"
        className="f-c">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})<br>手机：{{scope.row.user_mobile}}
        </template>
      </el-table-column>
      <el-table-column
        prop="element_title"
        width="200"
        label="歌曲名">
      </el-table-column>
      <el-table-column
        prop="category_name"
        width="200"
        label="课程">
      </el-table-column>
      <el-table-column
        prop="interest"
        width="100"
        label="兴趣度">
      </el-table-column>
      <el-table-column
        prop="concent"
        width="100"
        label="专注度">
      </el-table-column>
      <el-table-column
        prop="parent_child"
        width="100"
        label="亲子互动">
      </el-table-column>
      <el-table-column
        prop="growth_record"
        label="成长记录">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            :content="scope.row.growth_record">
            <el-button slot="reference">{{scope.row.growth_record}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        width="200"
        label="提交时间">
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>

  </div>
</template>

<script>
  import {getGrowthRecordApi} from "../../service/api";
  import Cookie from '../../util/cookie'
  import page from '../framework/page'
  import CommonJs from '../../util/common';
  import md5 from 'js-md5';
  let singjson = {
    sing: "singsingenglish21000"
  };
  export default {
    name: "growthRecord",
    data(){
      return {
        // today:{
        //   text:'今天',
        //   onClick:(vm)=>{
        //     vm.$emit('pick', [this.formatTime(new Date())+' 00:00:00',this.formatTime(new Date())+' 23:59:59'])
        //   }
        // },
        // yesterday:{
        //   text:'昨天',
        //   onClick:(vm)=>{
        //     let preDate = this.formatTime(new Date(new Date().getTime() - 24*60*60*1000));
        //     vm.$emit('pick', [preDate+' 00:00:00',preDate+' 23:59:59'])
        //   }
        // },
        // last30Day:{
        //   text:'过去30天',
        //   onClick:(vm)=>{
        //     let preDate = this.formatTime(new Date(new Date().getTime() - 30*24*60*60*1000));
        //     vm.$emit('pick', [preDate+' 00:00:00',this.formatTime(new Date())+' 23:59:59']);
        //   }
        // },
        // last7Day:{
        //   text:'过去7天',
        //   onClick:(vm)=>{
        //     let preDate = this.formatTime(new Date(new Date().getTime() - 7*24*60*60*1000));
        //     vm.$emit('pick', [preDate+' 00:00:00',this.formatTime(new Date())+' 23:59:59']);
        //   }
        // },
        uploadHeader:{token:Cookie.get('cc_token')},
        param_token:CommonJs.md5Code(),
        nowPage: 1,
        total: 0,
        limit: 10,
        search:{
          key:'',
          status:'1',
          payTime:[]
        },
        liStatus:[
          {
            label: '全部',
            status: ''
          },
          {
            label: '申请中',
            status: 0
          },{
            label: '提现成功',
            status: 1
          },{
            label: '提现失败',
            status: 2
          }
        ],
        tableData:[],
        showDialog:false,
        showDesc:false,
        dialogTitle:'审核',
        nowObj:{
          id:'',
          status:1,
          reason:'',
          desc:""
        },
        page:{
          current:1,
          pageSize:100,
          total:0
        },
        putForwardDialog: {
          show: false,
          user_id: '',
          userLabel: '',
          money: 0,
          desc: ''
        },
        userList: [],
        rules:{
          userLabel:[
            { required: true, message: '请选择用户', trigger: 'change' }
          ],
          money:[
            { required: true, message: '请输入提现金额', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入提现说明', trigger: 'change' }
          ]
        },
        searchFrom:{},
        selectUserList:[],
        userDialog: {
          show: false,
          nowPage: 1,
          total: 0,
          limit: 5
        }
      }
    },
    components:{
      page
    },
    filters:{
      moneyYuan:function (value) {
        if(!value){
          return 0 + '元';
        }
        return value = (value/100).toFixed(2) + '元';
      },
      filterStatus:function (value) {
        let msg = '';
        if(value.status === 0){
          msg = '审核中'
        }else if(value.status === 1){
          msg = '提现成功'
        }else if(value.status === 2){
          msg = '提现失败'+'('+value.reason+")"
        }
        return msg;
      },
      userLabel: function (val) {
        return `${val.nickname}[${val.user_id}]`
      }
    },
    mounted:function(){
      this.getList()
    },
    methods:{
      fileSuccess(){
        this.$message({
          message: '提交成功，请稍后刷新',
          type: 'success'
        });
      },
      /*formatTime(date){
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`;
        return `${year}-${Month}-${Day}`;
      },*/
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList()
      },
      exportTable(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if(this.search.nickname){
          json.nickname = this.search.nickname
        }
        if(this.search.mobile){
          json.mobile = this.search.mobile
        }
        if (this.search.payTime && this.search.payTime.length > 0) {
          json.start_at = this.search.payTime[0]
          json.over_at = this.search.payTime[1]
        }
        exportExcelApi('/api/admin/user/growth/record/export', json, '成长记录')
      },
      //获取列表
      getList:function () {
        // console.log(this.limit)
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if(this.search.nickname){
          json.nickname = this.search.nickname
        }
        if(this.search.mobile){
          json.mobile = this.search.mobile
        }
        if (this.search.payTime && this.search.payTime.length > 0) {
          json.start_at = this.search.payTime[0]
          json.over_at = this.search.payTime[1]
        }
        getGrowthRecordApi(json).then(res=>{
          console.log(res)
          this.tableData = res.list;
          this.total = res.total;
        })
      },
      // 查询按钮
      onSearch(){
        this.nowPage = 1;
        //调用查询接口
        this.getList();
      },
      //分页切换
      onPageChange(current){
        this.nowPage = current;
        this.page.current=current;
        this.getList();
      },
      // 弹框保存按钮
      manualPutForward() {
        this.putForwardDialog.show = true;
        this.putForwardDialog.user_id = '';
        this.putForwardDialog.userLabel = '';
        this.putForwardDialog.money = 0;
        this.putForwardDialog.desc = '';
        this.getUserList();
      },
      getUserList(){
        let json = {
          limit: this.userDialog.limit,
          page: this.userDialog.nowPage
        }
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.userDialog.total = res.total;
        })
      },
      confirmPutForward(){
        let json = {
          user_id: this.putForwardDialog.user_id,
          money: this.putForwardDialog.money,
          desc: this.putForwardDialog.desc
        }
        this.$refs["refPutForward"].validate((valid) => {
          if (valid) {
            this.$confirm('确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              payToUserApi(json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '保存成功'
                });
                this.getList();
                this.putForwardDialog.show = false;
              });
            });
          } else {
            return false;
          }
        });
      },
      handleSelectionChange(a){
        this.selectUserList = a
      },
      onUserPageChange(val){
        this.userDialog.nowPage = val
        this.getUserList()
      },
      onUserSizeChange(val){
        this.userDialog.limit = val
        this.userDialog.nowPage = 1;
        this.getUserList()
      },
    }
  }
</script>

<style scoped>
  .putForward {
    padding: 20px 0;
  }
  .status{
    color: #e9a038;
  }
  .status.red{
    color: #c30005;
  }
  .status.green{
    color: #00ac00;
  }
  .avatar{
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
    height: 50px;
  }
  .el-popover__reference{
    /* background: #c30005; */
    max-width: 100%;
  }
</style>
<style>
  .el-popover__reference span{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;
  }
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>