// components/wan-select/select.js
Component({
    options: {
      addGlobalClass: true,
    },
    properties: {
      /* --------- 样式参数 --------- */
      titleWidth: { // 标题长度
        type: String,
        value: "60px"
      },
      bgColor: { // 输入框背景颜色
        type: String,
        value: "#fff"
      },
      itemBgColor: { // 选中的选项背景颜色
        type: String,
        value: "#F5F8FE"
      },
      textColor: { // 选中的字体颜色
        type: String,
        value: "#3772E9"
      },
      /* --------- 数据参数 --------- */
      title: { // 下拉框标题
        type: String,
        value: ""
      },
      options: { // 选项数组
        type: Array,
        value: [],
      },
      labelName: { // 选项数组-绑定的label名称
        type: String,
        value: "dictLabel",
      },
      valueName: { // 选项数组-绑定的value名称
        type: String,
        value: "dictValue"
      },
      modelValue: { // 绑定的value
        type: String,
        value: "",
        observer: function () {
          //如果有默认值，需要匹配出name，所以这里使用obersver，当父组件中值改变时触发
          this.handleData();
        }
      },
      placeholder: { // 输入框为空时占位符
        type: String,
        value: "请选择"
      },
      disabled: { // 是否禁用
        type: Boolean,
        value: false
      },
      readonly: { // 是否只读
        type: Boolean,
        value: false
      }
    },
    /**
     * 页面的初始数据
     */
    data: {
      show: false, //选项框及图标展示
      selectValue: "", //选中的value
      selectLabel: "", //选中的label
      toTop: false, // 下拉框是否展示在输入框上方
    },
    attached() {
      this.handleData()
    },
    methods: {
      // 清空输入框
      clearInput() {
        this.setData({
          selectValue: "", //选中的value
          selectLabel: "", //选中的label
          show: false,
        })
      },
      // 下拉框收起和展开
      changeShow(e) {
        let that = this
        const query = wx.createSelectorQuery();
        // 选择当前点击的 view 元素
        query.select('.inputPlaceholder').boundingClientRect();
        query.exec(function (res) { // res[0].bottom 是元素距离可视区域顶部的距离加上元素自身的高度; res[1].scrollTop 是页面的滚动距离
          var show = !that.data.show
          if (res[0]) {
            /* that.triggerEvent("handleShow", show); // [暂未发现]处理滚动选项区域时背景页面滚动问题 */
            let toBottom = wx.getSystemInfoSync().windowHeight - res[0].bottom;
            console.log('距离设备底部的距离:', toBottom);
            that.setData({
              toTop: toBottom < 160 ? true : false,
              show: show
            })
          } else {
            that.setData({ show: show })
          }
        });
      },
      // 选择数据后回显
      handleChange(e) {
        let { item } = e.currentTarget.dataset
        let { labelName, valueName } = this.data
        this.setData({
          selectValue: item[valueName],
          selectLabel: item[labelName],
          show: false
        })
        let obj = {}
        obj[valueName] = item[valueName]
        obj[labelName] = item[labelName]
        this.triggerEvent("handleChange", obj);// 传参
      },
      // 匹配值并回显
      handleData() {
        let { modelValue, options, valueName, labelName } = this.properties;
        if (modelValue) {
          let item = options.find(r => r[valueName] == modelValue)
          this.setData({
            selectLabel: item ? item[labelName] : modelValue,
            selectValue: modelValue,
          });
        }
      }
    }
  })