<template>
  <div v-loading="loading" class="addCar">
    <div class="head-title">
      <span @click="CommonJump('directorCarList')" class="blue point">车辆管理</span> / 编辑车辆管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">

        <el-form-item label="车辆名称" prop="Name" class="is-required" size="small">
          <el-input v-model="addMsg.Name" placeholder="请输入车辆名称" />
        </el-form-item>

        <el-form-item label="LOGO" size="small">
          <el-tooltip class="item" effect="dark" content="建议尺寸100*100" placement="top">
            <el-button @click="openChangeDig(1)">选择文件</el-button>
          </el-tooltip>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img v-if="!addMsg.CarLogo || addMsg.CarLogo==''"
                 src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.CarLogo"
                 alt="">
          </div>
        </el-form-item>
        <el-form-item label="车辆分类" prop="SiteId" class="is-required">
          <el-select class="w200"  v-model="addMsg.CarClass" size="small"
                     placeholder="请选择">
            <el-option v-for="item in CarClassList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆品牌" prop="SiteId" class="is-required">
          <el-select class="w200"  v-model="addMsg.CarBrandId" size="small"
                     placeholder="请选择">
            <el-option v-for="item in CarBrandList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆型号" prop="CarType" class="is-required" size="small">
          <el-input v-model="addMsg.CarType" placeholder="请输入车辆型号" />
        </el-form-item>
        <el-form-item label="可乘坐人数" prop="GuestNum" class="is-required" size="small">
          <el-input v-model="addMsg.GuestNum" placeholder="请输入可乘坐人数" type="number"/>
        </el-form-item>

        <el-form-item label="车辆颜色"  class="is-required">
          <div class="gez_list el-card" v-for="(item,index) in addMsg.ColorList" :key="index" v-if="addMsg.ColorList&& addMsg.ColorList.length>0">
            <div style="width: 650px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
              <div style="width: 200px;">
                <el-input v-model="item.ColorName" placeholder="请输入颜色名称" size="small"/>
              </div>
              <div style="width: 50px;display: flex;flex-direction: row;justify-content: space-around">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(index)">
                </el-tooltip>
              </div>
            </div>
            <div style=" display: flex;flex-wrap: wrap;justify-content: flex-start;margin-top: 30px">
              <div class="nav_IconContent" >
                  <div v-for="(x, index2) in item.PicList" :key="index2"
                       style="margin-right: 20px; position: relative; " v-if="item.PicList&& item.PicList.length>0">
                    <div class="colapp-image" :style="{
                                  backgroundImage: 'url(' + x + ')'
                                }"></div>
                    <el-button @click="ClearCarouse(index,index2)" class="delBtn" type="danger" icon="el-icon-close"
                               circle></el-button>
                  </div>
                  <div @click="openChangeDig(2),Picindex = index" v-if="item.PicList&&item.PicList.length<9"
                       class="add-image-btn">
                    + 添加图片
                  </div>
              </div>


            </div>

          </div>
          <div>
            <span style="color: #409EFF;font-size: 14px;cursor: pointer;" @click="addOf">+新增车辆颜色</span>
            <span style="color:#DCDFE6;font-size: 12px;">最多支持上传9张</span>
          </div>
        </el-form-item>

      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>

    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg  @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <el-dialog title="选择文件" :visible.sync="changeState2" width="1240px">
      <ChooseImg  @SelectId="SelectId2" :IsMultiple="true"></ChooseImg>
    </el-dialog>
  </div>

</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";

  export default {
    components: {
      ChooseImg,
    },
    data() {
      return {
        addMsg: {
          ID: 0,
          CarLogo:'',
          Name:'',
          CarType:'',
          CarClass:'',
          CarBrandId:'',
          GuestNum:'',
          ColorList:[],
        },
        Picindex:0,
        rules: {

          Name: [{
            required: true,
            message: '请输入车辆名称',
            trigger: 'blur'
          }],
          CarType: [{
            required: true,
            message: '请输入车辆型号',
            trigger: 'blur'
          }],
          GuestNum: [{
            required: true,
            message: '请输入可乘坐人数',
            trigger: 'blur'
          }],

        },
        CarClassList:[],
        CarBrandList:[],
        loading: false,
        CarSiteList:[],
        changeState:false,
        changeState2:false,
        imgType:0,
      };
    },
    created() {

      if(this.$route.query.ID){
        this.getData(this.$route.query.ID)
      }
      this.getCarClassList()//获取车辆的分类
      this.getGuideCarBrandList()//获取车辆品牌

    },
    methods: {

      SelectId(msg){
        if(this.imgType==1){
          let url  = this.getIconLink(msg.url)
          this.addMsg.CarLogo = url
        }


        this.changeState = false;
      },
      SelectId2(msg){
        let that = this;
        let data  =[]
        if(msg && msg.length > 0){
          msg.forEach(item => {
            let obj = this.getIconLink(item.url)
            data.push(obj)
          })
        }
        that.addMsg.ColorList[that.Picindex].PicList=that.addMsg.ColorList[that.Picindex].PicList.concat(data);
        this.changeState2 = false;

      },
      openChangeDig(num) {
        if(num==2){
          this.changeState2 = true
        }else {
          this.changeState = true;
        }
        this.imgType=num;
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMsg.CarLogo==''){
              this.Error('请上传Logo')
              return false
            }
            if(this.addMsg.CarClass==''){
              this.Error('请选择车辆分类')
              return false
            }
            if(this.addMsg.CarBrandId==''){
              this.Error('请选择车辆品牌')
              return false
            }
            if(this.addMsg.ColorList.length==0){
              this.Error('请选择车辆颜色')
              return false
            }
            this.apipost("/api/GuideCar/AddOrUpdateGuideCar", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('directorCarList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      getGuideCarBrandList(){
        this.apipost("/api/GuideCar/GetGuideCarBrandList", {}, res => {
          if(res.data.resultCode==1){
            this.CarBrandList = res.data.data;
          }else {
            this.Info(res.data.message);
          }

        })
      },
      getCarClassList(){
        this.apipost("/api/GuideCar/GetCarClassList", {}, res => {
          if (res.data.resultCode == 1) {
            this.CarClassList = res.data.data
          } else {
            this.Error(res.data.message);
          }
        })
      },



      getData(ID) {
        this.loading = true;
        this.apipost("/api/GuideCar/GetGuideCarModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
          this.addMsg.ColorList.forEach(x=>{
            if(x.PicList==null){
              x.PicList=[];
            }
          })

        })
      },
      delete_b(index){
        this.addMsg.ColorList.splice(index,1)
      },
      ClearCarouse(index,index2) {
        this.addMsg.ColorList[index].PicList.splice(index2, 1);
      },
      addOf(){
        let obj  = {
          ID:0,
          PicList:[],
          ColorName:'',
        }
        this.addMsg.ColorList.push(obj)
      },
    },
    mounted() {
    }
  };
</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }

  .addCar .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .addCar .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .addCar .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .addCar .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .addCar .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .addCar .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .addCar .el-form-item {
    position: relative;
  }

  .addCar .blue {
    color: #409EFF;

  }

  .addCar .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .addCar .content form{
    width:50%;
  }
  .addCar .gez_list{
    /*width: 650px;*/
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;

  }
  .addCar .quyu{
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }
  .addCar .imgstyle{
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }
  .addCar .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }
  .addCar .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .addCar .nav_IconContent div>div {
    display: inline-block;
  }
  .addCar .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }
  .addCar .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }
  @media (max-width:1400px) and (min-width:0) {
    .addCar .content form{
      width: 100%;
    }
  }

</style>
