<template>
  <div>
    <div class="area">
      <div class="left" style="padding-bottom:0px">
        <el-select v-model="queryString.city" clearable class="filter-item" placeholder="请选择城市">
          <el-option v-for="item in citys" :key="item.id" :label="item.cityName" :value="item.id" />
        </el-select>
        <!--   
          <el-select v-model="queryString.postId" placeholder="请选择驿站" clearable="">
            <el-option v-for="(item,index) in cityPost" :key="index" :label="item.postStation"
                       :value="item.postStationId"></el-option>
          </el-select> -->

        <el-button type="primary" icon="el-icon-refresh" @click="BtnRefresh">刷新</el-button>
      </div>
    </div>
    <div class="area">
      <div class="left" style="padding-top:0px">
        <div class="items">
          <div class="item border_hiddle">
            <div class="flex_row">
              <!-- <div class="sche_board">
                <div class="labelC">周期单</div>
                <div class="valueC">111</div>
                <div class="question">?</div>
              </div>

              <div class="sche_board">
                <div class="labelC">保洁单次</div>
                <div class="valueC">111</div>
                <div class="question">?</div>
              </div>

              <div class="sche_board">
                <div class="labelC">品类</div>
                <div class="valueC">111</div>
                <div class="question">?</div>
              </div>

              <div class="sche_board">
                <div class="labelC">周期复购率</div>
                <div class="valueC">111</div>
                <div class="question">?</div>
              </div>

              <div class="sche_board">
                <div class="labelC">单次复购率</div>
                <div class="valueC">111</div>
                <div class="question">?</div>
              </div> -->


            </div>
            <!-- 日志看板 -->
            <el-calendar v-model="calendarDate">
              <template slot="dateCell" slot-scope="{date, data}">
                <div :class="{ 'sche_cell_over': currDate > data.day.split('-').slice(1).join('-') }"
                  @click="calendarClick(data.day)">
                  <div :class="{ 'sche_title': 1 == 1 }">{{ formatSchDate(data.day) }}</div>
                  <div style="margin-top:10px">
                    <div :class="{ 'sche_cell_title': 1 == 1 }">
                      <div>时段</div>
                      <div>{{ filterDate(data.day.split('-').slice(1).join('-')) }}</div>
                      <div>挂单</div>
                    </div>
                    <div v-for="(item, index) in trades" :key="index">
                      <div class="sche_cell" v-if="data.day.split('-').slice(1).join('-') == item.bookDate">
                        <div style="font-size:13px">{{ item.bookTime }}</div>
                        <span>{{ item.trades }}单</span>
                        <span>{{ item.suspend }}单</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </div>
    </div>

    <!-- 点击每日工单 查看工单明细 -->
    <el-dialog :title="dialogTradeFormTitle + '日工单明细'" :visible.sync="dialogTradeFormVisible" width="1200px">
      <div style="color:red;">
        <span>tips:此列表包括已取消的工单</span>
        <el-select v-model="listQueryTrade.status" clearable multiple placeholder="请选择服务单状态" @change="getTradeByDay" style="margin-left:50px;width:300px">
          <el-option  label="待派单" value="0" />
          <el-option  label="已预约" value="1" />
          <el-option  label="服务中" value="2" />
          <el-option  label="服务已提供" value="3" />
          <el-option  label="服务已完成" value="4" />
          <el-option  label="待取消 未付款派单" value="5" />
          <el-option  label="退款" value="6" />
        </el-select>
      </div>
      <el-tabs v-model="tradeTab" style="height:550px;overflow-y: auto;">
        <el-tab-pane :label="'服务工单(' + tradeListByDay.length + '单)'" name="first">
          <el-table :data="tradeListByDay" border style="width: 100%" class="table">
            <el-table-column prop="orderSn" label="订单号" width="140px"></el-table-column>
            <el-table-column prop="consignee" label="客户" width="100px"></el-table-column>
            <el-table-column prop="mobile" label="客户手机" width="110px"></el-table-column>
            <el-table-column prop="address" label="服务地址"></el-table-column>
            <el-table-column prop="goodsName" label="服务项"></el-table-column>
            <el-table-column prop="bookTime" label="上门时段" width="180px"></el-table-column>
            <el-table-column prop="fraName" label="服务商" width="180px"></el-table-column>
            <el-table-column prop="servantName" label="服务人员" width="100px"></el-table-column>
            <el-table-column prop="status" label="工单状态" width="100px"></el-table-column>
            <el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="status!='取消 未付款'&&status!='退款'" type="text" size="mini" icon="el-icon-edit" @click="handleBook(scope.row)">去处理</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->

          <!-- <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTradeByDay" /> -->
        </el-tab-pane>
        <el-tab-pane label="服务人员" name="second" />
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTradeFormVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  
<script>
import { formatDate } from "@/utils/date";
import Pagination from "@/components/Pagination";
import { list, dayOfBooks } from "@/api/orderbookboard";
import { getUserCity } from "@/api/city";

let vm;
export default {
  components: { Pagination },
  filters: {
    filterHonour(label) {
      return this.honour.map((i) => {
        return i.label == label;
      });
    },
  },
  data() {
    return {
      searchName: "",
      calendarDate: new Date(),
      calendarMonth: formatDate(new Date(), "yyyy-MM"),
      currDate: formatDate(new Date(), "MM-dd"),
      queryString: {
        city: '',
        month: ""
      },
      citys: [],
      cityPost: [],
      postStation: [],
      trades: "", //日历数据 
      dialogTradeFormVisible: false, //每日工单明细
      dialogTradeFormTitle: '',
      listQueryTrade: {
        day: '',
        city: '',
        status:''
      },
      tradeListByDay: [],
      tradeTab: "first",
      total: 0,
      pageSize: 10,
      pageIndex: 1, //当前页
    };
  },
  created() {
    this.getCity();
  },
  mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
    });
  },
  methods: {
    sortChange(e) {
      console.log(e);
    }, 
    BtnRefresh() {
      //刷新按钮
      this.getBoardList();
    },
    //去处理订单
    handleBook(row){
      this.dialogTradeFormVisible = false;
            this.$router.push({
                path: '/order/serviceorder',
                query: { orderSn: row.orderSn }
            })
    },
    getBoardList() {
      if (this.queryString.city == "") {
        this.$notify.error({
          title: "失败",
          message: "请选择城市",
        });
        return;
      }
      this.queryString.month = this.calendarMonth;
      list(this.queryString).then(res => {
        this.trades = res.data.data;
      })
    },
    getCity() {
      getUserCity().then((res) => {
        this.citys = res.data.data;
        this.queryString.city = this.citys[0].id;
        this.getBoardList();
      });
    },
    calendarClick(date) {
      this.dialogTradeFormTitle = date;
      this.listQueryTrade.day = date;
      this.listQueryTrade.city = this.queryString.city;
      this.listQueryTrade.status='';
      this.dialogTradeFormVisible = true;
      this.tradeTab = "first";
      this.tradeListByDay = [];
      this.listQueryTrade.pageIndex = 1;
      this.getTradeByDay();
    },
    getTradeByDay() {
      dayOfBooks(this.listQueryTrade).then(res => {
        this.tradeListByDay = res.data.data;
      })
    },
    filterDailyItem(name) {
      let items = this.daily.filter((item) => {
        return item.name == name;
      });
      if (items != null && items.length > 0) return items[0].value;
      return "0";
    },
    cityChange(value) {
      let city = this.citys.filter((item) => {
        return item.city == value;
      });

      this.queryString.postId = "";
      this.cityPost = this.postStation.filter((item) => {
        return item.cityId == city[0].cityId;
      });
    },
    preMonth() {
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.click();
    },
    nextMonth() {
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.click();
    },
    judgeDate(dateVal) {
      this.calendarMonth = formatDate(dateVal, "yyyy-MM");
      this.getBoardList();
    },
    filterDate(date) {
      if (date > this.currDate) return "待履约";
      if (date == this.currDate) return "服务中";
      return "已完成";
    },
    formatDate(time, fmt) {
      if (time == null || typeof time == "undefined") return "";
      return formatDate(new Date(time), fmt);
    },
    filterHonour(label) {
      let list = [];
      this.honour.forEach((item) => {
        if (item.label === label) list.push(item);
      });
      return list;
    },
    formatSchDate(date) {
      let month = date.split("-")[1];
      let day = date.split("-")[2];
      return (
        parseInt(month).toString() + "月" + parseInt(day).toString() + "日"
      );
    },
  },
};
</script>
  
  
<style lang="scss">
.area {
  display: flex;
  margin: 10px;
}

.area .left3 {
  flex: 3;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.area .left {
  flex: 4;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.area .right {
  flex: 1;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-left: 10px;
}

.title {
  font-weight: 600;
  font-size: 16px;
  margin: 10px !important;
  text-align: center;
}

.time {
  float: right;
  color: #09afff;
}

.items {
  display: flex;
  margin-top: 5px;
}

.item {
  border-right: 1px solid #ddd;
  flex: 1;
}

.item .field {
  display: flex;
  margin: 10px;
}

.border_hiddle {
  border: 0px;
}

.item .label {
  color: #a7a3a3;
  text-align: left;
  flex: 2;
  font-size: 14px;
  margin-left: 20px;
}

.item .value {
  color: #41d0cd;
  text-align: center;
  flex: 1;
  font-size: 14px;
}

.item .labelC {
  text-align: center;
  flex: 2;
  margin-top: 5px;
  font-size: 13px;
}

.item .valueC {
  text-align: center;
  flex: 1;
  margin-top: 5px;
  font-size: 13px;
}

.item .desc {
  color: #41d0cd;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

[data-v-3925b587].content {
  overflow: hidden;
  text-align: center;
}

[data-v-3925b587].content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

[data-v-3925b587] .center_text {
  position: absolute;
}

.el-calendar {
  margin-top: 10px;
}

.el-calendar-table__row .current .el-calendar-day {
  color: #5c5151;
}

.el-calendar-table .el-calendar-day {
  height: auto !important;
}

// .el-tabs__content {
//   height: 550px;
//   overflow-y: auto !important;
// }

.pie_content {
  display: flex;
  flex-direction: column;
}

.pie_content span {
  color: #725d5d;
}

.bold {
  font-weight: 600;
}

.font12 {
  font-size: 12px;
}

.font13 {
  font-size: 13px;
  font-weight: 600;
}

.font12_b_mr {
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
}

.font14_b_mr {
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
}

.mt5 {
  margin-top: 5px;
}

.stock {
  align-items: center;
  flex-direction: row;
  justify-content: center;
  display: flex;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sche_board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #94c494;
  padding: 5px 10px;
  font-size: 13px;
  width: 120px;
  color: white;
  margin-top: 10px;
  position: relative;
}

.question {
  position: absolute;
  top: 2px;
  right: 3px;
  background-color: #999;
  padding: 1px;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  text-align: center;
  font-size: 11px;
}

.sche_title {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.sche_cell {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
}

.sche_cell span {
  font-weight: 600;
  text-align: center;
  font-size: 11px;
  flex: 1;
}

.sche_cell_title {
  display: flex;
  flex-direction: row;
  margin: 12px 0;
  justify-content: space-around;
}

.sche_cell_over {
  color: #c0c4cc;
}

.sche_cell_title span {
  font-weight: 600;
  text-align: center;
  font-size: 13px;
  flex: 1;
  line-height: 14px;
}

.stock div {
  padding: 5px;
  background-color: #09afff;
  border-radius: 3px;
  width: 32px;
  text-align: center;
  margin-left: 5px;
  color: #fff;
}

.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex_row_between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex_row_between span {
  font-weight: 600;
}

.select {
  width: 76px;
  margin-left: 5px;
  margin-right: 10px;
}

.salary {
  margin-top: 20px;
  display: flex;
}

.salary img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.salary div {
  width: 100%;
}

.salary .line {
  height: 10px;
  margin-top: 5px;
}
</style>
  