<template>
  <div>
    <div ref="lxHeader">
      <lx-header
        icon="md-apps"
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        text="服务明细视图"
      >
        <div slot="content"></div>
        <slot>
          <div style="display: flex">
            <el-select
              filterable
              size="small"
              v-model="select.nurse_name"
              placeholder="选择护理人姓名"
              clearable
              style="width: 160px;margin-right: 10px;"
            >
              <el-option
                v-for="item in nurses"
                :value="item.name"
                :label="item.name"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-select
              filterable
              size="small"
              v-model="select.customer_name"
              placeholder="选择被护理人"
              clearable
              style="width: 160px;margin-right: 10px;"
            >
              <el-option
                v-for="item in customers"
                :value="item.name"
                :label="item.name"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-date-picker v-model="pickedMonth" placeholder="选择月份" type="month" size="small" style="width: 160px;margin-right: 10px;" @change="pickMonth">
            </el-date-picker>
            <el-select
              size="small"
              v-model="select.status"
              placeholder="选择状态"
              clearable
              style="width: 160px;margin-right: 10px;"
            >
              <el-option
                v-for="item in [{value:0,label:'待护理'},{value:1,label:'护理中'},{value:2,label:'已护理'}]"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
<!--            <Input-->
<!--              v-model="select.keyword"-->
<!--              placeholder="关键字搜索"-->
<!--              style="width: 180px; margin-right: 10px"-->
<!--            />-->
            <Button
              style="margin-right: 10px"
              type="primary"
              @click="total = 0,(select.page = 1), getList()"
              >查询</Button
            >
            <xy-selectors @search="(select.page = 1), getList()" @reset="reset">
              <template>
                <div class="select-item">
                  <div class="select-item__label">地址</div>
                  <el-input size="small" v-model="select.address_name" placeholder="请输入地址" style="width: 200px;"></el-input>
                </div>

                <div class="select-item">
                  <div class="select-item__label">实际签到开始时间</div>
                  <el-date-picker
                    size="small"
                    v-model="select.start_sign_in"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择实际签到开始时间"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </div>

                <div class="select-item">
                  <div class="select-item__label">实际签到结束时间</div>
                  <el-date-picker
                    size="small"
                    v-model="select.end_sign_in"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择实际签到结束时间"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </div>

                <div class="select-item">
                    <div class="select-item__label">计划签到开始时间</div>
                  <el-date-picker
                    size="small"
                    v-model="select.start_start_time"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择计划签到开始时间"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </div>

                <div class="select-item">
                  <div class="select-item__label">计划签到结束时间</div>
                  <el-date-picker
                    size="small"
                    v-model="select.end_start_time"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="选择计划签到结束时间"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </div>
              </template>
            </xy-selectors>

            <Button
              style="margin-right: 10px"
              type="primary"
              @click="exports"
            >导出</Button
            >
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :row-style="tableRowStyle"
      :default-expand-all="false"
      :list="list"
      :table-item="table"
      :total="total"
      @pageIndexChange="
        (e) => {
          select.page = e;
          getList();
        }
      "
      @pageSizeChange="
        (e) => {
          select.page = 1;
          select.page_size = e;
          getList();
        }
      "
    >
      <template v-slot:btns>
        <el-table-column label="操作" fixed="right" align="center" width="130">
          <template v-slot:default="scope">
            <Poptip
              transfer
              confirm
              title="确认要删除?"
              @on-ok="destroy(scope.row)"
            >
              <Button size="small" type="error" ghost style="margin-right: 6px"
              >删除</Button
              >
            </Poptip>
            <Button
              size="small"
              ghost
              type="primary"
              style="margin-right: 6px"
              @click="e => {
                selectedRow = scope.row;
                $refs['draw'].select.id = scope.row.id;
                $refs['draw'].isShow = true;
              }"
            >查看</Button
            >
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <draw ref="draw" :type="2" @refresh="getList"></draw>
  </div>
</template>

<script>
import { scheduleDelete } from "@/api/schedule/index"
import { getList as customerIndex } from "@/api/customer"
import { scheduleList } from "@/api/schedule";
import { getList as nurseList} from "@/api/worker"
import { download } from "@/utils/downloadRequest"

import draw from "./component/serveDraw.vue"
export default {
  components:{
    draw
  },
  provide(){
    return {
      selectedRow:() => this.selectedRow
    }
  },
  data() {
    return {
      pickedMonth:new Date(),
      selectedRow:{},
      customers:[],
      nurses:[],
      select: {
        page: 1,
        page_size: 10,
        nurse_name:"",
        customer_name:"",
        address_name:"",
        start_sign_in:"",
        end_sign_in:"",
        start_start_time:"",
        end_start_time:"",
        status:"",
        is_export:0
      },
      list: [],
      table: [
        {
          type:'index',
          label:'序号',
          width:54,
          fixed:'left'
        },
        {
          prop:'customer.name',
          label:'被护理人',
          width:118,
          fixed:'left'
        },
        {
          prop:'nurse.name',
          label:'护理人',
          width:118,
          fixed:'left'
        },
        {
          prop:'status_text',
          label:'状态',
          width:120
        },
        {
          label:'计划时间',
          width:200,
          customFn:row => {
            return (
              <div>{this.$moment(row.start_time).format('YYYY-MM-DD HH:mm')} ~ {this.$moment(row.end_time).format('HH:mm')}</div>
            )
          }
        },
        {
          prop:'sign_in',
          label:'签到时间',
          width:180
        },
        {
          prop:'sign_out',
          label:'签退时间',
          width: 180
        },
        {
          prop:'customer_address.name',
          label:'上门地址',
          minWidth:220,
          align:'left'
        },
        {
          width: 140,
          label:'实际服务时间',
          customFn:row => {
            const getTime = () => {
              if(row.sign_out && row.sign_in){
                let seconds = this.$moment(row.sign_out).diff(row.sign_in,'seconds')
                let point = seconds % 60
                let min = parseInt(seconds / 60)
                return `${min}分钟${point}秒`
              }else{
                return 0
              }
            }
            return (
              <span>{ getTime() }</span>
            )
          }
        },
        {
          label:'勾选的服务时长',
          width: 140,
          customFn:row => {
            return (
              <span>{ (() => {
                let total = 0;
                row.sku.forEach(item => {
                  total += Number(item.time) ?? 0
                })
                return total;
              })() }</span>
            )
          }
        },
        {
          label:"勾选的服务明细",
          minWidth: 200,
          align: 'left',
          customFn:row => {
            return (
              <div>
                { row.sku.map((item,index) => {
                  return (
                    <span>{ item.sku_info.name }{index === row.sku.length - 1 ? '' : ','}</span>
                  )
                }) }
              </div>
            )
          }
        },
        {
          label:'已服务明细',
          minWidth: 400,
          customFn:row => {
            return (
              <div class="sku" style={
                {
                  'display':'flex',
                  'flex-wrap':'wrap'
                }
              }>
                {
                  (
                    () => {
                      let arr = [];
                      row?.sku?.forEach(item => {
                        if(item.time){
                          arr.push((
                            <div class="sku-item">
                              <div class="sku-item__name">
                                { item.sku_info.name }
                              </div>
                              <div class="sku-item__time">
                                { item.time || 0 }
                              </div>
                            </div>
                          ))
                        }
                      })
                      return arr;
                    }
                  )()
                }
              </div>
            )
          }
        },
        {
          prop:'product.name',
          label:'产品',
          width: 180
        },
        {
          prop:'sign_in_address',
          label:'签到地址',
          minWidth: 220,
          align:'left'
        },
        {
          prop:'sign_out_address',
          label:'签退地址',
          minWidth: 220,
          align:'left'
        },
        {
          prop:'customer.area_detail.value',
          label:'区',
          width: 160
        },
        {
          prop:'customer.street_detail.value',
          label:'街道（镇）',
          width: 160
        },
        {
          prop:'created_at',
          label:'创建日期',
          width:180
        },
        {
          prop:'admin.name',
          label:'创建人',
          width: 140
        }
      ],
      total: 0,
    };
  },
  methods: {
    tableRowStyle({row, rowIndex}){
      let selectTime = row.sku.reduce((pre,cur) => {
        return pre + Number(cur.time ?? 0)
      },0)
      let actTime = Math.round( this.$moment(row.sign_out).diff(row.sign_in,'seconds') / 60)

      if(Math.abs(selectTime - actTime) <= 5){
        return
      }
      if(Math.abs(selectTime - actTime) <= 10 && Math.abs(selectTime - actTime) > 5){
        return {
          'background':'rgb(255,227,150)'
        }
      }
      if(Math.abs(selectTime - actTime) > 10){
        return {
          'background':'rgb(253,165,122)'
        }
      }
    },
    pickMonth(e){
      if(e){
        this.select.start_start_time = this.$moment(e).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        this.select.end_start_time = this.$moment(e).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      }else{
        this.select.start_start_time = ''
        this.select.end_start_time = ''
      }
    },

    destroy(row){
      scheduleDelete({id:row.id}).then(res => {
        this.$message({
          type:'success',
          message:'删除成功'
        })
        this.getList()
      })
    },
    async getCustomers(){
      const res = await customerIndex({
        page:1,
        page_size:999
      })
      this.customers = res.data.data
    },
    async getNurses(){
      const res = await nurseList({
        page:1,
        page_size:999
      })
      this.nurses = res.data
    },
    async getList() {
      const res = await scheduleList(this.select)
      this.list = res.list.data
      this.total = res.list.total
    },

    exports(){
      download('/api/admin/chart/schedule-list-log','get',{
        page: 1,
        page_size: 9999,
        status:this.select.status,
        nurse_name:this.select.nurse_name,
        customer_name:this.select.customer_name,
        address_name:this.select.address_name,
        start_sign_in:this.select.start_sign_in,
        end_sign_in:this.select.end_sign_in,
        start_start_time:this.select.start_start_time,
        end_start_time:this.select.end_start_time,
        is_export:1
      },`服务明细.xlsx`)
    },

    reset() {
      this.select = {
        page: 1,
        page_size: 10,
        nurse_name:"",
        customer_name:"",
        address_name:"",
        start_sign_in:"",
        end_sign_in:"",
        start_start_time:"",
        end_start_time:"",
        status:"",
        is_export:0
      }
    },
  },
  computed: {},
  created() {
    this.pickMonth(new Date())
    this.getNurses()
    this.getCustomers()
    this.getList()
  }
};
</script>

<style scoped lang="scss">
.select-item{
  display: flex;
  align-items: center;

  &__label{
    width: 140px;
    padding: 10px 10px;
  }
}

.sku{
  &-item{
    border: 1px solid $primaryColor;
    border-radius: 4px;

    margin-bottom: 4px;
    margin-right: 6px;
    &__name{
      background: $primaryColor;
      color:#fff;

      padding: 0 4px;
    }
    &__time{

    }
  }
}

</style>
<style>
.has-time{
  z-index:9998 !important;
}
</style>
