<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
              suffix-icon="el-icon-edit"
              @click.native="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="全景链接">
            <el-input
              v-model="form.panoramaUrl"
              type="text"
              placeholder="请输入全景链接"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <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: "", //海报背景
        panoramaUrl: undefined,
      },
      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,
            panoramaUrl: this.form.panoramaUrl,
          };
          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,
            panoramaUrl: this.form.panoramaUrl,
          };
          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() {
      let c = {
        key: "",
        val: "",
      };
      if (this.form.modelParam.length < 1) {
        this.form.modelParam = [];
      }
      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() {
      debugger;
      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) {
      console.log("123");
      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>
