<template>
  <view>
    <view class="container" @touchmove.stop.prevent v-if="pageData.pageRouter === 'default'">
      <view class="container_form">
        <view class="head">
          <text class="name">状态</text>
          <text class="status ellipsis-multiline">{{getStateNames()}}</text>
        </view>
        <view class="statusList">
          <view class="statusItem" :class="{ active: item.checked }" v-for="item in searchData.stateList" :key="item.id" @click="item.checked = !item.checked;">{{item.name}}<text class="newicon newicon-xuanzejiaobiao" v-if="item.checked"></text></view>
        </view>
        <view class="category" @click="clickPageRouter('department')">
          <text class="name">患者科室</text>
          <text class="value ellipsis">{{searchData.department ? searchData.department.dept : ''}}</text>
        </view>
        
        <view class="signUser" @click="clickPageRouter('signUser')" v-if="tabActiveId != 3">
          <text class="name">签到人</text>
          <text class="value ellipsis">{{searchData.signUser ? searchData.signUser.name : ''}}</text>
        </view>
        
        <view class="inspectUser" @click="clickPageRouter('inspectUser')" v-if="tabActiveId != 2">
          <text class="name">出科陪检人</text>
          <text class="value ellipsis">{{searchData.inspectUser ? searchData.inspectUser.name : ''}}</text>
        </view>
      </view>
      <view class="container_foot">
        <view class="clear" @click="clear">清除选项</view>
        <view class="foot_btns">
          <view class="cancel" @click="cancel">取消</view>
          <view class="confirm" @click="confirm">确认</view>
        </view>
      </view>
    </view>
    <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'signUser'">
      <view class="container_form">
        <view class="hospital">
          <text class="name">签到人</text>
          <view class="text-input">
            <input class="m-input" type="text" :value="signUserKeyWord" @input="signUserInput" placeholder="请输入关键字"></input>
          </view>
        </view>
        
        <scroll-view scroll-y class="signUsers">
          <view class="signUsers_item" v-for="signUser in pageData.signUserList" :key="signUser.id" @click="clickSignUser(signUser)">{{signUser.name}}<text v-if="signUser.account">({{signUser.account}})</text></view>
        </scroll-view>
      </view>
      <view class="container_foot">
        <view class="foot_btns">
          <view class="cancel" @click="clickPageRouter('default')">取消</view>
        </view>
      </view>
    </view>
    <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'inspectUser'">
      <view class="container_form">
        <view class="hospital">
          <text class="name">出科陪检人</text>
          <view class="text-input">
            <input class="m-input" type="text" :value="inspectUserKeyWord" @input="inspectUserInput" placeholder="请输入关键字"></input>
          </view>
        </view>
        
        <scroll-view scroll-y class="inspectUsers">
          <view class="inspectUsers_item" v-for="inspectUser in pageData.inspectUserList" :key="inspectUser.id" @click="clickInspectUser(inspectUser)">{{inspectUser.name}}<text v-if="inspectUser.account">({{inspectUser.account}})</text></view>
        </scroll-view>
      </view>
      <view class="container_foot">
        <view class="foot_btns">
          <view class="cancel" @click="clickPageRouter('default')">取消</view>
        </view>
      </view>
    </view>
    <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'department'">
      <view class="container_form">
        <view class="hospital">
          <text class="name">科室</text>
          <view class="text-input">
            <input class="m-input" type="text" :value="departmentKeyWord" @input="departmentInput" placeholder="请输入关键字"></input>
          </view>
        </view>
        
        <scroll-view scroll-y class="categorys">
          <view class="categorys_item" v-for="item in pageData.departmentList" :key="item.id" @click="clickDepartment(item)">{{item.dept}}</view>
        </scroll-view>
      </view>
      <view class="container_foot">
        <view class="foot_btns">
          <view class="cancel" @click="clickPageRouter('default')">取消</view>
        </view>
      </view>
    </view>
    <view class="mask" @touchmove.stop.prevent></view>
  </view>
</template>

<script>
  import { get, post, SM, deleteIt, webHandle } from "../../../http/http.js";
  import debounce from 'lodash-es/debounce'
  export default {
    props: {
      // 搜索条件,看组件传参
      evt: {
        type: Object,
        required: true,
      },
      // tab页面的id，看组件传参
      tabActiveId: {
        type: Number,
        required: true,
      }
    },
    data(){
      return {
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        signUserKeyWord: '',
        inspectUserKeyWord: '',
        departmentKeyWord: '',
        pageData: {
          pageRouter: 'default',
          signUserList: [],
          inspectUserList: [],
          departmentList: [],
          stateList: [],
        },
        searchData: {
          signUser: {id: 0, name: '全部'},
          inspectUser: {id: 0, name: '全部'},
          department: {id: 0, dept: '全部'},
          state: {},
        }
      }
    },
    methods: {
      getStateNames(){
        if(Array.isArray(this.searchData.stateList)){
          return this.searchData.stateList.filter(v => v.checked).map(v => v.name).toString();
        }else{
          return '';
        }
      },
      // 获取状态列表
      getStateList(){
        this.searchData.stateList = this.evt.stateList || [];
      },
      departmentInput(event) {
          this.departmentKeyWord = event.detail.value;
          this.handleDepartmentSearch(this.departmentKeyWord);
      },
      handleDepartmentSearch: debounce(function(keyword) {
        this.getDepartmentList(keyword);
      }, 500),
      signUserInput(event) {
          this.signUserKeyWord = event.detail.value;
          this.handleSignUserSearch(this.signUserKeyWord);
      },
      handleSignUserSearch: debounce(function(keyword) {
        this.getSignUserList(keyword);
      }, 500),
      inspectUserInput(event) {
          this.inspectUserKeyWord = event.detail.value;
          this.handleInspectUserSearch(this.inspectUserKeyWord);
      },
      handleInspectUserSearch: debounce(function(keyword) {
        this.getInspectUserList(keyword);
      }, 500),
      // 取消
      cancel(){
        this.$emit("cancelEmit");
      },
      // 清空
      clear(){
        if(this.tabActiveId !== 3){
          this.searchData.signUser = {id: 0, name: '全部'};
        }
        if(this.tabActiveId !== 2){
          this.searchData.inspectUser = {id: 0, name: '全部'};
        }
        this.searchData.department = {id: 0, dept: '全部'};
        this.searchData.stateList.forEach(v => {
          v.checked = v.value == 4;
        });
      },
      // 确认
      confirm(){
        this.$emit('confirmEmit', this.searchData);
      },
      // 页面路由跳转
      clickPageRouter(type){
        this.pageData.pageRouter = type;
        switch(type){
          case 'signUser':
            this.getSignUserList();
          break;
          case 'inspectUser':
            this.getInspectUserList();
          break;
          case 'department':
            this.getDepartmentList();
          break;
        }
      },
      // 点击科室
      clickDepartment(department){
        this.departmentKeyWord = '';
        this.pageData.pageRouter = 'default';
        this.searchData.department = department;
      },
      // 点击签到人
      clickSignUser(signUser){
        this.signUserKeyWord = '';
        this.pageData.pageRouter = 'default';
        this.searchData.signUser = signUser;
      },
      // 点击出科陪检人
      clickInspectUser(inspectUser){
        this.inspectUserKeyWord = '';
        this.pageData.pageRouter = 'default';
        this.searchData.inspectUser = inspectUser;
      },
      // 获取科室
      getDepartmentList(keyWord){
        uni.showLoading({
          title: "加载中",
        });
        
        let postData = {
          idx: 0,
          sum: 99,
          department: {
      			searchType: 1,
            cascadeHosId: this.hosId,
            dept: keyWord,
          },
        }
        post("/data/fetchDataList/department", postData).then(res => {
          uni.hideLoading();
          if(res.status == 200){
            let list = res.list || [];
            this.pageData.departmentList = [{ id:0, dept: '全部' }, ...list];
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg || '请求数据失败！'
            });
          }
        })
      },
      // 获取签到人列表
      getSignUserList(keyWord){
        uni.showLoading({
          title: "加载中",
        });
      	let postData = {
      	  idx: 0,
      	  sum: 99,
      		user:{
            hospital: {
              id: this.hosId,
            },
            name: keyWord,
            simpleQuery: true,
      		}
      	};

      	post("/data/fetchDataList/user", postData).then((res) => {
      			uni.hideLoading();
      	    let list = res.list || [];
      	    this.pageData.signUserList = [{ id: 0, name: '全部' }, ...list];
      	  });
      },
      // 获取出科陪检人列表
      getInspectUserList(keyWord){
        uni.showLoading({
          title: "加载中",
        });
      	let postData = {
      	  idx: 0,
      	  sum: 99,
      		user:{
            hospital: {
              id: this.hosId,
            },
            name: keyWord,
            simpleQuery: true,
      		}
      	};
      
      	post("/data/fetchDataList/user", postData).then((res) => {
      			uni.hideLoading();
      	    let list = res.list || [];
      	    this.pageData.inspectUserList = [{ id: 0, name: '全部' }, ...list];
      	  });
      }
    },
    mounted() {
      this.getStateList();
      this.searchData.signUser = this.evt.signUser || {id: 0, name: '全部'};
      this.searchData.inspectUser = this.evt.inspectUser || {id: 0, name: '全部'};
      this.searchData.department = this.evt.department || {id: 0, name: '全部'};
    }
  }
</script>

<style lang="scss" scoped>
.text-input {
  width: 100%;
  display: inline-block;
  padding: 0 12rpx;
  border: 1rpx solid #49B856;
  border-radius: 8rpx;

  .m-input {
    height: 64rpx;
    line-height: 64rpx;
  }
}
.mask{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
}
.line{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 8rpx;
  width: 100%;
  background-color: #EBEBEB;
}
.container{
  position: fixed;
  left: 125rpx;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 28rpx;
  
  .container_form{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    .head{
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 24rpx;
      .name{
        flex-shrink: 0;
      }
      .status{
        color: #5DAAB6;
        padding-left: 24rpx;
      }
    }
    .statusList{
      display: flex;
      gap: 16rpx 32rpx;
      flex-wrap: wrap;
      background-color: #fff;
      margin-top: 24rpx;
      padding: 16rpx 8rpx;
      .statusItem{
        width: 182rpx;
        height: 60rpx;
        background: #EEEEEE;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &.active{
          background-color: #DCF2F5;
        }
        .newicon-xuanzejiaobiao{
          position: absolute;
          right: 0;
          bottom: 0;
          color: #65babb;
        }
      }
    }
  }
  
  .hospital{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx 24rpx;
    background-color: #fff;
    .name{
      font-size: 30rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
    }
    .value{
      font-size: 26rpx;
      color: #5DAAB6;
    }
  }
  
  .signUsers{
    flex: 1;
    min-height: 0;
    margin-top: 16rpx;
    background-color: #fff;
    .signUsers_item{
      padding: 24rpx;
      border-bottom: 1rpx solid #DEDEDE;
    }
  }
  
  .inspectUsers{
    flex: 1;
    min-height: 0;
    margin-top: 16rpx;
    background-color: #fff;
    .inspectUsers_item{
      padding: 24rpx;
      border-bottom: 1rpx solid #DEDEDE;
    }
  }
  
  .categorys{
    flex: 1;
    min-height: 0;
    margin-top: 16rpx;
    background-color: #fff;
    .categorys_item{
      padding: 24rpx;
      border-bottom: 1rpx solid #DEDEDE;
    }
  }
  
  .tabs{
    margin-top: 16rpx;
    background-color: #FBFBFB;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16rpx 0;
    padding: 24rpx 16rpx;
    .tab{
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #F7F7F7;
      font-size: 28rpx;
      position: relative;
      .newicon-xuanzejiaobiao{
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 38rpx;
        color: #53B9BB;
      }
      &.active{
        background-color: rgba(149, 220, 231, 0.30);
        .newicon-xuanzejiaobiao{
          opacity: 1;
        }
      }
    }
  }
  
  .signUser,
  .inspectUser,
  .category,
  .acceptDate{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background-color: #fff;
    margin-top: 24rpx;
    .name{
      flex-shrink: 0;
      margin-right: 24rpx;
    }
  }
  
  .container_foot{
    .clear{
      padding: 24rpx;
      font-size: 28rpx;
      background-color: #fff;
      margin: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .foot_btns{
      margin-top: 24rpx;
      display: flex;
      border-top: 1rpx solid #BFBFBF;
      .cancel{
        flex: 1;
        background-color: #fff;
        font-size: 32rpx;
        padding: 24rpx;
        display: flex;
        justify-content: center;
      }
      .confirm{
        flex: 1;
        font-size: 32rpx;
        padding: 24rpx;
        background-color: #49B856;
        display: flex;
        justify-content: center;
        color: #fff;
      }
    }
  }
}
</style>