<!--
组件描述：
结合了picker和sheet  模拟了html的select效果
-->
<template>
  <div class="perparContent">
    <span
      class="singlePerparInfo"
      v-on:click="modelIdClick"
    >{{modelName}}<a class="down-arrow"></a></span>
    <span
      v-show="parentData.subShow"
      class="singlePerparInfo"
      v-on:click="brandIdClick"
    >{{brandName}}<a class="down-arrow"></a></span>
    <mt-popup
      v-model="popupVisible"
      position="bottom"
      class="mint-popup-4"
    >
      <div class="page-picker-wrapper">
        <mt-picker
          :slots="modelsKey"
          value-key="name"
          @change="onValuesChangeOfModel"
          :visible-item-count="5"
          ref="picker"
        ></mt-picker>
      </div>
    </mt-popup>
    <mt-popup
      v-model="brandPopupVisible"
      position="bottom"
      class="mint-popup-4"
    >
      <div class="page-picker-wrapper">
        <mt-picker
          :slots="brandsKey"
          value-key="name"
          @change="onValuesChangeOfBrand"
          :visible-item-count="5"
          ref="picker"
        ></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  name: "mintSelect",
  props: {
    parentData: {}
  },
  data() {
    return {
      subShow: false,
      popupVisible: false,
      brandPopupVisible: false,
      modelName: "全部",
      brandName: "全部",
      brandId: "",
      modelId: "",
      modelsKey: [
        //车系
        {
          flex: 1,
          values: [
            {
              index: 0,
              code: "",
              name: "全部"
            }
          ],
          textAlign: "center",
          className: "slot1",
          defaultIndex: 0
        }
      ],
      brandsKey: [
        //品牌
        {
          flex: 1,
          values: [
            {
              index: 0,
              code: "",
              name: "全部"
            }
          ],
          textAlign: "center",
          className: "slot1",
          defaultIndex: 0
        }
      ]
    };
  },
  mounted: function() {
    //初始化车型库
    this.getModelKey();
  },
  methods: {
    //点击车型
    modelIdClick() {
      this.popupVisible = true;
    },
    //点击品牌
    brandIdClick() {
      this.brandPopupVisible = true;
    },
    onValuesChangeOfBrand(picker, values) {
      this.brandName = values[0].name;
      var data = {
        name: "brand",
        code: values[0].code
      };
      this.brandId = values[0].code;
      //子组件向父组件传递参数
      ///this.$emit("func", data);
    },
    onValuesChangeOfModel(picker, values) {
      this.modelName = values[0].name;
      var data = {
        name: "model",
        code: values[0].code
      };
      this.modelId = values[0].code;
      //切换model
      var code = values[0].code;
      //子组件向父组件传递参数
      //this.$emit("func", data);
      var url = this.HOME + this.parentData.subPostUrl + code; //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
      this.$axios({
        //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
        method: "get",
        url: url,
        data: {}
      })
        .then(res => {
          var arr = res.data.data;
          var values = [];
          //模型对象中转
          for (const item in arr) {
            var single = {
              index: parseInt(item),
              code: arr[item].id,
              name: arr[item].name
            };
            values.push(single);

            this.brandsKey[0].values.push(single);
          }
          //this.$refs.picker.setSlotValues(0, values);
          console.log(this.modelsKey);
          //this.modelsKey = res.data.modelkey;
        })
        .catch(err => {
          //console.log(err);
          Toast(err.data.result.resultDesc);
        });
    },
    getModelKey() {
      var url = this.HOME + this.parentData.postUrl; //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
      var param = this.parentData.param || {};
      this.$axios({
        //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
        method: "post",
        url: url,
        data: param
      })
        .then(res => {
          var arr = res.data.data.modelkey;
          var values = [];
          //模型对象中转
          for (const item in arr) {
            var single = {
              index: parseInt(item),
              code: arr[item].id,
              name: arr[item].name
            };
            values.push(single);

            this.modelsKey[0].values.push(single);
          }
          //this.$refs.picker.setSlotValues(0, values);
          console.log(this.modelsKey);
          //this.modelsKey = res.data.modelkey;
        })
        .catch(err => {
          //console.log(err);
          Toast(err.data.result.resultDesc);
        });
    }
  }
};
</script>
<style>
.perparContent {
  margin-top: 10px;
  display: block;
}
.singlePerparInfo {
  padding: 5px 5px 5px 10px;
  border-radius: 6px;
  border: 1px solid #eeeeee;
  display: inline-block;
  font-size: 13px;
  margin-right: 5px;
  /* background: #dddddd; */
}
.down-arrow {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 10px;
  margin-bottom: 2px;
  margin-left: 10px;
}
.down-arrow.active::after {
  transform-origin: center;
  transform: rotate(-135deg);
  transition: transform 0.3s;
  margin-bottom: -3px;
}
.down-arrow::after {
  display: inline-block;
  content: " ";
  height: 7px;
  width: 7px;
  border-width: 0 1px 1px 0;
  border-color: #999999;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform-origin: center;
  transition: transform 0.3s;
  position: absolute;
}
.mint-popup-bottom {
  width: 100%;
}
/* ------------------------- */
</style>

