<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 class="chooseBox">
        <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>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="code" label="工单编号" />
        <el-table-column prop="date" label="登记时间" />
        <el-table-column prop="type" label="工单类型" />
        <el-table-column prop="ly" label="工单来源" />
        <el-table-column prop="info" label="信息" />
        <el-table-column prop="state" label="工单状态" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <div style="display: flex; justify-content: space-evenly">
              <!-- <el-button link type="primary" icon="Edit" @click="addArea(row)">编辑</el-button>
              <el-button link type="danger" icon="Delete" @click="deleteArea(row)">删除</el-button> -->
              <el-button link type="primary">受理</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </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',
  },
]);

const tableData = [
  {
    code: 'GD2024102900001',
    date: '2016-05-03 12:00:00',
    type: '燃气工单',
    ly: 'APP',
    info: '',
    state: '待受理',
  },
  {
    code: 'GD2024102900002',
    date: '2016-05-03 12:00:00',
    type: '排水工单',
    ly: '电话',
    info: '',
    state: '待受理',
  },
  {
    code: 'GD2024102900003',
    date: '2016-05-03 12:00:00',
    type: '排水工单',
    ly: '指挥调度',
    info: '',
    state: '待受理',
  },
];
</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;
      cursor: pointer;
      .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;
    .chooseBox {
      padding: 20px 0;
    }
    .chooseType {
      margin-left: 20px;
    }
    .title {
      font-size: 16px;
    }
  }
}
</style>