<template>
  <van-popup
    v-if="dialogVisible"
    v-model="dialogVisible"
    class="post-mobile__selector"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    get-container="body"
    @cancel="handleDialogClose"
    @close="handleDialogClose"
    @click-overlay="handleDialogClose"
  >
    <van-nav-bar :title="title" left-arrow @click-left="handleDialogClose" />
    <SelectTreeMobilePage
      ref="SelectTreeMobilePage"
      :ganged="ganged"
      :search-placeholder="searchPlaceholder"
      :value="value"
      :valueCustomData="valueCustomData"
      :data="data"
      :pagination="pagination"
      :select-label="selectLabel"
      :append-to-body="appendToBody"
      :title="title"
      :primary-field="primaryField"
      :current-policy-id="currentPolicyId"
      :multiple="multiple"
      :limit-count="limitCount"
      :clone-list="cloneList"
      :is-subtable-backfill="isSubtableBackfill"
      :treeDataMode="treeDataMode"
      :displayfield="displayfield"
      @dataList="dataList"
      @input="input"
      @select-data="selectData"
      @select="select"
      @search="search"
      @reset="reset"
      @page-change="pageChange"
      @closePopup="closePopup"
      @load-policy-post="loadPolicyPost"
      @upDateList="upDateList"
    ></SelectTreeMobilePage>
  </van-popup>
</template>
<script>
  import Locale from '@/mixins/locale'
  import popupMode from '@/mixins/popupMode.js'
  import SelectTreeMobilePage from './SelectTreeMobilePage.vue'
  //import PostSelectorMobileDropDown from './PostSelectorMobileDropDown.vue'

  export default {
    name: 'SelectTreeMobileDialog',
    components: {
      SelectTreeMobilePage,
      // PostSelectorMobileDropDown,
    },
    mixins: [Locale, popupMode('dialogVisible', 'selectDialogVisible')],
    props: {
      ganged: {
        type: Object,
        default: () => {
          return {
            labelBind: 'value',
            valueBind: 'key',
          }
        },
      },
      searchPlaceholder: {
        type: String,
        default: '名称、编码、路径',
      },
      value: {
        type: Array,
        default: () => {
          return []
        },
      },
      valueCustomData: {},

      data: {
        type: Array,
        default: () => {
          return []
        },
      },

      pagination: {
        type: Object,
        default: () => {
          return {
            page: 1,
            pageSize: 50,
            total: 0,
          }
        },
      },
      selectLabel: {
        type: String,
        default: 'name',
      },
      appendToBody: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '请选择',
      },
      primaryField: {
        type: String,
        default: '',
      },
      currentPolicyId: {
        type: String,
        default: '',
      },
      multiple: {
        type: Boolean,
        default: false,
      },
      cloneList: {},
      isSubtableBackfill: {
        type: Boolean,
        default: false,
      },
      limitCount: Number,
      treeDataMode: {
        //数据展示
        type: Number,
        default: 0,
      },
      displayfield: String,
    },
    data() {
      return {
        dialogVisible: false,
        isLoading: false,
        selectIds: [],
        selectedData: [],
        selectDialogVisible: false,
      }
    },
    computed: {},

    mounted() {},
    methods: {
      upDateList(val, callback) {
        this.$emit('upDateList', val, callback)
      },
      showDialog(val) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.SelectTreeMobilePage.showDialog(val)
        })
      },

      handleDialogClose() {
        this.dialogVisible = false
        this.$refs.SelectTreeMobilePage.handleDialogClose()
      },
      dataList(list) {
        this.$emit('dataList', list, () => {
          this.dialogVisible = false
        })
      },

      input(selectName) {
        this.$emit('input', selectName)
      },
      closePopup(selectName) {
        this.dialogVisible = false
      },
      selectData(selectName) {
        this.$emit('select-data', selectName)
      },
      select(selection, row) {
        this.$emit('select', selection, row)
      },
      search(search) {
        this.$emit('search', search)
      },
      reset() {
        this.$emit('reset')
      },
      pageChange(page) {
        this.$emit('page-change', page)
      },
      loadPolicyPost(param) {
        this.$emit('load-policy-post', param)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .post-mobile__selector {
    overflow: hidden;
    ::v-deep {
      .van-tab--active {
        font-weight: bold;
        color: $base-color-blue;
      }

      .van-nav-bar .van-icon {
        color: var(--van-gray-6);
      }
    }

    .space {
      display: block;
      clear: both;
      height: 6px;
      background: #f6f6f6;
    }

    .selectFilter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 32px;
      margin: 8px 16px;
      padding: 0 8px;
      padding-left: 16px;
      line-height: 32px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #e6e6e6;
    }

    .miniNav {
      display: flex;
      height: 44px;
      margin: 0 16px;
      justify-content: flex-start;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto;
      .noClick {
        .miniNav__item--text {
          font-size: 14px;
          color: #262626 !important;
        }
      }
      &__item {
        display: flex;
        align-items: center;
        &--text {
          font-size: 14px;
          color: #409eff;
        }

        &--icon {
          margin: 0 8px;
        }
      }
    }

    .pullRefresh {
      height: 80vh;
      overflow-y: scroll; //设置这个 才能指定高度
    }

    .post-mobile__title {
      font-size: 18px;
      color: #1a1a1a;
    }
    .post-mobile__close {
      float: right;
    }
    .post-demensions__container {
      padding: 0 12px;
    }
    .post-demensions__group {
      margin-right: 6px;
      color: #999999;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::before {
        border-width: 0;
      }

      &.current {
        color: $base-color-blue;
      }

      &.current::before {
        border-width: 1px;
      }
    }
    .post-list__container {
      display: flex;
      align-items: center;

      .selector-item__detail {
        display: flex;
        flex-direction: row;

        line-height: normal;
        margin-left: 10px;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        .arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          box-sizing: border-box;
          padding: 10px 0 10px 20px;
        }
        .selector-detail__name {
          max-width: 270px;
          padding: 12px 0;
          font-size: 14px;

          label {
            color: #111;
            font-size: 14px;
          }
          span {
            margin-left: 10px;
            color: #777;
            font-size: 12px;
          }
        }

        .selector-detail__desc {
          margin-top: 5px;

          span {
            display: inline-block;
            font-size: 12px;
            color: #777;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .post-data__list {
      min-height: 400px;
      ::v-deep {
        .van-checkbox {
          position: relative;
          padding: 0 16px;
          ::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 0;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }

          .van-checkbox__label {
            margin-left: 0;
            flex: 1;
          }
        }
      }
    }
    .van-action-sheet__cancel {
      padding: 5px;
      background: $base-color-blue;
      color: $base-color-white;
    }
  }

  .dialog-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    .mobile-btn {
      width: 110px;
      height: 44px;
      line-height: 44px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #409eff;
      border-color: #409eff;
      padding: 0 24px;
    }
    .txt {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 44px;
      font-size: 14px;
      color: #262626;
      text-align: center;
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        padding: 0 16px;
      }
      span {
        color: #409eff;
        margin: 0 6px;
      }
    }
  }
  .selectDialog {
    .head {
      display: flex;
      height: 44px;

      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
        font-weight: 400;
      }
      .clear {
        color: #409eff;
      }
      .title {
        flex: 1;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-weight: bold;
        color: #1a1a1a;
        font-size: 17px;
        span {
          padding: 0 6px;
          color: #409eff;
        }
      }
    }

    .border-bottom__line {
      position: relative;
      padding: 0px 16px;
      ::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
  }
</style>
