<template>
  <Page>
    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
      <ElFormItem label="车次">
        <ElInput v-model="searchForm.trainNum" placeholder="车次" />
      </ElFormItem>
      <ElFormItem label="订单 Id">
        <ElInput v-model="searchForm.orderId" placeholder="订单 Id" />
      </ElFormItem>
      <!-- ；字典代码：trans_status，DaiPaiDan--待派单、DaiJieDan--待接单、YiJieDan--已接单、YunShuZhong--运输中、YiJinChang--已进场、YiChuChang--已出场、YiWanCheng--已完成、YiQuXiao--已取消 -->
      <ElFormItem label="运输状态">
        <ElInput v-model="searchForm.transStatus" placeholder="运输状态" />
      </ElFormItem>
      <ElFormItem label="车道名称">
        <ElInput v-model="searchForm.lane" placeholder="车道名称" />
      </ElFormItem>
      <ElFormItem label="勘料状态">
        <!-- ；字典代码：check_status，Wu--无需勘料、YiKanLiao--已勘料、WeiKanLiao--未勘料 -->
        <ElInput v-model="searchForm.checkStatus" placeholder="勘料状态" />
      </ElFormItem>
      <ElFormItem label="车辆 Id">
        <ElInput v-model="searchForm.truckId" placeholder="车辆 Id" />
      </ElFormItem>
      <ElFormItem label="车牌号">
        <ElInput v-model="searchForm.truckLicensePlate" placeholder="车牌号" />
      </ElFormItem>
      <ElFormItem label="历史皮重">
        <ElInput v-model="searchForm.historyTareWeight" placeholder="历史皮重" />
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ElInput v-model="searchForm.createTime" placeholder="创建时间" />
      </ElFormItem>

      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>

    <div class="tool-bar">
      <div></div>
      <!-- <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton> -->
      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
    </div>

    <ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
      <!-- <ElTableColumn label="Id" prop="id" /> -->
      <ElTableColumn label="订单" prop="orderId" show-overflow-tooltip width="100" />
      <ElTableColumn label="订单状态" prop="orderStatusTxt" />
      <ElTableColumn label="订单类型" prop="orderCategoryTxt" width="100" />
      <ElTableColumn label="运输状态" prop="transStatusTxt" />
      <ElTableColumn label="运输垃圾" prop="goodsName" />
      <ElTableColumn label="车道名称" prop="lane" />
      <ElTableColumn label="看料员" prop="checkerId" />
      <ElTableColumn label="勘料状态" prop="checkStatusTxt" />
      <ElTableColumn label="勘料时间" prop="checkTime" width="160" />
      <ElTableColumn label="司机 Id" prop="driverId" />
      <!-- <ElTableColumn label="司机所属用户 Id" prop="driverUserId" /> -->
      <ElTableColumn label="归属企业" prop="truckOrgId"/>
      <ElTableColumn label="车辆 Id" prop="truckId" />
      <ElTableColumn label="车牌号" width="100" prop="truckLicensePlate" />
      <ElTableColumn label="历史皮重" prop="historyTareWeight" />
      <ElTableColumn label="毛重（吨）" width="100" prop="roughWeight" />
      <ElTableColumn label="皮重（吨）" width="100" prop="tareWeight" />
      <ElTableColumn label="净重（吨）" width="100" prop="settleWeight" />
      <ElTableColumn label="车次" prop="trainNum" />
      <ElTableColumn label="运距（米）" prop="transDistance" />
      <!-- <ElTableColumn label="进场车头照片" prop="inFrontPhoto" />
      <ElTableColumn label="进场车斗照片" prop="inBodyPhoto" />
      <ElTableColumn label="出场车头照片" prop="outFrontPhoto" />
      <ElTableColumn label="出场车斗照片" prop="outBodyPhoto" /> -->
      <ElTableColumn label="进场时间" prop="inTime" width="160" />
      <ElTableColumn label="出场时间" prop="outTime" />

      <!-- ，MianFei--免费、WeiZhiFu--未支付、YiZhiFu--已支付、YiTuiKuan--已退款 -->
      <ElTableColumn label="支付状态" prop="paymentStatus" width="160" />
      <ElTableColumn label="支付时间" prop="payTime" width="160" />
      <ElTableColumn label="退款时间" prop="refundTime" />
      <ElTableColumn label="总金额（元）" prop="totalMoney" />
      <ElTableColumn label="优惠金额" prop="discountMoney" />
      <ElTableColumn label="手动修正金额" prop="reviseMoney" />
      <ElTableColumn label="结算金额（元）" prop="settleMoney" />
      <ElTableColumn label="结算方式" prop="settlementWay" />
      <ElTableColumn label="付款人" prop="payerUserId" />
      <!-- <ElTableColumn label="创建人" prop="creatorId" /> -->
      <ElTableColumn label="创建时间" prop="createTime" width="160" />
      <ElTableColumn label="修改时间" prop="modifyTime" width="160" />
      <ElTableColumn label="操作" width="180" fixed="right">
        <template #default="scope">
          <div class="action-btn">
            <ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
              <template #reference>
                <ElButton text type="danger" :loading="deling">删除</ElButton>
              </template>
            </ElPopconfirm>
            <!-- <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton> -->
            <ElButton text v-if="scope.row.orderStatus == 'JinXingZhong' && scope.row.transStatus == 'YunShuZhong'" type="primary" @click="showInCar(scope)">进场</ElButton>
            <ElButton text v-if="scope.row.checkStatus == 'YiKanLiao' && scope.row.transStatus == 'YiJinChang'" type="primary" @click="showOutCar(scope)">出场</ElButton>
            <ElButton text v-if="scope.row.checkStatus == 'WeiKanLiao' && scope.row.transStatus == 'YiJinChang'" type="primary" @click="showCheck(scope)">看料</ElButton>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
    <TransForm ref="transForm" @edit-succ="paging" />
    <InForm ref="inForm" @edit-succ="paging" />
    <OutForm ref="outForm" @edit-succ="paging" />
    <CheckForm ref="checkForm" @edit-succ="paging" />
  </Page>
</template>

<script lang="ts" setup>
import TransApi from "@/pages/order/trans-order/trans-api.ts";
import TransForm from "@/pages/order/trans-order/TransForm.vue";
import InForm from "@/pages/order/trans-order/InForm.vue";
import OutForm from "@/pages/order/trans-order/OutForm.vue";
import CheckForm from "@/pages/order/trans-order/CheckForm.vue";
import Page from "@/components/page/Page.vue";
import { elIcons } from "@/common/element/element.ts";
import Utils from "@/common/utils";

const totalCount = ref(0);
const tableData = Utils.resetAble(reactive<TransTypes.SearchTransResult[]>([]));
const searchForm = Utils.resetAble(
  reactive<TransTypes.SearchTransParam>({
    current: 1,
    size: 20,
    orders: "create_time:desc",
  })
);
const searching = ref(false);
const deling = ref(false);
const showSearchForm = ref(true);
// const transFormIns = useTemplateRef<InstanceType<typeof TransForm>>("transForm");

const inFormIns = useTemplateRef<InstanceType<typeof TransForm>>("inForm");
const outFormIns = useTemplateRef<InstanceType<typeof TransForm>>("outForm");
const checkFormIns = useTemplateRef<InstanceType<typeof TransForm>>("checkForm");

// function showDialog(data?: TransTypes.SearchTransResult) {
//   transFormIns.value?.open(data);
// }

function delHandler({ row }: { row: TransTypes.SearchTransResult }) {
  deling.value = true;
  TransApi.del([row.id!])
    .then(() => {
      ElMessage.success("删除成功");
      paging();
    })
    .finally(() => {
      deling.value = false;
    });
}
function showInCar({ row }: { row: TransTypes.SearchTransResult }) {
  inFormIns.value?.open(row);
}

function showOutCar({ row }: { row: TransTypes.SearchTransResult }) {
  outFormIns.value?.open(row);
}
function showCheck({ row }: { row: TransTypes.SearchTransResult }) {
  checkFormIns.value?.open(row);
}
// function modifyHandler({ row }: { row: TransTypes.SearchTransResult }) {
//   showDialog(row);
// }

// function addHandler() {
//   showDialog();
// }

function reset() {
  searchForm.$reset();
  paging();
}

function paging() {
  searching.value = true;
  TransApi.paging(searchForm)
    .then((res) => {
      totalCount.value = res.data?.total ?? 0;
      tableData.$reset(res.data?.records ?? []);
    })
    .finally(() => {
      searching.value = false;
    });
}
onMounted(() => {
  paging();
});
</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  margin 0 0 20px 0
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }
  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>
