<template>
  <div class="workOrderQuery publicContainer">
    <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="4" class="flex flex-align-center chooseType">
        <span class="title">工单类型：</span>
        <el-select v-model="value" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="4" class="flex flex-align-center">
        <span class="title">工单状态：</span>
        <el-select v-model="value1" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="4" class="flex flex-align-center">
        <span class="title">工单来源：</span>
        <el-select v-model="value2" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in lyList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <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 prop="bm" 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>
</template>

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

const options = [
  {
    value: 'Option1',
    label: '燃气工单',
  },
  {
    value: 'Option2',
    label: '排水工单',
  },
  {
    value: 'Option3',
    label: '桥梁工单',
  },
  {
    value: 'Option4',
    label: '隧道工单',
  },
];
const typeList = ref([
  {
    label: '待受理',
    value: '0',
  },
  {
    label: '待提交',
    value: '1',
  },
  {
    label: '待分派',
    value: '2',
  },
  {
    label: '待响应',
    value: '3',
  },
  {
    label: '待上报',
    value: '4',
  },
  {
    label: '待核实',
    value: '5',
  },
  {
    label: '待接单',
    value: '6',
  },
  {
    label: '已归档',
    value: '7',
  },
]);
const lyList = ref([
  {
    label: 'APP',
    value: '1',
  },
  {
    label: '电话',
    value: '2',
  },
  {
    label: '指挥调度',
    value: '3',
  },
]);

const tableData = [
  {
    code: 'GD2024102900001',
    date: '2016-05-03 12:00:00',
    type: '燃气工单',
    ly: 'APP',
    info: '',
    state: '待受理',
    bm: '燃气总公司',
    
  },
  {
    code: 'GD2024102900002',
    date: '2016-05-03 12:00:00',
    type: '排水工单',
    ly: '电话',
    info: '',
    state: '待受理',
    bm: '内涝办',
  },
  {
    code: 'GD2024102900003',
    date: '2016-05-03 12:00:00',
    type: '排水工单',
    ly: '指挥调度',
    info: '',
    state: '待受理',
    bm: '内涝办',
  },
];
</script>

<style lang="scss" scoped>
.workOrderQuery {
  .chooseBox {
    padding: 0 0 20px 0;
  }
  .chooseType {
    margin-left: 20px;
  }
  .title {
    font-size: 16px;
  }
}
</style>