<template>
  <div class="common_button_group">
    <ul class="clearfix" :style="ulStyle">
      <li
        v-for="(item,idx) of btnList"
        :key="idx"
        v-show="!item.hidden"
        @click="handleLiClick(item)"
        :style="liStyle"
        :class="type"
      >
        <div :style="[orgStyle,item.checked?orgActiveStyle:'']">
          <span :class="['icon',item.icon]">
            <span class="path1"></span>
            <span class="path2"></span>
            <span class="path3"></span>
          </span>
          <span class="font-14 btn_text">{{item.text}}</span>
        </div>
      </li>
    </ul>
    <div v-if="type==='waterline'" :style="`width:${lineWidth}%`">
      <button-line :width="lineWidth" :btnIdx="btnIdx"></button-line>
    </div>
  </div>
</template>

<script>
import buttonLine from "./buttonLine";
import './style.scss' /*引入公共样式*/
export default {
  name: "button-group",
  components: { buttonLine },
  props: {
    width: {
      default: "100%"
    },
    height: {
      default: "30px"
    },
    position: {
      default: "center" // left center right
    },
    disabled: Boolean,
    plain: Boolean,
    activeStyle: {
      default() {
        return {
          // backgroundColor: "none",
          // border: "1px solid #0085ef"
        };
      }
    },
    gutter: {
      default: "5"
    },
    itemStyle: {
      default() {
        return {
          // border: "none"
        };
      }
    },
    type: {
      default: "waterline" //parallelogram:平行四边形;  f:椭圆；  waterline:线; square:长方形；   circle:圆
    },
    btnList: {
      default() {
        return [
          {
            text: "分省",
            value: "2",
            icon: "",
            checked: true
          },
          {
            text: "分月",
            value: "1",
            icon: "",
            checked: false
          },
          {
            text: "分日",
            value: "1",
            icon: "",
            checked: false,
            hidden: false
          }
        ];
      }
    }
  },
  data() {
    return {
      orgActiveStyle: {},
      orgStyle: {},
      defaultActiveStyle: {
        background: this.plain ?'none':"rgba(24, 145, 238, 1)",
        color: "#fff"
      },
      defaultStyle: {
        borderRadius: "2px",
        color: "#289eff",
        border: this.plain ?'none': "1px solid rgba(24, 145, 238, 1)"
      },
      btnIdx: 0
    };
  },
  // watch: {
  //   btnList: {
  //     handler() {},
  //     deep: true
  //   }
  // },
  computed: {
    ulStyle() {
      return {
        width: this.width,
        height: this.height,
        lineHeight: this.height,
        display: "table",
        textAlign: this.position
      };
    },
    liStyle() {
      let f = this.btnList.filter(d => d.hidden === true);
      let len = this.btnList.length - f.length;
      let re = {
        width: parseInt(100 / len) + "%"
      };
      if (this.gutter !== "") {
        re.padding = "0 " + parseInt(this.gutter / 2) + "px";
      }
      return re;
    },
    lineWidth() {
      let f = this.btnList.filter(d => d.hidden === true);
      let len = this.btnList.length - f.length;
      return parseInt(100 / len);
    }
  },

  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.orgActiveStyle = { ...this.defaultActiveStyle, ...this.activeStyle };
      console.log(this.orgActiveStyle, "this.orgActiveStyle====");
      this.orgStyle = { ...this.defaultStyle, ...this.itemStyle };
      //console.log(this.orgStyle, "this.orgStyle====");
    },
    handleLiClick(item) {
      this.btnList.forEach(d => {
        this.$set(d, "checked", false);
      });
      this.$set(item, "checked", true);
      this.$emit("onclick", item);

      let i = 0;
      for (let data of this.btnList) {
        if (data.hidden !== true) {
          if (data.text === item.text) {
            break;
          }
          i++;
        }
      }
      this.btnIdx = i;
     // console.log(this.btnIdx, "this.btnIdx==");
    }
  }
};
</script>
<style  lang="scss">

</style>