<template>
  <view class="check-boxs" :class="{ column: isColumn }">
    <view
      v-for="(item, index) in newItems"
      :key="index"
      class="check-box"
      :class="{ width100: isColumn }"
      @click.stop="checkBox(index)"
      v-show="!item.isShow"
    >
      <span
        :class="[
          'k-checkbox',
          { 'checkbox-icon': true },
          { 'k-checkbox-disabled': item.disabled },
          { 'k-checkbox-checked': item.isChecked },
          { 'k-checkbox-disabled-checked': item.isChecked && item.disabled },
        ]"
        :style="{
          borderRadius: borderRadius,
          width: size + 'px',
          height: size + 'px',
        }"
      >
        <i
          :class="[{ 'checkbox-on': item.isChecked }]"
          :style="{ width: size / 6 + 'px', height: (size / 6) * 2 + 1 + 'px' }"
        ></i>
      </span>
      <view class="checkbox-wrapper">
        <!-- <input type="checkbox" v-model="item.value"/> -->
        <span
          v-html="item.name"
          :style="{
            fontSize: size + 'px',
          }"
          class="checkbox-txt"
          :class="[
            'k-checkbox-txt',
            { 'k-checkbox-txt-disabled': item.disabled },
          ]"
        ></span>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
interface Item {
  name: any;
  value: any;
  disabled?: boolean;
  isChecked?: boolean;
}
export default Vue.extend({
  name: 'k-checkbox',
  data() {
    // 颜色
    const logoWidth = this.size / 6;
    return {
      newItems: [] as any,
      checkedLists: [],
      checkedStyle: {
        borderRadius: this.borderRadius,
        width: this.size + 'px',
        height: this.size + 'px',
      },
      noCheckedStyle: {
        width: this.size + 'px',
        height: this.size + 'px',
      },
      checkedLogo: {
        width: logoWidth + 'px',
        height: logoWidth * 2 + 1 + 'px',
      },
      checkboxTxt: {
        fontSize: this.size + 'px',
      },
    };
  },
  props: {
    /*
      items实例:[{name:'选项一',value:'1'}],
      name：可以是html，
      需要显示和隐藏的加上isShow字段，true为隐藏，如下：
      [{name:'选项一',value:'1',isShow:false}]
     */
    items: {
      type: Array,
      default: [] as any,
    },
    borderRadius: {
      type: String,
      default: '4px',
    },
    // flex布局纵轴方向
    isColumn: {
      type: Boolean,
      default: false,
    },
    // 最大选项数
    limit: {
      type: Number,
      default: 10,
    },
    size: {
      type: Number,
      default: 18,
    },
    isAllChecked: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  watch: {
    value: {
      handler: function (val) {
        this.setIsChecked(false);
      },
    },
  },
  mounted() {
    this.userActionChecked();
  },
  methods: {
    setIsChecked(isUserAcitve = true) {
      this.newItems = this.items as Item[];
      const values = this.items.map((item: any) => item.value);
      if (isUserAcitve == false) {
        //删除外部传递选中状态【this.value】
        this.newItems.forEach((item: Item, index: number) => {
          if (!this.value.includes(item.value)) {
            this.$set(this.newItems[index], 'isChecked', false);
          }
        });
      }
      this.value &&
        this.value.forEach((el) => {
          const index = values.indexOf(el);
          if (index !== -1) {
            if (isUserAcitve == true) {
              //用户手动触发选项框
              this.checkBox(index, true);
            } else {
              //外部传递选中状态【this.value】
              this.$set(this.newItems[index], 'isChecked', true);
            }
          }
        });
    },
    userActionChecked() {
      this.setIsChecked();
    },
    changeVal(item: Item, e: any) {
      item.value = e.target.value;
    },
    checkBox(index: number, flag = false) {
      if (this.newItems[index].disabled && !flag) {
        return;
      }
      let count = 0;
      for (let i = 0; i < this.items.length; i++) {
        if (this.newItems[i].isChecked == true) {
          count++;
        }
      }
      if (count >= this.limit && !this.newItems[index].isChecked) {
        this.$emit('canNotAdd', false);
        return;
      }
      // const curOptionIsChecked=this.value.find((val)=>val==this.newItems[index].value)
      // if(!!this.newItems[index].isChecked&&!!curOptionIsChecked){
      //   return
      // }
      // 将所选项的value值传出去，并勾选
      this.$set(
        this.newItems[index],
        'isChecked',
        !this.newItems[index].isChecked
      );
      // this.items[index].isChecked = !this.items[index].isChecked;
      this.setCheckedLists();
    },
    setCheckedLists() {
      let items = this.newItems as Item[];
      let checkedList =
        items &&
        items.filter((item, i) => {
          return items[i].isChecked == true;
        });
      this.checkedLists =
        (checkedList.length > 0 &&
          (checkedList.map((item: any) => item.value) as any)) ||
        [];
      // this.$emit('input', this.checkedLists);
      // this.$emit('change', this.checkedLists);
      this.$emit('update:value', this.checkedLists);
    },
  },
});
</script>

<style scoped lang="scss">
/* stylelint-disable declaration-no-important */
.k-checkbox-txt {
  color: var(--k-color-primary, #000);
}

.k-checkbox-txt-disabled {
  color: var(--k-color-primary-disabled, #000);
}

.k-checkbox-checked {
  background: var(--k-color-primary, #000) !important;
  border: 1px solid var(--k-color-primary, #000) !important;
}

.k-checkbox {
  border: 1px solid var(--k-color-primary, #000) !important;
}

.k-checkbox-disabled-checked {
  background: var(--k-color-primary-disabled, #000) !important;
  border: 1px solid var(--k-color-primary-disabled, #000) !important;
}

.k-checkbox-disabled {
  border: 1px solid var(--k-color-primary-disabled, #000) !important;
}

.check-boxs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: 5px 0;
  color: #545454;
  font-size: 12px;
}

.column {
  flex-direction: column;
  justify-content: flex-start;
}

.width100 {
  width: 100%;
}

.check-box {
  position: relative;
  display: flex;
  cursor: pointer;
  padding-right: 16px;
  margin-bottom: 10px;
}

.check-box input {
  vertical-align: middle;
  margin-top: -2px;
  margin-bottom: 1px;
  opacity: 0;
  outline: none;
  cursor: pointer;
  width: 1px;
}
/* 选项框的样式修改 */
.checkbox-icon {
  top: 1px;
  z-index: 0;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

.checkbox-on {
  position: absolute;
  /* width: 3px;
  height: 7px; */
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.checkbox-txt {
  margin-left: 5px;
}
</style>
