<template>
   <!-- 优惠卷管理 -->
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container display" style="margin: 10px 0 10px 0;font-size:16px;color:#666666">
      <div>
       <span >公司名称：</span>
        <el-select style="margin-right:60px" @focus="oncityList" v-model="customerName"  size="medium" clearable value-key="areaId" filterable placeholder="请选择公司名称" >
              <el-option
              v-for="item in areaList"
              :key="item.customerId"
              :label="item.linkmanName"
              :value="item.customerId">
            </el-option>
        </el-select>
      </div>

      <div>
        <span>下单时间：</span>

            <el-date-picker type="datetime"  placeholder="选择开始日期时间"  v-model="beginTime" 
            :clearable="false" default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss"  style="width: 200px;"></el-date-picker>


        <span class="line" style="padding:0px 10px 0px 10px">-</span>

            <el-date-picker type="datetime" placeholder="选择结束日期时间" v-model="endTime" 
            :clearable="false" value-format="yyyy-MM-dd HH:mm:ss"  default-time="23:59:59" style="width: 200px;" ></el-date-picker>
     
        <!-- <el-date-picker
          type="datetimerange"
          style="margin-right:60px"
          v-model="limitedDate"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          @change="begindate(value1)"
          :default-time="['00:00:00']">
        </el-date-picker> -->
      </div>
    <!-- <span style="margin-left:50px;">支付时间：</span>
    <el-date-picker    
      v-model="value2"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :clearable="false"
      value-format="yyyy-MM-dd HH:mm:ss"      
      @change="enddate(value2)"
      :default-time="['00:00:00']">
    </el-date-picker> -->

     

        <el-button style="margin-left:20px; width:90px;  " size="small" type="primary" icon="el-icon-search" @click="handleFind">查询
        </el-button>
        <el-button style="width:90px; " size="small" type="primary" icon="el-icon-search" @click="handempty">清空
        </el-button>

      
    </div>

    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="公司名称"  align="center">
        <template slot-scope="scope">
          <span>{{scope.row.customerName}}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="面额" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.flowAmount}}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="金额" width="110" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="归属地"  align="center">
        <template slot-scope="scope">
          <span>{{scope.row.mobileHome}}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号"  show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.usedMobile }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态"  align="center">
        <template slot-scope="scope">
          <span>{{scope.row.gwStatus}}</span>
        </template>
      </el-table-column>

     

    <el-table-column label="下单时间"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.limitedDate}}</span>
        </template>
      </el-table-column>



    </el-table>

    <!--分页-->
    <div class="pagination">
          <el-pagination
          current-page.sync="currentPage"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
      <!-- <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="handleCurrentChange"
      /> -->
    </div>

   
  </div>
</template>

<script>
import { partList } from '@/api/work'
import { getList,Listarea} from '@/api/dataForm'
import { parseTime } from '@/utils/index'
import { getUserInfo} from '@/api/user'

export default {
  data() {
    return {
      size: 'small',
      tableData: [],
      customerName:"",
      limitedDate:"",
      value2:"",
      status:"",
      appId:"",
      phone:"",
      orderBeginTime: "",
      orderEndTime: "",
      orderPayBeginTime: "",
      orderPayEndTime: "",
      orderId:"",
      reaDesName:"",
      areaDesName:"",
      query: {
        name: ''
      },
      title: '',
      dialogFormVisible: false, // 控制弹出框
      formLabelWidth: '120px',
      isEditForm: false,
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总数量
      // 分类菜单列表
      deptData: [],
      options: [],
      // tree配置项
      deptTreeProps: {
        label: 'name',
        children: 'children'
      },
      applyTime:null,
      dataForm: {},
      loading: false,
      dialogVisible: false,
      editLoading: false,
      userId:"",
      type:"",
      areaList:[],   //搜索区域的下拉信息
      house:[],     //搜索驿站下拉信息
      sohouse:"",
      beginTime:"",
      endTime:""
    }
  },
  created() {
    let nowDate = new Date()
  let date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate()
  }
  let systemTime = date.year + '-' + date.month + '-' + date.date
  this.beginTime = systemTime + " 00:00:00"
  this.endTime = systemTime + " 23:59:59"
    // this.beginTime=new Date(new Date(new Date().toLocaleDateString()).getTime());
    // this.endTime= new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),  
    this.findUserInfo()
    // this.getpartList()
  },
  methods: {
    parseTime,
    getTenantList: function() {
      this.loading = true
      const params = new URLSearchParams()
      params.append('customerIds', this.customerName)
      params.append('beginDate', this.beginTime)
      params.append('endDate', this.endTime)
      // params.append('limitedDate', this.limitedDate)
      // params.append('orderPayBeginTime', this.orderPayBeginTime)
      // params.append('orderPayEndTime', this.orderPayEndTime)
      params.append('type', this.type)
      // params.append('orderId', this.orderId)
      // params.append('appId', this.appId)
      // params.append("phoneNumber",this.phone)
      params.append('current', this.currentPage)
      params.append('size', this.pageSize)
      params.append("userId",this.userId)
      // params.append("areaId",this.areaDesName)
      // params.append("courierId",this.reaDesName)
    //   params.append('name', this.query.name)
      getList(params).then(response => {
        this.loading = false
        this.tableData = response.data.data.records;
        // console.log("1"+ JSON.stringify(response.data.data.records))
        this.total = response.data.data.total;
      })
    },
     // 加载用户个人信息
    findUserInfo: function() {
      getUserInfo().then((res) => {
      //  this.dataForm.userId.push(res.data.data.userId)
      this.userId=res.data.data.userId
      this.type=res.data.data.type
      this.getTenantList()
      })
    },
    //获取公司数据
    oncityList(){
      const params = new URLSearchParams()
      params.append('userId', this.userId)
      params.append('type', this.type)
      Listarea(params).then(res=>{
        this.areaList=res.data.data
      })
    },

     //驿站
    onhouse(userid,type,areaId){ 
    //   let id=areaId
    //   console.log(id)
      const params = new URLSearchParams()
      params.append('areaId',areaId)
      datahouse(userid,type,params).then(res=>{
        this.house=res.data.data
      })
    },
  
    //订单时间
    begindate(val){
        this.orderBeginTime=val[0]
        this.orderEndTime=val[1]
    },
    enddate(val){
        console.log(val)
    },
    handempty(){
      this.customerName=""
      this.beginTime=""
      this.endTime=""
      this.getTenantList()
    },
    // 查找
    handleFind: function() {
      this.handleCurrentChange(1)
      // this.currentPage=1  
      // this.getTenantList()
    },
    dateform:function(val){
        let str = val.toString();
        let a = str.substring(0, 4);
        let b = str.substr(4, 2)
        let c = str.substr(6, 2)
        let d = str.substr(8, 2)
        let e = str.substr(10, 2)
        let f = str.substr(12, 2)
        return a + "-" + b + "-" + c + " " + d + ":" + e + ":" + f
    },
    //查看
    lookdataForm:function(row){
        // console.log("我在点击查看")
        lookOrder({
        orderId:row.orderId
      }).then(response => {
        this.dataForm = response.data.data 
        this.dataForm.orderTime=this.dateform(this.dataForm.orderTime)
        this.dataForm.completeTime=this.dateform(this.dataForm.completeTime)
        this.dataForm.wxTime=this.dateform(this.dataForm.wxTime)
      })
      
        // this.dataForm=info
        this.dialogVisible = true
    },
     handleSizeChange:function(val){
      this.pageSize=val
      this.getTenantList()
    },
    // 换页
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTenantList()
    },

    // 退单
  
  
    submitEditForm: function() {
     
    }
  }
}
</script>


<style scoped>
    .display{
      /* border:1px solid red; */
      display: flex;
      flex-direction :row;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 90%;
      height: 150px;
      align-items: center;
      /* padding-top: 20px; */
    }
</style>>
  



