<template>
  <el-dialog
    width="1060px"
    :title="title"
    class="orgdialog-selector__wrapper"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :append-to-body="appendToBody"
  >
    <div class="dialog-selector__body">
      <el-input
        v-model="searchWord"
        size="small"
        clearable
        :placeholder="searchPlaceholder"
        @clear="reset"
        @keyup.enter.native="search"
      >
        <i
          slot="suffix"
          :title="t('ht.common.search')"
          class="el-input__icon el-icon-search"
          @click="search"
        />
      </el-input>
      <ht-list-selector
        ref="selector"
        v-model="selectors"
        class="user-selector"
        title="组织列表"
        :data="data"
        :pagination="pagination"
        :select-label="selectLabel"
        :quick-search-props="quickSearchProps"
        :single="single"
        :search-placeholder="searchPlaceholder"
        :primary-field="primaryField"
        :mode="mode"
        @reset="reset"
        @row-click="(row) => $emit('row-click', row)"
        @page-change="(page) => $emit('page-change', page)"
        @size-change="(size) => $emit('size-change', size)"
      >
        <el-card slot="header" class="selector-range__card" shadow="hover">
          <el-tabs v-model="activeRange">
            <el-tab-pane label="组织" name="org"></el-tab-pane>
            <el-tab-pane label="策略" name="policy"></el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card
          slot="range"
          class="selector-range__card selector-range__content"
          shadow="hover"
        >
          <el-tabs v-model="activeRange">
            <el-tab-pane label="组织" name="org">
              <organization
                v-if="activeRange == 'org'"
                ref="organization"
                :mode="mode"
                @loadOrg="(org) => $emit('load-org', org)"
              />
            </el-tab-pane>
            <el-tab-pane label="策略" name="policy">
              <policy-user
                v-if="activeRange == 'policy'"
                ref="policyUser"
                :mode="mode"
                :current-policy-id="currentPolicyId"
                @load-policy-org="(policy) => $emit('load-policy-org', policy)"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <template #detail="{ item }">
          <ht-icon
            name="org-tree2"
            class="follow-theme-color"
            style="margin-left:15px;width:36px;height:36px;"
          />
          <div class="selector-item__detail">
            <div class="selector-detail__name">
              <label>{{ item[selectLabel] }}</label>
              <span>({{ item['code'] }})</span>
            </div>
            <div v-if="item.pathName" class="selector-detail__desc">
              <span :title="item.pathName">
                {{ item.pathName }}
              </span>
            </div>
          </div>
        </template>
        <template #selected="{ select }">
          <ht-icon
            name="org-tree2"
            class="follow-theme-color"
            style="margin-left:15px;width:36px;height:36px;"
          />
          <p
            class="selector-selected__label"
            :title="
              `${select[selectLabel]}${
                select['code'] ? `(${select['code']})` : ''
              }`
            "
          >
            {{
              `${select[selectLabel]}${
                select['code'] ? `(${select['code']})` : ''
              }`
            }}
          </p>
        </template>
      </ht-list-selector>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogCancel">取 消</el-button>
      <el-button type="primary" size="small" @click="handleDialogSure">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
  import Locale from '@/mixins/locale'
  import HtListSelector from '../../ListSelector/index'
  import Organization from './Organization.vue'
  import PolicyUser from './PolicyUser.vue'

  export default {
    name: 'OrgSelectorDialog',
    components: {
      HtListSelector,
      Organization,
      PolicyUser,
    },
    mixins: [Locale],
    props: {
      searchPlaceholder: {
        type: String,
        default: '名称、编码、路径',
      },
      value: {
        type: Array,
        default: () => {
          return []
        },
      },
      title: {
        type: String,
        default: '选择组织',
      },
      appendToBody: {
        type: Boolean,
        default: false,
      },
      data: {
        type: Array,
        default: () => {
          return []
        },
      },
      pagination: {
        type: Object,
        default: () => {
          return {
            page: 1,
            pageSize: 50,
            total: 0,
          }
        },
      },
      selectLabel: {
        type: String,
        default: 'name',
      },
      quickSearchProps: {
        type: String,
        required: true,
      },
      single: {
        type: Boolean,
        default: false,
      },
      primaryField: {
        type: String,
        default: '',
      },
      mode: {
        type: String,
      },
      currentPolicyId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dialogVisible: false,
        activeRange: 'org',
        searchWord: null,
        loading: false,
      }
    },
    computed: {
      selectors: {
        get: function() {
          return this.value
        },
        set: function(val) {
          this.$emit('input', val)
        },
      },
    },
    watch: {
      activeRange: {
        handler(newVal) {
          if (newVal == 'org') {
            setTimeout(() => {
              if (this.$refs.organization) {
                this.$refs.organization.currentDemension = this.$refs.organization.demensions[0].id
                this.$refs.organization.$refs.tree.$refs.elTree.setCurrentKey(
                  this.$refs.organization.demensions[0].id
                )
              }
              this.$emit('filter-type-change', newVal)
            }, 500)
          } else if (newVal == 'policy') {
            setTimeout(() => {
              this.$refs.policyUser.currentPolicy =
                this.$refs.policyUser && this.$refs.policyUser.policies[0].id
              this.$emit('filter-type-change', newVal)
            }, 0)
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      search() {
        if (this.loading) {
          return
        }
        this.$emit('search', this.searchWord)
      },
      reset() {
        this.activeRange = 'org'
        this.$emit('reset')
        this.searchWord = null
      },
      showDialog() {
        this.dialogVisible = true
        this.reset()
        setTimeout(() => {
          this.$refs.selector.onShow()
        }, 10)
      },
      handleClose(done) {
        this.$refs.selector.onHide()
        done && done()
      },
      handleDialogSure() {
        this.$emit('select-data', this.$refs.selector.getSelectedData())
        this.dialogVisible = false
        this.$refs.selector.onHide(true)
      },
      handleDialogCancel() {
        this.dialogVisible = false
        this.$refs.selector.onHide()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .orgdialog-selector__wrapper {
    ::v-deep {
      .el-dialog__header {
        border-bottom: 1px solid #ebebeb;
        span {
          font-weight: bold;
          color: #222;
        }
      }

      .el-dialog__body {
        padding: 24px;
        border-top-width: 0;
        max-height: 600px;
        overflow: hidden;
      }

      .el-dialog__footer {
        border-top: 1px solid #ebebeb;
        text-align: right;
      }
    }
    .dialog-selector__body {
      .el-icon-search {
        cursor: pointer;
      }
    }

    .user-selector {
      margin-top: 10px;
    }
    .selector-range__content {
      ::v-deep .el-tabs__nav-wrap {
        height: 0;
      }
    }
    .selector-range__card {
      ::v-deep {
        .el-card__body {
          height: 480px;

          .el-tabs {
            height: 100%;

            .el-tabs__content {
              height: calc(100% - 16px);
              padding: 0;

              .el-tab-pane {
                height: 100%;
              }
            }
          }
        }
        .el-tabs__nav-wrap {
          background-color: #fcfcfc;
          padding-left: 8px;
        }
        .el-tabs__item {
          padding: 0 20px;
          height: 48px;
          line-height: 48px;
        }
      }
    }
    .selector-item__detail {
      display: flex;
      flex-direction: column;
      margin-left: 10px;

      .selector-detail__name {
        max-width: 220px;

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

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

        span {
          display: inline-block;
          font-size: 12px;
          color: #777;
          max-width: 94px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        span + span {
          margin-left: 10px;
        }
      }
    }
    .selector-selected__label {
      margin-left: 10px;
      width: 109px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
</style>
