<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="车型名称">
            <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="房车品牌">
            <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>

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

      <el-form-item label="房车配置"></el-form-item>
      <el-row>
        <el-col :span="8"  v-for="(item, index) in labelList">
          <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">
          <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="轮播图" :style="{display:'block'}">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          action="https://xxtest.upyuns.com/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张</div>
          <el-button v-if="fileList2.length<5" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="车型详情">
        <Editor @input="handelIncrease" :value="form.modelsDetails" :myQuillEditor="'myQuillEditor'"></Editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="title=='创建'" @click="create()">确 定</el-button>
      <el-button type="primary" v-if="title=='编辑'" @click="update()">确 定</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>
  .el-upload-list{
    display: flex;
    width: 100px;
  }
  .el-upload-list li{
    margin-left: 10px;
  }
</style>
<script>
  import Editor from "../../modal/editorTool";//富文本
  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"],
    name: 'upkeepDialog',
    components: {
      ElRadio,
      ElFormItem,
      ElCol,
      ElRow,
      Editor
    },
    data() {
      return {
        labelList:[],//全部车型标签
        fileList2:[],
        form: {
          name: undefined,//房车名称
          config: "",//房车配置
          keyword: "",//房车关键标签
          modelsDetails: "",//房车详情
          modelParam: "",//房车参数
          picture: "",//轮播图
          price: 0,//租车价格
          deposit: 20000,//总押金
          vioDeposit: 0,//违章押金
          hotSign: "1",//热门车型
          rentDiscountStatus:"0",//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
          RentDiscountPrice: 0,//租车优惠价格  固定优化价格
          buyPrice: 0,//购买价格
        },
        showDestinationVisible: false,//编辑目的地
        showPathWayVisible: false,//编辑途径地
        rules: {
          name: [
            {
              type: 'string',
              required: true,
              message: '请输入消息内容',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 100,
              message: '长度小于 100 个字符',
              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 {
            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(",");
          }
        });
      },
      /**
       * 创建
       * */
      create(){
        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,//轮播图
          price: this.form.price,//租车价格
          deposit: this.form.deposit,//总押金
          vioDeposit: this.form.vioDeposit,
//          "hotSign": this.form.hotSign,//热门车型
//          "rentDiscountStatus":"0",//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
//          "RentDiscountPrice":"",//租车优惠价格  固定优化价格
          buyPrice: this.form.buyPrice,//购买价格
        };
        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
            });
          }
        });
      },
      /**
       * 编辑
       * */
      update(){
        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,//租车价格
          deposit: this.form.deposit,//总押金
          vioDeposit: this.form.vioDeposit,
//          "hotSign": this.form.hotSign,//热门车型
//          "rentDiscountStatus":"0",//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
//          "RentDiscountPrice":"",//租车优惠价格  固定优化价格
          buyPrice: this.form.buyPrice,//购买价格
        };
        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
            });
          }
        });
      },
      /**
       * 关闭编辑车型
       */
      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 = [];debugger
                  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;
          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;
          this.form = response.data;
        })
      },
      /**
       * 深拷贝
       */
      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
       */
      handelIncrease(step) {
        this.form.modelsDetails = step;
      },
      /**
       * 删除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.form = {
          name: undefined,//房车名称
            config: "",//房车配置
            keyword: "",//房车关键标签
            modelsDetails: "",//房车详情
            modelParam: [],//房车参数
            picture: "",//轮播图
            price: 0,//租车价格
            deposit: 20000,//总押金
            vioDeposit: 0,//违章押金
            hotSign: "1",//热门车型
            rentDiscountStatus:"0",//租车优惠状态 0--没有优惠;1--会员折扣;2--固定值
            RentDiscountPrice: 0,//租车优惠价格  固定优化价格
            buyPrice: 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>
