<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">
            <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
            <Button style="margin-right: 10px" type="primary" @click="select.page = 1,getCustomerList()">查询</Button>
            <xy-selectors @search="select.page = 1,getList()" @reset="reset">
              <template>
                <div class="select-item">
                  <div class="select-item__label">业务板块</div>
                  <el-select size="small" v-model="select.product_type_id" placeholder="选择业务板块" clearable style="width: 200px">
                    <el-option v-for="item in types" :value="item.id" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </div>

                <div class="select-item">
                  <div class="select-item__label">所属区域</div>
                  <el-select size="small" v-model="select.area_id" placeholder="选择区域" clearable style="width: 200px">
                    <el-option v-for="item in areas" :value="item.id" :label="item.value" :key="item.id"></el-option>
                  </el-select>
                </div>

                <div class="select-item">
                  <div class="select-item__label">所属月份</div>
                  <el-date-picker
                    size="small"
                    v-model="select.month"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月"
                    style="width: 200px">
                  </el-date-picker>
                </div>

                <div class="select-item">
                  <div class="select-item__label">状态</div>
                  <el-radio v-model="select.schedule_status" :label="1">已排</el-radio>
                  <el-radio v-model="select.schedule_status" :label="2">未排</el-radio>
                  <el-radio v-model="select.schedule_status" label="">全部</el-radio>
                </div>
              </template>
            </xy-selectors>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :default-expand-all="false"
      :list="list"
      :table-item="table"
      :total="total">
    </xy-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      select: {
        page: 1,
        page_size: 10,
        keyword:'',
        product_type_id:'',
        area_id:'',
        month:'',
        schedule_status:'',
      },
      customers:[],
      products:[],
      levels:[],
      orders:[],
      accounts:[],
      types:[],
      areas:[],

      list:[],
      total:0,
      table:[]
    }
  },
  methods: {
    async getList(){

    },
    reset(){

    }
  },
  computed: {},
}
</script>

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

  &__label{
    width: 100px;
    padding: 10px 10px;
  }
}
</style>
