<template>
  <div class="workOrderQuery publicContainer">
    <el-row class="chooseBox">
      <el-col :span="6" class="flex flex-align-center chooseTime">
        <span class="title">监测时间</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-col>
      <el-col :span="4" class="flex flex-align-center chooseType">
        <span class="title">工单类型</span>
        <el-select v-model="queryParams.orderType" placeholder="请选择" clearable style="width: 150px">
          <el-option v-for="item in work_order_type" :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="queryParams.status" placeholder="请选择" clearable style="width: 150px">
          <el-option v-for="item in work_order_status" :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="queryParams.orderSource" placeholder="请选择" clearable style="width: 150px">
          <el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary">导出</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="orderNumber" label="工单编号" />
      <el-table-column prop="registerTime" label="登记时间" />
      <el-table-column prop="orderType" label="工单类型">
        <template #default="{ row }">
          <div>{{ work_order_type.find(item => item.value == row.orderType)?.label || row.orderType }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="orderSource" label="工单来源">
        <template #default="{ row }">
          <div>{{ work_order_source.find(item => item.value == row.orderSource)?.label || row.orderSource }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="信息" />
      <!-- <el-table-column prop="status" label="工单状态" /> -->
      <el-table-column prop="status" label="工单状态">
        <template #default="{ row }">
          <div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="handleDeptName" 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" @click="handleDetail(row)">详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagingPosition"
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 详情弹窗 -->
    <!-- 
    :draggable="true"
    @closed="handleClosed"
     -->
    <el-dialog
      v-model="dialogConfig.visible"
      :title="dialogConfig.title"
      width="1500px"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <orderDia :status="'xiangqing'" :orderId="orderId" @closeDialog="closeDialog"></orderDia>
    </el-dialog>
  </div>
</template>

<script setup name="workOrderQuery">
import orderDia from '../components/orderDia.vue';
import { workOrderPage } from '@/api/order';

const { proxy } = getCurrentInstance();
// 工单类型： work_order_type
// 工单状态： work_order_status
// 工单来源： work_order_source
const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
  'work_order_type',
  'work_order_status',
  'work_order_source'
);
const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);

const dialogConfig = ref({
  visible: false,
  // visible: true,
  title: '工单详情',
});
const total = ref(0);
const queryParams = ref({
  registerStartTime: '',
  registerEndTime: '',
  orderType: '',
  status: '',
  orderSource: '',
  pageNum: 1,
  pageSize: 10,
});
const orderId = ref('');
const tableData = ref([]);

const handleDetail = row => {
  orderId.value = row.id;
  dialogConfig.value.visible = true;
};

const closeDialog = () => {
  dialogConfig.value.visible = false;
};

const getList = () => {
  queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
  queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
  workOrderPage(queryParams.value).then(res => {
    // console.log('🚀 ~ workOrderList ~ res:', res);
    tableData.value = res.data;
    total.value = res.total;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.workOrderQuery {
  position: relative;
  width: 100%;
  height: 100%;
  .chooseBox {
    padding: 0 0 20px 0;
  }
  .chooseType {
    margin-left: 20px;
  }
  .title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    margin-right: 10px;
  }
}

.pagingPosition {
  position: absolute;
  right: 20px;
  bottom: 10px;
  // margin-bottom: 10px;
}
</style>