<template>
  <div>
    <span style="font-weight: bold; font-size: 18px">客户车辆信息</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="车辆牌照号">{{form.car.plateNumber}}</el-descriptions-item>
      <el-descriptions-item label="客户名称">{{form.car.clientName}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{form.car.phone}}</el-descriptions-item>
      <el-descriptions-item label="客户类型">
        <dict-tag :options="dict.type.client_type" :value="form.client.type" />
      </el-descriptions-item>
      <el-descriptions-item label="车架号">{{form.car.carVin}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">维修车型</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="车型编码">{{form.vehicleModelVo.carTypeCode}}</el-descriptions-item>
      <el-descriptions-item label="车辆品牌">{{form.vehicleModelVo.carBrand}}</el-descriptions-item>
      <el-descriptions-item label="车辆型号">{{form.vehicleModelVo.carModel}}</el-descriptions-item>
      <el-descriptions-item label="车辆配置">{{form.vehicleModelVo.carConfiguration}}</el-descriptions-item>
      <el-descriptions-item label="车辆颜色">{{form.vehicleModelVo.carColour}}</el-descriptions-item>
      <el-descriptions-item label="能耗类型">
        <dict-tag :options="dict.type.nenghaoleixing" :value="form.vehicleModelVo.expendType" />
      </el-descriptions-item>
      <el-descriptions-item label="底盘型号">{{form.vehicleModelVo.chassisNumber}}</el-descriptions-item>
      <el-descriptions-item label="发动机型号/电机型号">{{form.vehicleModelVo.motorNumber}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">报修单信息</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="报修单号">{{form.repairNumber}}</el-descriptions-item>
      <el-descriptions-item label="总工时">{{form.totalActualTime}}</el-descriptions-item>
      <el-descriptions-item label="工时费用（元）">{{form.totalActualTimeMoney}}</el-descriptions-item>
      <el-descriptions-item label="材料费用（元）">{{form.totalMaterialMoney}}</el-descriptions-item>
      <el-descriptions-item label="拖车费用（元）">{{form.trailerMoney}}</el-descriptions-item>
      <el-descriptions-item label="结算总价（元）">{{form.totalMoney}}</el-descriptions-item>
      <el-descriptions-item label="交工时间">{{form.deliveryTime}}</el-descriptions-item>
      <el-descriptions-item label="结算时间">{{form.settlementTime}}</el-descriptions-item>
      <el-descriptions-item label="登记时间">{{form.createTime}}</el-descriptions-item>
      <el-descriptions-item label="登记人员">{{form.createBy}}</el-descriptions-item>
      <el-descriptions-item label="是否交车">
        <dict-tag :options="dict.type.repair_form_is_delivery" :value="form.isDelivery" />
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <dict-tag :options="dict.type.repair_form_state" :value="form.state" />
      </el-descriptions-item>
      <el-descriptions-item label="结算状态">
        <dict-tag :options="dict.type.repair_form_settlement_state" :value="form.settlementState" />
      </el-descriptions-item>
      <el-descriptions-item label="报修单类型">
        <dict-tag :options="dict.type.baoxiudanleixing" :value="form.repairType" />
      </el-descriptions-item>
      <el-descriptions-item label="是否返修">
        <dict-tag :options="dict.type.shifou" :value="form.isRebuild" />
      </el-descriptions-item>
      <el-descriptions-item label="维修原因">{{form.repairCause}}</el-descriptions-item>
      <el-descriptions-item label="公里数">{{form.vehicleKilometers}}</el-descriptions-item>
      <el-descriptions-item label="旧件">
        <dict-tag :options="dict.type.jiujian" :value="form.isOldPart" />
      </el-descriptions-item>
      <el-descriptions-item label="自备材料">
        <dict-tag :options="dict.type.shifou" :value="form.isByoPart" />
      </el-descriptions-item>
      <el-descriptions-item label="发现是否维修">
        <dict-tag :options="dict.type.shifou" :value="form.isFindMaintain" />
      </el-descriptions-item>
      <el-descriptions-item label="自备材料备注">{{form.byoPartRemark}}</el-descriptions-item>
      <el-descriptions-item label="自备材料照片">
        <ImagePreview :src="form.byoPartUrl" style="width: 50px;height: 50px"/>
      </el-descriptions-item>
      <el-descriptions-item label="仪表盘照片">
        <ImagePreview :src="form.dashboardUrl" style="width: 50px;height: 50px"/>
      </el-descriptions-item>
      <el-descriptions-item label="车身状况照片">
        <ImagePreview :src="form.bodyConditionUrl" style="width: 50px;height: 50px"/>
      </el-descriptions-item>
      <el-descriptions-item label="登记人">{{form.createBy}}</el-descriptions-item>
      <el-descriptions-item label="登记时间">{{form.createTime}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">拖车信息</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="是否拖车">
        <dict-tag :options="dict.type.shifou" :value="form.isTrailer" />
      </el-descriptions-item>
      <el-descriptions-item label="拖车公司">{{form.trailerCompany}}</el-descriptions-item>
      <el-descriptions-item label="拖车车牌号">{{form.trailerPlateNumber}}</el-descriptions-item>
      <el-descriptions-item label="驾驶员姓名">{{form.trailerDriver}}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{form.trailerPhone}}</el-descriptions-item>
      <el-descriptions-item label="公里">{{form.trailerVehicleKilometers}}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{form.trailerStartTime}}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{form.trailerEndTime}}</el-descriptions-item>
<!--      <el-descriptions-item label="结束时间">{{form.trailerEndTime}}</el-descriptions-item>-->
      <el-descriptions-item label="费用">{{form.trailerMoney}}</el-descriptions-item>
      <el-descriptions-item label="救援地点">{{form.rescueLocation}}</el-descriptions-item>
      <el-descriptions-item label="目的地点">{{form.destinationLocation}}</el-descriptions-item>
      <el-descriptions-item label="备注">{{form.trailerRemark}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">承修组织</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="部门">{{form.repairerDeptName}}</el-descriptions-item>
      <el-descriptions-item label="班组">{{form.repairerGroupName}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">检验信息</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="检验信息">{{form.examineItem}}</el-descriptions-item>
    </el-descriptions>

    <span style="font-weight: bold; font-size: 18px">故障信息</span>
    <el-divider />
    <el-descriptions border>
      <el-descriptions-item label="故障信息">{{form.malfunctionItem}}</el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeTab" style="margin-top: 30px;">
      <el-tab-pane label="维修项目" name="0">
        <el-table :data="form.projectVoList">
          <el-table-column label="序号" align="center" type="index"/>
          <el-table-column label="维修项目类别" align="center" prop="typeName" />
          <el-table-column label="维修项目编号" align="center" prop="projectCode" />
          <el-table-column label="维修项目名称" align="center" prop="projectName" />
          <el-table-column label="维修工时" align="center" prop="standardManHour" />
          <el-table-column label="维修标准单价（元）" align="center" prop="standardPrice" />
          <el-table-column label="维修标准小计（元）" align="center">
            <template slot-scope="scope">
              {{(Number(scope.row.standardManHour) * Number(scope.row.standardPrice)).toFixed(1)}}
            </template>
          </el-table-column>
          <el-table-column label="技术规范" align="center" prop="technicalSpecification" />
          <el-table-column label="保修期（天）" align="center" prop="warrantyPeriod" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="维修材料" name="1">
        <el-table :data="form.materialVoList">
          <el-table-column label="出库单号" align="center" prop="outNumber" />
          <el-table-column label="报修单号" align="center" prop="repairNumber" />
          <!--      <el-table-column label="退料单号" align="center" prop="returnNumber" />-->
          <el-table-column label="车牌号" align="center" prop="plateNumber" />
          <el-table-column label="出库金额" align="center" prop="outMoney" />
          <el-table-column label="领料人" align="center" prop="receiveUserName" />
          <el-table-column label="领料时间" align="center" prop="receiveTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.receiveTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="state">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.picking_state" :value="scope.row.state"/>
            </template>
          </el-table-column>
          <el-table-column label="出库时间" align="center" prop="outTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="竣工信息" name="2">
        <el-table :data="form.projectVoList">
          <el-table-column label="序号" align="center" type="index"/>
          <el-table-column label="维修项目类别" align="center" prop="typeName" />
          <el-table-column label="维修项目编号" align="center" prop="projectCode" />
          <el-table-column label="维修项目名称" align="center" prop="projectName" />
          <el-table-column label="维修工时" align="center" prop="standardManHour" />
          <el-table-column label="维修标准单价（元）" align="center" prop="standardPrice" />
          <el-table-column label="维修标准小计（元）" align="center">
            <template slot-scope="scope">
              {{(Number(scope.row.standardManHour) * Number(scope.row.standardPrice)).toFixed(1)}}
            </template>
          </el-table-column>
          <el-table-column label="技术规范" align="center" prop="technicalSpecification" />
          <el-table-column label="保修期（天）" align="center" prop="warrantyPeriod" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="交车信息" name="3">
        <el-descriptions :column="3" border title="交车登记">
          <el-descriptions-item label="交车人员">{{form.deliveryVo.deliveryUserName}}</el-descriptions-item>
          <el-descriptions-item label="交车日期">{{form.deliveryVo.deliveryTime}}</el-descriptions-item>
          <el-descriptions-item label="交车备注">{{form.deliveryVo.deliveryRemark}}</el-descriptions-item>
          <el-descriptions-item label="交车图片">
            <ImagePreview  v-model="form.deliveryVo.dashboardUrl" />
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="3" border title="接车登记">
          <el-descriptions-item label="接车人姓名">{{form.deliveryVo.carPickupUserName}}</el-descriptions-item>
          <el-descriptions-item label="接车人电话">{{form.deliveryVo.carPickupUserPhone}}</el-descriptions-item>
          <el-descriptions-item label="接车照片">
            <ImagePreview  v-model="form.deliveryVo.carPickupUrl" />
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="理赔信息" name="4">
        <el-table :data="form.claimVoList">
          <el-table-column label="保险公司" align="center" prop="insuranceCompany" />
          <el-table-column label="保险类型" align="center" prop="insuranceType" />
          <el-table-column label="保险单号" align="center" prop="insuranceNumber" />
          <el-table-column label="理赔服务人员" align="center" prop="claimServerName" />
          <el-table-column label="理赔人员电话" align="center" prop="claimServerPhone" />
          <el-table-column label="定损金额" align="center" prop="assessMoney" />
          <el-table-column label="理赔金额" align="center" prop="claimMoney" />
          <el-table-column label="案件单号" align="center" prop="caseNumber" />
          <el-table-column label="被保险人" align="center" prop="insurerName" />
          <el-table-column label="车主信息" align="center" prop="carOwner" />
          <el-table-column label="事故责任认定书" align="center" prop="certificateOfLiability" />
          <el-table-column label="事故描述" align="center" prop="accidentDescribe" />
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getRepairForm } 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 repairFormProject from '../repairFormProject/index'

export default {
  name: "Detail",
  dicts: ['client_type','nenghaoleixing','baoxiudanleixing','shifou','jiujian', 'repair_form_is_delivery','repair_form_state', 'repair_form_settlement_state'],
  components: { Treeselect, examineProject, malfunctionProject, repairFormProject },
  props: {
    repairFormId:{}
  },
  watch: {
    repairFormId(val){
      this.getDetail();
    }
  },
  data() {
    return {
      // 表单参数
      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,
        createBy: undefined,
        createTime: undefined,
        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,
        },
      },
      activeTab: '0',
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail(){
      getRepairForm(this.repairFormId).then(res =>{
        this.form = res.data
      })
    }
  }
};
</script>

<style scoped lang="scss">

</style>
