<template>
  <!-- 出车弹窗 -->
  <el-dialog title="出车" :visible.sync="departureDialogVisible">
    <el-form :model="departureForm" :rules="rules" ref="departureForm" label-width="120px">
      <el-form-item label="车牌号">
        <el-input v-model="departureForm.numberPlate" disabled></el-input>
      </el-form-item>
      <el-form-item label="出车时间" prop="departureDate">
        <el-date-picker v-model="departureForm.departureDate" type="date" disabled
                        format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="出车分公司" prop="departureBranchCompanyName">
        <el-autocomplete
          class="inline-input"
          v-model="departureForm.departureBranchCompanyName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelectPark1"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="用途" prop="use">
        <el-input v-model="departureForm.use" placeholder="请输入出车用途"></el-input>
      </el-form-item>
      <el-form-item label="使用人" prop="user">
        <el-input v-model="departureForm.user" placeholder="请输入出车使用人"></el-input>
      </el-form-item>
      <el-form-item label="使用人联系方式" prop="userTel">
        <el-input v-model="departureForm.userTel" placeholder="请输入出车使用人联系方式"></el-input>
      </el-form-item>
      <el-form-item label="验车人" prop="checkMan">
        <el-input v-model="departureForm.checkMan" placeholder="请输入出车验车人"></el-input>
      </el-form-item>
      <el-form-item label="验车人联系方式" prop="checkManTel">
        <el-input v-model="departureForm.checkManTel" placeholder="请输入出车验车人联系方式"></el-input>
      </el-form-item>
      <el-form-item label="公里数" prop="mileage">
        <el-input v-model.number="departureForm.mileage" placeholder="请输入出车时公里数"></el-input>
      </el-form-item>
      <el-form-item label="目的地分公司" prop="expectArrivalBranchCompanyName">
        <el-autocomplete
          class="inline-input"
          v-model="departureForm.expectArrivalBranchCompanyName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelectExport"
        ></el-autocomplete>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDeparture()">取 消</el-button>
      <el-button type="primary" @click="departureVehicleHandler('departureForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    page,
    addObj,
    getObj,
    dealObj
  } from 'api/vehicle/vehicleWarningMsg/';

  import rsCode from '../../utils/rsCode';

  import {mapGetters} from 'vuex';
  import {
    getAllCompany,
    getAll
  } from 'api/base_info/branch_company/';
  import {
    departureVehicle,
  } from 'api/vehicle/active';
  export default {
    props: ["departureRow"],
    name: 'departureDialog',
    components: {},
    data() {
      return {
        departureDialogVisible: false,//出车弹框
        departureForm: {
          vehicleId: null,
          numberPlate: null,
          departureDate: null,
          departureBranchCompanyId: null,//出车分公司id-默认停靠分公司id
          departureBranchCompanyName: '',//出车分公司-默认停靠分公司
          use: null,
          user: null,
          userTel: null,
          checkMan: null,
          checkManTel: null,
          expectArrivalBranchCompanyId: null,//目的地分公司
          expectArrivalBranchCompanyName: '',//目的地分公司名称
          mileage: null
        },
        rules: {
          departureBranchCompanyName: [
            {
              type: 'string',
              required: true,
              message: '请选择出车分公司',
              trigger: 'change'
            }
          ],
          expectArrivalBranchCompanyName: {
            type: 'string',
            required: true,
            message: '请选择目的地分公司',
            trigger: 'change'
          },
          use:{
            required: true,
            message: '请输入出车用途',
            trigger: 'blur'
          },
          userTel:{
            required: true,
            message: '请输入使用人联系方式',
            trigger: 'blur'
          },
          user:{
            required: true,
              message: '请输入出车使用人',
              trigger: 'blur'
          },
          checkMan:{
            required: true,
            message: '请输入验车人联系方式',
            trigger: 'blur'
          },
          checkManTel:{
            required: true,
            message: '请输入验车人联系方式',
            trigger: 'blur'
          },
          mileage:{
            type:"number",
            required: true,
            message: '请输入公里数',
            trigger: 'blur'
          }
        },
        allCompanies: {},
        allCompaniesArr: [],
        upkeepDialogVisible: false,
        allUpkeepItems: null,
        dialogStatus: undefined,
      }
    },
    created() {

    },
    watch: {
      departureDialogVisible(newValue, oldValue){
        if(!newValue){
          this.cleanDepartureForm();
          this.$emit("departureDialogEvent", false);
        }
      },
    },
    mounted() {
      let row = this.departureRow;
      this.cleanDepartureForm();
      //目的地分公司-默认所属分公司
      this.departureForm.expectArrivalBranchCompanyName = row.subBranchName;
      this.departureForm.expectArrivalBranchCompanyId = row.subordinateBranch;
      //出车分公司-默认停靠分公司
      this.departureForm.departureBranchCompanyId = row.parkBranchCompanyId;
      this.departureForm.departureBranchCompanyName = row.parkBranchCompanyName;
      this.departureForm.departureDate = Date();//出车时间
      this.departureForm.mileage = row.mileage;//公里数
      this.departureDialogVisible = true;
      let that = this;
      let selectArry = [];
      getAll()
        .then(response => {
          this.allCompaniesArr = response.data;
          response.data.map(function(item){
            item.value = item.name;
            selectArry.push(item);
          });
        });  
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });

      this.departureForm.mileage = row.mileageLastUpdate?row.mileageLastUpdate: row.mileage;
      this.departureForm.vehicleId = row.vehicleId ? row.vehicleId: row.id;
      this.departureForm.numberPlate = row.numberPlate;
      this.upkeepDialogVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
        'vehicleWarningMsgType'
      ])
    },
    methods: {
      querySearch(queryString, cb) {
        let selectArry = [];
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.selectArry = selectArry;
        var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      /**
       * 出车分公司
       * */
      handleSelectPark1(item){
        if(item.value == "全部"){
          this.departureForm.departureBranchCompanyId = undefined;
          this.departureForm.departureBranchCompanyName = "";
        } else {
          this.departureForm.departureBranchCompanyId = item.id;
          this.departureForm.departureBranchCompanyName = item.name;
        }
      },
      /**
       * 目的地分公司
       * */
      handleSelectExport(item){
        if(item.value == "全部"){
          this.departureForm.expectArrivalBranchCompanyId = undefined;
          this.departureForm.expectArrivalBranchCompanyName = "";
        } else {
          this.departureForm.expectArrivalBranchCompanyId = item.id;
          this.departureForm.expectArrivalBranchCompanyName = item.name;
        }
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
        };
      },
      getTypeName: function(type) {
        if (this.$utils.isEmpty(this.vehicleWarningMsgType[type])) {
          return '未知';
        }
        return this.vehicleWarningMsgType[type].val;
      },
      /**
       * 出车-确定
       * */
      departureVehicleHandler(formName) {
        console.log(this.departureForm);
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            departureVehicle(this.departureForm).then(response => {
              if (response.code === rsCode.RS_CODE_SUC) {
                this.departureDialogVisible = false;
                this.$notify({
                  title: '成功',
                  message: '出车成功',
                  type: 'success',
                  duration: 2000
                });
                this.cleanDepartureForm();
                this.$emit("departureDialogEvent", true);
//                this.getList();
              } else {
                this.$notify({
                  title: '失败',
                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                  type: 'error',
                  duration: 2000
                });
              }
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 出车-弹框-取消
       * */
      cancelDeparture() {
        this.cleanDepartureForm();
        this.$emit("departureDialogEvent", false);
      },
      /**
       * 清空保养弹框数据
       */
      cleanDepartureForm() {
        this.departureForm = {
          vehicleId: null,
          numberPlate: null,
          departureDate: null,
          departureBranchCompanyId: null,//出发地分公司id
          departureBranchCompanyName: '',//出发地分公司名称
          use: null,
          user: null,
          userTel: null,
          checkMan: null,
          checkManTel: null,
          expectArrivalBranchCompanyId: null,//目的地分公司id
          expectArrivalBranchCompanyName: '',//目的地分公司名称
          mileage: null
        };
      }
    }
  }
</script>
