<template>
  <rt-view>
    <rt-header>
      <rt-navbar></rt-navbar>
      <rt-list-header>
        <rt-search
          slot="search"
          :placeholder="placeholder"
          v-model="quickSearch"
          @on-search="search"
        ></rt-search>
        <rt-tabs
          v-model="tabValue"
          :tabList="tablist"
          selectColor="#53a4fc"
          style="background-color:white"
        ></rt-tabs>
      </rt-list-header>
    </rt-header>
    <rt-content>
      <rt-list ref="firstlistWrapper" :fetch="firstfetchData" v-show="tabValue === 0">
        <rt-list-item class="list-item" @click.native="firstselect(row)" slot-scope="{row}">
          <rt-card>
            <div style="display: inline-block">
              <div style="font-size:15px;color:#222222">{{row[firstOwnerKey]}}</div>
              <div style="font-size:13px;color:#888888">
                <span>{{row[firstBusKey]}}</span>
                <span>{{row[firstNameKey]}}</span>
              </div>
            </div>
            <rt-icon
              style="float:right;margin-top:10px"
              :name="firstisSelected(row)? 'rt-base-checked': 'rt-base-unchecked'"
              :color="(firstSelect.id === row.id || ( firstSelect.length > 0 && ~firstSelect.findIndex( item => item.id === row.id ))) ? '#53a4fc':'' "
              size="20"
            ></rt-icon>
          </rt-card>
        </rt-list-item>
      </rt-list>
      <rt-list ref="secondlistWrapper" :fetch="secondfetchData" v-show="tabValue === 1">
        <rt-list-item class="list-item" @click.native="secondselect(row)" slot-scope="{row}">
          <rt-card>
            <div style="display: inline-block">
              <div style="font-size:15px;color:#222222">{{row[secondNameKey]}}</div>
            </div>
            <rt-icon
              style="float:right;margin-top:5px"
              :name="secondisSelected(row)? 'rt-base-checked': 'rt-base-unchecked'"
              :color="(secondSelectList.id === row.id || ( secondSelectList.length > 0 && ~secondSelectList.findIndex( item => item.id === row.id ))) ? '#53a4fc':'' "
              size="20"
            ></rt-icon>
          </rt-card>
        </rt-list-item>
      </rt-list>
      <div class="popup-space" v-if="showPopup" @click="hidePopup()">
        <div class="popup-white" @click.stop>
          <div class="popup-header">
            <span class="popup-header-title">{{selectTitle}}</span>
            <span class="popup-header-del" @click="cleanSelect">清空</span>
          </div>
          <div class="popup-content">
            <div v-for="(item,index) in secondSelectList" :key="index">
              <div class="popup-content-item">
                <div style="display: inline-block">
                  <div style="font-size:15px;color:#222222">{{firstSelect[firstOwnerKey]}}</div>
                  <div style="font-size:13px;color:#888888">
                    <span>{{firstSelect[firstBusKey]}}</span>
                    <span>{{firstSelect[firstNameKey]}}</span>
                  </div>
                  <div style="font-size:14px;color:#222222">{{item.name}}</div>
                </div>
                <rt-icon
                  style="float:right;margin-top:20px"
                  name="rt-xrm-selectplaus"
                  size="20"
                  @click="delSelect(item)"
                ></rt-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </rt-content>
    <rt-footer class="footerspace">
      <div class="footerleft">
        <rt-button size="small" text @click="ShowPopup()" class="footerbtnleft">以选内容</rt-button>
      </div>
      <div class="footerright">
        <rt-button
          size="small"
          @click="confirm()"
          class="footerbtnright"
        >确认({{secondSelectList.length}})</rt-button>
      </div>
    </rt-footer>
  </rt-view>
</template>

<script>
export default {
  name: 'rtMultiTabLookupView',
  props: {
    // 事件名称
    name: {
      type: String,
      required: true
    },
    //tab列表
    tablist: {
      type: Array,
      default: () => {
        return [{ name: 'firstTab' }, { name: 'SecondTab' }];
      }
    },
    //搜索提示
    placeholder: {
      type: String,
      default: '输入名称'
    },
    //第一个tab负责人的key值
    firstOwnerKey: {
      type: String,
      default: 'owneridname'
    },
    //第一个tab部门的key值
    firstBusKey: {
      type: String,
      default: 'businessunitidname'
    },
    //第一个tab人员的key值
    firstNameKey: {
      type: String,
      default: 'name'
    },
    //第二个tab的key值
    secondNameKey: {
      type: String,
      default: 'name'
    },
    //第一个的数据名
    firstGetDateName: {
      type: String,
      required: true
    },
    //第二个tab的数据名
    secondGetDateName: {
      type: String,
      required: true
    },
    selectTitle: {
      type: String,
      default: '已选'
    },
    firstParam: {
      type: Object,
      default: () => ({})
    },
    secondParam: {
      type: Object,
      default: () => ({})
    },
    firstOrderby: {
      type: String,
      required: true
    },
    secondOrderby: {
      type: String,
      required: true
    },
    filtered: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      tabValue: 0,
      quickSearch: '',
      firstSelect: {},
      secondSelectList: [],
      showPopup: false,
      firstQuickSearch: '',
      secondQuickSearch: ''
    };
  },
  watch: {
    tabValue: function() {
      this.search();
    },
    quickSearch: function() {
      if (this.tabValue === 0) {
        this.firstQuickSearch = this.quickSearch;
      } else if (this.tabValue === 1) {
        this.secondQuickSearch = this.quickSearch;
      }
    }
  },
  methods: {
    search() {
      if (this.tabValue === 0) {
        this.quickSearch = this.firstQuickSearch;
        this.$refs.firstlistWrapper.loadData();
      } else if (this.tabValue === 1) {
        this.quickSearch = this.secondQuickSearch;
        this.$refs.secondlistWrapper.loadData();
      }
    },
    confirm() {
      for (let i = 0; i < this.secondSelectList.length; i += 1) {
        this.secondSelectList[i].firstselect = this.firstSelect;
      }
      this.$bus.$emit(`choose-${this.name}`, this.secondSelectList);
      this.backView(-1);
    },
    hidePopup() {
      this.showPopup = false;
    },
    ShowPopup() {
      if (this.showPopup) {
        this.showPopup = false;
      } else {
        this.showPopup = true;
      }
    },
    cleanSelect() {
      this.secondSelectList = [];
      this.firstSelect = {};
    },
    async firstfetchData(page) {
      let paramsList = this.firstParam;
      paramsList['@queryValue'] = this.quickSearch;
      const api = `api/DataService/${this.filtered ? 'Filtered' : ''}Query`;
      const dataString = await rt.post(api, {
        GetDataName: this.firstGetDateName,
        Paramslist: paramsList,
        Orderby: this.firstOrderby,
        PageSize: page.pageSize,
        PageIndex: page.pageIndex
      });
      // 如果是单选,默认选中第一条
      let data = JSON.parse(dataString).DataList;
      if (rt.isNil(this.firstSelect.id) && data.length > 0) {
        this.firstSelect = data[0];
      }
      return data;
    },
    async secondfetchData(page) {
      let paramsList = this.secondParam;
      paramsList['@queryValue'] = this.quickSearch;
      const api = `api/DataService/${this.filtered ? 'Filtered' : ''}Query`;
      const dataString = await rt.post(api, {
        GetDataName: this.secondGetDateName,
        Paramslist: paramsList,
        Orderby: this.secondOrderby,
        PageSize: page.pageSize,
        PageIndex: page.pageIndex
      });
      // 如果是单选,默认选中第一条
      let data = JSON.parse(dataString).DataList;
      return data;
    },
    firstselect(row) {
      this.firstSelect = row;
      this.quickSearch = '';
      this.tabValue = 1;
    },
    secondselect(row) {
      const index = this.secondSelectList.findIndex(item => {
        return item.id == row.id;
      });
      if (index != -1) {
        this.secondSelectList.splice(index, 1);
      } else {
        this.secondSelectList.push(row);
      }
    },
    firstisSelected(row) {
      return this.firstSelect.id == row.id;
    },
    secondisSelected(row) {
      return this.secondSelectList.some(item => item.id === row.id);
    },
    delSelect(row) {
      const index = this.secondSelectList.findIndex(item => {
        return item.id == row.id;
      });
      if (index != -1) {
        this.secondSelectList.splice(index, 1);
      }
    },
    backView(num) {
      this.$router ? this.$router.history.go(num) : window.history.go(num);
    }
  }
};
</script>

<style lang="less" scoped>
.popup-space {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000;
  .popup-white {
    background-color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1002;
    .popup-header {
      height: 60px;

      .popup-header-title {
        font-size: 16px;
        color: #555555;
        margin-left: 10px;
        margin-top: 15px;
        float: left;
      }
      .popup-header-del {
        font-size: 14px;
        color: #555555;
        margin-right: 10px;
        margin-top: 15px;
        float: right;
      }
    }
    .popup-content {
      height: 300px;
      overflow-x: hidden;
      overflow-y: scroll;
      .popup-content-item {
        background-color: #f7f8fa;
        width: 85%;
        margin-left: 5%;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 10px;
      }
    }
    .popup-content::-webkit-scrollbar {
      display: none;
    }
  }
}
.footerspace {
  z-index: 2000;
  height: 50px;
  .footerleft {
    float: left;
    margin-left: 15px;
    margin-top: 10px;
    .footerbtnleft {
      color: #555555;
      font-size: 16px;
    }
  }
  .footerright {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    .footerbtnright {
      font-size: 14px;
      background-color: #53a4fc;
      width: 68px;
      height: 28px;
      color: white;
      border: 0px;
    }
  }
}
</style>
