<template>
  <div class="app-container calendar-list-container">
		 <div class="filter-container" ref="filter-container">
		  <el-form ref="queryForm"  :model="listQuery" label-width="100px">
		    <el-row>
		      <el-col :span="5">
		        <el-form-item label="订单号">
		          <el-input v-model="listQuery.no" placeholder="请输入订单号"></el-input>
		        </el-form-item>
		      </el-col>
					<el-col :span="5">
					  <el-form-item label="手机号">
					    <el-input v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="8">
					  <el-form-item label="状态">
					    <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择状态">
								<el-option :key="null" label="无" :value="null" ></el-option>
								<el-option :key="2" label="取消" :value="2"></el-option>
								<el-option :key="3" label="待付款" :value="3"></el-option>
								<el-option :key="4" label="待出行" :value="4"></el-option>
								<el-option :key="5" label="出行中" :value="5"></el-option>
								<el-option :key="6" label="已完成" :value="6"></el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="时间">
							<el-date-picker v-model="listQuery.startTime" type = "date" placeholder = "请输入开始时间"></el-date-picker>
							<span>——</span>
							<el-date-picker v-model="listQuery.endTime" type = "date" placeholder = "请输入结束时间"></el-date-picker>
						</el-form-item>
					</el-col>
		    </el-row>
		  </el-form>
		  <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
		</div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading"
              border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="ID" width="70">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="订单号/创建时间">
        <template scope="scope">
          <span>{{scope.row.no}}</span>/<span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="名称/车牌号">
        <template scope="scope">
          <span>{{scope.row.name}}</span><br/><span>{{scope.row.vehicleNumberPlat}}</span>
        </template>
      </el-table-column>
			<el-table-column width="150" align="center" label="用户ID/用户名">
			  <template scope="scope">
			   <span>{{scope.row.userId}}</span>/<span>{{scope.row.username}}</span>
			  </template>
			</el-table-column>
			<el-table-column width="200" align="center" label="取车时间/还车时间">
			  <template scope="scope">
			   取:<span>{{dateFormat(scope.row.orderRentVehicleDetail.startTime)}}</span><br/>
				 还:<span>{{dateFormat(scope.row.orderRentVehicleDetail.endTime)}}</span>
			  </template>
			</el-table-column>
      <el-table-column width="200" align="center" label="交车公司">
        <template scope="scope">
          <span>{{scope.row.startCompanyName}}</span><br/>
					<span>({{scope.row.orderRentVehicleDetail.startCityName}}{{scope.row.orderRentVehicleDetail.startAddr}})</span>
        </template>
      </el-table-column>
			 <el-table-column width="200" align="center" label="还车公司">
			  <template scope="scope">
			     <span>{{scope.row.endCompanyName}}</span><br/>
			    <span>({{scope.row.orderRentVehicleDetail.endCityName}}{{scope.row.orderRentVehicleDetail.endAddr}})</span>
			  </template>
			</el-table-column>
      <el-table-column width="110" align="center" label="订单价格">
        <template scope="scope">
          <span>{{scope.row.orderAmount}}</span>
        </template>
      </el-table-column>

			<el-table-column width="110" align="center" label="状态">
			  <template scope="scope">
					<span v-if="scope.row.status == '2'">取消</span>
					<span v-if="scope.row.status == '3'">待付款</span>
					<span v-if="scope.row.status == '4'">待出行</span>
					<span v-if="scope.row.status == '5'">出行中</span>
					<span v-if="scope.row.status == '6'">已完成</span>
			  </template>
			</el-table-column>

      <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <!--status订单状态\n0--删除\n1--创建订单\n2--取消\n3--待付款\n4--待出行\n5--出行中（进行中）\n6--已完成     refundStatus退款状态  0、未退款  1、已退还所有（取消订单时）2、 已退还部分（保留违章预备金）3、已退还所有押金（扣除该扣除的）-->
          <!--v-if="scope.row.status == 6"-->
          <el-button size="small" v-if="scope.row.status == 6" type="success" @click="illegalInquiry(scope.row)">违章查询</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--违章查询弹框-->
    <Illegal :row="currentRow" v-if="illegalVisible" v-on:illegalEvent = "illegalEvent"></Illegal>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import Illegal from "./illegalModal";//违章查询
  import {
    formatDate
  } from '../../../utils/dateFormattor';
  import {
    page
  } from 'api/order/rentVehicle';
  import { mapGetters } from 'vuex';
  export default {
    name: 'branchCompanyStock',
    components: {
      Illegal,
    },
    data() {
      return {
        form: {
          id: null,
          companyId: null,
          companyName: null,
          name: null,
          tel: null,
          count: null,
          state: null
        },
        illegalVisible: false,//违章查询弹框
        rules: {
          // companyName: [
          //   {
          //     required: true,
          //     message: '请输入用户',
          //     trigger: 'blur'
          //   }
          // ],
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
					type: 1,
					no: null,
					phone:null,
					status:null,
					startTime: undefined,
					endTime:undefined
        },
        dialogFormVisible: false,
        dialogStatus: '',
        btn_del: true,
        btn_buy: true,
        btn_cancel: true,
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.btn_del = this.elements['branchCompany/stockApply:btn_delete'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 操作-违章查询按钮，显示违章弹框
       */
      illegalInquiry(row){
        this.currentRow = row;
        this.illegalVisible = true;
      },
      /**
       * 关闭违章查询弹框
       * */
      illegalEvent(params){
        this.illegalVisible = false;
        if(params){
          console.log(params);
        }
      },
      handleCancel(row) {
        this.$confirm('此操作将放弃购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelApply(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
			 handleFilter() {
			  this.listQuery.page = 1;
			  this.$refs.queryForm.validate(valid => {
			    if (valid) {
			      this.getList();
			    } else {
			      return false;
			    }
			  });
			},
			clearSearch() {
				this.listQuery ={
				  page: 1,
				  limit: 20,
					type: 1,
					no: '',
					phone:'',
					status:null,
					startTime: undefined,
					endTime:undefined
				}
				this.getList()
			},
      /**
       * 获取订单列表
       */
      getList() {
        this.listLoading = true;
				console.log(this.listQuery)
				if(this.listQuery.startTime){
				  this.listQuery.startTime = this.listQuery.startTime.getTime();
				}
				if(this.listQuery.endTime){
				  this.listQuery.endTime = this.listQuery.endTime.getTime();
				}
        page(this.listQuery)
          .then(response => {
            this.list = response.data.data;
            this.total = response.data.totalCount;
            this.listLoading = false;
          })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
			dateFormat(timestamp) {
				let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			},
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
