<template>
  <!-- 车型：创建、编辑 -->
  <div>
    <h4>{{title}}</h4>
    <el-form :model="form" :rules="rules" ref="form" label-width="90px">

      <el-row>
        <el-col :span="8">
          <el-form-item label="车型名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入车型名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车型简介" prop="intro">
            <el-input class="cx" v-model="form.intro"  :rows="9"   type="textarea"  placeholder="请输入车型简介" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="热门车型">
        <el-radio class="radio" v-model="form.hotSign" label="1">是</el-radio>
        <el-radio class="radio" v-model="form.hotSign" label="2">否</el-radio>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="房车品牌">
            <el-select class="filter-item" v-model.number="form.brand" placeholder="请选择房车品牌">
              <el-option v-for="(val, key, index) in brandlist " :key="val.id" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="乘卧数量">
            <el-select class="filter-item" v-model="form.number" placeholder="请选择乘卧数量">
              <el-option v-for="(val, key, index) in numberList " :key="val.id" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="房车原价" prop="operator">
            <el-input v-model="form.price" type="number" min="0" placeholder="请输入房车原价"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="购买价格" prop="operator">
            <el-input v-model="form.buyPrice" type="number" min="0" placeholder="请输入房车购买价格"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="总押金" prop="operator">
            <el-input v-model="form.deposit" type="number" min="0" placeholder="请输入总押金"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="违章押金" prop="operator">
            <el-input v-model="form.vioDeposit" type="number" min="0" placeholder="请输入违章押金"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--租车优惠状态 0;没有优惠;1;会员折扣;2;固定值-->
      <el-form-item label="优惠状态">
        <el-radio-group v-model="form.rentDiscountStatus">
          <el-radio class="radio" label="0">没有优惠</el-radio>
          <el-radio class="radio" label="1">会员折扣</el-radio>
          <el-radio class="radio" label="2">固定值</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row v-if="form.rentDiscountStatus==2">
        <el-col :span="4">
          <el-form-item label="普通会员">
            <el-input v-model="form.pPrice" type="number" min="0" placeholder="请输入普通会员价格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="黄金会员">
            <el-input v-model="form.hPrice" type="number" min="0" placeholder="请输入黄金会员价格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="钻石会员">
            <el-input v-model="form.zPrice" type="number" min="0" placeholder="请输入钻石会员价格"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="房车配置"></el-form-item>
      <el-row>
        <el-col :span="8" v-for="(item, index) in labelList" :key="item.id">
          <el-form-item>
            <span
              style="width: 150px;text-align:right;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 10px;">{{item.parent.name}}</span>
            <el-input v-model="item.selectChild" readonly icon="edit" @click="editConfig(item)"
                      style="width: 70%;"></el-input>
            <!--<el-select v-model="item.childNameLists" style="width: 80%" v-if="item.parent.isMore==1" multiple placeholder="请选择" @change = "selectItem">-->
            <!--<el-option-->
            <!--v-for="iitem in item.children"-->
            <!--:key="iitem.name"-->
            <!--:label="iitem.name"-->
            <!--:value="iitem.id">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--<el-select v-model="item.childNameLists" v-else placeholder="请选择" @change = "selectItem">-->
            <!--<el-option-->
            <!--v-for="iitem in item.children"-->
            <!--:key="iitem.id"-->
            <!--:label="iitem.name"-->
            <!--:value="iitem.id">-->
            <!--</el-option>-->
            <!--</el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="关键标签">
            <!--<el-select v-model="value5" multiple placeholder="请选择" style="width: 100%;">-->
            <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <el-input v-model="form.keyword" placeholder="请输入关键标签" readonly icon="edit" @click="editLabe"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="房车参数">
        <el-button size="small" class="el-button el-button--primary" type="button" icon="plus" @click="addModelParam()">
          添加
        </el-button>
        <el-col v-for="(item, index) in form.modelParam" :key="index">
          <el-form-item label="参数名称" style="margin: 10px 5px;">
            <el-input style="width: 30%;" v-model="item.key"></el-input>
            <el-input style="width: 30%;" v-model="item.val"></el-input>
            <el-button type="danger" size="small" @click="delModelParam(index)">删除</el-button>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-progress="uploadProcess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：320*228px</span></div>
          <el-progress v-show="imgFlag == true" type="circle" :percentage="percent"
                       style="margin-top: 20px"></el-progress>
          <img v-if="$utils.isString(form.coverPic) && !$utils.isEmpty(form.coverPic) && !imgFlag" :src="form.coverPic"
               style="width:300px;max-height:300px;">
          <i v-else-if="!imgFlag" class="el-icon-plus avatar-uploader-icon"
             style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
        </el-upload>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="alt">
            <el-input v-model="form.alt" type="text" placeholder="请输入替代文本"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-title">
            <el-input v-model="form.imgTitle" type="text" placeholder="请输入图片title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-keyword">
            <el-input v-model="form.imgKeyword" type="text" placeholder="请输入图片关键字"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-desc">
            <el-input v-model="form.imgDesc" type="text" placeholder="请输入图片描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="海报背景" :style="{display:'block'}">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :show-file-list="false"
          :on-success="handlePosterSuccess"
          :on-progress="uploadPosterProcess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：320*228px</span></div>
          <el-progress v-show="imgPosterFlag == true" type="circle" :percentage="percent_poster"
                       style="margin-top: 20px"></el-progress>
          <img v-if="$utils.isString(form.posterBackground) && !$utils.isEmpty(form.posterBackground)&& !imgPosterFlag"
               :src="form.posterBackground" style="width:300px;max-height:300px;">
          <i v-else-if="!imgPosterFlag" class="el-icon-plus avatar-uploader-icon"
             style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="轮播图" :style="{display:'block'}">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :on-remove="handleRemove"
          :file-list="fileList2"
          :on-success="handleBannerSuccess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip">最多上传5张 <span style="color: red;">建议尺寸：1080*470px</span></div>
          <el-button v-if="fileList2.length<5" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-tabs v-model="activeName2" type="card">
        <el-tab-pane label="车型详情" name="first">
          <!--<Editor @input="handelIncrease" :value="form.modelsDetails" :myQuillEditor="'myQuillEditor'"></Editor>-->
          <div class="editor-container" v-if="activeName2=='first'">
            <UE :editorId="activeName2" :defaultMsg="form.modelsDetails" :config=config ref="ue"
                @ready="editorReadyEvent"></UE>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="title=='创建'" @click="create('form')">确 定</el-button>
      <el-button type="primary" v-if="title=='编辑'&&vehicleTypeList_btn_edit" @click="update('form')">确 定</el-button>
    </div>

    <!--配置弹框-->
    <el-dialog :title="modalTitle" :visible.sync="configDialogVisible">
      <el-form label-width="90px">
        <el-form-item v-if="configItem.parent.isMore==0">
          <el-radio-group v-model="childName">
            <el-radio v-for="item in configItemChildren" :key="item.id" :label="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="configItem.parent.isMore==1">
          <el-checkbox-group v-model="childNameLists">
            <el-checkbox v-for="item in configItemChildren" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandel">取 消</el-button>
        <el-button type="primary" @click="updateConfig">确 定</el-button>
      </div>
    </el-dialog>

    <!--关键标签弹框-->
    <el-dialog title="关键标签编辑" :visible.sync="keywordDialogVisible">
      <el-form label-width="90px">
        <el-checkbox-group v-model="selectedLabel">
          <el-checkbox v-for="item in canSelectLabel" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandelLabel">取 消</el-button>
        <el-button type="primary" @click="updateLabel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  textarea {
    display: none;
  }

  .el-upload-list {
    display: flex;
    width: 100px;
  }

  .el-upload-list li {
    margin-left: 10px;
  }
</style>
<script>
    //  import Editor from "../../modal/editorTool";//富文本
    import UE from '../../modal/Ueditor';//百度ue富文本
    import {
        getOneTypeById,
        getAllParentLabel,
        getLabelList,
        updateVehicleModel,
        addVehicleModel
    } from 'api/vehicleType';
    import rsCode from '../../../utils/rsCode';
    import {
        getToken
    } from '../../../utils/auth';
    import {mapGetters} from 'vuex';
    import ElRow from "element-ui/packages/row/src/row";
    import ElCol from "element-ui/packages/col/src/col";
    import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
    import ElRadio from "../../../../node_modules/element-ui/packages/radio/src/radio.vue";

    export default {
        props: ["oneRow", "title", "brandlist", "numberList", "vehicleTypeList_btn_edit"],
        name: 'upkeepDialog',
        components: {
            ElRadio,
            ElFormItem,
            ElCol,
            ElRow,
            UE
        },
        data() {
            return {
                imgPosterFlag: false,
                percent_poster: 0,
                BASE_API: process.env.BASE_API,
                percent: 0,//上传进度
                imgFlag: false,
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                labelList: [],//全部车型标签
                fileList2: [],
                activeName2: '',//房车详情
                form: {
                    alt: '',
                    imgTitle: undefined,
                    imgKeyword: undefined,
                    imgDesc: undefined,
                    coverPic:'',
                    pPrice: 0,//普通会员
                    hPrice: 0,//黄金会员
                    zPrice: 0,//钻石会员
                    name: undefined,//房车名称
                    config: "",//房车配置
                    keyword: "",//房车关键标签
                    modelsDetails: "",//房车详情
                    modelParam: "",//房车参数
                    picture: "",//轮播图
                    price: 0,//租车价格
                    deposit: 20000,//总押金
                    vioDeposit: 0,//违章押金
                    hotSign: "2",//热门车型  1、热门  2、非热门
                    rentDiscountStatus: "0",//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
                    rentDiscountPrice: 0,//租车优惠价格  固定优化价格
                    buyPrice: 0,//购买价格
                    intro: '',
                    posterBackground: '',//海报背景
                },
                showDestinationVisible: false,//编辑目的地
                showPathWayVisible: false,//编辑途径地
                rules: {
                    name: {
                        type: 'string',
                        required: true,
                        message: '请输入车型名称',
                        trigger: 'blur'
                    }
                },
                checkList: [],//已选中的标签
                allCompanies: {},
                allCompaniesArr: [],
                oneTypeDialogVisible: false,
                allUpkeepItems: null,
                dialogStatus: undefined,
                allLabelList: [],//全部标签
                showName: "",
                configDialogVisible: false,//配置弹框
                modalTitle: "修改房车配置",
                configItem: {parent: {isMore: 0}},//待编辑配置数据
                configItemChildren: [],//待配置的二级标签
                childNameLists: [],
                childName: "",
                totalLabel: [],//关键标签id
                canSelectLabel: [],//可选择的二级标签
                selectedLabel: [],//已选中的标签
                keywordDialogVisible: false,//关键标签弹框
            }
        },
        created() {
        },
        watch: {
            oneTypeDialogVisible(newValue, oldValue) {
                if (!newValue) {
                    this.cleanForm();
                }
            },
        },
        mounted() {
            this.cleanForm();
            this.getAllTag();
            this.oneTypeDialogVisible = true;
        },
        computed: {
            ...mapGetters([
                'elements',
                'vehicleWarningMsgType'
            ]),
            getHeaderWithToken() {
                return {Authorization: getToken()};
            }
        },
        methods: {
            changeConfig() {
                console.log(this.configItemChildren);
            },
            /**
             * 获取全部一级、二级分类数据
             * */
            getAllTag() {
                let listQuery = {sort: 1, page: 1, limit: 10};
                let that = this;
                getLabelList(listQuery).then(response => {
                    let listRs = undefined;
                    if (!this.$utils.isEmpty(response.data)) {
                        listRs = response.data;
                        response.data.map(function (item) {
                            item.childName = [];
                        })
                    }
                    this.labelList = listRs;
                    if (this.title == "编辑") {
                        let row = this.oneRow;
                        this.getOne(row.id);
                    } else {
                        this.activeName2 = "first";
                        let tagArr = [];
                        this.labelList.map(function (iitem) {
                            if (iitem.children.length > 0) {
                                tagArr.push(iitem.children[0].id);
                            }
                        });
                        this.form.brand = this.brandlist[0].id;
                        this.form.number = this.numberList[0].id;
                        this.labelList.map(function (iitem) {
                            let p = [];
                            let pp = [];
                            let aa = [];
                            iitem.childNameLists = [];
                            iitem.children.map(function (c) {
                                tagArr.map(function (ii) {
                                    if (c.id == ii) {
                                        p.push(c);
                                        aa.push(c.name);
                                        pp.push(c.id);
                                    }
                                });
                            });
                            iitem.childNameList = p;
                            iitem.childNameLists = pp;
                            iitem.selectChild = aa.join(",");
                        });
                        /**
                         * 关键标签可选的二级分类
                         * */
                        let labelArr = [];
                        that.labelList.map(function (i) {
                            i.childNameLists.map(function (ii) {
                                labelArr.push(ii)
                            });
                        });
                        that.totalLabel = labelArr;
                        let canSelectLabel = [];
                        that.labelList.map(function (i) {
                            i.children.map(function (ic) {
                                that.totalLabel.map(function (c) {
                                    if (ic.id == c) {
                                        canSelectLabel.push(ic);
                                    }
                                })
                            })
                        });
                        this.canSelectLabel = canSelectLabel;

                        this.form.config = tagArr.join(",");
                    }
                });
            },
            /**
             * 封面图上传进度
             * */
            uploadProcess(event, file, fileList) {
                this.imgFlag = true;
                console.log(event.percent);
                this.percent = Math.floor(event.percent);
            },
            /**
             * 海报背景图上传进度
             * */
            uploadPosterProcess(event, file, fileList) {
                this.imgPosterFlag = true;
                console.log(event.percent);
                this.percent_poster = Math.floor(event.percent);
            },
            /**
             * 封面图上传
             * **/
            handleAvatarSuccess(res, file) {
                this.percent = 0;
                this.imgFlag = false;
                this.form.coverPic = res.data;
            },
            /**
             * 海报背景上传
             * **/
            handlePosterSuccess(res, file) {
                this.percent_poster = 0;
                this.imgPosterFlag = false;
                this.form.posterBackground = res.data;
            },
            /**
             * 创建
             * */
            create(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            number: this.form.number,//乘卧数量
                            brand: this.form.brand,//房车品牌
                            name: this.form.name,//房车名称
                            config: this.totalLabel.join(","),//房车配置
                            keyword: this.form.keyword,//房车关键标签
                            modelsDetails: this.form.modelsDetails,//房车详情
                            modelParam: JSON.stringify(this.form.modelParam),//房车参数
                            picture: this.form.picture,//轮播图
                            coverPic: this.form.coverPic,//封面图
                            posterBackground: this.form.posterBackground,//海报背景
                            price: this.form.price,//租车价格
                            deposit: this.form.deposit,//总押金
                            vioDeposit: this.form.vioDeposit,
                            hotSign: this.form.hotSign,//热门车型
                            rentDiscountStatus: this.form.rentDiscountStatus,//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
                            buyPrice: this.form.buyPrice,//购买价格
                            alt: this.form.alt,//seo 标签优化
                            intro: this.form.intro,
                            imgTitle: this.form.imgTitle,
                            imgKeyword: this.form.imgKeyword,
                            imgDesc: this.form.imgDesc,
                        };
                        if (this.form.rentDiscountStatus == 2) {
                            params.rentDiscountPrice = this.form.pPrice + "," + this.form.hPrice + "," + this.form.zPrice//租车优惠价格  固定优化价格
                        }
                        console.log(params);
                        console.log(this.form);
                        addVehicleModel(params).then(response => {
                            if (response.status === 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '创建成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.$emit("oneDialogEvent", true);
                            } else {
                                this.$notify({
                                    title: '创建失败',
                                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                                    type: 'error',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        return;
                    }
                });
            },
            /**
             * 编辑
             * */
            update(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.form.id,
                            number: this.form.number,//乘卧数量
                            brand: this.form.brand,//房车品牌
                            name: this.form.name,//房车名称
                            config: this.totalLabel.join(","),//房车配置
                            keyword: this.form.keyword,//房车关键标签
                            modelsDetails: this.form.modelsDetails,//房车详情
                            modelParam: JSON.stringify(this.form.modelParam),//房车参数
                            picture: this.form.picture,//轮播图
                            price: this.form.price,//租车价格
                            coverPic: this.form.coverPic,//封面图
                            posterBackground: this.form.posterBackground,//海报背景
                            deposit: this.form.deposit,//总押金
                            vioDeposit: this.form.vioDeposit,
                            hotSign: this.form.hotSign,//热门车型
                            rentDiscountStatus: this.form.rentDiscountStatus,//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
//          rentDiscountPrice:this.form.pPrice+","+this.form.hPrice+","+this.form.zPrice,//租车优惠价格  固定优化价格
                            buyPrice: this.form.buyPrice,//购买价格
                            alt: this.form.alt,//seo 标签优化
                            intro: this.form.intro,
                            imgTitle: this.form.imgTitle,
                            imgKeyword: this.form.imgKeyword,
                            imgDesc: this.form.imgDesc,
                        };
                        if (this.form.rentDiscountStatus == 2) {
                            params.rentDiscountPrice = this.form.pPrice + "," + this.form.hPrice + "," + this.form.zPrice//租车优惠价格  固定优化价格
                        }
                        console.log(params);
                        console.log(this.form);
                        updateVehicleModel(params).then(response => {
                            if (response.status === 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '编辑成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.$emit("oneDialogEvent", true);
                            } else {
                                this.$notify({
                                    title: '编辑失败',
                                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                                    type: 'error',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        return;
                    }
                });
            },
            /**
             * 关闭编辑车型
             */
            cancel() {
                this.cleanForm();
                this.$emit("oneDialogEvent", false);
            },
            /**
             * 编辑关键标签
             * */
            editLabe() {
                this.keywordDialogVisible = true;
            },
            /**
             * 删除房车参数
             * */
            delModelParam(index) {
                this.form.modelParam.splice(index, 1);
            },
            /**
             * 添加房车参数
             * */
            addModelParam() {
                console.log(this.form.modelParam);
                let c = {
                    key: "",
                    val: ""
                };
                this.form.modelParam.push(c);
            },
            /**
             * 关闭关键标签配置
             * */
            cancelHandelLabel() {
                this.keywordDialogVisible = false;
            },
            /**
             * 更新关键标签
             * */
            updateLabel() {
                let that = this;
                this.keywordDialogVisible = false;
                console.log(this.selectedLabel);
                let a = [];
                that.labelList.map(function (i) {
                    i.children.map(function (cc) {
                        that.selectedLabel.map(function (ii) {
                            if (ii == cc.id) {
                                a.push(cc.name);
                            }
                        })
                    });
                });
                that.form.keyword = a.join(",");
            },
            /**
             * 关闭房车配置弹框
             * */
            cancelHandel() {
                this.configDialogVisible = false;
            },
            /**
             * 更新房车配置弹框
             * **/
            updateConfig() {
                let that = this;
                this.configDialogVisible = false;
                if (this.configItem.parent.isMore == 0) {
                    //单选
                    console.log(this.childName);
                    that.labelList.map(function (i) {
                        if (i.parent.id == that.configItem.parent.id) {
                            i.children.map(function (ic) {
                                if (ic.id == that.childName) {
                                    i.selectChild = ic.name;
                                    let a = [];
                                    i.childNameLists[0] = that.childName;
                                }
                            })
                        }
                    });
                    console.log(that.labelList);
                } else {
                    if (this.childNameLists.length <= 0) {
                        return;
                    }
                    //多选
                    console.log(this.childNameLists);
                    that.labelList.map(function (i) {
                        let a = [];
                        if (i.parent.id == that.configItem.parent.id) {
                            i.children.map(function (ic) {
                                that.childNameLists.map(function (cc) {
                                    if (cc == ic.id) {
                                        a.push(ic.name);
                                    }
                                });
                                i.selectChild = a.join(",");
                                i.childNameLists = that.childNameLists;
                            })
                        }
                    });
                }
                let labelArr = [];
                let labelStr = that.form.keyword.split(",");
                that.labelList.map(function (i) {
                    i.childNameLists.map(function (ii) {
                        labelArr.push(ii)
                    });
//          let c = i.selectChild.split(",");
//          c.map(function (cc) {
//            labelStr.push(cc);
//          })
                });
                this.totalLabel = labelArr;//房车配置选中的全部标签id

//        that.form.keyword = labelStr.join(",");
                that.form.keyword = "";//  改变房车配置时，清空关键标签显示的文字
                that.selectedLabel = [];//  改变房车配置时，清空关键标签选中的id

                let canSelectLabel = [];
                that.labelList.map(function (i) {
                    i.children.map(function (ic) {
                        that.totalLabel.map(function (c) {
                            if (ic.id == c) {
                                canSelectLabel.push(ic);
                            }
                        })
                    })
                });
                this.canSelectLabel = canSelectLabel;//房车配置选中的全部标签，供关键标签选择使用
                console.log(this.canSelectLabel);
                console.log(this.totalLabel);
                console.log(that.form.keyword);
            },
            /**
             * editConfig
             * */
            editConfig(item) {
                this.configDialogVisible = true;
                this.childNameLists = [];
                this.childName = undefined;
                this.modalTitle = item.parent.name;
                item.childNameList.map(function (ii) {
                    ii.showName = ii.id;
                });
                this.configItem = item;//待编辑配置信息
                this.configItemChildren = item.children;//待配置的二级标签
                this.childNameLists = item.childNameLists;
                this.childName = item.childNameLists[0];
                console.log(item);
            },
            /**
             * 获取一条车型数据
             * */
            getOne(id) {
                let that = this;
                getOneTypeById(id).then(response => {
                    let item = response.data;
                    let pic = item.picture.split(",");
                    //轮播
                    let fileList2 = [];
                    pic.map(function (pp) {
                        let p = {
                            url: pp
                        };
                        fileList2.push(p);
                    });
                    this.fileList2 = fileList2;
                    let yhPrice = item.rentDiscountPrice ? item.rentDiscountPrice.split(",") : [];
                    if (item.rentDiscountPrice) {
                        item.pPrice = yhPrice.length >= 1 ? parseInt(yhPrice[0]) : 0;
                        item.hPrice = yhPrice.length >= 2 ? parseInt(yhPrice[1]) : 0;
                        item.zPrice = yhPrice.length >= 3 ? parseInt(yhPrice[2]) : 0;
                    }
                    item.rentDiscountStatus = item.rentDiscountStatus + "";
                    item.hotSign = item.hotSign + "";
                    item.brand = item.brand * 1;
                    item.number = item.number * 1;
                    item.modelParam = JSON.parse(item.modelParam);
                    let tagArr = response.data.config.split(",");
                    this.labelList.map(function (iitem) {
                        let p = [];
                        let pp = [];
                        let aa = [];
                        iitem.childNameLists = [];
                        iitem.children.map(function (c) {
                            tagArr.map(function (ii) {
                                if (c.id == ii) {
                                    p.push(c);
                                    aa.push(c.name);
                                    pp.push(c.id);
                                }
                            });
                        });
                        iitem.childNameList = p;
                        iitem.childNameLists = pp;
                        iitem.selectChild = aa.join(",");
                    });
                    /**
                     * 关键标签可选的二级分类
                     * */
                    let labelArr = [];
                    that.labelList.map(function (i) {
                        i.childNameLists.map(function (ii) {
                            labelArr.push(ii)
                        });
                    });
                    that.totalLabel = labelArr;
                    let canSelectLabel = [];
                    that.labelList.map(function (i) {
                        i.children.map(function (ic) {
                            that.totalLabel.map(function (c) {
                                if (ic.id == c) {
                                    canSelectLabel.push(ic);
                                }
                            })
                        })
                    });
                    this.canSelectLabel = canSelectLabel;
                    response.data.hotSign = response.data.hotSign ? response.data.hotSign : "2";
                    this.form = response.data;
                    this.activeName2 = "first";
                })
            },
            /**
             * 深拷贝
             */
            objDeepCopy(source) {
                var sourceCopy = source instanceof Array ? [] : {};
                for (var item in source) {
                    sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
                }
                return sourceCopy;
            },
            querySearch(queryString, cb) {
                let selectArry = [];
                this.allCompaniesArr.map(function (item) {
                    item.value = item.name;
                    selectArry.push(item);
                });
                this.selectArry = selectArry;
                var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            /**
             * 富文本内容
             * @param step
             */
            editorReadyEvent(instance) {
                let t = this;
                instance.addListener('contentChange', () => {
                    t.form.modelsDetails = instance.getContent();
                });
            },
            /**
             * 删除banner
             * */
            handleRemove(file, fileList) {
                let list = [];
                fileList.map(function (item) {
                    if (item.url != file.url) {
                        list.push(item);
                    }
                });
                this.fileList2 = list;
                let arr = [];
                let picture = this.form.picture.split(",");
                picture.map(function (item) {
                    if (item != file.url) {
                        arr.push(item);
                    }
                });
                this.form.picture = arr.join(",");
            },
            /**
             * banner上传
             * */
            handleBannerSuccess(res, file) {
                this.fileList2.push({url: res.data});
                let c = [];
                this.fileList2.map(function (i) {
                    c.push(i.url);
                });
                this.form.picture = c.join(",");
            },
            /**
             * 清空旅游弹框数据
             */
            cleanForm() {
                this.activeName2 = "";
                this.form = {
                  number: undefined,//乘卧数量
                  brand: undefined,//房车品牌
                  name: '',//房车名称
                  config:'',//房车配置
                  keyword: '',//房车关键标签
                  modelsDetails: '',//房车详情
                  modelParam: '',//房车参数
                  picture: '',//轮播图
                  coverPic: '',//封面图
                  posterBackground: '',//海报背景
                  price: undefined,//租车价格
                  deposit: 20000,//总押金
                  vioDeposit: '',
                  rentDiscountStatus: 0,//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
                  buyPrice: undefined,//购买价格
                  alt: '',//seo 标签优化
                  intro: '',
                  imgTitle: '',
                  imgKeyword: '',
                  imgDesc: '',
                  pPrice: 0,//普通会员
                  hPrice: 0,//黄金会员
                  zPrice: 0,//钻石会员
                  hotSign: "2",//热门车型  1、热门  2、非热门
                  rentDiscountPrice: 0,//租车优惠价格  固定优化价格
                }
            }
        }
    }
</script>
<style>
  .flex-aic {
    display: flex;
    align-items: center;
  }

  .left-item {
    width: 300px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 3px;
  }

  .right-item {
    width: 400px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 3px;
  }
</style>
