/**
* Created by wang on 18/10/31.
*/
<template>
  <div class="index">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
      <el-form-item label="领取时间">
        <el-date-picker
          v-model="searchFrom.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
          :default-time="['00:00:00','23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="激活时间">
        <el-date-picker
          v-model="searchFrom.active_time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
          :default-time="['00:00:00','23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否激活">
        <el-select
          clearable
          @change="initPage"
          v-model="searchFrom.user_buy"
          size="medium"
        >
          <el-option label="已激活" :value="1"></el-option>
          <el-option label="未激活" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="沟通状态">
        <el-select
          clearable
          @change="initPage"
          v-model="searchFrom.status"
          size="medium"
        >
          <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="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="searchFrom.source" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="searchFrom.nickname" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchFrom.mobile" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-select v-model="searchFrom.goods_id" filterable placeholder="请选择" style="width: 150px" @change="initPage" 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 label="老师">
        <el-select v-model="searchFrom.teacher_id" filterable placeholder="请选择" @change="initPage" clearable filterable style="width: 180px">
          <el-option label="未指定" value="0">
          </el-option>
          <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="initPage">
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain v-if="$store.state.export" @click="doExport">
          导出
        </el-button>
      </el-form-item>
      <!-- <el-button
        @click="editComment"
        type="primary"
        plain
        >
        批量编辑备注
      </el-button> -->
    </el-form>
    <div></div>
    <div style="position: relative">
      <el-tabs v-model="searchFrom.course_type" type="card" style="background: white;padding-top: 10px" @tab-click="initPage">
        <el-tab-pane label="全部" name="-1"/>
        <el-tab-pane label="月课" name="0"/>
        <el-tab-pane label="日课" name="1"/>
      </el-tabs>
      <div style="position: absolute;top: 10px;right: 10px;font-size: 14px" v-if="$store.state.distribution">
        老师:
        <el-select size="small" v-model="teacherId" placeholder="请选择" clearable style="width: 150px" filterable>
          <el-option label="暂不分配" value="0">
          </el-option>
          <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id">
          </el-option>
        </el-select>
        <el-button size="small" type="success" @click="pullAll">批量分配</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="nickname" label="领取人">
        <template slot-scope="scope">
          <div v-if='scope.row.user_id !== 0'>
            <img class="avatar" :src="scope.row.avatar"/>
            <div>{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})</div>
          </div>
          <div v-if='scope.row.user_id === 0'>
            暂未绑定用户
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="宝宝昵称">
      </el-table-column>
      <el-table-column prop="telephone" label="领取电话">
      </el-table-column>
      <!-- <el-table-column prop="source" label="来源">
      </el-table-column> -->
      <el-table-column prop="periods_title" label="期数">
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称">
      </el-table-column>
      <el-table-column prop="source" label="来源">
        <template slot-scope="scope">
          {{scope.row.source}}({{scope.row.invite_name}})
        </template>
      </el-table-column>
      <el-table-column prop="teacher_name" label="班级老师">
      </el-table-column>
      <el-table-column prop="status" :formatter="externalLaunchStatus" label="沟通状态" width="120">

      </el-table-column>
      <el-table-column prop="active_at" label="激活时间" width="90">
        <template slot-scope="scope">
          {{scope.row.active_at === '0000-00-00 00:00:00'?'未激活':scope.row.active_at}}
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="领取时间" width="90">
      </el-table-column>
      <el-table-column prop="desc" label="备注">
      </el-table-column>
      <el-table-column label="操作" fixed="right" v-if="!$store.state.readonly" width="180">
        <template slot-scope="scope">
          <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog
      title="编辑备注"
      center
      append-to-body
      :visible.sync="showCommentDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="600px">
      <div>
        <el-form ref="commentFrom" :model="commentForm">
          <el-form-item prop="desc">
            <el-input type="textarea" v-model="commentForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="showCommentDialog = false;commentForm={}">取 消</el-button>
            <el-button type="primary" @click="saveComment">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  import page from '../framework/page'
  import CommonJs from '../../util/common';
  import {
    getAdsInnerListApi,
    updateAdsInnerApi,
    updateAdsInnerPlApi,
    getTeacherListApi,
    getGoodsListApi,
    adsTeacherApi
  } from "../../service/api";
  import {
    GOODSTYPE,
    externalLaunchStatusParams
  } from "../../util/wordbook";

  export default {
    name: "index",
    components: {
      page
    },
    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']);
          }
        },
        teacherId: null,
        secId: [],
        total: 0,
        nowPage: 1,
        limit: 10,
        searchFrom: {
          source: '',
          course_type: '-1',
        },
        tableData: [],
        commentForm: {},
        showCommentDialog: false,
        teacherList: [],
        goodList: [],
      }
    },
    filters: {
      filterStatus: function (value) {
        let msg = "";
        if (value === 0) {
          msg = "未绑定";
        } else {
          msg = "已绑定";
        }
        return msg;
      },
      filterGoods(val) {
        return (
          "[" +
          val.id +
          "]" +
          "[" +
          GOODSTYPE[val.goods_type] +
          "]" +
          "[" +
          val.current_price / 100 +
          "元]" +
          val.name
        );
      }
    },
    created() {
      this.initPage()
      this.getGoodsOption();
      this.getTeacherList()
    },
    methods: {
      externalLaunchStatus(row) {
        return externalLaunchStatusParams[row.status]
      },
      formatTime(date) {
        console.log(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}`;
      },
      getGoodsOption() {
        let json = {
          page: 1,
          limit: 100,
          goods_type: '1,2'
        };
        getGoodsListApi(json).then(res => {
          this.goodList = res.list;
        });
      },
      pullAll() {
        if (this.secId.length < 1) {
          this.$message('请选择订单');
          return false;
        }
        if (!this.teacherId) {
          this.$message('请选择老师');
          return false;
        }
        let json = {
          order_ids: []
        };
        this.secId.forEach(i => {
          json.order_ids.push(i)
        });
        this.$confirm(`是否确定将这${json.order_ids.length}笔订单分配给该老师?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          adsTeacherApi(this.teacherId, {ids: json.order_ids.join(',')}).then(res => {
            // this.secId = [];
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.initPage();
          })
        }).catch(() => {
        });
      },
      getTeacherList() {
        let json = {
          page: 1,
          limit: 500
        };
        getTeacherListApi(json).then(res => {
          this.teacherList = res.list;
        });
      },
      handleSelectionChange(val) {
        this.secId = []
        val.forEach(element => {
          this.secId.push(element.id)
        });
        // console.log(this.secId)
      },
      initPage() {
        let json = {
          limit: this.limit,
          page: this.nowPage
        }
        // if (this.searchFrom.time) {
        //   json.time = this.searchFrom.time
        // }
        if (this.searchFrom.source) {
          json.source = this.searchFrom.source
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile;
        }
        if (this.searchFrom.status) {
          json.status = this.searchFrom.status;
        }
        if (this.searchFrom.course_type !== '-1') {
          json.course_type = this.searchFrom.course_type;
        }
        if (this.searchFrom.nickname) {
          debugger
          json.nickname = this.searchFrom.nickname;
        }
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id;
        }
        if (this.searchFrom.teacher_id) {
          json.teacher_id = this.searchFrom.teacher_id;
        }
        if (this.searchFrom.goods_name) {
          json.goods_name = this.searchFrom.goods_name;
        }
        if (this.searchFrom.user_buy != -1) {
          json.user_buy = this.searchFrom.user_buy;
        }
        if (this.searchFrom.order_id) {
          json.order_id = this.searchFrom.order_id;
        }
        if (this.searchFrom.goods_id) {
          json.goods_id = this.searchFrom.goods_id;
        }
        if (this.searchFrom.time && this.searchFrom.time.length == 2) {
          json.start_at = this.searchFrom.time[0];
          json.end_at = this.searchFrom.time[1]
        }
        if (this.searchFrom.active_time && this.searchFrom.active_time.length == 2) {
          json.active_start_at = this.searchFrom.active_time[0];
          json.active_end_at = this.searchFrom.active_time[1]
        }
        getAdsInnerListApi(json).then((res) => {
          this.tableData = res.list;
          this.total = res.total
        })
      },
      onPageChange(val) {
        this.nowPage = val
        this.initPage()
      },
      onSizeChange(val) {
        this.nowPage = 1
        this.limit = val
        this.initPage()
      },
      doExport() {
        let query = `?type=export`;
        if (this.searchFrom.source) {
          query = query + '&source=' + this.searchFrom.source
        }
        if (this.searchFrom.mobile) {
          query = query + '&mobile=' + this.searchFrom.mobile
        }
        if (this.searchFrom.status) {
          query = query + '&status=' + this.searchFrom.status
        }
        if (this.searchFrom.course_type !== '-1') {
          query = query + '&course_type=' + this.searchFrom.course_type
        }
        if (this.searchFrom.user_buy !== '-1') {
          query = query + '&user_buy=' + this.searchFrom.user_buy
        }
        if (this.searchFrom.nickname) {
          query = query + '&nickname=' + this.searchFrom.nickname
        }
        if (this.searchFrom.user_id) {
          query = query + '&user_id=' + this.searchFrom.user_id
        }
        if (this.searchFrom.teacher_id) {
          query = query + '&teacher_id=' + this.searchFrom.teacher_id
        }
        if (this.searchFrom.goods_name) {
          query = query + '&goods_name=' + this.searchFrom.goods_name
        }
        if (this.searchFrom.order_id) {
          query = query + '&order_id=' + this.searchFrom.order_id
        }
        if (this.searchFrom.goods_id) {
          query = query + '&goods_id=' + this.searchFrom.goods_id
        }
        if (this.searchFrom.time && this.searchFrom.time.length == 2) {
          query = query + '&start_at=' + this.searchFrom.time[0];
          query = query + '&end_at=' + this.searchFrom.time[1]
        }
        if (this.searchFrom.active_time && this.searchFrom.active_time.length == 2) {
          query = query + '&active_start_at=' + this.searchFrom.active_time[0];
          query = query + '&active_end_at=' + this.searchFrom.active_time[1]
        }
        window.open(`/api/admin/ads/export/all${query}`)
      },
      saveComment() {
        // let id = this.commentForm.id;
        let id
        if (this.commentForm.id) {
          id = this.commentForm.id
        } else {
          id = this.secId.join(',')
        }

        let desc = this.commentForm.desc ? this.commentForm.desc : '';
        if (!desc) return;
        this.$confirm('确认编辑备注', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateAdsInnerPlApi({ids: id, desc: desc}).then(res => {
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.showCommentDialog = false
            this.initPage();
          });
        })
      },
      editNote(id, desc) {
        this.showCommentDialog = true;
        this.commentForm = {
          id: id,
          desc: desc
        };
      },
      editComment(id, desc) {
        if (this.secId.length > 0) {
          this.showCommentDialog = true;
          // this.commentForm = {
          //   id: id,
          //   desc: desc
          // };
        } else {
          this.$message({
            type: 'warning',
            message: '请选择'
          });
        }

      },
    }
  }
</script>

<style scoped lang="less">
  .index {
    padding: 20px 0;
  }

  .sms {
    padding: 20px 0;
  }

  .avatar {
    width: 50px;
    min-width: 50px;
    margin-right: 10px;
    height: 50px;

    border-radius: 50%;
  }
</style>