<template>
  <div class="sms">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
      <el-row>
       <el-col :span="4">
          <el-form-item label="交易订单号">
            <el-input v-model="searchFrom.order_id"  @change="getList"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="手机号">
            <el-input v-model="searchFrom.mobile"  @change="getList"></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="4">
          <el-form-item label="绑定状态">
            <el-select v-model="searchFrom.user_buy" placeholder="请选择" @change="getList" 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-col>
           <el-col :span="4">
          <el-form-item label="商品名称">
            <el-select v-model="searchFrom.goods_id" 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-col>
         <el-col :span="6">
          <el-form-item label="购买时间">
            <el-date-picker
              v-model="searchFrom.payTime"
               unlink-panels
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getList">
            </el-date-picker>
          </el-form-item>
        </el-col>
         <el-col :span="6">
          <el-form-item label="同步时间">
            <el-date-picker
              v-model="searchFrom.syncTime"
               unlink-panels
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getList">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button type="primary" plain @click="exportTable(list)">导出</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%">
       <el-table-column
        prop="order_id"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="购买人">
          <template slot-scope="scope">
            <div v-if='scope.row.user_id !== 0' style="display: flex">
              <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="goods_name"
        label="商品名称" >
      </el-table-column>
       <el-table-column
        prop="receiver_name"
        label="姓名" >
      </el-table-column>
       <el-table-column
        prop="receiver_phone"
        label="手机号" >
      </el-table-column>
       <el-table-column
        label="收货地址" >
        <template slot-scope="scope">
          {{scope.row.receiver_province}} {{scope.row.receiver_city}} {{scope.row.receiver_area}} {{scope.row.receiver_address}}
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="购买时间" sortable>
      </el-table-column>
      <el-table-column
        prop="pay_time"
        label="下单时间"  sortable>
      </el-table-column>
       <el-table-column
        prop="buyer_comment"
        label="备注" >
      </el-table-column>
       <el-table-column
        label="操作"  v-if="!$store.state.readonly" >
         <template slot-scope="scope">
            <el-button @click="bindTeacher(scope.row)" size="mini" plain type="success">绑定老师</el-button>
          </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <teacher-dialog :dialogObj="dialogObj"></teacher-dialog>
  </div>
</template>

<script>
  import page from '../framework/page'
  import teacherDialog from './dialog'
  import {getyunjiApi,getGoodsListApi,exportExcelApi} from "../../service/api";
  import {GOODSTYPE} from "../../util/wordbook";
  export default {
    name: "smsRecord",
    components:{
      page,
      teacherDialog
    },
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        useTypeList:[
          {
            user_buy:0,
            value:'未绑定'
          },
          {
            user_buy:1,
            value:'已绑定'
          },
        ],
        searchFrom: {
          goods_id: '',
          mobile:'',
          order_id:'',
          payTime:[],
          syncTime:[],
        },
        list: [],
        goodList:[],
         dialogObj:{
          show:false,
          title:'绑定老师',
          order_id:0,
          teacher_id: 0
        },
      }
    },
    filters:{
      filterStatus:function (value) {
        let msg = '';
        if(value === 0){
          msg = '未绑定'
        }else{
          msg= "已绑定"
        }
        return msg;
      },
       filterGoods(val){
          return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
    },
    mounted(){
      this.getList();
        this.getGoodsOption();
    },
    methods: {
      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.mobile){
          json.mobile = this.searchFrom.mobile
         }
          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.payTime && this.searchFrom.payTime.length > 0){
          json.start_at =this.searchFrom.payTime[0]
          json.end_at = this.searchFrom.payTime[1]
        }
        if(this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0){
          json.pull_start_at = this.searchFrom.syncTime[0]
          json.pull_end_at =this.searchFrom.syncTime[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;
        })
      },
       bindTeacher(data){
        this.dialogObj = {
          show:true,
          title:'绑定老师',
          id:data.id,
          teacher_id: data.teacher_id
        }
      },
        exportTable(data){
        if(data.length>0){
            let json = {};
        if (this.searchFrom.order_id) {
          json.order_id = this.searchFrom.order_id
        }
         if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) {
          json.user_buy = this.searchFrom.user_buy
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
         if (this.searchFrom.goods_id) {
          json.goods_id = this.searchFrom.goods_id
        }
       
       if(this.searchFrom.payTime && this.searchFrom.payTime.length > 0){
          json.start_at =this.searchFrom.payTime[0]
          json.end_at = this.searchFrom.payTime[1]
        }
        if(this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0){
          json.pull_start_at = this.searchFrom.syncTime[0]
          json.pull_end_at =this.searchFrom.syncTime[1]
        }
            exportExcelApi(`api/admin/yunji/order/export`,json);
        }
         
      },
    }
  }

</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>
