<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, cancelApi } from '@/api/contract.js'

export default {
  components: { DetailButtons },
  data() {
    return {
      id: '',
      form: {
        id: '', contractCode: '', customerName: '', deptName: '', workshopName: '', contractType: '', contractDocumentDate: '', applicationCount: '', totalQuantity: '', specLockDate: '', delayReason: '', orderDate: ''
        
      },
      buttons: [
        { text: '编辑', variant: 'outline', visible: true, event: 'edit' },
        { text: '审核', variant: 'outline', visible: true, event: 'audit' },
        { text: '审核详情', variant: 'outline', visible: true, event: 'auditDetail' },
        { text: '取消', variant: 'danger', visible: true, event: 'cancel' },
      ]
    }
  },
  computed: {
    displayButtons() {
      const s = this.form.approvalStatus || false
      const e = this.form.showExamine || false
      return [
        { ...this.buttons[0], visible: (s === 'REFUSE' && this.$auth.hasPermi('contract-manage:unlocked-operation-application:modify')) },
        { ...this.buttons[1], visible: (s === 'AUDIT' && e && this.$auth.hasPermi('contract-manage:unlocked-operation-application:approve')) },
        { ...this.buttons[2], visible: (s !== 'REFUSE' && this.$auth.hasPermi('contract-manage:unlocked-operation-application:review')) },
        { ...this.buttons[3], visible: (s === 'REFUSE' && this.$auth.hasPermi('contract-manage:unlocked-operation-application:cancel')) },
      ]
    }
  },
  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 = {
          ...res.data || {},
          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 || ''
        }
      })
    },
    onEdit() {
      if (!this.form.id) return
      uni.navigateTo({ url: `/pages/contract_unlocked_operation/modify?id=${this.form.id}` })
    },
    onAudit(id, type) {
        const CACHE_KEY = 'sourceBusinessId'
        // const TYPE = 'contractType'
        // uni.setStorageSync(TYPE, type)
        uni.setStorageSync(CACHE_KEY, id)
        uni.navigateTo({ url: '/pages/flow/audit' })
    },
    onAuditDetail(id, type) {
      console.log(id,'id')
        const CACHE_KEY = 'sourceBusinessId'
        // const TYPE = 'contractType'
        // uni.setStorageSync(TYPE, type)
        uni.setStorageSync(CACHE_KEY, id)
        uni.navigateTo({ url: '/pages/flow/audit_detail' })
    },
    onCancel(id) {
        uni.showModal({
            title: '确认取消吗？',
            success: (res) => {
                if (res.confirm) {
                    uni.showLoading({ title: '取消中...' })
                    cancelApi(id).then(res => {
                        uni.hideLoading()
                        if (res.code === 200) {
                            uni.showToast({ title: '取消成功' })
                            this.loadDetail()
                        } else {
                            uni.showToast({ title: res.msg || '取消失败' })
                        }
                    })
                }
            }
        })
    },
    handleButtonClick(btn) {
      if (!btn || btn.disabled) return
      if (typeof btn.onClick === 'function') return btn.onClick(this.form, btn.params)
      const e = btn.event || ''
      if (e === 'edit') return this.onEdit(btn && btn.params)
      if (e === 'audit') return this.onAudit(this.form.id || '')
      if (e === 'auditDetail') return this.onAuditDetail(this.form.id || '')
      if (e === 'cancel') return this.onCancel(this.form.id || '')
    }
  }
}
</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>