<template>
  <div class="administrators">
    <!-- 头部 -->
    <div class="header">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <div class="left">
            <el-row
              type="flex"
              justify="space-between"
              :gutter="70"
            >
              <el-col :span="12">
                <el-date-picker
                  v-model="workbenchAdminDate"
                  style="margin-top: 10px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 问诊列表 -->
    <div class="consultation-container">
      <div
        v-if="operatorslist"
        class="consultation-content"
      >
        <div
          v-for="(item, index) in operatorslist"
          :key="index"
          class="consultation-li"
        >
          <consultationlist
            :workbench-admin-date="workbenchAdminDate"
            :operators-item="item"
          />
        </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>
  </div>
</template>

<script>
  import consultationlist from '@/components/common/consultation';
  import { getMatchList } from '@/api/administrators';

  export default {
    components: {
      consultationlist,
    },
    data() {
      const d =
        localStorage.getItem('workbenchAdminDate') ||
        new Date().format('yyyy-MM-dd');
      return {
        workbenchAdminDate: d,
        operatorslist: [],
      };
    },
    watch: {},
    created() {
      this.init();
    },
    methods: {
      init() {
        getMatchList().then((res) => {
          if (res.code == '000000') {
            this.operatorslist = res.data;
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
.administrators {
  height: calc(100% - 76px);
  .header {
    padding: 30px;
    width: 100%;

    background: #ffffff;
    .el-input__inner {
      width: 173px;
      height: 47px;
      background: #ffffff;
      border-radius: 7px;
      border: 1px solid #d9d9d9;
    }
  }
  .detailslist {
    display: flex;
    // flex-wrap: wrap;
    flex-direction: column;
    .details {
      flex: 1;
      width: 572px;
      height: 164px;
      background: #ffffff;
      border-radius: 18px;
    }
  }

  .total {
    width: 62px;
    height: 40px;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #063948;
    line-height: 40px;
    margin: 0 auto;
  }
  .state {
    width: 28px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6a7990;
    line-height: 20px;
    margin: 0 auto;
  }
  .consultation-container {
    overflow-y: scroll;
    height: calc(100% - 154px);
    width: 100%;
    padding: 20px;
    .consultation-content {
      display: grid;
      grid-template-columns: 33.3% 33.3% 33.3%;
      grid-row-gap: 20px;
      // grid-column-gap: 20px;
      overflow: hidden;
      .consultation-li {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
      }
    }
    .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;
      }
    }
  }
  .footer {
    margin-top: 20px;
    width: 100%;
    height: 71px;
    background: #ffffff;
    border-radius: 18px;
    padding-top: 20px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
