<template>
  <div class="checkOrder">
    <div class="subtitle">工单查询</div>
    <el-divider />
    <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="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-col>
      <el-col :span="5" class="flex flex-align-center chooseType">
        <span class="title">工单类型</span>
        <el-select v-model="queryParams.orderType" placeholder="请选择" style="width: 240px">
          <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="6">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" icon="Download">导出</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }" v-loading="loading">
      <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="工单状态">
        <template #default="{ row }">
          <div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
        </template>
      </el-table-column>
      <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)">
              {{ titleList.find(item => item.value == props.status)?.title || '' }}
            </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"
    />

    <el-dialog
      v-model="dialogConfig.visible"
      :title="dialogConfig.title"
      width="1500px"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <orderDia :status="queryParams.status" :orderId="orderId" @closeDialog="closeDialog" @getList="getList"></orderDia>
    </el-dialog>
  </div>
</template>

<script setup name="checkOrder">
import orderDia from '../../components/orderDia';
import { onMounted, watch } from 'vue';
import { workOrderPage } from '@/api/order';
import { status } from 'nprogress';

const { proxy } = getCurrentInstance();

const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
  'work_order_type',
  'work_order_status',
  'work_order_source'
);

const props = defineProps({
  status: {
    type: String,
    default: '',
  },
});

const dialogConfig = ref({
  visible: false,
  // visible: true,
  title: '工单详情',
});
const orderId = ref('');
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
  registerStartTime: '',
  registerEndTime: '',
  orderType: '',
  status: '',
  orderSource: '',
  pageNum: 1,
  pageSize: 10,
});
const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const tableData = ref([]);

const titleList = ref([
  {
    code: '001',
    title: '登记工单',
    value: 'launch',
  },
  {
    code: '002',
    title: '受理',
    value: 'accept',
  },
  {
    code: '003',
    title: '提交',
    value: 'submit',
  },
  {
    code: '004',
    title: '分派',
    value: 'assign',
  },
  {
    code: '005',
    title: '响应',
    value: 'response',
  },
  {
    code: '006',
    title: '上报',
    value: 'report',
  },
  {
    code: '007',
    title: '核实',
    value: 'check',
  },
  {
    code: '008',
    title: '结案',
    value: 'complete',
  },
]);

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';
  loading.value = true;
  workOrderPage(queryParams.value).then(res => {
    // console.log('🚀 ~ workOrderList ~ res:', res);
    tableData.value = res.data;
    total.value = res.total;
    loading.value = false;
  });
};

watch(
  () => props.status,
  val => {
    queryParams.value.status = val;
    getList();
  },
  {
    immediate: true,
    deep: true,
  }
);

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

<style lang="scss" scoped>
.checkOrder {
  position: relative;
  width: 100%;
  height: 100%;
  .subtitle {
    font-weight: bold;
    font-size: 17px;
    color: #333333;
  }
  .chooseBox {
    // padding: 20px 0;
    margin-bottom: 15px;
  }
  .chooseType {
    margin-left: 20px;
  }
  .title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    margin-right: 10px;
  }
}
.el-divider {
  margin: 10px 0 15px 0;
}

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