<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <uni-list>
        <view class="section">
          <uni-list-item class="select-item" :class="form.orderNo ? 'is-filled' : 'is-empty'" clickable
            @click="openRelate('orderNo')" :rightText="form.orderNo || '请选择订单编号'" showArrow>
            <template v-slot:body>
              <view class="item-title"><text class="required">*</text><text>订单编号</text></view>
            </template>
          </uni-list-item>
          <uni-list-item title="供货单位">
            <template v-slot:footer>
              <view class="readonly-text">{{ getDicName('SUPPLIER', form.supplyUnit, dicOptions.SUPPLIER) }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="订货单位">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.orderingUnitName }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="订货日期">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.orderDate }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="生产厂">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.workshopName }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="结算方式或期限">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.settlementTerms }}</view>
            </template>
          </uni-list-item>

          <uni-list-item title="交货方式">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.deliveryMethod }}</view>
            </template>
          </uni-list-item>
        </view>

        <!-- 产品 -->
        <view class="section2">
          <Product mode="add" :list="initPurchaseOrderLineList" @change="purchaseOrderLineListChange" :orderDate="form.orderDate" />
        </view>

        <view class="section">
          <uni-list-item title="价格表编号">
            <template v-slot:footer>
              <uni-easyinput v-model="form.priceListNo" placeholder="请输入价格表编号" :inputBorder="false" />
            </template>
          </uni-list-item>
          <uni-list-item title="开票情况">
            <template v-slot:footer>
              <uni-easyinput v-model="form.invoicingStatus" placeholder="请输入开票情况" :inputBorder="false" />
            </template>
          </uni-list-item>
          <uni-list-item class="amount-item">
            <template v-slot:body>
              <view class="item-title"><text>运费</text></view>
            </template>
            <template v-slot:footer>
              <view class="amount-row">
                <uni-easyinput type="number" v-model="form.shippingCost" placeholder="0.00" :inputBorder="false" />
                <text class="unit">元</text>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item class="select-item" :class="form.executionStandardName ? 'is-filled' : 'is-empty'" clickable
            @click="openSheet('executionStandard')" :rightText="form.executionStandardName || '请选择'" showArrow>
            <template v-slot:body>
              <view class="item-title"><text>执行标准</text></view>
            </template>
          </uni-list-item>
          <uni-list-item title="标准" v-if="form.executionStandard === 'OTHER'">
            <template v-slot:footer>
              <uni-easyinput v-model="form.executionStandardRemarks" placeholder="请输入标准" :inputBorder="false" />
            </template>
          </uni-list-item>
          <uni-list-item title="变更说明">
            <template v-slot:footer>
              <uni-easyinput type="textarea" v-model="form.changeDescription" placeholder="请输入变更说明" :inputBorder="false" />
            </template>
          </uni-list-item>
        </view>


        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>具体质量要求</span>
        </view>

        <uni-list-item title="件重条头">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.pieceWeightHeader" placeholder="请输入件重条头"
              :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="表面">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.surface" placeholder="请输入表面" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="公差">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.tolerance" placeholder="请输入公差" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="性能">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.performance" placeholder="请输入性能" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="成分">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.element" placeholder="请输入成分" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="包装">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.packaging" placeholder="请输入包装" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="备注">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.remarks" placeholder="请输入备注" :inputBorder="false" />
          </template>
        </uni-list-item>
        <view class="footer">
          <view class="view-total">
            <view class="head">合计</view>
            <view class="row">
              <text class="label">总数量</text><text class="value">{{ form.afterTotalQuantity }}</text>
            </view>
          </view>
          <button class="btn submit" type="primary" @click="onSubmit">提交</button>
        </view>

      </uni-list>
    </scroll-view>

    <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
      @confirm="onSheetConfirm" />
    <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
      :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
      :selectedKeys.sync="relate.selectedKeys" :source-extra="{ queryType: 'CHANGE' }" @confirm="onRelateConfirm" />
  </view>
</template>

<script>
import { createApi, loadOrderApi } from '@/api/change_list.js'
import Product from './product.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import RelateSelectSheet from '@/components/relate-select/index.vue'
import { getDicName } from '@/utils/dic.js'
import { getDicByCodes } from '@/utils/dic'

export default {
  name: 'ChangeListAdd',
  components: { Product, SingleSelectSheet, RelateSelectSheet },
  data() {
    return {
      form: {
        orderNo: '',
        orderId: '',
        supplyUnit: '',
        orderingUnit: '',
        orderDate: '',
        workshopId: '',
        settlementTerms: '',
        deliveryMethod: '',
        priceListNo: '',
        invoicingStatus: '',
        shippingCost: '',
        packagingFee: '',
        executionStandard: '',
        executionStandardRemarks: '',
        changeDescription: '',
        totalQuantity: '',
        afterTotalQuantity: '',
        pieceWeightHeader: '',
        surface: '',
        tolerance: '',
        performance: '',
        element: '',
        packaging: '',
        remarks: '',
        // 默认当前日期 格式为 yyyy-MM-dd
        orderDate: new Date().toISOString().substring(0, 10),

      },
      initPurchaseOrderLineList: [],
      dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [] },
      sheet: { visible: false, title: '请选择', options: [], value: '', field: '' },
      relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' }
    }
  },
  onLoad() {
    this.loadDicOptions()
  },
  methods: {
    loadDicOptions() {
      const dicCodes = ['SUPPLIER', 'APPLICABLE_STANDARD']
      return getDicByCodes(dicCodes).then(results => {
        this.dicOptions.SUPPLIER = results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
        this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD && results.APPLICABLE_STANDARD.data ? results.APPLICABLE_STANDARD.data : []
        this.refreshStandardName()
      }).catch(() => { this.dicOptions = { SUPPLIER: [], APPLICABLE_STANDARD: [] } })
    },
    async loadDetail(id) {
      try {
        const res = await getDetailApi(id)
        const m = res.data || {}
        const next = { ...this.form, ...m }
        next.id = m.id || m.code || id
        next.purchaseOrderLineList = Array.isArray(m.purchaseOrderLineList) ? m.purchaseOrderLineList.map(x => ({ ...x })) : []
        this.form = next;
        this.initPurchaseOrderLineList = next.purchaseOrderLineList || [];
        this.refreshStandardName()
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    refreshStandardName() {
      const est = (this.dicOptions.APPLICABLE_STANDARD || []).find(o => String(o.code) === String(this.form.executionStandard))
      this.form.executionStandardName = est ? (est.name || '') : (this.form.executionStandardName || '')
    },
    openSheet(field) {
      if (field === 'executionStandard') {
        const options = (this.dicOptions.APPLICABLE_STANDARD || []).map(it => ({ label: it.name || '', value: it.code || '' }))
        const current = this.form.executionStandard
        const match = options.find(o => String(o.value) === String(current))
        this.sheet = { ...this.sheet, visible: true, title: '执行标准', options, field, value: match ? match.value : '' }
      }
    },
    onSheetConfirm({ value, label }) {
      const field = this.sheet.field
      if (field === 'executionStandard') {
        this.form.executionStandard = value || ''
        this.form.executionStandardName = label || ''
      }
      this.sheet.visible = false
    },
    openRelate(fieldKey) {
      let config = {}
      if (fieldKey === 'orderNo') {
        config = {
          title: '订单',
          source: 'orderAssoc',
          rowKey: 'id',
          multiple: false,
          display: [
            { label: '订单编号', field: 'orderNo' },
            { label: '订货单位', field: 'orderingUnitName' },
            { label: '生产厂', field: 'workshopName' },
            { label: '办事处', field: 'deptName' },
            { label: '总数量(kg)', field: 'totalQuantity' },
            { label: '订货日期', field: 'orderDate' },
            { label: '下单人', field: 'contractCreateByName' }
          ]
        }
      }
      const currentId = this.form && (this.form.id || this.form.code)
      const selectedKeys = currentId ? [currentId] : []
      this.sheet.visible = false
      this.relate.title = config.title
      this.relate.source = config.source
      this.relate.display = config.display
      this.relate.multiple = config.multiple
      this.relate.rowKey = config.rowKey
      this.relate.selectedKeys = selectedKeys
      this.relate.fieldKey = fieldKey
      this.$nextTick(() => { this.relate.visible = true })
    },
    async onRelateConfirm({ items }) {
      const _fieldKey = this.relate.fieldKey
      const first = (items && items.length > 0) ? items[0] : null
      if (_fieldKey === 'orderNo') {
        const id = first && (first.id || first.code)
        if (id) {
          try {
            const res = await loadOrderApi([id])
            const data = res && res.data ? res.data : null
            const item = Array.isArray(data) ? (data[0] || {}) : (data || {})
            const next = { ...this.form, ...item }
            next.orderNo = next.orderNo || ((first && (first.orderNo || first.code)) || '');
            next.orderId = next.id || '';
            delete next.id
            delete next.status
            this.form = next
            const lines = Array.isArray(item.purchaseOrderLineList) ? item.purchaseOrderLineList.map(x => ({ ...x, purchaseOrderId: x.id, afterId: x.id, id: '' })) : []
            this.initPurchaseOrderLineList = lines
            const sum = lines.reduce((acc, it) => {
              const v = Number(it && it.quantity)
              return acc + (isNaN(v) ? 0 : v)
            }, 0)
            this.form.afterTotalQuantity = sum
            this.refreshStandardName()
          } catch (e) {
            this.form.orderNo = (first && (first.orderNo || first.code)) || ''
          }
        } else {
          this.form.orderNo = (first && (first.orderNo || first.code)) || ''
        }
      }
    },
    getDicName: getDicName,
    validateRequired() {
      const checks = [
        { key: 'orderNo', label: '订单编号' }
      ]
      for (const it of checks) {
        const val = this.form[it.key]
        if (val === undefined || val === null || String(val).trim() === '') {
          uni.showToast({ title: `请先选择${it.label}`, icon: 'none' })
          return false
        }
      }
      return true
    },
    validateLineListRequired() {
      const list = Array.isArray(this.form.purchaseOrderLineList) ? this.form.purchaseOrderLineList : []
      if (list.length === 0) {
        uni.showToast({ title: '请先添加产品', icon: 'none' })
        return false
      }
      const fields = [
        { key: 'industry', label: '行业' },
        { key: 'quality', label: '品质' },
        { key: 'brand', label: '牌号' },
        { key: 'quantity', label: '数量' },
        { key: 'deliveryDate', label: '发货日期' },
      ]
      for (let i = 0; i < list.length; i++) {
        const it = list[i] || {}
        for (const f of fields) {
          const v = it && it[f.key]
          if (v === undefined || v === null || String(v).trim() === '') {
            uni.showToast({ title: `产品第${i + 1}条：${f.label}不能为空！`, icon: 'none' })
            return false
          }
        }
        const has = (v) => v !== undefined && v !== null && String(v).trim() !== ''
        if (has(it.thicknessTolPos) && has(it.thicknessTolNeg)) {
          const pos = Number(it.thicknessTolPos)
          const neg = Number(it.thicknessTolNeg)
          if (!(pos > neg)) {
            uni.showToast({ title: `产品第${i + 1}条：厚度公差上限需大于下限`, icon: 'none' })
            return false
          }
        }
        if (has(it.widthTolPos) && has(it.widthTolNeg)) {
          const pos = Number(it.widthTolPos)
          const neg = Number(it.widthTolNeg)
          if (!(pos > neg)) {
            uni.showToast({ title: `产品第${i + 1}条：宽度公差上限需大于下限`, icon: 'none' })
            return false
          }
        }
        if (has(it.lengthTolPos) && has(it.lengthTolNeg)) {
          const pos = Number(it.lengthTolPos)
          const neg = Number(it.lengthTolNeg)
          if (!(pos > neg)) {
            uni.showToast({ title: `产品第${i + 1}条：长度公差上限需大于下限`, icon: 'none' })
            return false
          }
        }
      }
      return true
    },
    async onSubmit() {
      if (!this.validateRequired()) return
      if (!this.validateLineListRequired()) return
      const payload = { ...this.form }
      payload.orderSpecList = payload.purchaseOrderLineList || [];
      delete payload.purchaseOrderLineList;
      console.log('onSubmit__payload', payload)
      try {
        await createApi(payload)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => { uni.redirectTo({ url: '/pages/change_list/index' }) }, 300)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    },
    purchaseOrderLineListChange(data) {
      const list = Array.isArray(data) ? data : []
      this.form.purchaseOrderLineList = list
      const sum = list.reduce((acc, it) => {
        const v = Number(it && it.quantity)
        return acc + (isNaN(v) ? 0 : v)
      }, 0)
      this.form.afterTotalQuantity = sum
    },
  }
}
</script>

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

.scroll {
  flex: 1;
  padding: 6rpx 0 310rpx;
}



.title-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx 22rpx;

  .title-header_icon {
    width: 32rpx;
    height: 28rpx;
    margin-right: 16rpx;
  }

  span {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 600;
  }
}


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

.section2 {
  background: #f1f1f1;
}

::v-deep .uni-list {
  background: transparent;

  &-item {
    &__extra-text {
      font-size: 32rpx;
    }

    &__content-title {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
    }

    &__container {
      padding: 32rpx;
      // align-items: center;

      .uni-easyinput {

        .is-disabled {
          background-color: transparent !important;
        }

        &__placeholder-class {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.4);
        }

        &__content {
          border: none;

          &-input {
            padding-left: 0 !important;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 32rpx;
          }

          .content-clear-icon {
            font-size: 44rpx !important;
          }
        }
      }

      .amount-row {
        flex: 1;
        display: flex;
        align-items: center;

        .uni-easyinput {
          flex: 1;
        }

        .unit {
          margin-left: 16rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }

      .item-title,
      .uni-list-item__content {
        flex: none;
        min-height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        position: relative;
        width: 210rpx;
        margin-right: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        padding-right: 0;


        .required {
          color: red;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16rpx;
        }
      }

    }

    &.select-item {
      &.is-empty {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.4) !important;
        }
      }

      &.is-filled {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.9) !important;
        }
      }

      .serial-number-row {
        display: flex;
        align-items: center;
      }

    }

    &.mgb10 {
      margin-bottom: 20rpx;
    }

  }

  .title-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 22rpx;

    &_icon {
      width: 32rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    span {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 600;
    }
  }
}

/* 只读 easyinput 根据内容自适应高度 */
::v-deep .uni-list-item__container {
  align-items: flex-start;
}

/* 只读文本样式 */
.readonly-text {
  color: rgba(0, 0, 0, 0.9);
  font-size: 32rpx;
  line-height: 48rpx;
  text-align: right;
  white-space: pre-wrap;
  word-break: break-all;
}


.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 32rpx 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  z-index: 10;

  .btn {
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
  }

  .submit {
    background: $theme-primary;
    color: #fff;
  }

  .view-total {
    padding: 20rpx 0;

    .head {
      font-size: 32rpx;
      font-weight: 600;
      line-height: 50rpx;
      color: rgba(0, 0, 0, 0.9);
      padding-bottom: 16rpx;
      margin-bottom: 24rpx;
      ;
      border-bottom: 1px dashed #E7E7E7;
    }

    .row {
      display: flex;
      margin-bottom: 24rpx;
      line-height: 32rpx;

      .label {
        width: 180rpx;
        margin-right: 14rpx;
        color: rgba(0, 0, 0, 0.6);
        font-size: 28rpx;
      }

      .value {
        flex: 1;
        color: rgba(0, 0, 0, 0.9);
        font-size: 28rpx;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}
</style>