<template>
  <div class="app-container">
    <div v-show="isCheck">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <div class="titwu">验车单</div>
        <el-form ref="dataForm" :model="temp" label-position="right" class="formadd" :rules="rules">
          <div class="yancheAdd" style="margin-top: 5px;">
            <el-row class="yancheAdd-bor">
              <el-col :span="12" class="yancheAdd-bor">
                <el-form-item prop="vin" label="车架号：">
                  <span>{{ temp.vin }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="yancheAdd-bor">
                <el-form-item prop="model" label="车型：">
                  <span>{{ temp.model }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="yancheAdd-bor">
              <el-col :span="24" class="yancheAdd-bor">
                <el-form-item prop="config" label="配置：">
                  {{ temp.config }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="yancheAdd-bor">
              <el-col :span="24" class="yancheAdd-bor">
                <el-form-item prop="modelDifferenceExplain" label="请输入车型配置差异说明：">
                  {{ temp.modelDifferenceExplain }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="guaranteeCardNo" label="保修卡号：">
                  <span>{{ temp.guaranteeCardNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="price" label="洗车费：">
                  <span>{{ temp.price }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="title">验车相关照片</div>
          <el-row>
            <el-col :span="24">
              <el-image
                style="width: 178px;height: 178px;"
                v-for="(item,index) in temp.carInspectedImage"
                :key="index"
                :src="item"
                :preview-src-list="temp.carInspectedImage">
              </el-image>
              <!--  <img v-show="temp.carInspectedImage ? true : false" v-for="(item,index) in temp.carInspectedImage"-->
              <!--       style="cursor:pointer;width: 178px;height: 178px;"-->
              <!--       :src="item" @click="open(temp.carInspectedImage,index)">-->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <span>厂家验车单照片</span>
            </el-col>
            <el-col :span="21">
              <el-image
                style="width: 178px;height: 178px;"
                v-for="(item,index) in temp.factoryImage"
                :key="index"
                :src="item"
                :preview-src-list="temp.factoryImage">
              </el-image>
              <!--  <img v-show="temp.factoryImage ? true : false" v-for="(item,index) in temp.factoryImage"-->
              <!--       style="cursor:pointer;width: 178px;height: 178px;"-->
              <!--       :src="item" @click="open(temp.factoryImage,index)">-->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <span>验车情况说明</span>
            </el-col>
            <el-col :span="21">
              <el-form-item>
                <span>{{ temp.remarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="last_btn">
            <el-button type="primary" size="small" @click="handleChecklist()">车辆检查表</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <vehiclechecklist ref="divchecklist" v-show="!isCheck" @doback="resetState" />
    <!--    <el-dialog :visible.sync="dialogVisible" width="1000px"-->
    <!--               :close-on-click-modal="false">-->
    <!--      <div class="result-cont">-->
    <!--        <el-carousel indicator-position="outside" style="height: 500px;">-->
    <!--          <el-carousel-item v-for="item in dialogUrl" :key="item" style="height: 500px;">-->
    <!--            <img style="width: 100%; height: 500px;" :src="item">-->
    <!--          </el-carousel-item>-->
    <!--        </el-carousel>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>

</template>

<script>
import { getCarInspected } from '@/api/supplychain/yancheguanli'
import vehiclechecklist from '@/views/supplychain/yancheguanli/vehiclechecklist'


export default {
  name: 'yancheguanliInfo',
  data() {
    return {
      viewTitle: '',
      isCheck:true,
      // --按钮菜单-------
      sid: '',
      dialogVisible: false,
      datas: null,
      stateId: 0,
      FormLoading: false,
      listLoading: false,
      dialogUrl: [],
      dialogImageUrl: '',
      imgList01: [], // 附件上传
      imgList02: [], // 附件上传
      temp: {}, // 添加和修改
      dialogFormVisible: false, // 添加修改对话框状态
      dialogFormShowVisible: false, // 查看对话框默认关闭状态
      dialogStatus: '', // 对话框状态
      vehiclePhoto: [],
      rules: {}
      // ------------------------------------
    }
  },
  methods: {
    handleReturn() {
      this.temp = {}
      this.$emit('doback')
    },
    showInfo(row) {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogStatus = 'edit'
      this.viewTitle = '验车单详情'
      getCarInspected(row.inspectedSid).then((res) => {
        if (res.success) {
          this.temp = res.data
        }
      })
    },
    handleChecklist(){
      this.isCheck = false
      this.$refs['divchecklist'].showCheck()
    },
    resetState(){
      this.isCheck = true
    },
    open(val, index) {
      this.dialogVisible = true
      this.dialogUrl = val
      this.dialogImageUrl = val[index]
    }
  }
}
</script>

<style scoped>
/deep/ .el-autocomplete {
  width: 80%;
}

.yancheAdd .el-row {
  border: 0 !important;
}

.yancheAdd .el-col {
  border: 0 !important;
}

/deep/ .el-col-3 {
  text-align: right;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px !important;
  font-weight: 600;
}

.formadd .last_btn {
  float: right;
  top: 30px;
}
</style>
