<template>
  <div class="mobileTag">
    <van-popup
      v-model="dialogVisible"
      position="bottom"
      class="commonwords-mobile__selector custom-van-pop"
      get-container="body"
      round
    >
      <div class="pop-header">
        <span class="cancel" @click="dialogVisible = false">取消</span>
        <span class="title">标签</span>
        <span class="confirm" @click="selectCommonWords">确定</span>
      </div>
      <van-search
        v-if="filterable"
        v-model="currentQuery"
        shape="round"
        placeholder="请输入搜索关键词"
        @input="search"
      />
      <div class="pop-content">
        <div style="max-height: 260px;overflow: auto;">
          <van-checkbox-group
            v-if="multiple"
            v-model="selectResult"
            :icon-size="18"
          >
            <van-checkbox
              v-for="item in options"
              :key="item.id"
              shape="square"
              :name="item.name"
              class="radio-item"
            >
              {{ item.name }}
            </van-checkbox>
          </van-checkbox-group>

          <van-radio-group
            v-if="!multiple"
            v-model="selectResult"
            :icon-size="18"
          >
            <van-radio
              v-for="item in options"
              :key="item.id"
              :name="item.name"
              class="radio-item"
            >
              {{ item.name }}
            </van-radio>
          </van-radio-group>
        </div>
        <div v-if="expand" class="footer">
          <div class="add_btn" @click="handlerChangePopup">
            <van-icon name="plus" class="icon" />
            添加标签
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="addVisible"
      position="bottom"
      class="custom-van-pop"
      get-container="body"
      round
    >
      <div class="pop-header">
        <span class="cancel" @click="addVisible = false">取消</span>
        <span class="title">添加标签</span>
        <span class="confirm" @click="submitAdd">确定</span>
      </div>
      <div class="pop-content">
        <div class="input">
          <ht-input
            v-model="currentQuery"
            style="width: 100%;"
            type="textarea"
            :maxlength="30"
            :show-word-limit="true"
          ></ht-input>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import popupMode from '@/mixins/popupMode.js'
  export default {
    name: 'MobileTag',
    mixins: [popupMode('dialogVisible', 'addVisible')],
    props: {
      value: {
        type: [Array, String],
      },
      tagValue: {
        type: Array,
        default: () => [],
      },
      options: {
        type: Array,
        default: () => [],
      },
      multiple: {
        type: Boolean,
        default: false,
      },
      filterable: {
        type: Boolean,
        default: false,
      },
      expand: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        dialogVisible: false,
        addVisible: false,
        selectStr: '',
        selectResult: [],
        currentQuery: '',
      }
    },
    watch: {
      value: {
        immediate: true,
        handler: function(newVal) {
          if (this.multiple && !newVal) {
            this.selectResult = []
            return
          }
          this.selectResult = newVal
        },
      },
    },
    methods: {
      handleShowPicker() {
        this.dialogVisible = true
      },
      selectCommonWords() {
        if (!this.selectResult.length) return
        this.$emit('input', this.selectResult)
        this.dialogVisible = false
      },
      handlerChangePopup() {
        this.dialogVisible = !this.dialogVisible
        this.addVisible = !this.addVisible
        // 清空已输入的
        this.currentQuery = ''
      },
      submitAdd() {
        this.$emit('add', this.currentQuery)
        this.handlerChangePopup()
      },
      search() {
        this.$emit('search', this.currentQuery)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .custom-van-pop {
    display: flex;
    flex-direction: column;
    .pop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid #e6e6e6;
      .cancel {
        font-size: 14px;
        color: #8c8c8c;
      }
      .title {
        font-size: 17px;
        color: #1a1a1a;
        font-weight: bold;
      }
      .confirm {
        font-size: 14px;
        color: #409eff;
      }
    }
    .pop-content {
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .van-radio-group,
      .van-checkbox-group {
        ::v-deep .radio-item {
          padding: 14px 15px;
          border-bottom: 1px solid #e6e6e6;
          .van-radio__label,
          .van-checkbox__label {
            margin-left: 12px;
            color: #262626;
            font-size: 14px;
          }
        }
        .radio-item:last-child {
          border-bottom: none;
        }
      }
      .footer {
        width: 100%;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        .add_btn {
          width: 100%;
          height: 44px;
          border: 1px solid #409eff;
          color: #409eff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          font-size: 14px;
          border-radius: 8px;
          .icon {
            margin-right: 7px;
            border: 1px solid;
            border-radius: 50%;
          }
        }
      }
      .content_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 15px;
        height: 48px;
        border-bottom: 1px solid #e6e6e6;
        box-sizing: border-box;
        .label {
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
        }
      }
      .input_label {
        padding: 14px 15px;
      }
      .input {
        padding: 15px;
        border-top: 1px solid #e6e6e6;
      }
    }
  }
</style>
