<template>
  <div class="org-select" :class="{ 'org-select__button': buttonType === 'button' }">
    <div class="tags">
      <el-button v-if="buttonType === 'button'" icon="el-icon-plus" @click="show = true" style="margin-bottom: 6px">
        {{ title }}
      </el-button>
      <!--      @click="show = true"-->
      <div class="input-box" :class="{ 'as-input': buttonType === 'input' }">
        <template v-if="tsflag">
          <el-table v-if="selectedData.length" :data="selectedData" border style="width: 100%">
            <el-table-column label="名称" align="center">
              <template slot-scope="scope">
                <el-tag v-bind="tagConfig" :closable="false" class="org-tag">
                  {{ scope.row.roleName }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="三方推送" align="center">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row" :content="'三方推送: ' + `${scope.row.flag ? '开' : '关'}`" placement="top">
                  <el-switch v-model="scope.row.flag" active-color="#13ce66" :active-value="true" :inactive-value="false"> </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="onClose(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-else>
          <el-tag v-bind="tagConfig" class="org-tag" v-for="(item, i) in selectedData" :key="item.key" @close="onClose(item, i)">
            {{ item.roleName }}
          </el-tag>
        </template>
      </div>
    </div>
    <org-transfer ref="transfer" :value="innerValue" :title="title" :visible.sync="show" @confirm="onConfirm" :type="type" />
  </div>
</template>
<script>
import OrgTransfer from '../OrgTransfer'
import { getUserInfoList } from '@/api/permission/user'
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  components: { OrgTransfer },
  name: 'org-select',
  props: {
    value: {
      type: Array,
      default: () => [],
      required: true
    },
    title: {
      type: String,
      default: '组织机构'
    },
    type: {
      type: String,
      default: 'user'
    },
    tsflag: {
      type: Boolean,
      default: false
    },
    tsList: {
      type: Array,
      default: () => []
    },
    buttonType: {
      type: String,
      default: 'input'
    }, // or input
    tagConfig: {
      type: Object,
      default: () => ({
        type: 'info',
        closable: true,
        'disable-transitions': false,
        hit: false,
        color: undefined,
        size: 'small',
        effect: 'light'
      })
    }
  },
  data() {
    return {
      show: false,
      innerValue: null,
      selectedData: []
    }
  },
  watch: {
    value: {
      handler: function (val) {
        if (!val) return
        this.reloadCmpData()
      },
      immediate: true,
      deep: true
    },
    tsList: {
      deep: true
    }
  },
  computed: {
    selectedLabels() {
      return this.selectedData.map((t) => t.roleName).join(',')
    },
    //推送
    selectedLabelsts() {
      return this.selectedData
        .map((t) => {
          if (t.flag) {
            return t.id
          }
        })
        .filter((l) => l !== undefined)
    }
  },
  methods: {
    reloadCmpData() {
      this.innerValue = this.value
      // transfer 可能还未加载成功
      this.$nextTick((_) => {
        this.initSelectedData()
      })
    },
    getText(id) {
      let list = [],
        text = ''
      if (this.type === 'position' || this.type === 'role') {
        list = this.$store.getters[this.type + 'List']
        let arr = list.filter((o) => o.id === id)
        if (!arr.length) return ''
        text = this.type === 'role' ? arr[0].roleName || '' : arr[0].postName || ''
      }
      if (this.type == 'user') {
        list = this.$store.getters.userList
        let arr = list.filter((o) => o.id === id)
        if (!arr.length) return ''
        text = arr[0].roleName && arr[0].account ? arr[0].roleName + '/' + arr[0].account : ''
      }
      return text
    },
    async initSelectedData() {
      if (this.type === 'user') {
        if (!this.innerValue.length) return
        const arr = this.innerValue.join()
        getUserInfoList(arr).then((res) => {
          this.selectedData = res.data.data.map((i) => {
            return {
              roleName: i.realName,
              id: i.id
            }
          })
          this.$nextTick(() => {
            this.tsSelectedData()
          })
        })
      } else {
        this.selectedData = this.innerValue.map((t) => ({
          id: t,
          roleName: this.getText(t)
        }))
        this.$nextTick(() => {
          this.tsSelectedData()
        })
      }
    },
    tsSelectedData() {
      //推送过滤
      if (this.tsflag) {
        this.selectedData.forEach((i, k) => {
          // i.flag = this.tsList.includes(i.id);
          this.$set(i, 'flag', this.tsList.includes(i.id))
        })
      }
    },
    onClose(item, i) {
      this.innerValue.splice(i, 1)
      this.selectedData.splice(i, 1)
      this.$emit('change', this.innerValue)
    },

    onConfirm(data) {
      this.innerValue = data
      this.$emit('change', this.innerValue)
    }
  }
}
</script>
<style lang="scss" scoped>
.tags {
  .input-box.as-input {
    border: 1px solid #dcdfe6;
    padding-left: 6px;
    font-size: 12px;
    min-height: 32px;
    line-height: 30px;
    border-radius: 4px;
    background: white;
    color: #606266;
    cursor: pointer;
  }

  .org-tag {
    margin-right: 6px;
    // max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding-right: 1rem;
    vertical-align: middle;

    >>> .el-tag__close {
      position: absolute;
      right: 2px;
      top: 50%;
      margin-top: -7px;
    }
  }
}
.org-select__button {
  .org-tag {
    margin-bottom: 3px;
  }
}
</style>
