<template>
  <div class="workOrderProcessing publicContainer">
    <div class="orderTop">
      <div class="orderTitle" v-for="(item, index) in orderTitleList" :key="index">
        <div class="orderName">{{ item.title }}</div>
        <div class="orderNum" v-if="index != 0">{{ '( ' + item.num + ' )' }}</div>
      </div>
    </div>
    <div class="orderBottom">
      <el-row>
        <el-col :span="7" class="flex flex-align-center chooseTime">
          <span class="title">监测时间：</span>
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
        <el-col :span="5" class="flex flex-align-center chooseType">
          <span class="title">工单类型：</span>
          <el-select v-model="value" placeholder="Select" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="workOrderProcessing">
const dateRange = ref([]);
const value = ref('Option1');

const options = [
  {
    value: 'Option1',
    label: '燃气工单',
  },
  {
    value: 'Option2',
    label: '排水工单',
  },
  {
    value: 'Option3',
    label: '桥梁工单',
  },
  {
    value: 'Option4',
    label: '隧道工单',
  },
];
const orderTitleList = ref([
  {
    title: '登记工单',
    num: '1',
  },
  {
    title: '工单查询',
    num: '0',
  },
  {
    title: '工单提交',
    num: '0',
  },
  {
    title: '工单分派',
    num: '0',
  },
  {
    title: '工单响应',
    num: '0',
  },
  {
    title: '工单上报',
    num: '0',
  },
  {
    title: '工单核实',
    num: '0',
  },
  {
    title: '工单结案',
    num: '0',
  },
]);
</script>

<style lang="scss" scoped>
.workOrderProcessing {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
//   border: 1px solid red;
  .orderTop {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .orderTitle {
      width: 150px;
      height: 70px;
      background-color: rgb(22, 155, 213);
      margin-right: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: #fff;
      .orderName {
        font-size: 24px;
      }
      .orderNum {
        font-size: 20px;
      }
    }
  }
  .orderBottom {
    padding-top: 20px;
    width: 100%;
    height: calc(100% - 70px);
    // border: 1px solid red;
    box-sizing: border-box;
    .chooseType{
        margin-left: 20px;
    }
    .title{
        font-size: 16px;
    }
  }
}
</style>