<template>
  <div v-loading="loading" class="addGuide">
    <div class="head-title">
      <span @click="CommonJump('carmanageList')" class="blue point">{{$t('objFill.v101.cheliangli')}}</span> / {{$t('objFill.v101.bianjicelgli')}}
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">

        <el-form-item :label="$t('objFill.v101.cheliangminc')" prop="CarName" class="is-required">
          <el-input v-model="addMsg.CarName" size="small" :placeholder="$t('objFill.v101.qingsrzdminc')" />
        </el-form-item>
        <el-form-item :label="$t('ground.busType')" prop="CarType" class="is-required">
          <el-select class="w120" v-model="addMsg.CarType" size="small" :placeholder="$t('pub.pleaseSel')">
            <el-option v-for="item in companyList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="logo" size="small">
          <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
            :show-file-list="false" :http-request="UploadImage">
            <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.jianyiccybsyb')" placement="top">
              <el-button>{{$t('objFill.xuanzhewj')}}</el-button>
            </el-tooltip>
          </el-upload>

          <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="$t('objFill.v101.chelianxhao')" prop="CarModel" class="is-required" size="small">
          <el-input v-model="addMsg.CarModel" :placeholder="$t('objFill.v101.qingsrclxinh')">
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('objFill.v101.chelianyse')" prop="CarColor" class="is-required" size="small">
          <el-input v-model="addMsg.CarColor" :placeholder="$t('objFill.v101.qingsrclyse')" />
        </el-form-item>
        <el-form-item :label="$t('objFill.v101.cheliangpinp')" prop="BrandName" class="is-required" size="small">
          <el-input v-model="addMsg.BrandName" :placeholder="$t('objFill.v101.qingsrclpinp')" />
        </el-form-item>
        <el-form-item :label="$t('objFill.chepaihao')" size="small">
          <el-input v-model="addMsg.CarNo" :placeholder="$t('objFill.qingshurucph')" />
        </el-form-item>
        <el-form-item :label="$t('objFill.v101.hezairens')" prop="GuestNum" class="is-required" size="small">
          <el-input v-model="addMsg.GuestNum" :placeholder="$t('objFill.v101.qingsrhezrs')" type='Number'>
            <template slot="append">{{$t('hotel.hotel_people')}}</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('objFill.v101.tupianlieb')" size="small">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <draggable v-model="addMsg.ImageList">
                <div v-for="(item, index) in addMsg.ImageList" :key="index+'2'"
                  style="margin-right: 20px; position: relative; ">
                  <div class="colapp-image" :style="{
                            backgroundImage: 'url(' + item + ')'
                          }"></div>
                  <el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close" circle>
                  </el-button>
                </div>
              </draggable>
            </div>
            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
              :show-file-list="false" :http-request="UploadAttachment" multiple>
              <div class="add-image-btn 2222">
                + {{$t('pub.addImg')}}
              </div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')" >{{$t('pub.saveBtn')}}</el-button>
    </div>

    <!-- 选择文件 -->
    <el-dialog :title="$t('objFill.xuanzhewj')" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>

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

  export default {
    components: {
      // ChooseImg,
      // UE,
      draggable
    },
    data() {
      return {
        addMsg: {
          Id: 0,
          CarName: '',
          CarType: '',
          CarLogo: '',
          CarModel: '',
          CarColor: '',
          BrandName: '',
          CarNo: '',
          GuestNum: '',
          ImageList: [],
        },
        rules: {

          CarName: [{
            required: true,
            message: this.$t('objFill.v101.qingsrchelmc'),
            trigger: 'blur'
          }],
          CarType: [{
            required: true,
            message: this.$t('objFill.v101.busManagement.qingxzclx'),
            trigger: 'blur'
          }],

          CarModel: [{
            required: true,
            message: this.$t('objFill.v101.qingsrclxinh'),
            trigger: 'blur'
          }],
          CarColor: [{
            required: true,
            message: this.$t('objFill.v101.qingsrclyse'),
            trigger: 'blur'
          }],
          BrandName: [{
            required: true,
            message: this.$t('objFill.v101.qingsrclpinp'),
            trigger: 'blur'
          }],

          GuestNum: [{
            required: true,
            message: this.$t('objFill.v101.qingsrhezrs'),
            trigger: 'blur'
          }],

        },
        loading: false,
        CarSiteList: [],
        changeState: false,
        imgType: 0,
        companyList: [],
      };
    },
    created() {
      this.getCompany()

      if (this.$route.query.obj) {
        var list = decodeURIComponent(this.$route.query.obj);
        let data = JSON.parse(list)
        this.addMsg.Id = data.Id;
        this.addMsg.CarName = data.CarName;
        this.addMsg.CarType = data.CarType;
        this.addMsg.CarLogo = data.CarLogo;
        this.addMsg.CarModel = data.CarModel;
        this.addMsg.CarColor = data.CarColor;
        this.addMsg.BrandName = data.BrandName;
        this.addMsg.CarNo = data.CarNo;
        this.addMsg.GuestNum = data.GuestNum;
        this.addMsg.ImageList = data.ImageList;
        //   this.getData(this.$route.query.ID)
      }
    },
    methods: {
      getCompany() {
        this.apipost('car_get_GetCarCustomTypeEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          }
        }, err => {})
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.CarLogo = url
        }

      },
      UploadAttachment(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.ImageList.push(imgUrl)
        });
      },
      ClearCarouse(index) {
        this.addMsg.ImageList.splice(index, 1);
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('car_post_SetCarInfo', this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('carmanageList');
                this.Success(res.data.message);
              }
            }, err => {})
          } else {
            return false;
          }
        });
      },
      getData(ID) {
        this.loading = true;
        this.lxymallapipost("/api/GuideCar/GetGuideCarGuideModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
          // if (this.addMsg.Introduction && this.addMsg.Introduction != "") {
          //   this.defaultMsg = this.addMsg.Introduction;
          // }
        })
      },
      //图片上传
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {

          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.CarLogo = imgUrl
        });
      },
    },
    mounted() {}
  };

</script>
<style>
  @import '../Lxy/css/index.css';

  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .ql-toolbar span {
    line-height: 24px;
  }

  .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;
  }

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

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

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

  }

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

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

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

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

  .addGuide .blue {
    color: #409EFF;

  }

  .addGuide .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .addGuide .gez_list {
    width: 650px;
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }

  .addGuide .quyu {
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }

  .addGuide .imgstyle {
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }

  .addGuide .ql-toolbar.ql-snow .ql-formats {
    margin-right: 5px;
    line-height: 24px;
  }

  .addGuide .nav_Main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .addGuide .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .addGuide .nav_IconContent div>div {
    display: inline-block;
  }

  .addGuide .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }

  .addGuide .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

  .addGuide .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

</style>