<template>
  <div class="druglist">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt/>
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <div class="input" style="display: flex;">
            <el-date-picker size="mini" v-model="start" type="month" placeholder="起始年月"
                            :picker-options="startPickerOptions" format="yyyy-MM"></el-date-picker>
            <el-date-picker size="mini" v-model="end" type="month" placeholder="结束年月"
                            :picker-options="endPickerOptions" format="yyyy-MM"></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>医疗机构名称：</span>
          <div class="input">
            <el-select
                size="mini"
                v-model="cascader[1]"
                placeholder="请选择"
                @change="getCascaderC($event)"
            >
              <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item) in cascaderBOptions"
                  :key="item.pid"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>科室名称：</span>
          <div class="input">
            <el-select size="mini" v-model="cascader[2]" placeholder="请选择" multiple collapse-tags clearable
                       @change="getCascaderD('')">
              <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item) in cascaderCOptions"
                  :key="item.pid"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>医生名称：</span>
          <div class="input">
            <el-select size="mini" v-model="cascader[3]" placeholder="请输入关键词" multiple collapse-tags clearable
                       reserve-keyword filterable remote :remote-method="getCascaderD" :loading="loadDoctorSelect"
                       :disabled="!cascader[1]">
              <el-option
                  :label="item.username"
                  :value="item.pid"
                  v-for="(item) in cascaderDOptions"
                  :key="item.pid"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>量级维度：</span>
          <el-select size="mini" v-model="orderType" placeholder="请选择">
            <el-option :label="item.label" :value="item.value" v-for="(item,index) in categoryOptions"
                       :key="item.value"></el-option>
          </el-select>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <!--<el-button type="primary" size="mini" @click="exportDow()">导出</el-button>-->
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="today-data">
      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" height="100%" border>
          <el-table-column prop="doctorName" label="医生" align="center" width="150"></el-table-column>
          <el-table-column prop="id" label="机构 / 科室" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.stiName" class="fragment">{{ scope.row.stiName }}</div>
              <div v-if="scope.row.deptName" class="fragment">{{ scope.row.deptName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="docInCount" label="进入系统量" align="center" width="100"></el-table-column>
          <el-table-column prop="docOutCount" label="辅诊系统推导给HIS量" align="center" width="150"></el-table-column>
          <el-table-column prop="docPayCount" label="已收费处方量" align="center" width="100"></el-table-column>
          <el-table-column prop="associationCount" label="协定方使用量" align="center" width="100"></el-table-column>
          <el-table-column prop="pushCount" label="智能推导量" align="center" width="100"></el-table-column>
          <el-table-column prop="dialecticalCount" label="智能辨证推导量" align="center" width="120"></el-table-column>
          <el-table-column prop="prescriptionsCount" label="方剂检索量" align="center" width="100"></el-table-column>
          <el-table-column prop="famousCount" label="名家医案检索量" align="center" width="120"></el-table-column>
          <el-table-column prop="medicalCount" label="病历转方量" align="center" width="100"></el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <el-pagination
            background
            layout=" prev, pager, next, jumper, total"
            :total="total"
            :page-size="limit"
            @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {getDepartSelect, getDoctorSelect} from "@/api/system.js";
import {medicalInstitution} from "@/api/city";
import {getDoctorWork} from "@/api/dataAnalysis";
import {formatMonth} from "@/utils/format";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      loadDoctorSelect: false,
      cascaderAOptions: [],
      cascaderBOptions: [],
      cascaderCOptions: [],
      cascaderDOptions: [],
      cascader: [],
      orderType: void 0,
      start: void 0,
      end: new Date(),

      categoryOptions: [
        {label: '进入系统量', value: '1'},
        {label: '辅诊系统推导给HIS量', value: '2'},
        {label: '已收费处方量', value: '6'},
        {label: '智能辨证推导量', value: '3'},
        {label: '智能推导量', value: '4'},
        {label: '协定方使用量', value: '5'},
        {label: '方剂检索量', value: '7'},
        {label: '名家医案检索量', value: '8'},
        {label: '病历转方量', value: '9'},
      ],

      tableData: [],

      page: 1,
      limit: 10,
      total: 0,


      startPickerOptions: {
        disabledDate: (date) => {
          const value = date.getTime();
          return this.end && value > this.end.getTime() || value > Date.now()
        }
      },
      endPickerOptions: {
        disabledDate: (date) => {
          const value = date.getTime();
          return this.start && value < this.start.getTime() || value > Date.now()
        }
      }
    };
  },
  created() {
    this.getCascaderB(this.getuserinfo.organizationid);
    this.load();
  },
  methods: {
    search() {
      this.page = 1;
      this.load();
    },
    clearFilter() {
      this.getCascaderB(this.getuserinfo.organizationid)
      this.orderType = void 0;
      this.start = void 0;
      this.end = new Date();

      this.search();
    },
    exportDow() {},

    sizeC(e) {
      // console.log(e, '1')
      this.page = e;
      this.load();
    },
    // 获取医疗机构选择器
    async getCascaderB(id) {
      this.cascader = [id, '', [], []];
      this.cascaderBOptions = []
      this.cascaderCOptions = []
      this.cascaderDOptions = []
      let res = await medicalInstitution({organizationId: id});
      if (res.ResultCode == 0) { this.cascaderBOptions = res.Data; }
    },
    // 获取医疗机构下的科室
    async getCascaderC(id) {
      this.cascader = [this.cascader[0], id, [], []];
      let res = await getDepartSelect({institutionId: id});
      if (res.ResultCode == 0) { this.cascaderCOptions = res.Data; }

      await this.getCascaderD().catch();
    },
    async getCascaderD(keyword) {
      if (!this.cascader[1]) return;
      this.loadDoctorSelect = true;
      const res = await getDoctorSelect({
        keyword,
        organizationid: this.cascader[0] || '',
        sititutionid: this.cascader[1] || '',
        departmentsIds: this.cascader[2] || [],
      })
      if (res.ResultCode == 0) {
        this.cascaderDOptions = res.Data.Items;
      }
      this.loadDoctorSelect = false;
    },
    // 获取列表
    async load() {
      let params = {
        page: this.page,
        limit: this.limit,

        orderType: this.orderType,
        startMon: formatMonth(this.start),
        endMon: formatMonth(this.end),
        orgId: this.cascader[0] || '',
        stiId: this.cascader[1] || '',
        deptId: '',
        deptIds: this.cascader[2] || [],
        doctorIds: this.cascader[3] || [],
      };
      let res = await getDoctorWork(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
      }
    },
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.today-data {
  margin-top: 5px;
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 71vh;

  .add {
    width: 74px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .today-table {
    height: 89%;

    .enable,
    .disable {
      width: 60px;
      height: 24px;
      background: #ff6245;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin: 0 auto;
    }

    .disable {
      background: #68a8ff !important;
    }

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }

      .bg-default {
        width: 80px;
        margin-left: 15px;
      }
    }
  }
}

.table-body::v-deep .el-table .cell {
  text-align: center;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .today-data {
    height: 82vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .today-data {
    height: 81vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 20px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .today-data {
    height: 73vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 10px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 14px 0;
  }
}

@media screen and(min-width: 1281px) and (max-width: 1360px) {
  .today-data {
    height: 73vh;
    padding: 5px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

.departmentidSelsourceName {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragment {
  display: inline-block;

  & + .fragment::before {
    content: "/";
    margin: 0 4px;
  }
}
</style>