<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <view class="detail-page">
        <view class="section">
          <text class="row customer">{{ form.code }}</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.companyName }}</text></view>
          <view class="row"><text class="label">品种</text><text class="value">{{ form.materialTypeName }}</text></view>
          <view class="row"><text class="label">是否签订</text><text class="value">{{ form.hasFrameworkAgreementName
              }}</text></view>
          <view class="row"><text class="label">授时截止日期</text><text class="value">{{ form.validityTime }}</text></view>
        </view>
      </view>
    </scroll-view>
    <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
  </view>
</template>

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

export default {
  components: { DetailButtons },
  data() {
    return {
      id: '',
      form: {
        id: '', code: '', customerName: '', companyName: '', materialTypeName: '', hasFrameworkAgreementName: '', validityTime: ''
      }
    }
  },
  computed: {
    displayButtons() {
      return [
        { text: '编辑', variant: 'outline', visible: this.$auth.hasPermi('contract-manage:contract-framework:modify') }
      ]
    }
  },
  onLoad(query) {
    this.id = (query && query.id) ? query.id : ''
  },
  created() {
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      if (!this.id) return
      getDetailApi(this.id).then(res => {
        const d = res.data || {}
        const m = d || {}
        const yesNo = m.hasFrameworkAgreement === 'Y' || m.hasFrameworkAgreement === true
        this.form = {
          id: m.id || '',
          code: m.code || '',
          customerName: m.customerName || (m.customer && m.customer.name) || '',
          companyName: m.companyName || (m.company && m.company.name) || '',
          materialTypeName: m.materialTypeName || (m.materialType && m.materialType.name) || '',
          hasFrameworkAgreementName: yesNo ? '是' : '否',
          validityTime: m.validityTime || ''
        }
      })
    },
    handleButtonClick(btn) {
      if (btn && btn.text === '编辑') {
        return uni.navigateTo({ url: `/pages/contract_framework/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>