<!-- select多选选择器 -->
<template>
  <div class="select-multiple">
    <van-field
      :class="isClass ? 'field-Class' : ''"
      :name="field.label"
      :required="field.required"
      :disabled="field.disabled"
      :value="showSelectValue"
      :label="field.label"
      right-icon="arrow-down"
      :placeholder="`点击选择${field.label ? field.label : ''}`"
      readonly
      clickable
      :rules="rules(field)"
      @click="field.disabled ? () => {}:openSelectMultiple()"
    />
    <van-popup
      v-model="showSelectMultiple"
      position="bottom"
      :close-on-popstate="true"
      safe-area-inset-bottom
    >

      <div class="header">
        <div
          class="btn cancel"
          @click="cancel()"
        >
          <span>取消</span>
        </div>
        <div class="title">
          <span>请选择</span>
        </div>
        <div
          class="btn confirm"
          @click="confrim()"
        >
          <span>确认</span>
        </div>
      </div>
      <div class="content">
        <van-cell-group>
          <van-cell
            v-for="item in field.options"
            :key="item.id"
            :title="item.label"
            :class="item.checked ? 'selected':''"
            @click="itemCheck(item)"
          >
            <template #right-icon>
              <div class="checked-icon">
                <van-icon
                  v-if="item.checked"
                  color="#3e8ddd"
                  name="success"
                />
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'SelectMultiple',
  props: {
    field: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 校验规则
    rules: {
      type: Function,
      default: () => {
        return []
      }
    },
    isClass: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      // 显示多选select弹出框
      showSelectMultiple: false
    }
  },
  computed: {
    // 展示选中的label
    showSelectValue ({ field }) {
      const showValue = []
      field.value.map(val => {
        const label = field.options.filter(option => {
          return option.value === val
        })[0].label
        showValue.push(label)
      })
      return showValue.join(',')
    }
  },
  methods: {
    // 打开弹框
    openSelectMultiple () {
      this.showSelectMultiple = true
      this.field.options = this.field.options.map(item => {
        return {
          ...item,
          checked: this.field.value.includes(item.value)
        }
      })
    },
    // 选项选中/取消
    itemCheck (item) {
      item.checked = !item.checked
    },
    // 确定按钮
    confrim () {
      this.showSelectMultiple = false
      const checkedList = []
      this.field.options.map(item => {
        if (item.checked) {
          checkedList.push(item.value)
        }
      })
      this.field.value = checkedList
    },
    // 取消按钮
    cancel () {
      this.showSelectMultiple = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .field-Class .van-cell::after {
    border-bottom: 0 !important;
  }
  .field-Class {
    padding: 0 !important;
  }
  .select-multiple {
    .van-popup {
      max-height: 60%;
    }
    .van-field--disabled {
      .van-field__value {
        .van-field__right-icon {
          color: #c8c9cc;
        }
      }
    }
    .header {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #ffffff;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          font-size: 16px;
          color: #000000;
        }
      }
      .btn {
        padding: 0 16px;
        span {
          font-size: 14px;
        }
        &.confirm {
          color: #576b95;
        }
        &.cancel {
          color: #969799;
        }
      }
    }
    .content {
      height: 100%;
      overflow-y: auto;
      .van-cell {
        margin-bottom: 0;
        background-color: #fff;
        &.selected {
          ::v-deep .van-cell__title {
            span {
              color: #3e8ddd;
            }
          }
        }
      }
      .checked-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
