<template>
  <div class="qa-order">
    <div class="right-qa-order">
      <div class="right-qa-order_top">
        <div
          class="right-qa-order_top_tab"
          :class="{ 'active-tab': activeTab === 'all' }"
          @click="onChangeTab('all')"
        >
          <span>{{ `全部(${allTotal})` }}</span>
        </div>
        <div
          class="right-qa-order_top_tab"
          :class="{ 'active-tab': activeTab === 'dzj' }"
          @click="onChangeTab('dzj')"
        >
          <span>{{ `待质检(${dzjTotal})` }}</span>
        </div>
        <div
          class="right-qa-order_top_tab"
          :class="{ 'active-tab': activeTab === 'yzj' }"
          @click="onChangeTab('yzj')"
        >
          <span>{{ `已质检(${yzjTotal})` }}</span>
        </div>
      </div>
      <div class="table_wrap" style="padding: 0">
        <el-table
          :data="sourceData"
          border
          header-align="center"
          height="100%"
          show-overflow-tooltip
          :row-class-name="tableRowClassName"
          @row-click="onRowClick"
        >
          <el-table-column
            label="序号"
            type="index"
            width="60"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="生产单号"
            prop="subOrderNumber"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="发货单号"
            prop="billNumber"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="生产状态"
            width="90"
            align="center"
            header-align="center"
          >
            <template #default="{ row }">
              <span v-if="row.num === row.shipmentNum - row.notPassNum"
                >已发货</span
              >
              <span
                v-else-if="
                  row.num !== row.shipmentNum - row.notPassNum &&
                  row.shipmentNum > 0
                "
                >部分发货</span
              >
              <span v-else-if="row.shipmentNum === 0">未发货</span>
            </template>
          </el-table-column>
          <el-table-column
            label="发货数量"
            prop="shipmentNum"
            width="90"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="扫描数量"
            prop="scansNum"
            width="80"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="质检通过"
            prop="passNum"
            width="80"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="未通过"
            prop="notPassNum"
            width="80"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="是否质检"
            width="80"
            align="center"
            header-align="center"
          >
            <template #default="{ row }">
              <el-icon
                v-if="row.isCheck"
                style="
                  color: green;
                  font-size: 24px;
                  font-weight: bold;
                  vertical-align: middle;
                "
              >
                <CircleCheck />
              </el-icon>
              <el-icon
                v-if="!row.isCheck"
                style="
                  color: red;
                  font-size: 24px;
                  font-weight: bold;
                  vertical-align: middle;
                "
              >
                <CircleClose />
              </el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="left-qa-order">
      <div style="border: 1px solid #eee">
        <!-- <div class="left-qa-order-basic-info">
          <div class="left-qa-order-basic-info_item">
            <span class="label">主单号:</span>
            <span class="value">
              {{ currentRow.orderNumber || '--' }}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">订单来源:</span>
            <span class="value">
              {{ currentRow.sourceType || '--' }}
            </span>
          </div>
        </div> -->

        <div
          style="
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          "
        >
          <div class="left-qa-order-basic-info_item">
            <span class="label">收货人:</span>
            <span class="value">
              {{ currentRow.lanshouName || '--' }}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">邮编:</span>
            <span class="value">
              {{ currentRow.lanshouPost || '--' }}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">收货人电话:</span>
            <span class="value">
              {{ currentRow.lanshouPhone || '--' }}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">收货人地址:</span>
            <span class="value">
              {{
                (currentRow.lanshouRegion || '') +
                  (currentRow.lanshouAddress || '') || '--'
              }}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">发货方式:</span>
            <span class="value">
              {{ currentRow.shippingWay ? currentRow.shippingWay == 1 ? '送货上门' : '快递' : '--'}}
            </span>
          </div>
          <div class="left-qa-order-basic-info_item">
            <span class="label">物流跟踪号:</span>
            <span class="value">
              {{ currentRow.logisticsTracking || '--' }}
            </span>
          </div>
        </div>
      </div>
      <div class="left-qa-order-image-info">
        <div class="shipment-order-detail_info_image">
          <img :src="currentRow.variantImage" style="width: 100%" />
        </div>
        <div class="shipment-order-detail_info_other">
          <div class="shipment-order-detail_info_other_top">
            <div class="order-name" style="line-height: 26px">
              <span class="order-norm-label" style="margin-right: 6px">
                商品名:
              </span>
              <span class="order-norm-value" :title="currentRow.variantSku">
                {{ currentRow.productName }}
              </span>
            </div>
            <div class="order-norm" style="line-height: 26px">
              <span class="order-norm-label" style="margin-right: 6px">
                规格:
              </span>
              <span class="order-norm-value" :title="currentRow.variantSku">
                {{ currentRow.variantSku }}
              </span>
            </div>
            <div class="order-count" style="line-height: 26px">
              <span class="order-count-label" style="margin-right: 6px">
                数量:
              </span>
              <span class="order-norm-value">
                {{ currentRow.shipmentNum }}
              </span>
            </div>
            <div class="order-count" style="line-height: 26px">
              <span class="order-count-label" style="margin-right: 6px">
                质检通过:
              </span>
              <span class="order-norm-value">
                {{ currentRow.passNum || 0 }}
              </span>
            </div>
            <div class="order-count" style="line-height: 26px">
              <span class="order-count-label" style="margin-right: 6px">
                质检不通过:
              </span>
              <span class="order-norm-value">
                {{ currentRow.notPassNum || 0 }}
              </span>
            </div>
            <div
              v-if="currentRow.remark"
              class="order-count"
              style="line-height: 26px"
            >
              <span class="order-count-label" style="margin-right: 6px">
                不通过原因:
              </span>
              <span class="order-norm-value">
                {{ currentRow.remark || '-' }}
              </span>
            </div>
          </div>
          <div
            v-if="Object.keys(currentRow).length > 0"
            class="shipment-order-detail_info_other_bottom"
          >
            <div
              v-if="!currentRow.isCheck"
              style="
                display: flex;
                gap: 10px;
                flex-direction: column;
                align-items: center;
              "
            >
              <div class="qa-pass-btn primary" @click="onSuccessQc">
                质检通过
              </div>
              <!-- <div class="qa-pass-btn" @click="onReissue">打回重发</div> -->
              <div class="qa-pass-btn" @click="onReissues">打回重发</div>
            </div>
            <div v-else class="qa-pass-btn-success">
              <img src="../../assets/images/yzj.png" style="width: 100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 重发原因弹窗 -->
    <el-dialog
      v-model="numVisible"
      title="提示"
      :close-on-click-modal="false"
      width="600px"
      top="6vh"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="120px"
        :rules="formRules"
      >
        <el-form-item label="重发数量：" prop="resendNum">
          <el-input
            v-model="formData.resendNum"
            type="number"
            clearable
            placeholder="请输入重发数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="原因：" prop="remark">
          <el-input
            v-model="formData.remark"
            placeholder="请输入原因"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="large" @click="numVisible = false">取消 </el-button>
          <el-button size="large" type="primary" @click="handleConfirm"
            >发货
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { CircleClose, CircleCheck } from '@element-plus/icons-vue'
import useQuarantine from './hook/useQuarantine'
import { PropType, ref, reactive, shallowRef } from 'vue'
import { QaData, shopRemark } from '@/types/api/order'
import { type FormInstance } from 'element-plus'
const formRef = shallowRef<FormInstance>()
const numVisible = ref(false)
const formData = reactive<shopRemark>({
  resendNum: null,
  remark: '',
})
const formRules = reactive({
  resendNum: [
    {
      required: true,
      message: '请输入重发数量',
      trigger: 'blur',
    },
  ],
  remark: [
    {
      required: true,
      message: '请输入原因',
      trigger: 'blur',
    },
  ],
})
const props = defineProps({
  quarantine: {
    type: Object as PropType<ReturnType<typeof useQuarantine>>,
    required: true,
  },
})
const onReissues = () => {
  formData.resendNum = null
  formData.remark = ''
  numVisible.value = true
}
const handleConfirm = async () => {
  await formRef.value?.validate()
  giveDelivery(formData)
  numVisible.value = false
}
const {
  sourceData,
  allTotal,
  dzjTotal,
  yzjTotal,
  currentRow,
  onChangeTab,
  onSuccessQc,
  activeTab,
  giveDelivery,
  onRowClick,
} = props.quarantine
const tableRowClassName = ({ row }: { row: QaData }) => {

  if (row.subOrderNumber === currentRow.value.subOrderNumber) {
    return 'current-row-active'
  } else {
    return ''
  }
}
// 类型校验
</script>
<style lang="scss" scoped>
.qa-order {
  margin-top: 10px;
  display: flex;
  height: 600px;
  gap: 10px;
  overflow: hidden;
}

.table_wrap {
  flex: 1;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.right-qa-order {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right-qa-order_top {
  display: flex;
}

.right-qa-order_top_tab {
  border: 1px solid #eee;
  padding: 6px 20px;
  cursor: pointer;
}

.right-qa-order_top_tab:first-child {
  border-right: none;
}

.right-qa-order_top_tab:nth-child(2) {
  border-right: none;
}

.active-tab {
  color: #fff;
  background-color: #20347f;
}

.left-qa-order {
  width: 50%;
}

.left-qa-order-image-info {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.shipment-order-detail_info_image {
  flex: 1;
  overflow: hidden;
}

.shipment-order-detail_info_other {
  width: 200px;
}

.left-qa-order-basic-info {
  border-bottom: 1px solid #eee;
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.order-norm-value {
  font-size: 16px;
  font-weight: bold;
  color: red;
}

.qa-pass-btn {
  border: 1px solid #eee;
  padding: 8px 20px;
  border-radius: 6px;
  text-align: center;
  width: 100px;
  cursor: pointer;
}

.qa-pass-btn.danger {
  background-color: red;
  border-color: red;
  color: #fff;
  margin-bottom: 10px;
}

.qa-pass-btn.primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  margin-bottom: 10px;
}

.qa-pass-btn.success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

.table_wrap {
  :deep(.el-table th) {
    color: #606266;
    font-size: 12px;
  }
}

.table_wrap {
  :deep(.el-table thead) {
    height: 36px;
    min-height: 36px;
  }
}

.table_wrap {
  :deep(.el-table__cell) {
    padding: 0;
  }

  :deep(.el-table__row) {
    font-size: 12px;
  }

  :deep(.current-row-active) {
    background-color: #409eff !important;
    color: #fff;
  }

  :deep(
      .el-table--enable-row-transition
        .el-table__body
        .current-row-active
        td.el-table__cell
    ) {
    background: unset;
  }
}
</style>
