<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.cityId" clearable class="filter-item" placeholder="请选择归属城市" @change="cityChange" filterable>
        <el-option v-for="item in citys" :key="item.id" :label="item.cityName" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.stationId" clearable class="filter-item" placeholder="请选择服务站" multiple="" filterable>
        <el-option v-for="item in cityStations" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-date-picker v-model="listQuery.nucleicDate" type="date" value-format="yyyy-MM-dd" class="filter-item" placeholder="采样日期" :picker-options="{}" />

      <el-select v-model="listQuery.type" style="width: 150px" class="filter-item" placeholder="请选择服务者类型" multiple="">
        <el-option v-for="item in servantTypeMap" :key="item.name" :label="item.name" :value="item.id" />
      </el-select>

      <!-- <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入手机号码" /> -->
      <el-button v-permission="['GET /admin/servant/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->
    <div class="content">
      <div style="color: #666;font-size: 11px;padding: 10px;">{{listQuery.nucleicDate}}：{{title}}</div>
      <div style="display: flex;flex-wrap: wrap;">
        <div v-for="(item,index) in list" :key="index" class="item" @click="handleRead(item)">
          <div style="display:flex;justify-content: space-between;">
            <div style="color:#C0C4CC;font-size: 9px;"> {{formatDate(item.nucleicTime,'hh:mm')}}</div>
            <i v-if="item.nucleicTime" style="color:#C0C4CC" class="el-icon-check"></i>
            <i v-else style="color:red" class="el-icon-close"></i>
          </div>
          <div class="bbt">{{item.bbt}}℃</div>
          <div class="name">{{item.name}}</div> 
          <!-- <div>采样时间:{{formatDate(item.nucleicTime,'hh:mm')}}</div> -->
        </div>
      </div>
    </div>
    <!-- <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
 
     <el-table-column align="center" label="城市" prop="cityId">
        <template slot-scope="scope">
          <el-tag>{{  cityFilter(scope.row.cityId) }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="服务站" prop="stationName" />
      <el-table-column align="center" label="服务者名称" prop="name" />
      <el-table-column align="center" label="手机" prop="mobile" />
      <el-table-column align="center" label="服务者类型" prop="type">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.type | TypeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="采样时间" prop="nucleicTime" />
      <el-table-column align="center" label="是否过期" prop="expire">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.expire==null||scope.row.expire==true)?'warning':'info'">{{ (scope.row.expire==null||scope.row.expire==true)?'已过期':'有效' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效时间" prop="duration">
        <template slot-scope="scope">
          {{scope.row.duration}} 小时
        </template>
      </el-table-column>
      <el-table-column align="center" label="体温" prop="bbt" />

      <el-table-column align="center" label="上传时间" prop="nucleicReportTime" />

      <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/join/pass']" type="text" size="mini" icon="el-icon-view" @click="handleRead(scope.row)">详细</el-button>
        </template>
      </el-table-column> 

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-->

    <!-- 详细日历 -->
    <el-dialog :visible.sync="viewDialogVisible" :title="calendarTitle" width="900px">

      <div>
        <el-calendar v-model="calendarDate">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法<i class="el-icon-check"/>-->
          <template slot="dateCell" slot-scope="{date, data}">
            <div style="text-align: center;">{{ data.day.split('-').slice(1).join('-') }}
            </div>
            <div v-for="(item,index) in nucleics" :key="index">
              <div style="display: flex;flex-direction: column;align-items: baseline;color:#09afff;text-align: center;font-size: 9px;margin-top: 10px;" v-if="data.day.split('-').slice(1).join('-')==item.day">
                <span>采样：{{item.nucleicTime}}</span>
                <span>有效：{{(item.duration&&item.duration<0)?"失效":(item.duration+'小时')}}</span>
                <span>体温：{{item.bbt}}℃</span>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { read, listNucleic } from "@/api/nucleic";
import { formatDate } from "@/utils/date";
import { listAllCity } from "@/api/city";
import { stations } from "@/api/enumUtils";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "nucleic",
  components: { BackToTop, Pagination },
  filters: {
    TypeFilter(type) {
      if (type == null || type == 0) return "小家政合伙人";
      if (type == 1) return "阿姨小哥";
      if (type == 2) return "站长";
      if (type == 3) return "大客户";
      if (type == 4) return "公司员工";
      if (type == 5) return "大团长";
      if (type == 6) return "副团长";
      if (type == 99) return "临时工";
      return "";
    },
  },
  watch: {
    calendarDate(val, oldVal) {
      let value = formatDate(val, "yyyy-MM");
      if (this.calendarMonth == value) return;
      this.calendarMonth = formatDate(val, "yyyy-MM");
      this.getNucleicList();
    },
  },
  data() {
    return {
      stations: stations,
      cityStations: [],
      row: {},
      servantTypeMap: [
        { id: 1, name: "阿姨小哥" },
        { id: 2, name: "站长" },
        { id: 98, name: "其他" },
        // { id: 3, name: "大客户" },
        // { id: 4, name: "公司员工" },
        // { id: 5, name: "大团长" },
        // { id: 6, name: "副团长" },
        // { id: 99, name: "临时工" },
      ],
      list: [],
      total: 0,
      title: "",
      citys: [],
      listLoading: true,
      dataForm: {},
      listQuery: {
        cityId: 1,
        mobile: undefined,
        nucleicDate: formatDate(new Date(), "yyyy-MM-dd"),
        type: [1],
      },
      viewDialogVisible: false,
      nucleics: [],
      calendarTitle: "",
      calendarDate: new Date(),
      calendarMonth: formatDate(new Date(), "yyyy-MM"),
    };
  },
  created() {
    this.getList();
    listAllCity().then((res) => {
      this.citys = res.data.data;
      this.cityChange(1);
    });
  },
  methods: {
    getList() {
      this.listLoading = true;
      listNucleic(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.title = response.data.data.title;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    cityFilter(cityId) {
      let cityName = null;
      this.citys.forEach((item) => {
        if (item.id == cityId) {
          cityName = item.cityName;
        }
      });
      return cityName;
    },
    handleFilter() {
      this.getList();
    },
    handleRead(row) {
      this.row = row;
      this.calendarDate = new Date();
      this.calendarMonth = formatDate(new Date(), "yyyy-MM");
      this.calendarTitle = "[" + row.name + row.mobile+"]核酸明细";
      this.viewDialogVisible = true;
      this.getNucleicList(row.id, this.calendarMonth);
    },
    getNucleicList() {
      read({ servantId: this.row.id, month: this.calendarMonth }).then(
        (res) => {
          //console.info(res.data.data);
          this.nucleics = res.data.data;
        }
      );
    },
    cityChange(value) {
      //this.dataJoinForm.stationId = "";
      let cityName = this.cityFilter(value);

      if (cityName == null) this.cityStations = [];

      let stations = [];
      this.stations.forEach((s) => {
        if (cityName.indexOf(s.city) >= 0) stations.push(s);
      });
      this.cityStations = stations;
    },
    formatDate(time, fmt) {
      if (time == null || typeof time == "undefined") return "";
      return formatDate(new Date(time), fmt);
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["合伙人", "手机号", "申请时间"];
        const filterVal = ["user.username", "applyMobile", "applyTime"];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "行星申请");
        this.downloadLoading = false;
      });
    },
  },
};
</script>

<style scoped>
.content {
  padding: 10px;
  border: 1px solid #c0c4cc;
  border-radius: 10px;
  display: flex;
  height: 780px;
  flex-direction: column;
}
.item {
  margin: 5px;
  border: 1px solid rgb(192, 196, 204);
  padding: 5px;
  width: 70px;
  height: 65px;
  border-radius: 5px;
}
.name {
  color: #666;
  margin-top: 8px;
}

.bbt {
  color: rgb(192, 196, 204);
  font-size: 9px;
}

.el-dialog {
  width: 650px !important;
}
.el-table th.gutter {
  display: table-cell !important;
}
.el-select--medium {
  width: 300px !important;
}
.el-calendar-table .el-calendar-day {
  height: 65px !important;
}
</style>
