<template>
  <el-drawer
    :visible.sync="visible"
    width="500px"
    @open="onOpen"
    :with-header="false"
  >
    <div class="process-detail" v-loading="loading">
      <!-- 顶部信息区 -->
      <div class="section header-section">
        <div class="order-info">
          <div class="order-title">
            <order-link :id="detail.orderId" :name="detail.orderNo" />
            <dict-tag
              :value="detail.orderStatus"
              :options="dict.type.order_status"
            />
          </div>
          <div class="product-name">{{ detail.orderProdName }}</div>
        </div>
        <div class="images-area">
          <div class="image-wrapper">
            <image-preview
              :src="detail.orderPicture"
              :width="70"
              :height="70"
              class="image-item"
            />
            <div class="image-label">订单图片</div>
          </div>
          <div class="image-wrapper">
            <image-preview
              :src="detail.orderProdPicture"
              :width="70"
              :height="70"
              class="image-item"
            />
            <div class="image-label">产品图片</div>
          </div>
        </div>
      </div>

      <!-- 工序进度区 -->
      <div class="section process-section">
        <div class="progress-title">
          <span class="dept-name">{{ detail.deptName }}</span>
          <el-tag type="success" v-if="detail.isEnd">最终工序</el-tag>
        </div>
        <el-progress
          :percentage="detail.progress"
          :color="ProgressColors"
          :format="ProgressFormat"
          class="progress-bar"
        />
        <div class="progress-numbers">
          <div class="number-item">
            <div class="number">{{ detail.num | dv }}</div>
            <div class="label">总数量</div>
          </div>
          <div class="number-item">
            <div class="number">{{ detail.reportNum | dv }}</div>
            <div class="label">已上报</div>
          </div>
          <div class="number-item">
            <div class="number">{{ detail.storeNum | dv }}</div>
            <div class="label">已清点</div>
          </div>
        </div>
      </div>

      <!-- 工艺参数区 -->
      <div class="section params-section">
        <div class="param-item" v-if="detail.handleWay">
          <div class="param-label">处理方式</div>
          <div class="param-value">{{detail.handleWay}}</div>
        </div>
        <div class="param-item" v-if="detail.effect">
          <div class="param-label">效果</div>
          <div class="param-value">{{detail.effect}}</div>
        </div>
        <div class="param-item" v-if="detail.color">
          <div class="param-label">颜色</div>
          <div class="param-value">{{detail.color}}</div>
        </div>
        <div class="param-item" v-if="detail.coverColor">
          <div class="param-label">盖子颜色</div>
          <div class="param-value">{{detail.coverColor}}</div>
        </div>
        <div class="param-item" v-if="detail.remark">
          <div class="param-label">备注</div>
          <div class="param-value">{{detail.remark}}</div>
        </div>
      </div>

      <!-- 操作按钮区 -->
      <div class="action-area">
        <el-button type="primary">上报库存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { ProgressColors, ProgressFormat } from '@/utils/constants'
import OrderLink from '@/components/Business/Order/OrderLink'
import BooleanTag from '@/components/BooleanTag'
import { getProdProcess } from '@/api/bst/prodProcess'

export default {
  name: 'ProdProcessDetail',
  components: {
    OrderLink,
    BooleanTag
  },
  dicts: ['order_status'],
  props: {
    id: {
        type: String,
        default: null,
    },
    show: {
        type: Boolean,
        default: false,
    }
  },
  data() {
    return {
      ProgressColors,
      detail: {},
      loading: false,
    }
  },
  computed: {
    visible: {
        get() {
            return this.show;
        },
        set(value) {
            this.$emit('update:show', value);
        }
    }
  },
  methods: {
    ProgressFormat,
    onOpen() {
        this.getDetail();
    },
    getDetail() {
        this.loading = true;
        getProdProcess(this.id).then(res => {
            this.detail = res.data;
        }).finally(() => {
            this.loading = false;
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.process-detail {
  padding: 16px;
  background: #fff;

  .section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }

  .header-section {
    .order-info {
      margin-bottom: 16px;

      .order-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
      }

      .product-name {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .images-area {
      display: flex;
      gap: 20px;
      justify-content: center;

      .image-wrapper {
        text-align: center;

        .image-item {
          border-radius: 4px;
          border: 1px solid #ebeef5;
        }

        .image-label {
          margin-top: 8px;
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .process-section {
    background: #f5f7fa;

    .progress-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .dept-name {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .progress-bar {
      margin-bottom: 16px;
    }

    .progress-numbers {
      display: flex;
      justify-content: space-around;
      text-align: center;

      .number-item {
        .number {
          font-size: 20px;
          font-weight: bold;
          color: #409eff;
        }

        .label {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
  }

  .params-section {
    .param-item {
      padding: 12px 16px;
      display: flex;
      align-items: flex-start;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .param-label {
        width: 80px;
        color: #909399;
        font-size: 14px;
        flex-shrink: 0;
      }

      .param-value {
        flex: 1;
        color: #303133;
        font-size: 14px;
        word-break: break-all;
      }
    }
  }

  .action-area {
    padding: 16px 0;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .process-detail {
    padding: 12px;

    .section {
      padding: 12px;
    }

    .header-section {
      .images-area {
        gap: 12px;
      }
    }
  }
}
</style>