<template>
  <div class="biUserDefinedForm__selectbox" v-show="show == 2">
    <div
      class="biUserDefinedForm__select"
      :style="{ top: shows == 2 ? '0':'30px', opacity: shows == 2 ? '1':'0' }"
    >
      <div class="biUserDefinedForm-select__box">
        <span
          class="item"
          v-for="(item,index) in dataList"
          :key="index"
          @click="select(item, item.selected)"
        >
          <i class="iconfont icon-fuxuankuangkong" aria-hidden="true" v-if="item.selected == 1"></i>
          <i class="iconfont icon-fuxuankuang acv" aria-hidden="true" v-if="item.selected == 2"></i>
          <i class="iconfont icon-fuxuankuang" aria-hidden="true" v-if="item.selected == 3"></i>
          {{item._name}}
        </span>
      </div>
      <div class="biUserDefinedForm-select__btn flexbox">
        <ts-button type="reset" class="flex" @click="resetselect" style=" margin-right:5px">重置</ts-button>
        <ts-button type="submit" class="flex" status="primary" @click="affirm">确定</ts-button>
      </div>
    </div>
    <diaLog :source="changeWeiduDialog" ref="openWeiduDialog">
      <p>是否确认修改维度，修改后配置的指标将消失</p>
    </diaLog>
  </div>
</template>

<script>
export default {
  props: ['data', 'change', 'selectType'],
  data() {
    return {
      dataList: this.data,
      show: 1,
      shows: 1,
      type: this.selectType,
      openWeiduDialog: false,
      changeWeiduDialog: {
        title: '提示', // 标题
        width: '300', // 宽
        height: '140', // 高
        closeBtn: false, // 关闭按钮区域，boolean 默认：false
        buttons: [{ text: '确认', event: this.changeAffirm }]
      }
    }
  },
  created() {},
  mounted() {},
  watch: {
    data: function(n, o) {
      this.dataList = [...n]
    }
  },
  methods: {
    open: function(n) {
      this.show = n
      if (n == 2) {
        this.shows = n
      }
    },
    select(item, _t) {
      // let o = this.dataList
      // let type = false
      if (_t == 3) {
        return false
      }
      item.selected = item.selected == 1 ? 2 : 1
      // o.forEach(function(v, i) {
      //   if (v._id == id) {
      //     v.selected = v.selected == 1 ? 2 : 1
      //   }
      // })
      // this.dataList = [...o]
    },
    affirm() {
      let _this = this
      //   if (this.type == 'weidu' && common.biCustom.norm.length > 0) {
      //      this.$refs.openWeiduDialog.open()
      //   } else {
      this.changeAffirm(this)
      //   }
    },
    changeAffirm() {
      let _this = this
      let _s = []
      this.dataList.forEach(function(v, i) {
        if (v.selected == 2 || v.selected == 3) {
          _s.push(v)
        }
      })
      this.shows = 1
      setTimeout(function() {
        _this.show = 1
        _this.$emit('change', _s)
      }, 400)
    },
    resetselect() {
      let o = this.dataList
      o.forEach(function(v, i) {
        if (v.selected == 2) {
          v.selected = 1
        }
      })
      this.dataList = o
      this.cnd = []
    }
  }
}
</script>
<style lang="less" scoped>
.biUserDefinedForm__selectbox {
  margin: 0 10px;
  height: 100%;
  position: relative;
  .biUserDefinedForm__select {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 30px;
    background-color: #ffffff;
    border: 1px #eee solid;
    border-radius: 5px;
    z-index: 100;
    opacity: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    .item {
      height: 30px;
      display: block;
      line-height: 30px;
      padding: 0 10px;
      overflow: hidden;
      cursor: default;
      font-size: 12px;
    }
    .item:hover {
      background-color: #f7f7f7;
    }
    .item .icon {
      width: 15px;
    }
    .item .icon:hover {
      color: #999;
    }
  }

  .biUserDefinedForm-select__box {
    width: 100%;
    max-height: 170px;
    overflow: hidden;
    overflow-y: auto;
    background-color: #ffffff;
  }

  .biUserDefinedForm-select__btn {
    height: 22px;
    background-color: #f7f7f7;
    /deep/.vxe-button {
      margin-left: 0px !important;
    }
    /deep/div,
    /deep/button,
    /deep/span {
      width: 100%;
    }
  }
  .item .acv {
    color: var(--base-acv);
  }
}

.biUserDefinedForm-select__btn .btn {
  height: 22px;
  display: block;
  line-height: 22px;
  text-align: center;
  background-color: #999;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.biUserDefinedForm-select__btn .success {
  background-color: var(--base-acv);
  color: #fff;
}

.biUserDefinedForm-add__listT {
  padding: 5px 10px;
}
</style>
