<template>
  <div class="sms">
    <el-form ref="searchFrom" size="small" inline :model="searchFrom" label-width="80px">
      <el-form-item label="用户ID">
        <el-input v-model="searchFrom.user_id" style="width: 80px"></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" placeholder="请选择" style="width: 150px" @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 label="来源" class="test">
        <el-input v-model="searchFrom.invite_type	" style="width: 180px" placeholder="来源CODE">
          <template slot="prepend">CC -</template>
        </el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select multiple v-model="searchFrom.status" style="width: 230px" placeholder="请选择" @change="getList" clearable>
          <el-option v-for="item in orderStatusOption" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="沟通情况">
        <el-select multiple v-model="searchFrom.user_status" style="width: 230px" placeholder="请选择" @change="getList" clearable>
          <el-option v-for="item in USERSTATUS" :key="item.code" :label="item.lable" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定状态">
        <el-select v-model="searchFrom.user_buy" placeholder="请选择" @change="getList"  style="width: 100px" clearable>
          <el-option v-for="item in useTypeList" :key="item.user_buy" :label="item.value" :value="item.user_buy">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="老师">
        <el-select v-model="searchFrom.teacher_id" placeholder="请选择" @change="getList" clearable filterable 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 label="订单号">
        <el-input v-model="searchFrom.order_id"></el-input>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          v-model="searchFrom.createTime"
          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']"
          @change="getList">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="付款时间">
        <el-date-picker
          v-model="searchFrom.pullTime"
          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']"
          @change="getList">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="激活时间">
        <el-date-picker
          v-model="searchFrom.active_at"
          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']"
          @change="getList">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="primary" plain @click="exportTable(list)" v-if="$store.state.export">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          :show-file-list="false"
          :onSuccess="fileSuccess"
          :headers="uploadHeader"
          :data="{param_token:param_token}"
          action="/api/admin/order/import"
        >
          <el-button type="primary" plain>导入</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item v-if="!$store.state.readonly">
        <el-button type="primary" plain @click="downLoad()">excel模板下载</el-button>
      </el-form-item>
    </el-form>
    <div style="position: relative">
      <el-tabs v-model="searchFrom.course_type" type="card" style="background: white;padding-top: 10px" @tab-click="getList">
        <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="list" size="mini" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :selectable="selectedFlag"
        width="55">
      </el-table-column>
      <el-table-column prop="order_id" width="80" label="订单号">
      </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="periods_title" label="期数">
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称">
      </el-table-column>
      <el-table-column prop="invite_type" label="来源">
        <template slot-scope="scope">
          {{scope.row.invite_type}}（{{scope.row.invite_name}}）
        </template>
      </el-table-column>
      <el-table-column prop="teacher_name" label="班级老师">
      </el-table-column>
      <el-table-column label="付款状态" width="80">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.status === 5 || scope.row.status === 3" @click="showRef(scope.row)">{{scope.row.status|status}}</el-button>
          <div v-if="scope.row.status !== 5 && scope.row.status !== 3">{{scope.row.status|status}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="实付金额" width="70">
        <template slot-scope="scope">
          {{scope.row.money/100}}元
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="150px">
        <template slot-scope="scope">
          姓名：{{scope.row.receiver_name}}
          <br>
          tel：{{scope.row.receiver_phone}}
          <br>
          {{scope.row.receiver_province}} {{scope.row.receiver_city}} {{scope.row.receiver_area}} {{scope.row.receiver_address}}
        </template>
      </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_time" label="下单时间" width="90">
      </el-table-column>
      <el-table-column prop="pay_time" label="付款时间" width="90">
      </el-table-column>
      <el-table-column prop="user_status" :formatter="userStatusFormatter" 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="270">
        <template slot-scope="scope">
          <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
          <el-button @click="onRefund(scope.row.id, scope.row.money)" type="warning" plain size="mini" v-if="(scope.row.status === 1 || scope.row.status === 4|| scope.row.status === 5) && $store.state.orderRefund">
            退款
          </el-button>
          <el-button @click="editAdress(scope.row)" v-if="!$store.state.readonly" size="mini" plain type="success">编辑地址</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" />
    <refund-dialog :dialogObj="refundDialogObj" @reflash="onAfterRefund" @changeShow="changeShow"></refund-dialog>
    <refund-detail :dialogObj="refundDetail"/>
    <el-dialog :title="classObj.title" :visible.sync="classObj.show" center width="800px">
      <div style="margin:10px;color: #888888">
        最新同步时间：{{last_pull_time}}
      </div>
    <el-table :data="classList" >
      <el-table-column prop="teacher_name" label="班级老师">
      </el-table-column>
       <el-table-column prop="num" label="预计入班人数">
      </el-table-column>
    </el-table>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
    <el-dialog title="编辑地址"  :visible.sync="adressDialog" left width="500px">
      <el-form ref="searchFrom" size="small"  :model="adressData" label-width="125px">
        <el-form-item label="用户姓名" style="width: 400px" >
          <el-input v-model="adressData.receiver_name" ></el-input>
        </el-form-item>
        <el-form-item label-width="125px" style="width: 400px"  label="收货人手机号">
          <el-input v-model="adressData.receiver_mobile" ></el-input>
        </el-form-item>
        <el-form-item label="收货人省" label-width="125px" style="width: 400px" >
          <el-input v-model="adressData.receiver_province" ></el-input>
        </el-form-item>
        <el-form-item label="收货人市" label-width="125px" style="width: 400px" >
          <el-input v-model="adressData.receiver_city" ></el-input>
        </el-form-item>
        <el-form-item label="收货人区" label-width="125px" style="width: 400px" >
          <el-input v-model="adressData.receiver_area" ></el-input>
        </el-form-item>
        <el-form-item label-width="125px" style="width: 400px" left label="收货人详细地址">
          <el-input type="textarea" v-model="adressData.receiver_address" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="adressDialog = false">取 消</el-button>
        <el-button type="primary" @click="editAdressCf">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import page from "../framework/page";
import md5 from 'js-md5';
import refundDialog from "../order/refundDialog";
import refundDetail from "../order/refundDetail";
import {
  getyunjiApi,
  yunjiOrderTeacherApi,
  getGoodsListApi,
  exportExcelApi,
  getTeacherListApi,
  orderDescApi,
  editOrderAdressApi
} from "../../service/api";
import {
  ORDERSTATUS,
  GOODSTYPE,
  ORDERSTATUSOPTION,
  USERSTATUS,
  USERSTATUSFORMATER
} from "../../util/wordbook";

export default {
  name: "smsRecord",
  components: {
    page,
    refundDialog,
    refundDetail
  },
  data() {
    let singjson = {
      sing: "singsingenglish21000"
    };
    return {
      adressDialog:false,
      adressData:{},
      USERSTATUS:USERSTATUS,
      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:localStorage.getItem('cc_token')},
      param_token:md5(JSON.stringify(singjson)),
      nowPage: 1,
      total: 0,
      limit: 10,
      useTypeList: [
        {
          user_buy: 0,
          value: "未绑定"
        },
        {
          user_buy: 1,
          value: "已绑定"
        }
      ],
      searchFrom: {
        goods_id: "",
        mobile: "",
        active_at:[],
        invite_type:'',
        status: [1],
        createTime:[],
        course_type:'-1',
        pullTime:[],
        order_id: "",
        teacher_id: "",
        user_id:"",
        nickname:"",
        user_status:[]
      },
      refundDialogObj: {
        show: false,
        id: "",
        order_type:' other',
        money: 0
      },
      orderStatusOption: ORDERSTATUSOPTION,
      list: [],
      teacherList: [],
      goodList: [],
      refundDetail: {
        show: false,
        out_trade_no: ""
      },
      teacherId:null,
      classObj:{
        show: false,
        title: "当前同步进度",
        order_id: 0,
        teacher_id: 0
      },
      multipleSelection:[],
      classList:[],
      last_pull_time:"无"
    };
  },
  filters: {
    filterStatus: function(value) {
      let msg = "";
      if (value === 0) {
        msg = "未绑定";
      } else {
        msg = "已绑定";
      }
      return msg;
    },
    status(value) {
      return ORDERSTATUS[value];
    },
    filterGoods(val) {
      return (
        "[" +
        val.id +
        "]" +
        "[" +
        GOODSTYPE[val.goods_type] +
        "]" +
        "[" +
        val.current_price / 100 +
        "元]" +
        val.name
      );
    }
  },
  mounted() {
    this.getList();
    this.getGoodsOption();
    this.getTeacherList();
  },
  methods: {
    editAdress(row){
      // editOrderAdressApi
      this.adressDialog = true
      this.adressData ={
        receiver_name:row.receiver_name,
        receiver_mobile:row.receiver_mobile,
        receiver_province:row.receiver_province,
        receiver_city:row.receiver_city,
        receiver_area:row.receiver_area,
        receiver_address:row.receiver_address,
        id:row.id,
      }
    },
    editAdressCf(){
      editOrderAdressApi(this.adressData.id,this.adressData).then(res => {
        this.getList();
        this.$message('修改成功');
        this.adressDialog = false;
      });
    },
    userStatusFormatter(val){
      return(USERSTATUSFORMATER[val.user_status])
    },
    pullAll(){
      if(this.multipleSelection.length < 1){
        this.$message('请选择订单');
        return false;
      }
      if(!this.teacherId){
        this.$message('请选择老师');
        return false;
      }
      let json = {
        order_ids:[]
      };
      this.multipleSelection.forEach(i=>{
        json.order_ids.push(i.id)
      });
      this.$confirm(`是否确定将这${json.order_ids.length}笔订单分配给该老师?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        yunjiOrderTeacherApi(this.teacherId,{order_ids:json.order_ids.join(',')}).then(res=>{
          this.multipleSelection = [];
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.getList();
        })
      }).catch(() => {
      });

    },
    selectedFlag(row){
      return row.user_id === 0
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onAfterRefund() {
      this.refundDialogObj.show = false;
      this.getList();
    },
    showRef(data) {
      this.refundDetail.show = true;
      this.refundDetail.out_trade_no = data.order_id;
    },
    changeShow(data) {
      this.refundDialogObj.show = data;
    },
    onRefund(id, money) {
      this.refundDialogObj.id = id;
      this.refundDialogObj.money = money;
      this.refundDialogObj.show = true;
    },

    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}`;
    },
    fileSuccess(){
      this.$message({
        message: '提交成功，请稍后刷新',
        type: 'success'
      });
    },
    downLoad(){
      window.open('/static/外部订单模板.xlsx')
    },
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    getTeacherList() {
      let json = {
        page: 1,
        limit: 200
      };
      getTeacherListApi(json).then(res => {
        this.teacherList = res.list;
      });
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    getList() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      if (this.searchFrom.mobile) {
        json.mobile = this.searchFrom.mobile;
      }
      if (this.searchFrom.status) {
        json.status = this.searchFrom.status.join(',');
      }
      if (this.searchFrom.course_type !== '-1') {
        json.course_type = this.searchFrom.course_type;
      }
       if (this.searchFrom.nickname) {
        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 || this.searchFrom.user_buy === 0) {
        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.user_status.length) {
        json.user_status = this.searchFrom.user_status.join(',');
      }
      if (this.searchFrom.invite_type) {
        json.invite_type = this.searchFrom.invite_type;
      }
      if (this.searchFrom.createTime && this.searchFrom.createTime.length === 2){
        json.start_at = this.searchFrom.createTime[0];
        json.end_at = this.searchFrom.createTime[1]
      }
      if (this.searchFrom.active_at&&this.searchFrom.active_at.length === 2){
        json.active_start_at = this.searchFrom.active_at[0];
        json.active_end_at = this.searchFrom.active_at[1]
      }
      if (this.searchFrom.pullTime&&this.searchFrom.pullTime.length === 2){
        json.pay_start_at = this.searchFrom.pullTime[0];
        json.pay_end_at = this.searchFrom.pullTime[1];
      }
      getyunjiApi(json).then(res => {
        this.total = res.total;
        this.list = res.list ? res.list : [];
      });
    },
    getGoodsOption() {
      let json = {
        page: 1,
        limit: 100
      };
      getGoodsListApi(json).then(res => {
        this.goodList = res.list;
      });
    },
    editNote(id, desc) {
      this.$prompt("", "编辑备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputValue: desc || ""
      }).then(({ value }) => {
        this.$confirm("确定保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          orderDescApi({ desc: value }, id).then(res => {
            this.$message({
              type: "success",
              message: "编辑备注成功"
            });
            this.getList();
          });
        });
      });
    },
    exportTable(data) {
      if (data.length > 0) {
        let json = {};
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile;
        }
        if (this.searchFrom.status) {
          json.status = this.searchFrom.status.join(',');
        }
        if (this.searchFrom.course_type !== '-1') {
          json.course_type = this.searchFrom.course_type;
        }
        if (this.searchFrom.nickname) {
          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 || this.searchFrom.user_buy === 0) {
          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.invite_type) {
          json.invite_type = this.searchFrom.invite_type;
        }
        if (this.searchFrom.createTime && this.searchFrom.createTime.length === 2){
          json.start_at = this.searchFrom.createTime[0];
          json.end_at = this.searchFrom.createTime[1]
        }
        if (this.searchFrom.active_at&&this.searchFrom.active_at.length === 2){
          json.active_start_at = this.searchFrom.active_at[0];
          json.active_end_at = this.searchFrom.active_at[1]
        }
        if (this.searchFrom.pullTime&&this.searchFrom.pullTime.length === 2){
          json.pay_start_at = this.searchFrom.pullTime[0];
          json.pay_end_at = this.searchFrom.pullTime[1];
        }
        console.log(json)
        exportExcelApi(`api/admin/yunji/order/export`, json);
      }
    },
    classListOption() {
      this.classObj.show=true;
      getyunjiApi({ page: 1,limit: 200}).then(res => {
        this.classList=res.teacher;
        if(res.last_pull_time){
        this.last_pull_time=res.last_pull_time;
        }
      });
    }
  }
};
</script>

<style scoped>
.sms {
  padding: 20px 0;
}

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

  border-radius: 50%;
}
</style>
<style>
.userInfo > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

</style>
