<template>
  <div :elid="wrapId" :ref="wrapId" :style="wrapStyle">
    <div v-if="showTurnPageRadion == 'direction'" style="height: 100%;display: flex;flex-flow: row wrap;width: 100%;">
      <template v-for="(item,index) in dataObj">
        <div :style="itemStyle2(index)" :key="index" :itemGroup="wrapId + '_item'" :index="index" :labelGroup="wrapId + '_label'">
          <label :for="item[fieldBindObj.valueField]" style="cursor: pointer;" @change="change" @click="click($event, index)" isChecked="false">
            <input v-show="isShow"
              :id="item[fieldBindObj.valueField]"
              type="checkbox"
              name="checkbox"
              :value="item[fieldBindObj.valueField]"
              v-model="valueData"
            />
            {{item[fieldBindObj.nameField]}}
          </label>
        </div>
      </template>
    </div>
    <div v-else-if="showTurnPageRadion == 'radio'" :style="{'display':'flex','justify-content':'center','align-items':'center'}">
      <div style="display: flex;">
        <div style="justify-content: center; align-items: center; display: flex;">
          <div :style="preStyle()" @click="pageHandler('pre')"></div>
        </div>
        <template v-for="(item, index) in dataObj">
          <div :style="itemStyle(index)" :key="index" :index="index" :labelGroup="wrapId + '_label'">
            <label>
              <input style="display:none;"
                :id="item[fieldBindObj.valueField]"
                type="checkbox"
                name="checkbox"
                :value="item[fieldBindObj.valueField]"
                v-model="valueData"
              />
              {{item[fieldBindObj.nameField]}}
            </label>
          </div>
        </template>
        <div style="justify-content: center; align-items: center; display: flex;">
          <div :style="nextStyle()" @click="pageHandler('next')"></div>
        </div>
      </div>
    </div>
    <div v-else :style="{'display':'flex','justify-content':'center','align-items':'center'}">
      <div style="display: flex; justify-content: center; align-items: center; width: 100%; position: relative;">
        <div :style="placeholderStyle" class="placeholder" @click="openValue">{{placeholder}}</div>
        <div :style="divStyle" v-show="selectShow">
          <ul :style="ulStyle">
            <template v-for="(item, index) in dataObj">
              <li @click="selectValue(item)" @mouseover="mouseover($event)" @mouseout="mouseout($event)" :style="liStyle(index)" :key="index" :index="index">{{item[fieldBindObj.nameField]}}</li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bm from "../../mixins/base-mixins";
import $ from "jquery";
export default {
  name: "fviz-checkbox",
  mixins: [bm],
  props: {
    comId: String
  },
  data() {
    return {
      initData: null, //初始化数据
      valueData: [],
      isShow: true,
      showTurnPageRadion: 'row',
      pageIndex: 0,
      preIsShow: false,
      nextIsShow: true,
      placeholder: '请选择......',
      selectShow:false,
      direction: "behind",
      myInterval: null
    };
  },
  computed: {
    //选项背景色
    bgColorList() {
      let colors = [];
      let initColor = ["#FFFFFF"];
      if (this.objVal.itemBgColor) {
        initColor = eval(this.objVal.itemBgColor);
      }

      while (colors.length < (this.dataObj || []).length) {
        colors = colors.concat(initColor);
      }

      this.isShow = eval(this.objVal.itemShow);

      if(this.objVal.itemDirection == "radio"){
        this.showTurnPageRadion = 'radio';
      }else{
        this.showTurnPageRadion = 'direction';
      }
      return colors;
    },
    totalPage() {
      return parseInt((this.dataObj || []).length);
    },
    itemShow(){
      return this.objVal.itemShow;
    },
    //后一页按钮
    nextShow() {
      return this.pageIndex < this.totalPage;
    },
    //上一页按钮
    prevShow() {
      return this.pageIndex > 1;
    },
    placeholderStyle(){
      this.bgColorList[0];
      let style = {
        "font-size": this.objVal.itemFontSize + "px",
        "font-weight": this.objVal.itemFontWeight,
        "color": this.objVal.itemFontColor,
        "align-items": "center",
        "display": "flex",
        "width": "100%",
        "border": this.objVal.itemBorderWidth + "px " + this.objVal.itemBorderStyle + " " + this.objVal.itemBorderColor,
        "padding": "15px 8px",
        "border-radius": "2px",
        "cursor": "pointer",
        "border-radius": "5px",
        "background-color": "rgba(183, 181, 181, 0.5)",
      };
      if (this.objVal.itemBorderRadius) {
        //边框四周圆角度数
        let radiusObj = eval(this.objVal.itemBorderRadius);
        style["border-top-left-radius"] = radiusObj[0] + "px";
        style["border-top-right-radius"] = radiusObj[1] + "px";
        style["border-bottom-right-radius"] = radiusObj[2] + "px";
        style["border-bottom-left-radius"] = radiusObj[3] + "px";
      }
      return style;
    },
    divStyle(){
      let style = {
        "border": this.objVal.itemBorderWidth + "px " + this.objVal.itemBorderStyle + " " + this.objVal.itemBorderColor,
        "margin-top": "2px",
        "width": "100%",
        "position": "absolute",
        "right": 0,
        "top": "100%",
        "border-radius": "5px"
      };
      if (this.objVal.itemBorderRadius) {
        //边框四周圆角度数
        let radiusObj = eval(this.objVal.itemBorderRadius);
        style["border-top-left-radius"] = radiusObj[0] + "px";
        style["border-top-right-radius"] = radiusObj[1] + "px";
        style["border-bottom-right-radius"] = radiusObj[2] + "px";
        style["border-bottom-left-radius"] = radiusObj[3] + "px";
      }
      return style;
    },
    ulStyle(){
      let style = {
        "list-style": "none",
        "width": "100%",
        "margin": 0,
        "padding": 0
      };
      return style;
    },
    liStyle(){
      return (index) => {
        let style = {
          "font-size": this.objVal.itemFontSize + "px",
          "font-weight": this.objVal.itemFontWeight,
          "color": this.objVal.itemFontColor,
          "background-color": "rgba(183, 181, 181, 0.5)",
          "width": "100%",
          "cursor": "pointer",
          "padding": "15px 8px"
        };

        return style;
      }
    },
  },
  watch: {
    itemShow() {
      for(var i = 0; i < $("[elid = '" + this.wrapId + "'] > div").children().length; i++){
        $("[elid = '" + this.wrapId + "'] > div").children()[i].style.backgroundColor = this.bgColorList[i];
      }
    },
    'objVal.autoPlay'(){
      //关闭自动轮播
      this.playInterval();
    }
  },
  methods: {
    openValue(){
      this.selectShow = !this.selectShow;
    },
    selectValue(item){
      this.selectShow = !this.selectShow;
      this.placeholder = item[this.fieldBindObj.nameField];
      this.comId.value = item[this.fieldBindObj.valueField];
      this.chain(this.comId.value);
    },
    mouseover(event){
      event.target.style.backgroundColor = "rgba(183, 181, 181, 0.8)";
    },
    mouseout(event){
      event.target.style.backgroundColor = "rgba(183, 181, 181, 0.5)";
    },
    itemStyle(index) {
      let style = {
        "font-size": this.objVal.itemFontSize + "px",
        "font-weight": this.objVal.itemFontWeight,
        "color": this.objVal.itemFontColor,
        "padding": this.objVal.itemPaddingSpace + "px",
        "background-color": this.bgColorList[index]
      };

      style["border"] = this.objVal.itemBorderWidth + "px "
                      + this.objVal.itemBorderStyle
                      + " " + this.objVal.itemBorderColor;

      if (this.objVal.itemBorderRadius) {
        //边框四周圆角度数
        let radiusObj = eval(this.objVal.itemBorderRadius);
        style["border-top-left-radius"] = radiusObj[0] + "px";
        style["border-top-right-radius"] = radiusObj[1] + "px";
        style["border-bottom-right-radius"] = radiusObj[2] + "px";
        style["border-bottom-left-radius"] = radiusObj[3] + "px";
      }

      if (this.objVal.itemDirection == "row") {
        style["margin-right"] = this.objVal.itemSpace + "px";
      } else if(this.objVal.itemDirection == "column") {
        style["margin-top"] = this.objVal.itemSpace + "px";
      } else {
        style["display"] = "flex";
        style["justify-content"] = "center";
        style["align-items"] = "center";
        style["background-color"] = this.bgColorList[0];
        style["margin-right"] = this.objVal.itemSpace + "px";
        style["margin-left"] = this.objVal.itemSpace + "px";
        style["width"] = "auto";

        if(this.pageIndex != index){
          style["display"] = "none";
        }
      }

      return style;
    },
    itemStyle2(index) {
      let style = {
        "font-size": this.objVal.itemFontSize + "px",
        "font-weight": this.objVal.itemFontWeight,
        "color": this.objVal.itemFontColor,
        "background-color": this.bgColorList[index],
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "center",
        "align-items": "center",
      };

      style["border"] = this.objVal.itemBorderWidth + "px "
                      + this.objVal.itemBorderStyle
                      + " " + this.objVal.itemBorderColor;

      if (this.objVal.itemBorderRadius) {
        //边框四周圆角度数
        let radiusObj = eval(this.objVal.itemBorderRadius);
        style["border-top-left-radius"] = radiusObj[0] + "px";
        style["border-top-right-radius"] = radiusObj[1] + "px";
        style["border-bottom-right-radius"] = radiusObj[2] + "px";
        style["border-bottom-left-radius"] = radiusObj[3] + "px";
      }

      if (this.objVal.itemDirection == "row") {
        if(!this.objVal.colNum){
          this.objVal.colNum = 4;
        }
        if(!this.objVal.gutter){
          this.objVal.gutter = 0;
        }
        if(!this.objVal.rowGap){
          this.objVal.rowGap = 0;
        }
        style["width"] = "calc(" + (100/this.objVal.colNum) + "% - " + this.objVal.gutter + "px)";
        style["margin"] = this.objVal.rowGap/2 + "px " + this.objVal.gutter/2 + "px",  
				style["box-sizing"] = "border-box";
      } else {
        if(this.pageIndex != index){
          style["display"] = "none";
        }
      }

      return style;
    },
    preStyle() {
      let style = {
        "background-image": "url(" + this.fileName(this.objVal.itemPreImageUrl) + ")",
        "background-size": "100% 100%",
        "cursor": "pointer",
        "width": this.objVal.itemFlipButtonWidth + "px",
        "height": this.objVal.itemFlipButtonHeight +"px"
      };
      return style;
    },
    nextStyle() {
      let style = {
        "background-image": "url(" + this.fileName(this.objVal.itemNextImageUrl) + ")",
        "background-size": "100% 100%",
        "cursor": "pointer",
        "width": this.objVal.itemFlipButtonWidth + "px",
        "height": this.objVal.itemFlipButtonHeight + "px"
      };
      return style;
    },
    change() {
      //控件赋值
      this.comId.value = this.valueData.join(",");
      //值改变触发调用控件刷新方法
      this.chain(this.comId.value);
    },
    click(e, index) {
      let me = this;
      if(eval(this.objVal.itemShow)) return;
      // 恢复元素默认背景颜色及设置判断选中属性isChecked为false
      let itemGroupObject = $("div[itemGroup='" + this.wrapId + "_item']");
      for(var i = 0; i < itemGroupObject.length; i++){
        if(i == index) continue;
        itemGroupObject[i].style.backgroundColor = this.bgColorList[i];
        itemGroupObject[i].firstElementChild.setAttribute("isChecked", "false");
      }

      // 根据选中属性isChecked设置选中背景色
      let isChecked = !eval(e.target.getAttribute("isChecked")|| false);
      e.target.setAttribute("isChecked", isChecked);
      if(eval(isChecked)){
        e.target.parentElement.style.backgroundColor = this.objVal.itemBackgroundColor;
      }else{
        e.target.parentElement.style.backgroundColor = this.bgColorList[index];
      }

      this.comId.value = e.target.innerText;
      this.chain(this.comId.value);
    },
    //初始化
    init() {
      //控件默认值
      if (this.initData) {
        this.valueData = this.initData.split(",");
        this.comId.value = this.valueData;
      }
      this.queryData();
      
      this.playInterval();
      
    },
    //刷新
    refresh() {
      this.init();
    },
    chain(value){
      let me = this;
      //组件id
      let comId = me.objVal.id;

      //控件模板中配置变量赋值
      //id
      if (eval(comId) && eval(comId).hasOwnProperty("fvizId")) {
        if (me.dataObj["id"]) {
          eval(comId)["fvizId"] = me.dataObj["id"];
        }
      }
      //分类名称
      if (eval(comId) && eval(comId).hasOwnProperty("fvizName")) {
        eval(comId)["fvizName"] = value;
      }

      //联动
      if (eval(comId) && eval(comId).chain) {
        eval(comId).chain();
      }
    },
    pageHandler(action) {
      if(action == "pre"){
        this.pageIndex--;
      }else{
        this.pageIndex++
      }
      if(this.pageIndex < 0){
        this.pageIndex = this.totalPage - 1;
      }
      if(this.pageIndex >= this.totalPage){
        this.pageIndex = 0;
      }

      let labelGroup = $("div[labelGroup='" + this.wrapId + "_label']");
      var me = this;
      if(!labelGroup || labelGroup.length == 0){
        return;
      }
      for(var i = 0; i < labelGroup.length; i++){
        if(labelGroup[i].getAttribute("index") == me.pageIndex){
          if(this.preview){
            me.comId.value = labelGroup[i].firstElementChild.firstElementChild.value;
          }
          labelGroup[i].style.backgroundColor = me.objVal.itemBackgroundColor;
        }else{
          labelGroup[i].style.backgroundColor = me.bgColorList[i];
        }
      }

      if(this.preview){
        this.chain(this.comId.value);
      }
    },
    playInterval() {
      let me = this;
      clearInterval(me.myInterval);
      //预览模式，开启自动轮播
      if (eval(this.objVal.autoPlay)) {
        me.myInterval = setInterval(function () {
          if (me.direction == "behind") {
            if (me.nextShow) {
              me.pageHandler("next");
              me.direction = "behind";
            } else {
              me.direction = "forward";
            }
          } else {
            if (me.prevShow) {
              me.pageHandler("prev");
            } else {
              me.direction = "behind";
            }
          }
        }, me.objVal.playSpeed);
      }
    }
  },
  created() {
    if (!this.preview) {
      this.init();
    }
  },
  mounted() {}
};
</script>
<style>
.placeholder:after{
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  content: '\25BC';
}
</style>
