<template>
  <div class="channel-trans-list">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px" inline>
      <el-form-item label="支付时间">
        <el-date-picker
          v-model="searchFrom.payTime"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
          :default-time="['00:00:00','23:59:59']"
          @change="getChannelTransList"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="进班时间">
        <el-date-picker
          v-model="searchFrom.classTime"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="{shortcuts:[classToday,classYesterday,classLast7Day,classLast30Day]}"
          :default-time="['00:00:00','23:59:59']"
          @change="getChannelTransList"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input v-model="searchFrom.out_trade_no" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="用户id">
        <el-input v-model="searchFrom.user_id" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="期数名称" prop="periods_title">
        <el-select
          style="width: 480px"
          placeholder="请选择"
          v-model="searchFrom.periods_id"
          @change="onPeriodChange"
          multiple
          filterable>
          <el-option v-for="item in periodList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转化前商品">
        <el-select
          v-model="searchFrom.goods_id"
          filterable
          placeholder="请选择"
          style="width: 150px"
          @change="getChannelTransList"
          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-input v-model="searchFrom.squad" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="销售老师">
        <el-select
          v-model="searchFrom.teacher_id"
          filterable
          placeholder="请选择"
          @change="changeTeacher"
          clearable
          style="width: 100px"
        >
          <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>
        <div class="flexRow">
          <el-button type="primary" plain @click="seachData">搜索</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table
      border
      :span-method="objectSpanMethod"
      :data="list"
      @sort-change="sortMethod"
      :style="{width: width+'px'}"
      fixed
    >
      <el-table-column prop="out_trade_no" label="订单号" ></el-table-column>
      <el-table-column
        label="购买人"
        className="f-c"
        width="150">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}<br>(ID:{{scope.row.user_id}})<br>手机：{{scope.row.user_mobile}}
        </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" ></el-table-column>
      <el-table-column prop="periods_title" label="期数标题" ></el-table-column>
      <el-table-column
        prop="duration_over_at"
        label="开课看课时间"
        style="font-size:12px;"
        width="200"
        >
        <template slot-scope="scope">
          开课日期：{{scope.row.periods_start_at}}
          <br>
          结课日期：{{scope.row.periods_over_at}}
        </template>
      </el-table-column>
      <el-table-column
        label="销售老师"
        className="f-c"
        width="120">
        <template slot-scope="scope">
         {{scope.row.invite_teacher_name}}<br>(ID:{{scope.row.invite_teacher_id}})
        </template>
      </el-table-column>
      <el-table-column
        label="销售老师用户"
        className="f-c"
        width="150">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.invite_user_avatar"/> {{scope.row.invite_user_nickname}}<br>(ID:{{scope.row.invite_user_id}})<br>手机：{{scope.row.invite_user_mobile}}
        </template>
      </el-table-column>
      <el-table-column
        label="带课老师"
        className="f-c"
        width="120">
        <template slot-scope="scope">
         {{scope.row.class_teacher_name}}<br>(ID:{{scope.row.class_teacher_id}})
        </template>
      </el-table-column>
      <el-table-column
        label="销售老师用户"
        className="f-c"
        width="150">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.class_invite_user_avatar"/> {{scope.row.class_invite_user_nickname}}<br>(ID:{{scope.row.class_invite_user_id}})<br>手机：{{scope.row.class_invite_user_mobile}}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="实付金额" ></el-table-column>
      <el-table-column prop="pay_at" label="支付时间" ></el-table-column>
      <el-table-column prop="in_class_at" label="进班时间" ></el-table-column>
      <el-table-column prop="status" label="支付状态" >
        <template slot-scope="scope">
          {{scope.row.status|orderFilter}}
        </template>
      </el-table-column>
    </el-table>
    <page
      :nowPage="nowPage"
      :total="total"
      :limit="limit"
      @pageChange="onPageChange"
      @sizeChange="onSizeChange"
    />
  </div>
</template>
<script>
import {
    getPeriodsConversionListApi,
    getSourceConversionListApi,
  getGoodsListApi,
  getPeriodsOtherListApi,
  getTeacherListApi
} from "../../service/api";
import page from "../framework/page";
import { GOODSTYPE, CLASSSOURCE,ORDERSTATUS } from "../../util/wordbook";
import { tipArr3 } from "../../util/tipArr";
export default {
  name: "periodsConversionList",
  data() {
    return {
      width: 0,
      nowPage: 1,
      total: 0,
      limit: 20,
      list: [],
      goods_id: null,
      teacherList: [],
      goodsList: [],
      periodList: [],
      today: {
        text: "今天",
        onClick: () => {
          this.searchFrom.payTime = [
            this.formatTime(new Date()) + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      yesterday: {
        text: "昨天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          );
          this.searchFrom.payTime = [
            preDate + " 00:00:00",
            preDate + " 23:59:59"
          ];
        }
      },
      last30Day: {
        text: "过去30天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)
          );
        }
      },
      last7Day: {
        text: "过去7天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
          );
          this.searchFrom.payTime = [
            preDate + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
     classToday: {
        text: "今天",
        onClick: () => {
          this.searchFrom.classTime = [
            this.formatTime(new Date()) + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      classYesterday: {
        text: "昨天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          );
          this.searchFrom.classTime = [
            preDate + " 00:00:00",
            preDate + " 23:59:59"
          ];
        }
      },
      classLast30Day: {
        text: "过去30天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)
          );
          this.searchFrom.classTime = [
            preDate + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      classLast7Day: {
        text: "过去7天",
        onClick: () => {
          let preDate = this.formatTime(
            new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
          );
          this.searchFrom.classTime = [
            preDate + " 00:00:00",
            this.formatTime(new Date()) + " 23:59:59"
          ];
        }
      },
      propertyList: [],
      spanArr: [],
      contentSpanArr: [],
      searchFrom: {
        payTime: [],
        classTime:[],
        start_at: "",
        end_at: "",
        invite_type: "",
        invite_name: "",
        watch_num: "",
        periods_id: "",
        squad: "",
        teacher_id: "",
        periods_title: ""
      },
      propertyList: [],
      watchList: [
        { id: 0, title: 5 },
        { id: 1, title: 6 },
        { id: 2, title: 10 },
        { id: 3, title: 20 }
      ],
       goodList: []
    };
  },
  filters:{
      orderFilter(val){
        return ORDERSTATUS[val]
      },
      filterGoods(val) {
      // console.log(val,229)
      return (
        "[" +
        val.id +
        "][" +
        GOODSTYPE[val.goods_type] +
        "]" +
        "【" +
        val.current_price / 100 +
        "元】" +
        val.name
      );
     }
    },
  components: { page },
  methods: {
    getGoodsOption() {
      let json = {
        page: 1,
        limit: 100,
        goods_type: "1,2"
      };
      getGoodsListApi(json).then(res => {
        this.goodList = res.list;
        console.log(this.goodList, 176);
      });
    },
    rendertip(h, { column }) {
      // console.log(h)
      return h("span", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              content: tipArr3[column.label],
              placement: "top"
            }
          },
          [
            h("i", {
              class: "el-icon-question",
              style: "color:#409eff;display:block;"
            })
          ]
        )
      ]);
    },
    sortMethod(data){
      this.searchFrom.sort_key = data.prop
      if(data.order=='ascending'){
        this.searchFrom.sort_value = 'asc'
      }else{
        this.searchFrom.sort_value = 'desc'
      }
      this.getChannelTransList()
    },
    getTeacherList() {
      let json = {
        page: 1,
        limit: 200
      };
      getTeacherListApi(json).then(res => {
        this.teacherList = res.list;
      });
    },
    seachData() {
      this.total = 0;
      this.nowPage = 1;
      this.getChannelTransList();
    },
    onPeriodChange(value) {
      let str = "";
      if (value.length > 1) {
        str = value.join(",");
      } else {
        str = value[0];
      }
      this.periods_id = str;
      console.log(str);
    },

    objectSpanMethod(data) {
    },
    handleItemChange(val) {
      getPeriodsApi({ goods_id: val[0], limit: 100 }).then(res => {
        res.list.forEach(i => {
          i.name = i.title;
        });
        this.goodsList.find(i => {
          return i.id === val[0];
        }).children = res.list;
      });
    },
    changePeriods(data) {
      if (data.length > 1) {
        this.goods_id = data[0];
        let nowGoods = this.goodsList.find(i => {
          return i.id === data[0];
        });
        this.periods = nowGoods.children.find(i => {
          return i.id === data[1];
        });
        this.searchFrom.periods_id = this.periods.id;
        this.getChannelTransList();
      }
    },
    changeTeacher(value) {
      this.searchFrom.teacher_id = value;
      this.getChannelTransList();
    },
    selectChange(value) {
      this.searchFrom.watch_num = this.watchList[value].title;
      this.getChannelTransList();
    },
    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}`;
    },
    onPageChange(val) {
      this.nowPage = val;
      this.getChannelTransList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getChannelTransList();
    },
    getGoodsList() {
      let json = {
        page: 1,
        limit: 100,
        goods_type: "1,2"
      };
      getGoodsListApi(json).then(res => {
        res.list.forEach(i => {
          i.name =
            "[" +
            i.id +
            "]" +
            "[" +
            GOODSTYPE[i.goods_type] +
            "]" +
            "[" +
            i.current_price / 100 +
            "元]" +
            i.name;
          i.children = [];
        });
        this.goodsList = res.list;
      });
    },
    getPeriodsOtherList() {
      let json = { limit: 1000,page:1,max_watch_num:20 };
      getPeriodsOtherListApi(json).then(res => {
        res.list.forEach(val=>{
          val.label = `【${val.goods_id}】${val.title}${val.watch_num}课时（${val.start_at.slice(5).replace('-', '')}）-d${val.has_watch_num}`
        })
        this.periodList = res.list;
        console.log(320)
      });
    },
    getChannelTransList() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      // 搜索筛选
      if (this.searchFrom.invite_type) {
        json.invite_type = this.searchFrom.invite_type;
      }
      if (this.searchFrom.goods_id) {
        json.goods_id = this.searchFrom.goods_id;
      }
      if(this.searchFrom.sort_value){
        json.sort_value = this.searchFrom.sort_value;
        json.sort_key = this.searchFrom.sort_key;
      }
      if (this.searchFrom.squad) {
        json.squad = this.searchFrom.squad;
      }
      if (this.searchFrom.watch_num) {
        json.watch_num = this.searchFrom.watch_num;
      }
      if (this.periods_id) {
        json.periods_ids = this.periods_id;
      }
      if (this.searchFrom.teacher_id) {
        json.teacher_id = this.searchFrom.teacher_id;
      }
      if (this.searchFrom.out_trade_no) {
        json.out_trade_no = this.searchFrom.out_trade_no;
      }
      if (this.searchFrom.user_id) {
        json.user_id = this.searchFrom.user_id;
      }
      if (this.searchFrom.payTime&&this.searchFrom.payTime.length > 0) {
        if (
          this.searchFrom.payTime[0] &&
          this.searchFrom.payTime[0].length > 0
        ) {
          this.searchFrom.start_at = this.searchFrom.payTime[0];
          json.pay_start_at = this.searchFrom.start_at;
        }
        if (
          this.searchFrom.payTime[1] &&
          this.searchFrom.payTime[1].length > 0
        ) {
          this.searchFrom.end_at = this.searchFrom.payTime[1];
          json.pay_over_at = this.searchFrom.end_at;
        }
      }
      if (this.searchFrom.classTime&&this.searchFrom.classTime.length > 0) {
        console.log(this.searchFrom.classTime)
        if (
          this.searchFrom.classTime[0] &&
          this.searchFrom.classTime[0].length > 0
        ) {
          this.searchFrom.class_start_at = this.searchFrom.classTime[0];
          json.in_class_start_at = this.searchFrom.class_start_at;
        }
        if (
          this.searchFrom.classTime[1] &&
          this.searchFrom.classTime[1].length > 0
        ) {
          this.searchFrom.class_end_at = this.searchFrom.classTime[1];
          json.in_class_over_at = this.searchFrom.class_end_at;
        }
      }
        getSourceConversionListApi(json).then(res => {
        if (res) {
          if (res.list && res.list.length > 0) {
            this.total = res.total;
            this.list = res.list.map((item, index) => {
              item.index = index;
              if (index == 0) {
                this.spanArr.push(1);
                this.pos = 0;
              } else {
                if (item.cur_date == res.list[index - 1].cur_date) {
                  this.spanArr[this.pos] += 1;
                  this.spanArr.push(0);
                } else {
                  this.spanArr.push(1);
                  this.pos = index;
                }
              }

              let name =
                item.invite_name && item.invite_name.length > 0
                  ? `(${item.invite_name})`
                  : "";
              let goods_id =
                item.goods_id && item.goods_id > 0
                  ? `【${item.goods_id}】`
                  : "";
              let watch_num =
                item.watch_num && item.watch_num > 0
                  ? `【${item.watch_num}个课时】`
                  : "";
              item.invite_type = `${item.invite_type}${name}`;
              item.goods_name = `${goods_id}${item.goods_name}${watch_num}`;
              return item;
            });
            for (let key in this.list[0]) {
              this.propertyList.push(key);
            }
            this.width = document.documentElement.clientWidth - 200;
          }
          if (res.list && res.list.length === 0) {
            this.list = [];
          }
        } else {
          this.list = [];
        }
      });
    }
  },
  mounted() {
    this.getChannelTransList();
    // this.getPeriodsList();
    this.getGoodsList();
    this.getPeriodsOtherList();
    this.getTeacherList()
    this.getGoodsOption()
  }
};
</script>
<style lang="less" scope>
.channel-trans-list {
  padding: 20px 0;
}

</style>