<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div>
      <div class="filter-container" ref="filter-container">
        <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="80px">
          <el-form-item label="申请状态">
            <el-select class="filter-item" v-model="listQuery.status" placeholder="申请状态">
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属大区">
            <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-form-item label="申请公司">
            <el-select class="filter-item" v-model="listQuery.companyList" 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-form-item label="预订月份" prop="selectedMonth4Query">
            <el-date-picker
              v-model="selectedMonth4Query"
              type="month"
              :editable="true"
              format="yyyy-MM"
              placeholder="请选择预订月份">
            </el-date-picker>
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
        </el-form>
      </div>
      <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column type="index" align="center" label="申请账号" width="200">
          <template scope="scope">
            <span>{{scope.row.accountName}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="申请公司" width="200">
          <template scope="scope">
            <span>{{scope.row.companyName}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="申请状态" width="100">
          <template scope="scope">
            <span v-if="scope.row.status==0">申请中</span>
            <span v-if="scope.row.status==1">已通过</span>
            <span v-if="scope.row.status==2">拒绝</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="出车用途" width="300">
          <template scope="scope">
            <span>{{scope.row.bookRemark}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="使用人/联系方式" width="250">
          <template scope="scope">
            <span>{{scope.row.user}} {{scope.row.userTel}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用车时间" width="250">
          <template scope="scope">
            <span>{{scope.row.startTimeStr}} 至 {{scope.row.endTimeStr}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="期望还车公司" width="200">
          <template scope="scope">
            <span>{{scope.row.wishRetCompanyName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="详情" width="100">
            <template scope="scope">
              <span style="color: #13CE66;cursor: pointer;" @click="handleDetail(scope.row)">订单详情</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
            <template scope="scope">
				<el-button size="small" type="success" @click="arrangementCars(scope.row)">安排用车</el-button>
                <el-button size="small" type="success" @click="pass(scope.row)">通过</el-button>
                <el-button size="small" type="danger" @click="reject(scope.row)">驳回</el-button>
                <el-button size="small" type="success" @click="rulesRecoed(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,40,50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 查看详情 -->
    <el-dialog title="调度详情" :visible.sync="dialogDetailVisible" class="order-details">
      <el-form label-width="100px">
        <h3>调度详情</h3>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请状态">
              <span v-if="detailItem.status==0">申请中</span>
              <span v-if="detailItem.status==1">已通过</span>
              <span v-if="detailItem.status==2">拒绝</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请账号">
              <span>{{detailItem.reviewerNameApply}}</span>
              <span style="margin-left:10px"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col :span="24">
            <el-form-item label="使用人">
              <span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.user}}</span>
              <span style="margin-left:10px" v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.userTel}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预定时间">
              <span>{{detailItem.startTimeStr}}</span> 至  <span>{{detailItem.endTimeStr}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="期望还车分公司">
              <span>{{detailItem.wishRetCompanyName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="出车用途">
              <span>{{detailItem.bookRemark}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <span>{{detailItem.remark}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="随车物品">
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
        <hr>
        <h3>用车安排</h3>
        <el-row>
          <el-col :span="5">
            <el-form-item label="车牌号">
              <span>{{detailItem.numberPlate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆编号">
              <span>{{detailItem.vehicleId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="当前停靠公司">
              <span>{{detailItem.liftCompanyName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="提车分公司">
              <span>{{detailItem.liftCompanyName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人">
              <span>{{detailItem.liftCompanyLeader}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间">
              <span>{{detailItem.actualStartDate}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="还车分公司">
              <span>{{detailItem.retCompanyName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人">
              <span>{{detailItem.retCompanyLeader}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间">
              <span>{{detailItem.actualEndDate}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提车公里数">
              <span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.mileageStart}}KM</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="还车公里数">
              <span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.mileageEnd}}KM</span>
            </el-form-item>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col :span="8">
            <el-form-item label="审核人操作">
              <span>{{detailItem.reviewerNameApply}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通过操作">
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="detailItem.status!=1" type="primary" @click="cancel">关闭</el-button>
        <el-button v-if="detailItem.status==1" type="primary" @click="arrangementCars()">安排车辆</el-button>
        <el-button v-if="detailItem.status==1" @click="handleReject(detailItem)">驳回</el-button>
      </div>
    </el-dialog>


    <el-dialog title="安排用车" :visible.sync="arrangementCarsDialogVisible">
      <el-form :model="formdata" :rules="rules" ref="form" label-width="110px">
        <h3>苏D 88888</h3>
        <el-row>
          <el-col :span="24">
            <el-form-item label="安排车辆" prop="phone">
              <el-input v-model="formdata.phone" placeholder="请输入车牌号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预定时间"  label-width="130px" style="padding-left:8px" required>
              <el-col :span="11">
                <el-form-item prop="starTimeStr">
                  <el-date-picker v-model="formdata.starTimeStr" type = "datetime" placeholder = "请选择提车时间" value-format=" yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2"><span>-</span></el-col>
              <el-col :span="11">
                <el-form-item prop="endTimeStr">
                  <el-date-picker v-model="formdata.endTimeStr" type = "datetime" placeholder = "请选择还车时间" value-format=" yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsEnd"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提车分公司"  label-width="130px" required>
              <el-select class="filter-item" v-model="formdata" placeholder="请选择提车分公司">
					        <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-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="还车分公司"  label-width="130px" required>
              <el-select class="filter-item" v-model="formdata" placeholder="请选择还车分公司">
					        <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-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="用途"  label-width="130px" required>
              <el-select class="filter-item" v-model="formdata" placeholder="请选择用途">
					        <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-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注"  label-width="130px" required>
              <el-input v-model="formdata.phone" placeholder="请输入车牌号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "utils/dateFormattor";

import {
  toEast8Date,
  deepCopyDate,
  newEast8Date,
  convertDate2Str,
  timestamp2Date
} from "utils/dateUtils";
import { mapGetters } from "vuex";
import { getToken } from "utils/auth";
import {getDispatchList} from "api/vehicle/dispatchApply";
import {getAllBranchCompanyByZoneId} from 'api/order/rentVehicle';
import {getAllZone} from 'api/base_info/constant/';
import Element1 from "../../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";

export default {
  name: "conponList",
  components: {
    ElCol,
    ElRow,
    Element1
  },
  data() {
    return {
      dialogDetailVisible:false,
      detailItem:{},
      rules: {
        phone: [
          {
            type: "string",
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          { pattern: /^1[3456789]\d{9}$/, message: "手机号码错误" }
        ],
        couponNum: {
          type: "string",
          required: true,
          message: "请输入添加张数",
          trigger: "blur"
        },
        couponId: {
          required: true,
          message: "请选择优惠券"
        }
      },
      arrangementCarsDialogVisible: false,
      BASE_API: process.env.BASE_API,
      showLoadingBody: false,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        zoneId:'',
        companyList:[],
        status:'',
        dispatchMonth:undefined,
      },
      statusList:[
        {
          id:'',
          name:'全部'
        },{
          id:0,
          name:'申请中'
        },{
          id:1,
          name:'已通过'
        },{
          id:2,
          name:'拒绝'
        }
      ],
      inline: true,
      tableKey: 0,
      formdata: {
        phone: "",
        couponNum: "",
        couponId: ""
      },
      baranchQuery: {
				zoneId:null
      },
      pickerOptionsEnd: {
            disabledDate: time => {
                const beginDateVal = new Date(this.formdata.starTimeStr).getTime()
                if (beginDateVal) {
                    return time.getTime() < beginDateVal - 8.64e7
                }
            }
        },
				allBranchCompany:[],
    };
  },
  created() {
    this.getList();
    this.get_title();
  },
  computed: {
    ...mapGetters(["elements"]),
    selectedMonth4Query: {
        get: function () {
          if (this.$utils.isString(this.listQuery.dispatchMonth) && this.listQuery.dispatchMonth !== '') {
            return toEast8Date(this.listQuery.dispatchMonth);
          }
          return undefined;
        },
        set: function (date) {
          if (this.$utils.isDate(date)) {
            this.listQuery.dispatchMonth = formatDate(date, 'yyyy-MM');
          } else {
            this.listQuery.dispatchMonth = undefined;
          }
        }
      },
      //获取大区列表
			getAllZoneList(){
			  return getAllZone();
			},
  },
  methods: {
    cancel() {
      this.dialogDetailVisible = false;
    },
    handleDetail(row){
      this.detailItem = row;
      this.dialogDetailVisible = true;
    },
    //监听change事件
		getProvinceRegions(item) {
			this.listQuery.zoneId = item
			this.baranchQuery.zoneId = item
      this.listQuery.liftCompany = undefined;
			getAllBranchCompanyByZoneId(this.baranchQuery).then(response => {
				this.allBranchCompany = response.data;
			})
		},
		getAllBranchCompanyChange(item) {
			this.listQuery.liftCompany = item
		},
    get_title() {
      getTitle().then(response => {
        this.titleList = response.data;
      });
    },
    /**
     * 获取列表
     * */
    getList() {
      this.listLoading = true;
      getDispatchList(this.listQuery).then(response => {
        let totalCountRs = undefined;
        let listRs = undefined;
        if (!this.$utils.isEmpty(response.data.data) &&this.$utils.isInteger(response.data.totalCount)) {
          listRs = response.data.data;
          totalCountRs = response.data.totalCount;
          listRs.map(function(item) {
            item.startTimeStr = timestamp2Date(item.startTime);
            item.endTimeStr = timestamp2Date(item.endTime);
          });
        }
        this.listLoading = false;
        this.list = listRs;
        this.total = totalCountRs;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.getList();
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    arrangementCars() {
      this.dialogDetailVisible = false;
      this.arrangementCarsDialogVisible = true;
    }
  }
};
</script>
<style>
   .order-details .el-form-item{
     margin-bottom: 0px !important;
   }
   .order-details hr {
      height: 1px;
      background-color: #ccc;
      border: none;
    }
</style>