<template>
  <div>
    <div style="padding: 10px; margin-bottom: 80px">
      <el-form :model="form" ref="form" :rules="rules" size="small" label-width="110px" >
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <span style="font-weight: bold; font-size: 18px;">客户车辆信息</span>
          <el-dropdown trigger="click">
            <el-button type="primary">单据预览<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="handleClick">接车单</el-dropdown-item>
              <el-dropdown-item @click="handleClick">报价单</el-dropdown-item>
              <el-dropdown-item @click="handleClick">客户结算单</el-dropdown-item>
              <el-dropdown-item @click="handleClick">保险阶段单</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="车辆牌照号" prop="carId">
              <el-select v-model="form.carId" filterable style="width: 100%;" @change="e=>{carIdChange(e,)}" :disabled="flag == 2">
                <el-option v-for="(item,index) in carList" :key="index" :label="item.plateNumber" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="clientId">
              <el-select v-model="form.clientId" filterable style="width: 100%;" disabled @change="e=>{clientIdChange(e,'clientId')}">
                <el-option v-for="(item,index) in clientList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户类型" prop="clientType">
              <el-select v-model="form.clientType" placeholder="请选择" disabled style="width: 100%;">
                <el-option v-for="item in dict.type.client_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车架号" prop="carVin">
              <el-input v-model="form.carVin" placeholder="请输入车架号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <span style="font-weight: bold; font-size: 18px">维修车型</span>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="车型编码" prop="carTypeCode">
              <el-input v-model="form.carTypeCode" placeholder="请输入车型编码" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆品牌" prop="carBrand">
              <el-input v-model="form.carBrand" placeholder="请输入车辆品牌" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆型号" prop="carModel">
              <el-input v-model="form.carModel" placeholder="请输入车辆型号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="车辆配置" prop="carConfiguration">
              <el-input v-model="form.carConfiguration" placeholder="请输入车辆配置" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆颜色" prop="carColour">
              <el-input v-model="form.carColour" placeholder="请输入车辆颜色" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="能耗类型" prop="expendType">
              <el-select v-model="form.expendType" placeholder="请选择" style="width: 100%;" disabled>
                <el-option v-for="item in dict.type.nenghaoleixing" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="底盘型号" prop="chassisNumber">
              <el-input v-model="form.chassisNumber" placeholder="请输入底盘型号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发动机型号/电机型号" prop="motorNumber" label-width="185px">
              <el-input v-model="form.motorNumber" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <span style="font-weight: bold; font-size: 18px">报修单信息</span>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="报修单号" prop="repairNumber">
              <el-input v-model="form.repairNumber" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报修单类型" prop="repairType">
              <el-select v-model="form.repairType" placeholder="请选择" style="width: 100%;" :disabled="flag == 2">
                <el-option v-for="item in dict.type.baoxiudanleixing" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否返修" prop="isRebuild">
              <el-select v-model="form.isRebuild" placeholder="请选择" style="width: 100%;" :disabled="flag == 2">
                <el-option v-for="item in dict.type.shifou" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修原因" prop="repairCause">
              <el-select v-model="form.repairCause" placeholder="请选择" style="width: 100%;" multiple :disabled="flag == 2">
                <el-option v-for="item in reasonList" :key="item.id" :label="item.maintainCauseName" :value="item.maintainCauseName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公里数" prop="vehicleKilometers">
              <el-input v-model="form.vehicleKilometers" placeholder="请输入" @input="form.vehicleKilometers=form.vehicleKilometers.replace(/[^0-9.]/g,'')" :disabled="flag == 2">
                <template slot="append">KM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="旧件" prop="isOldPart">
              <el-select v-model="form.isOldPart" placeholder="请选择" style="width: 100%;" :disabled="flag == 2">
                <el-option v-for="item in dict.type.jiujian" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="自备材料" prop="isByoPart">
              <el-select v-model="form.isByoPart" placeholder="请选择" style="width: 100%;" :disabled="flag == 2">
                <el-option v-for="item in dict.type.shifou" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发现异常是否维修" prop="isFindMaintain" label-width="155px">
              <el-select v-model="form.isFindMaintain" placeholder="请选择" style="width: 100%;" :disabled="flag == 2">
                <el-option v-for="item in dict.type.shifou" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="自备材料备注" prop="byoPartRemark">
              <el-input v-model="form.byoPartRemark" type="textarea" :rows="2" placeholder="请输入" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="自备材料照片" prop="byoPartUrl">
              <ImageUpload v-model="form.byoPartUrl" :limit="9" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="仪表盘照片" prop="dashboardUrl">
              <ImageUpload v-model="form.dashboardUrl" :limit="9" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="车身状况照片" prop="bodyConditionUrl">
              <ImageUpload v-model="form.bodyConditionUrl" :limit="9" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <span style="font-weight: bold; font-size: 18px">拖车登记</span>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否拖车" prop="isTrailer">
              <el-select v-model="form.isTrailer" placeholder="请选择" style="width: 100%" :disabled="flag == 2">
                <el-option v-for="item in dict.type.shifou" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拖车公司" prop="trailerCompany">
              <el-input v-model="form.trailerCompany" placeholder="请输入" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拖车车牌号" prop="trailerPlateNumber">
              <el-input v-model="form.trailerPlateNumber" placeholder="请输入" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="拖车公里" prop="trailerVehicleKilometers">
              <el-input v-model="form.trailerVehicleKilometers" :min="0" placeholder="请输入" style="width: 100%" :disabled="flag == 2">
                <template slot="append">KM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拖车司机" prop="trailerDriver">
              <el-input v-model="form.trailerDriver" placeholder="请输入" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拖车联系电话" prop="trailerPhone">
              <el-input v-model="form.trailerPhone" placeholder="请输入" maxlength="11" @input="form.trailerPhone=form.trailerPhone.replace(/\D/g,'')" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="费用" prop="trailerMoney">
              <el-input-number v-model="form.trailerMoney" placeholder="请输入" :min="0" style="width: 100%" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始时间" prop="trailerStartTime">
              <el-date-picker style="width: 100%;"
                              v-model="form.trailerStartTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              :disabled="flag == 2"
                              @change="trailerStartTimeChange"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间" prop="trailerEndTime">
              <el-date-picker style="width: 100%;"
                              v-model="form.trailerEndTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              :disabled="flag == 2"
                              @change="trailerEndTimeChange"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="救援地点" prop="rescueLocation">
              <el-input v-model="form.rescueLocation" placeholder="请输入"  :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地点" prop="destinationLocation">
              <el-input v-model="form.destinationLocation" placeholder="请输入" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="trailerRemark">
              <el-input v-model="form.trailerRemark" placeholder="请输入" type="textarea" rows="4" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <span style="font-weight: bold; font-size: 18px">承修组织</span>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="部门" prop="repairerDeptId">
              <treeselect v-model="form.repairerDeptId" :options="treeData" placeholder="请选择" style="width: 100%;" :show-count="true" @select="handleDeptChange" :loadOptions="()=>{}" :normalizer="normalizer" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班组" prop="repairerGroupId">
              <el-select v-model="form.repairerGroupId" @change="handleGroupChange" style="width: 100%;" :no-data-text="form.repairerDeptId?'该部门下暂无班组':'请先选择部门'" :disabled="flag == 2">
                <el-option v-for="(item,index) in siteGroupList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <span style="font-weight: bold; font-size: 18px;">检验信息</span>
          <el-button @click="jianyanOpen=true" :disabled="flag == 2" type="primary">添 加</el-button>
        </div>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述" prop="examineItem">
              <el-input v-model="form.examineItem" placeholder="请输入" rows="4" type="textarea" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <span style="font-weight: bold; font-size: 18px;">故障信息</span>
          <el-button type="primary" :disabled="flag == 2" @click="guzhangOpen=true">添加</el-button>
        </div>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述" prop="malfunctionItem">
              <el-input v-model="form.malfunctionItem" placeholder="请输入" rows="4" type="textarea" :disabled="flag == 2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <span style="font-weight: bold; font-size: 18px;">故障信息</span>
          <el-button type="primary" :disabled="flag == 2" @click="guzhangOpen=true">添加</el-button>
        </div>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="登记人" prop="createBy">
              <el-input v-model="form.createBy" placeholder="请输入登记人" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记时间" prop="createTime">
              <el-date-picker v-model="form.createTime" type="datetime" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择创建时间" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
      <el-tabs v-model="activeTab" v-if="flag == 2" style="padding: 10px; margin-bottom: 100px">
        <el-tab-pane label="维修项目" name="0">
          <repairFormProject
            :type="1"
            :repairFormId="repairFormId"
            :groupId="form.repairerGroupId"
            :groupName="form.repairerGroupName"
            :isDelivery="isDelivery"
          />
        </el-tab-pane>
        <el-tab-pane label="维修材料" name="1">
          <MaterialPickingInfo
              :repairFormId="repairFormId"
              :repairNumber="form.repairNumber"
              :clientName="form.clientName"
              :carId="form.carId"
              :plateNumber="form.plateNumber"
              :repairerDeptId="form.repairerDeptId"
              :repairerDeptName="form.repairerDeptName"
              :repairerGroupName="form.repairerGroupName"
              :isDelivery="isDelivery"
              :flag="flag"
          />
        </el-tab-pane>
        <el-tab-pane label="竣工信息" name="2">
          <repairFormProject
              :type="2"
              :repairFormId="repairFormId"
              :groupId="form.repairerGroupId"
              :groupName="form.repairerGroupName"
              :isDelivery="isDelivery"
          />
        </el-tab-pane>
        <el-tab-pane label="交车信息" name="3">
          <el-form :model="deliveryForm" ref="deliveryForm" :rules="deliveryRules" size="small" label-width="110px" >
            <el-row :gutter="20" type="flex" justify="space-between" align="middle">
              <el-col :span="12">
                <span style="font-weight: bold; font-size: 18px">交车登记</span>
              </el-col>
              <el-col :span="12" style="text-align: right">
                <el-button :loading="buttonLoading" type="primary" :disabled="isDelivery == 1" @click="deliverySubmitForm">保存</el-button>
              </el-col>
            </el-row>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="交车人员" prop="deliveryUserId">
                  <el-select v-model="deliveryForm.deliveryUserId" filterable style="width: 100%" :disabled="isDelivery == 1">
                    <el-option v-for="item in maintainUserList" :key="item.id" :value="item.id" :label="`${item.jobNumber}-${item.name}`">{{`${item.jobNumber}-${item.name}`}}</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="交车时间" prop="deliveryTime">
                  <el-date-picker clearable
                                  v-model="deliveryForm.deliveryTime"
                                  type="datetime"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  style="width: 100%"
                                  :disabled="isDelivery == 1"
                                  placeholder="请选择交车时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="交车备注" prop="deliveryRemark">
                  <el-input v-model="deliveryForm.deliveryRemark" :disabled="isDelivery == 1" type="textarea" :rows="2" placeholder="请输入交车备注" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="交车照片" prop="deliveryUrl">
                  <image-upload v-model="deliveryForm.deliveryUrl" :disabled="isDelivery == 1" />
                </el-form-item>
              </el-col>
            </el-row>
            <span style="font-weight: bold; font-size: 18px">接车登记</span>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="接车人姓名" prop="carPickupUserName">
                  <el-input v-model="deliveryForm.carPickupUserName" :disabled="isDelivery == 1" placeholder="请输入接车人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="接车人电话" prop="carPickupUserPhone">
                  <el-input v-model="deliveryForm.carPickupUserPhone" :disabled="isDelivery == 1" placeholder="请输入接车人电话" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="接车照片" prop="carPickupUrl">
                  <image-upload v-model="deliveryForm.carPickupUrl" :disabled="isDelivery == 1" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="理赔信息" name="4">
          <RepairFormClaim :repairFormId="repairFormId" />
        </el-tab-pane>
      </el-tabs>


    <div class="footer-container">
      <el-button v-loading="buttonLoading" type="primary" size="medium"  @click="submitForm" v-if="flag != 2">保存</el-button>
      <el-button v-loading="buttonLoading" type="info" plain size="medium" @click="cancel">关闭</el-button>
    </div>

    <el-dialog title="检验信息" :visible.sync="jianyanOpen" width="1300px" append-to-body destroy-on-close>
      <examineProject type="2" ref="jianyan" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jianyanSubmit">确 定</el-button>
        <el-button @click="jianyanOpen=false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="故障信息" :visible.sync="guzhangOpen" width="1300px" append-to-body destroy-on-close>
      <malfunctionProject type="2" ref="guzhang" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="guzhangSubmit">确 定</el-button>
        <el-button @click="guzhangOpen=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addRepairForm, getRepairForm, updateRepairForm } from '@/api/business/repairForm'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import examineProject from '../examineProject/index'
import malfunctionProject from '../malfunctionProject/index'
import { listCar } from '@/api/business/car'
import { listClient } from '@/api/business/client'
import { listMaintainCause } from '@/api/business/maintainCause'
import { getSiteTree } from '@/api/business/unit'
import { listSiteGroup } from '@/api/business/siteGroup'
import { getVehicleModel } from '@/api/business/vehicleModel'
import repairFormProject from '@/views/business/repairFormProject/index.vue'
import MaterialPickingInfo from '@/views/business/materialPickingInfo/index.vue'
import { addRepairFormDelivery, updateRepairFormDelivery } from '@/api/business/repairFormDelivery'
import { listUser } from '@/api/business/user'
import RepairFormClaim from '@/views/business/repairFormClaim/index.vue'
import { authCarNumber, authPhone } from '@/utils/ruoyi'
import { formatDate } from '@/utils'

export default {
  name: "Detail",
  dicts: ['client_type','nenghaoleixing','baoxiudanleixing','shifou','jiujian', 'repair_form_is_delivery','repair_form_state', 'repair_form_settlement_state'],
  components: { RepairFormClaim, MaterialPickingInfo, repairFormProject, Treeselect, examineProject, malfunctionProject },

  data() {
    return {
      repairFormId: undefined,
      buttonLoading: false,
      isDelivery: false,
      // 表单参数
      form: {
        id: undefined,
        repairNumber: undefined,
        totalActualTime: undefined,
        repairType: undefined,
        isRebuild: undefined,
        repairCause: undefined,
        vehicleKilometers: undefined,
        isOldPart: undefined,
        isByoPart: undefined,
        isFindMaintain: undefined,
        byoPartRemark: undefined,
        byoPartUrl: undefined,
        dashboardUrl: undefined,
        bodyConditionUrl: undefined,
        isTrailer: undefined,
        trailerCompany: undefined,
        trailerPlateNumber: undefined,
        trailerDriver: undefined,
        trailerPhone: undefined,
        trailerVehicleKilometers: undefined,
        trailerStartTime: undefined,
        trailerEndTime: undefined,
        trailerMoney: undefined,
        rescueLocation: undefined,
        destinationLocation: undefined,
        trailerRemark: undefined,
        repairerDeptName: undefined,
        repairerGroupName: undefined,
        examineItem: undefined,
        malfunctionItem: undefined,
        carId: undefined,
        clientName: undefined,
        phone: undefined,
        clientType: undefined,
        carVin: undefined,
        carTypeCode: undefined,
        carBrand: undefined,
        carModel: undefined,
        carConfiguration: undefined,
        carColour: undefined,
        expendType: undefined,
        chassisNumber: undefined,
        motorNumber: undefined,
        vehicleModelId: undefined,
        trailerDocumentNumber: undefined,
        repairerCompany: undefined,
        repairerDeptId: undefined,
        repairerGroupId: undefined,
        state: undefined,
        maintainEndTime: undefined,
        isDelivery: undefined,
        deliveryTime: undefined,
        settlementTime: undefined,
        createBy: this.$store.state.user.userInfo.userName,
        createTime: formatDate(new Date().getTime()),
        car: {
          plateNumber: undefined,
          clientName: undefined,
          phone: undefined,
          carVin: undefined,
        },
        client: {
          type: undefined,
        },
        vehicleModelVo: {
          carTypeCode: undefined,
          carBrand: undefined,
          carModel: undefined,
          carConfiguration: undefined,
          carColour: undefined,
          expendType: undefined,
          chassisNumber: undefined,
          motorNumber: undefined,
        },
        projectVoList: [],
        materialVoList: [],
        claimVoList: [],
        deliveryVo: {
          deliveryUserName: undefined,
          deliveryTime: undefined,
          deliveryRemark: undefined,
          dashboardUrl: undefined,
          carPickupUserName: undefined,
          carPickupUserPhone: undefined,
          carPickupUrl: undefined,
        },
      },
      deliveryForm: {},
      activeTab: '0',
      flag: false,
      maintainUserList: [],
      carList: [],
      clientList: [],
      reasonList: [],
      treeData: [],
      siteGroupList: [],
      jianyanOpen: false,
      guzhangOpen: false,
      rules: {
        carId: [
          { required: true, message: "车辆牌照号不能为空", trigger: "blur" }
        ],
        // clientType: [
        //   { required: true, message: "客户类型不能为空", trigger: "blur" }
        // ],
        clientName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        plateNumber: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        // phone: [
        //   { required: true, message: "手机号不能为空", trigger: "blur" }
        // ],
        repairType: [
          { required: true, message: "报修单类型不能为空", trigger: "change" }
        ],
        isRebuild: [
          { required: true, message: "是否返修不能为空", trigger: "change" }
        ],
        repairCause: [
          { required: true, message: "维修原因不能为空", trigger: "change" }
        ],
        vehicleKilometers: [
          { required: true, message: "公里数不能为空", trigger: "blur" }
        ],
        isOldPart: [
          { required: true, message: "旧件带走不能为空", trigger: "change" }
        ],
        isByoPart: [
          { required: true, message: "是否自备部件不能为空", trigger: "change" }
        ],
        dashboardUrl: [
          { required: true, message: "仪表盘照片不能为空", trigger: "blur" }
        ],
        bodyConditionUrl: [
          { required: true, message: "车身状况照片不能为空", trigger: "blur" }
        ],
        repairerDeptId: [
          { required: true, message: "承修部门不能为空", trigger: "change" }
        ],
        repairerGroupId: [
          { required: true, message: "承修班组不能为空", trigger: "change" }
        ],
        malfunctionItem: [
          { required: true, message: "故障信息不能为空", trigger: "blur" }
        ],
        examineItem: [
          { required: true, message: "检验信息不能为空", trigger: "blur" }
        ],
        isTrailer: [
          { required: true, message: "是否拖车不能为空", trigger: "change" }
        ],
        trailerPlateNumber: [
          { message: "请输入正确的车牌号", trigger: "blur", validator: authCarNumber },
        ],
      },
      deliveryRules: {
        deliveryUserId: [
          { required: true, message: "交车人员不能为空", trigger: "blur" }
        ],
        deliveryTime: [
          { required: true, message: "交车时间不能为空", trigger: "blur" }
        ],
        deliveryUrl: [
          { required: true, message: "交车照片不能为空", trigger: "blur" }
        ],
        carPickupUserName: [
          { required: true, message: "接车人姓名不能为空", trigger: "blur" }
        ],
        carPickupUserPhone: [
          { required: true, message: "接车人电话不能为空", trigger: "blur" }
        ],
        carPickupUrl: [
          { required: true, message: "接车照片不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.repairFormId = this.$route.params && this.$route.params.repairFormId
    this.flag = this.$route.params && this.$route.params.flag;
    this.isDelivery = this.$route.params && this.$route.params.isDelivery;
    this.getCarList();
    this.getClientList();
    this.getReason();
    this.getTreeData();
    if (this.flag && this.flag != 0) {
      this.getDetail();
      this.getMaintainUserList()
    }
  },
  methods: {
    getDetail(){
      getRepairForm(this.repairFormId).then(response =>{
        this.handleDeptChange({deptId:response.data.repairerDeptId},1)
        if(response.data.repairCause){
          response.data.repairCause=response.data.repairCause.split(';');
        }
        response.data.plateNumber=response.data.car.plateNumber;
        response.data.phone=response.data.car.phone;
        response.data.clientType=''+response.data.client.type;
        response.data.carVin=response.data.car.carVin;
        response.data.carTypeCode=response.data.vehicleModelVo.carTypeCode;
        response.data.carBrand=response.data.vehicleModelVo.carBrand;
        response.data.carModel=response.data.vehicleModelVo.carModel;
        response.data.carConfiguration=response.data.vehicleModelVo.carConfiguration;
        response.data.carColour=response.data.vehicleModelVo.carColour;
        response.data.expendType=''+response.data.vehicleModelVo.expendType;
        response.data.chassisNumber=response.data.vehicleModelVo.chassisNumber;
        response.data.motorNumber=response.data.vehicleModelVo.motorNumber;
        response.data.isTrailer = response.data.isTrailer;
        response.data.repairType=''+response.data.repairType;
        response.data.isRebuild=''+response.data.isRebuild;
        response.data.isOldPart=''+response.data.isOldPart;
        response.data.isFindMaintain=''+response.data.isFindMaintain;
        response.data.isByoPart=''+response.data.isByoPart;
        response.data.repairerGroupId=''+response.data.repairerGroupId;

        this.form = response.data;
        this.deliveryForm = response.data.deliveryVo

      })
    },
    /** 查询人员-人员列表 */
    getMaintainUserList() {
      listUser({ type: 1, pageNum: 1, pageSize: 100 }).then(response => {
        this.maintainUserList = response.rows;
      });
    },
    getCarList() {
      listCar({ pageNum: 1, pageSize: 99 }).then(res=>{
        this.carList = res.rows
      })
    },
    getClientList() {
      listClient({ pageNum: 1, pageSize: 99 }).then(res=>{
        this.clientList = res.rows
      })
    },
    getReason(){
      listMaintainCause({ pageSize: 99, pageNum: 1, }).then(res=>{
        this.reasonList = res.rows
      })
    },
    getTreeData(){
      getSiteTree().then(response => {
        this.treeData = this.handleTree(response.data, "deptId")
      });
    },
    handleDeptChange(item,num){
      this.form.repairerGroupId = undefined;
      this.$refs.form.clearValidate('repairerDeptId');
      listSiteGroup({ pageNum: 1, pageSize: 999, deptId: item.deptId }).then(res=>{
        this.siteGroupList = res.rows
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return { id: node.deptId, label: node.deptName, children: node.children, };
    },
    handleGroupChange(e){
      let item = this.treeData.find(item=>item.id==e)
      if(item){
        this.form.siteGroupName = item.name
      }
    },
    carIdChange(e,name){
      let item = this.carList.find(item=>item.id == e);
      let a=['plateNumber','clientName','phone','clientType','carVin','carTypeCode','carBrand','carModel','carConfiguration','carColour','expendType','chassisNumber','motorNumber','clientId']
      if(item){
        this.form.carId = item.id;
        this.form.vehicleModelId = item.carTypeId;
        getVehicleModel(item.carTypeId).then(res=>{
          item={...item,...res.data}
          a.forEach(item1=>{
            this.form[item1]=''+item[item1]
          })
        })
      }
    },
    clientIdChange(e,name){
      let item = this.clientList.find(item=>item.id == e);
      console.log('item ', item)
      let a=['plateNumber','clientName','phone','clientType','carVin','carTypeCode','carBrand','carModel','carConfiguration','carColour','expendType','chassisNumber','motorNumber','clientId']
      if(item){
        this.form.clientId= item.id;
        this.form.vehicleModelId = item.carTypeId;
        getVehicleModel(item.carTypeId).then(res=>{
          item={...item,...res.data}
          a.forEach(item1=>{
            this.form[item1]=''+item[item1]
          })
        })
      }
    },
    // 拖车开始时间更改
    trailerStartTimeChange() {
      if (this.form.trailerEndTime) {
        if (this.form.trailerStartTime > this.form.trailerEndTime) {
          this.$modal.msgError('拖车开始时间不能大于拖车结束时间')
          this.form.trailerStartTime = undefined
        }
      }

    },
    // 拖车结束时间更改
    trailerEndTimeChange() {
      if (this.form.trailerStartTime) {
        if (this.form.trailerEndTime < this.form.trailerStartTime) {
          this.$modal.msgError('拖车结束时间不能小于拖车开始时间')
          this.form.trailerEndTime = undefined
        }
      }
    },
    jianyanSubmit(){
      if(this.$refs.jianyan.names){
        this.form.examineItem = this.$refs.jianyan.names;
        this.jianyanOpen = false;
      }else{
        this.$message.error('至少选择一项');
      }
    },
    guzhangSubmit(){
      if(this.$refs.guzhang.names){
        this.form.malfunctionItem = this.$refs.guzhang.names;
        this.guzhangOpen = false;
      }else{
        this.$message.error('至少选择一项');
      }
    },
    // 取消按钮
    cancel() {
      this.$tab.closeOpenPage({ path: "/maintain/repairForm" });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params={...this.form}
          params.repairCause=params.repairCause.join(';')
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateRepairForm(params).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$tab.closeOpenPage({ path: "/maintain/repairForm" });
            }).finally(() => {
              this.buttonLoading = false
            });
          } else {
            addRepairForm(params).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$tab.closeOpenPage({ path: "/maintain/repairForm" });
            }).finally(() => {
              this.buttonLoading = false
            });
          }
        }
      });
    },
    /** 交车提交按钮 */
    deliverySubmitForm() {
      this.$refs["deliveryForm"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          this.deliveryForm.repairFormId = this.repairFormId
          // addRepairFormDelivery(this.deliveryForm).then(response => {
          //   this.$modal.msgSuccess("交车成功");
          //   this.open = false;
          //   this.getList();
          // }).finally(() => {
          //   this.buttonLoading = false;
          // });

          if (this.deliveryForm.id != null) {
            updateRepairFormDelivery(this.deliveryForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$tab.closeOpenPage({ path: "/maintain/repairForm" });
              // this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addRepairFormDelivery(this.deliveryForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$tab.closeOpenPage({ path: "/maintain/repairForm" });
              // this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    handleClick() {
      this.$alert('暂未开放，功能开发中。。。')
      // alert('暂未开放，功能开发中。。。');
    }
  }
};
</script>

<style scoped lang="scss">
.footer-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 16px;
  text-align: right;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
</style>
