<template>
  <div class="workbench-container">
    <div class="select-content">
      <div class="title">
        我的工作台
      </div>
      <!-- 时间 -->
      <div class="search-box">
        <div class="search-item">
          <el-date-picker
            v-model="searchParam.dateTime"
            type="date"
            size="small"
            clear-icon="el-input-icon"
            :clearable="false"
            @change="changeDatetime"
          />
        </div>
      </div>
      <!-- tab栏 -->
      <el-radio-group
        v-model="tabPosition"
        class="workbench-tab"
        @change="tabChange"
      >
        <el-radio-button
          v-for="(item, index) in currentCalList"
          :key="'for' + index"
          :label="item.status"
        >
          {{ item.statusStr }}({{ item.count }})
          <i
            v-if="item.is_dot"
            class="circle-red"
          />
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="workbench-content">
      <div
        v-if="currentDiagList"
        class="workbench-li-c"
      >
        <div class="grid-c">
          <div
            v-for="(item, index) in currentDiagList"
            :key="index"
            class="workbench-li"
          >
            <inquiryList-component :item="item" />
          </div>
        </div>
      </div>

      <div
        v-else
        class="nodata-container"
      >
        <img
          src="../../../assets/image/workbench/no_data_wz.png"
          alt=""
        >
        <div class="nodata-title">
          暂时没有问诊
        </div>
      </div>
      <div
        v-if="allSize > 0"
        class="pagination-container"
      >
        <el-pagination
          background
          :current-page="searchParam.pageNo"
          :page-sizes="[6, 12, 18, 24]"
          :page-size="searchParam.pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="allSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { createNamespacedHelpers } from 'vuex';
  const { mapState } = createNamespacedHelpers('main');
  import storejs from 'storejs';
  import InquiryListComponent from '../../../components/common/inquirylist.vue';
  import { conditionUpdate } from '@/api/workbench';
  export default {
    components: {
      InquiryListComponent,
    },
    data() {
      const s = storejs.get('soketQuest');
      const t = s ? s.returnStatus : 1;
      const d = s ? s.dateTime : new Date().format('yyyy-MM-dd');
      const id =
        s && s.operateUserId ? s.operateUserId : this.isSuperAdmin.userID;
      return {
        tabPosition: t,
        showChat: true,
        totalRows: 0,
        loading: false,
        searchParam: {
          dateTime: d,
          checkvalue: '', // 模拟值后去
          operateUserId: id,
          returnStatus: 1,
          pageSize: 6,
          pageNo: 1,
        },
        testlistdata: [
          {
            appointBeginTime: '2021-07-29T05:28:57.396Z',
            appointEndTime: '2021-07-29T05:28:57.396Z',
            department: '内科',
            departmentId: 3876,
            diagnoseLogId: 38,
            diagnoseType: 1,
            doctorCallKfStatus: 1,
            doctorCallTime: '',
            doctorId: 0,
            doctorMobile: '16789987665',
            doctorName: '孙思邈',
            doctorTrtcEntryStatus: 1,
            imStatus: 0,
            imTeamId: '',
            returnStatus: 1,
            roomId: 'string',
            sort: 0,
            status: 0,
            userCallKfStatus: 0,
            userCallTime: '',
            userId: 0,
            userMobile: '12343123233',
            userName: '孙思邈',
            userTrtcEntryStatus: 0,
          },
        ],
      };
    },
    computed: {
      ...mapState({
        allSize: (state) => state.allSize,
        currentDiagList: (state) => state.currentDiagList,
        currentCalList: (state) => state.currentCalList,
        soketQuest: (state) => state.soketQuest,
        isSuperAdmin: (state) => state.isSuperAdmin,
      }),
    },
    watch: {
      isSuperAdmin(newdata, olddata) {
        if (newdata !== olddata && newdata.userID) {
          console.log('-isSuperAdminisSuperAdmin', newdata);
          const s = storejs.get('soketQuest');
          const d = s ? s.dateTime : new Date().format('yyyy-MM-dd');
          const id =
            s && s.operateUserId ? s.operateUserId : this.isSuperAdmin.userID;
          const p = {
            dateTime: d,
            operateUserId: id,
            pageNo: s ? s.pageNo : 1,
            pageSize: s ? s.pageSize : 6,
            returnStatus: s ? s.returnStatus : 1,
          };
          this.searchParam = p;
          this.tabPosition = s ? s.returnStatus : 1;
          this.inquirySearch('clear');
        }
      },
    },
    created() {
      console.log('currentCalList---------------------', this.currentCalList);
    },
    mounted() {
      const s = storejs.get('soketQuest');
      const t = s ? s.returnStatus : 1;
      this.tabPosition = t;
      const d = s ? s.dateTime : new Date().format('yyyy-MM-dd');
      this.searchParam.dateTime = d;
      const id =
        s && s.operateUserId ? s.operateUserId : this.isSuperAdmin.userID;
      this.operateUserId = id;
    },
    methods: {
      tabChange(val) {
        const s = this.searchParam;
        s.returnStatus = val;
        this.searchParam = s;
        s.pageNo = 1;
        this.inquirySearch('tab');
      },
      changeDatetime(val) {
        const s = this.searchParam;
        s.dateTime = val.format('yyyy-MM-dd');
        this.searchParam = s;
        s.pageNo = 1;
        this.inquirySearch('clear');
      },
      handleSizeChange(val) {
        const s = this.searchParam;
        s.pageSize = val;
        this.searchParam = s;
        this.inquirySearch();
      },
      handleCurrentChange(val) {
        const s = this.searchParam;
        s.pageNo = val;
        this.searchParam = s;
        this.inquirySearch();
      },
      inquirySearch(type) {
        console.log(type);
        const p = this.searchParam;
        if (type == 'clear') {
          this.$store.commit('main/clearRawCurrentCalList');
        }
        conditionUpdate(p).then((res) => {
          if (res.code == '000000') {
            this.$store.commit('main/updateSoketQuest', p);
            if (type == 'tab') {
              const returnStatus = p.returnStatus;
              const RespList = res.data.list[0].recordResp.countRespList.filter(
                (val) => {
                  return val.status == returnStatus;
                }
              );
              this.$store.commit('main/changeRawCurrentCalList', RespList[0]);
            }
          } else {
            this.$message({
              message: res.message,
              type: 'warning',
              duration: 1000,
            });
          }
        });
      },
    },
  };
</script>
<style lang="scss">
.workbench-tab {
  .el-radio-button__inner {
    border: none;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      right: 0;
      height: 2px;
      background: #fff;
      width: 20px;
      transform: translateX(-50%);
    }
    .circle-red {
      display: block;
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: red;
      right: 15px;
      top: 7px;
    }
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border: none;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #fff;
    color: #0d9078;
    box-shadow: none;
    font-weight: 500;
    &::after {
      background: #0d9078;
    }
  }
}
</style>
<style lang="scss">
::v-deep {
  .el-date-editor {
    .el-input__inner {
      background: red;
    }
  }
}

.workbench-container {
  min-width: 1200px;
  .select-content {
    padding: 0 20px;
    background: #fff;
    overflow: hidden !important;
    .search-box {
      display: flex;
      justify-content: flex-start;
      width: 250px;
      margin: 20px 0;
      .search-item {
        margin-right: 20px;
        .input-item {
          width: 333px;
        }
      }
    }

    .title {
      height: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .radio {
      border-bottom: 1px solid #ccc;
      .el-radio-group {
        margin-bottom: -1px !important;
      }
    }
  }
  .workbench-content {
    //min-width: 1250px;
    padding: 20px 10px;
    .workbench-li-c {
      width: 100%;
      .grid-c {
        width: calc(100% - 20px);
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        .workbench-li {
          margin: 0 auto;
          width: 100%;
        }
      }
    }
    .nodata-container {
      background-color: #fff;
      padding: 0 20px;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 470px;
      .nodata {
        width: 100%;
      }
      img {
        width: 298px;
        height: 140px;
      }
      .nodata-title {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6a7990;
        margin-top: 50px;
      }
    }

    .pagination-container {
      background-color: #fff;
      height: 71px;
      background: #ffffff;
      border-radius: 18px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      padding: 0 20px;
    }
  }
}

.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 45px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// 屏幕适配
@media screen and (min-width: 1240px) and (max-width: 1441px) {
  .workbench-container {
    .workbench-li-c {
      .grid-c {
        .workbench-li {
          //max-width: 572px;
        }
      }
    }
  }
}
</style>
