<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <view class="detail-page">
        <view class="section">
          <text class="row customer">{{ form.contractCode }}</text>
          <view class="row"><text class="label">客户名称</text><text class="value">{{ form.customerName }}</text></view>
          <view class="row"><text class="label">办事处</text><text class="value">{{ form.deptName }}</text></view>
          <view class="row"><text class="label">分厂</text><text class="value">{{ form.workshopName }}</text></view>
          <view class="row"><text class="label">订单类型</text><text class="value">{{ form.contractType }}</text></view>
          <view class="row"><text class="label">原来订货日期</text><text class="value">{{ form.contractDocumentDate }}</text></view>
          <view class="row"><text class="label">第几次申请</text><text class="value">{{ form.applicationCount }}</text></view>
          <view class="row"><text class="label">数量</text><text class="value">{{ form.totalQuantity }}</text></view>
        </view>
        <view class="section">
          <view class="row"><text class="label">现申请锁规格日期</text><text class="value">{{ form.specLockDate }}</text></view>
          <view class="row"><text class="label">延迟原因</text><text class="value">{{ form.delayReason }}</text></view>
          <view class="row"><text class="label">制单日期</text><text class="value">{{ form.orderDate }}</text></view>
        </view>
      </view>
    </scroll-view>
    <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
  </view>
</template>

<script>
import DetailButtons from '@/components/detail-buttons/index.vue'
import { getSpecDetailApi } from '@/api/contract.js'

export default {
  components: { DetailButtons },
  data() {
    return {
      id: '',
      form: {
        id: '', contractCode: '', customerName: '', deptName: '', workshopName: '', contractType: '', contractDocumentDate: '', applicationCount: '', totalQuantity: '', specLockDate: '', delayReason: '', orderDate: ''
        
      }
    }
  },
  computed: {
    displayButtons() {
      return [
        // { text: '删除', variant: 'danger' },
        { text: '编辑', variant: 'outline' }
      ]
    }
  },
  onLoad(query) {
    this.id = (query && query.id) ? query.id : ''
  },
  created() {
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      if (!this.id) return
      getSpecDetailApi(this.id).then(res => {
        const d = res.data || {}
        const m = d || {}
        const yesNo = m.hasFrameworkAgreement === 'Y' || m.hasFrameworkAgreement === true
        this.form = {
          id: m.id || '',
          contractCode: m.contractCode || '',
          customerName: m.customerName || (m.customer && m.customer.name) || '',
          deptName: m.deptName || (m.dept && m.dept.name) || '',
          workshopName: m.workshopName || (m.workshop && m.workshop.name) || '',
          contractType: m.contractType || '',
          contractDocumentDate: m.contractDocumentDate || '',
          applicationCount: m.applicationCount || '',
          totalQuantity: m.totalQuantity || '',
          specLockDate: m.specLockDate || '',
          delayReason: m.delayReason || '',
          orderDate: m.orderDate || ''
        }
      })
    },
    handleButtonClick(btn) {
      if (btn && btn.text === '编辑') {
        return uni.navigateTo({ url: `/pages/contract_unlocked_operation/modify?id=${this.id}` })
      }
      // if (btn && btn.text === '删除') {
      //   uni.showToast({ title: '暂未接入删除接口', icon: 'none' })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll {
  flex: 1;
  padding: 8rpx 0 144rpx 0;
}

.detail-page {
  background: #f3f3f3;
}

.section {
  padding: 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.row {
  display: flex;
  margin-bottom: 28rpx;

  &.customer {
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 12rpx;
  }

  .label {
    width: 120rpx;
    line-height: 32rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
  }

  .value {
    flex: 1;
    line-height: 32rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    text-align: right;
  }
}
</style>