<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="所属地区" prop="zoneId">
					    <el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择" @change="getProvinceRegions">
					      <el-option :key="undefined" label="无" :value="undefined"></el-option>
					      <el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
					<el-col :span="5">
					  <el-form-item label="所属公司" prop="startCompanyId">
					      <el-select class="filter-item" v-model="listQuery.startCompanyId" placeholder="请选择" @change="getAllBranchCompanyChange">
					        <el-option :key="undefined" label="无" :value="undefined"></el-option>
					        <el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
					      </el-select>
					  </el-form-item>
					</el-col>
		      <el-col :span="5">
		        <el-form-item label="订单号">
		          <el-input v-model="listQuery.no" type="text" 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>
		  </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><br/>
				 <span>{{scope.row.crtTime}}</span>
       </template>
     </el-table-column>
     <el-table-column width="200" align="center" label="名称">
       <template scope="scope">
         <span>{{scope.row.name}}</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="150" align="center" label="报名人数">
        <template scope="scope">
          <span>成人{{scope.row.orderTourDetail.adultNum}}  儿童{{scope.row.orderTourDetail.childNum}}</span>
        </template>
      </el-table-column>
			<el-table-column width="200" align="center" label="活动日期">
			  <template scope="scope">
			    <span>{{dateFormat(scope.row.orderTourDetail.startTime)}}</span>
					-
					<span>{{dateFormat(scope.row.orderTourDetail.endTime)}}</span>
			  </template>
			</el-table-column>
			 <el-table-column width="150" align="center" label="出发公司">
			  <template scope="scope">
			    <span>{{scope.row.startCompanyName}}</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 width="110" align="center" label="订单详情">
			  <template scope="scope">
					<span style="color: #13CE66;cursor: pointer;" @click="handleBuy(scope.row)">订单详情</span>
			  </template>
			</el-table-column>
     <!-- <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <el-button v-if="btn_buy && scope.row.state == 0" size="small" type="success" @click="handleBuy(scope.row)">订单详情</el-button>
					<el-button v-if="btn_buy && scope.row.state == 0" size="small" type="success" @click="handleBuy(scope.row)">操作</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <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>
		
		 <el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
		  <el-form :model="form" :rules="rules" ref="form" label-width="90px">
						<div class="label-title">
							<span >订单号:</span><span class="label-text">{{form.no}}</span>
							<span >支付时间:</span><span class="label-text">{{form.crtTime}}</span>
						</div>
						<div class="label-title">
							<span >订单状态:</span><span class="label-text">{{form.ststusName}}</span>
						</div>
				    <div class="label-title">
				    	<span >姓名/手机号:</span> <span class="label-text"><span >{{form.username}}</span>/<span>{{form.telephone}}</span></span>
				    </div>
						<div class="label-title">
							<span >配车:</span> <span class="label-text"><span >{{form.vehicleNumberPlat}}</span><a class="label-text" style="color: #1478F0;">重新配车></a></span>
						</div>
						<div class="label-title">
							<span >出发地:</span>  <span  class="label-text">{{form.orderTourDetail.startAddr}}</span>
						</div>
						<div class="label-title">
							<span >目的地:</span>  <span  class="label-text">{{form.orderTourDetail.endAddr}}</span>
						</div>
						<div class="label-title">
							<span >活动日期:</span>  <span  class="label-text">{{form.orderTourDetail.startTime}}~{{form.orderTourDetail.endTime}}</span>
						</div>
						<table class="orderDetail">
							<tr>
								<td>旅行</td>
								<td>价格</td>
								<td>人数</td>
								<td>保险</td>
							</tr>
								<tr>
									<td>{{form.name}}</td>
									<td>{{tourCostDetail}}</td>
									<td>成人:{{form.orderTourDetail.adultNum}}  儿童:{{form.orderTourDetail.childNum}}</td>
									<td>{{insureDetail}}</td>
								</tr>
								<tr>
									<td ></td>
									<td ></td>
									<td ></td>
									<td >共计:{{form.realAmount}}</td>
								</tr>
						</table>
						<div style="margin-top: 20px;">
								<div><span style="font-size: 20px;font-weight: bold;">联系人信息</span></div>
								<div style="margin-top: 10px;"><span>{{form.orderTourDetail.contactMan}}</span><span class="label-text">{{form.orderTourDetail.contactPhone}}</span></div><br/>
								<div><span>Email:</span><span class="label-text">{{form.orderTourDetail.contactEmail}}</span></div>
						</div>
						<div style="margin-top: 20px;">
								<div><span style="font-size: 20px;font-weight: bold;">出游人信息 成人{{form.orderTourDetail.adultNum}}人  儿童{{form.orderTourDetail.childNum}}人</span></div>
								<div style="margin-top: 10px;"><span>{{form.orderTourDetail.contactMan}}</span><span class="label-text">{{form.orderTourDetail.contactPhone}}</span></div><br/>
								<div><span>Email:</span><span class="label-text">{{form.orderTourDetail.contactEmail}}</span></div>
						</div>
							
							
		  </el-form>
		</el-dialog>
		
		
  </div>
</template>

<script>
  import {
   page,
 	getAllBranchCompany,
 	getAllBranchCompanyByZoneId
 } from 'api/order/rentVehicle';
  import { mapGetters } from 'vuex';
  import rsCode from '../../../utils/rsCode';
	import {
	  timestamp2Date
	} from 'utils/dateUtils';
	import {
	  getAllZone
	} from 'api/base_info/constant/';
	import {
	  formatDate
	} from '../../../utils/dateFormattor';
  export default {
    name: 'branchCompanyStock',
    data() {
      return {
         form: {
        					couponAmount: undefined,
        					crtHost: undefined,
        					crtName: undefined,
        					crtTime: undefined,
        					crtUser: undefined,
        					detailId: undefined,
        					endCompanyName: undefined,
        					goodsAmount: undefined,
        					hasDiscount: undefined,
        					hasMemberRight: undefined,
        					hasPay: undefined,
        					id: undefined,
        					name: undefined,
        					no: undefined,
        					orderAmount: undefined,
        					orderOrigin: undefined,
        					orderTourDetail: {
        						adultNum: undefined,
										childNum: undefined,
										contactEmail: undefined,
										contactMan: undefined,
										contactPhone: undefined,
										costDetail: undefined,
										crtTime: undefined,
										dayNum: undefined,
										endAddr: undefined,
										endTime: undefined,
										goodId: undefined,
										hasInsure: undefined,
										id: undefined,
										isOutside: undefined,
										orderId: undefined,
										siteId: undefined,
										spePriceId: undefined,
										startAddr: undefined,
										startCity: undefined,
										startCityName: undefined,
										startCompanyId: undefined,
										startTime: undefined,
										totalNumber: undefined,
										tourUserIds: undefined,
										updTime: undefined,
										verificationId: undefined
        					},
        					payOrigin: undefined,
        					picture: undefined,
        					realAmount: undefined,
        					refundStatus: undefined,
        					startCompanyName: undefined,
        					status: undefined,
        					ststusName:undefined,
        					telephone: undefined,
        					type: undefined,
        					updTime: undefined,
        					userId: undefined,
        					username: undefined,
        					vehicleNumberPlat: undefined,
        					version: undefined
        },
				bannerDialogVisible: false,//添加、编辑弹框
				modalTitle: '订单详情',
        rules: {
          // companyName: [
          //   {
          //     required: true,
          //     message: '请输入用户',
          //     trigger: 'blur'
          //   }
          // ],
        },
        applyState: {
          '-1': {
            key: -1,
            label: '放弃购买'
          },
          0: {
            key: 0,
            label: '申请中'
          },
          1: {
            key: 1,
            label: '确认购买'
          }
        },
        list: null,
        total: null,
        listLoading: true,
       listQuery: {
					page: 1,
					limit: 20,
					type: 2,
					no: null,
					phone:null,
					status:null,
					startTime: undefined,
					endTime:undefined,
					zoneId:undefined,
					startCompanyId: undefined
       },
			 //"{"key":"费用明细","val":"","children":[{"key":"成人价格","detail":"￥13800.00/人×1人","val":"￥13800.00"}]}"
			 costDetail:{
				 key:undefined,
				 val:undefined,
				 children:[
					 {
						 key:undefined,
						 detail:undefined,
						 val:undefined
					 }
				 ]
			 },
			 
			 baranchQuery: {
			 	zoneId:null
			 },
        dialogFormVisible: false,
        dialogStatus: '',
        btn_del: true,
        btn_buy: true,
        btn_cancel: true,
				allZoneArr:[],//全部片区
				allBranchCompany:[],
				tourCostDetail:'',
				insureDetail:'',//保险
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.btn_del = this.elements['branchCompany/stockApply:btn_delete'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ]),
      provinceRegions() {
        return getSonRegionByCodes(1);
      },
			//获取大区列表
			getAllZoneList(){
			  this.allZoneArr = getAllZone();
			  return getAllZone();
			},
      cityRegions() {
        if (!this.$utils.isInteger(this.form.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrProvince);
      }
    },
    methods: {
      handleBuy(row) {
					console.log(row)
					 this.form = row;
					if (this.form.status == 2) {
						this.form.ststusName = '取消';
					}
					if (this.form.status == 3) {
						this.form.ststusName = '待付款';
					}
					if (this.form.status == 4) {
						this.form.ststusName = '待出行';
					}
					if (this.form.status == 5) {
						this.form.ststusName = '出行中';
					}
					if (this.form.status == 6) {
						this.form.ststusName = '已完成';
					}
					this.form.orderTourDetail.startTime = timestamp2Date(this.form.orderTourDetail.startTime)
					 this.form.orderTourDetail.endTime = timestamp2Date(this.form.orderTourDetail.endTime)
					 this.costDetail = JSON.parse(this.form.orderTourDetail.costDetail)
					 var cost = '';
					 this.costDetail.children.forEach(function(a) {
						 cost += a.key + ":" +a.detail+" "
					 })
					 if(this.form.orderTourDetail.hasInsure == 0) {
						 this.insureDetail = "不需要保险"
					 }
						this.tourCostDetail = cost
					 this.bannerDialogVisible = true;
     },
			getProvinceRegions(item) {
								this.listQuery.zoneId = item
								this.baranchQuery.zoneId = item
								getAllBranchCompanyByZoneId(this.baranchQuery)
								.then(response => {
								  this.allBranchCompany = response.data;
								})
			},
			getAllBranchCompanyChange(item) {
							 this.listQuery.startCompanyId = item
			},
      handleCancel(row) {
        this.$confirm('此操作将放弃购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelApply(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delObj(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                });
                const index = this.list.indexOf(row);
                this.list.splice(index, 1);
              });
          });
      },
			 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: 2,
				 	no: null,
				 	phone:null,
				 	status:null,
				 	startTime: undefined,
				 	endTime:undefined,
				 	zoneId:undefined,
				 	startCompanyId: 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');
			},
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
<style>
	.label-text{
			margin-left: 10px;
			margin-right: 20px;
	}
		.label-title{
		margin-top: 10px;
	}
	.orderDetail tr td{
		width: 500px;
		text-align: center;
		border: 0.0625rem solid;
		margin-left: 100px;
		margin-right: 100px;
	}
	.label-value{
		margin-left: 80px;
		margin-right: 100px;
	}
</style>
