<template>
  <!-- 办事处内勤 可编辑（部分编辑字段），其他角色都是不可编辑 -->
  <view v-if="!isReadonly" class="page">
    <scroll-view class="scroll" scroll-y>
      <uni-list>
        <view class="section">
          <uni-list-item title="订单编号">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.orderNo }}</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.deptName }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="区域">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.regionName }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="备货单位/人(生产标准)">
            <template v-slot:footer>
              <view class="readonly-text">{{ form.stockUpCompanyName }}</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>
        </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>


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

    <view class="footer">
      <view class="view-total">
        <view class="head">合计</view>
        <view class="row">
          <text class="label">总数量</text><text class="value">{{ form.totalQuantity }}</text>
        </view>
      </view>
    </view>
    <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
      @confirm="onSheetConfirm" />
  </view>
  <view v-else class="view-page">
    <scroll-view class="scroll" scroll-y>
      <view class="detail-page">
        <view class="section">
          <text class="row company">{{ form.orderNo }}</text>
          <view :class="['status', `status_${form.status}`]" />
          <view class="row"><text class="label">供货单位</text><text class="value">{{ getDicName('SUPPLIER',
            form.supplyUnit, dicOptions.SUPPLIER) }}</text></view>
          <view class="row"><text class="label">订货单位</text><text class="value">{{ form.orderingUnitName }}</text>
          </view>
          <view class="row"><text class="label">订货日期</text><text class="value">{{ form.orderDate }}</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.deptName }}</text></view>
          <view class="row"><text class="label">区域</text><text class="value">{{ form.regionName }}</text></view>
          <view class="row"><text class="label">备货单位/人(生产标准)</text><text class="value">{{ form.stockUpCompanyName }}</text></view>
          <view class="row"><text class="label">结算方式或期限</text><text class="value">{{ form.settlementTerms }}</text>
          </view>
          <view class="row"><text class="label">交货方式</text><text class="value">{{ form.deliveryMethod }}</text></view>
        </view>

        <!-- 产品 -->
        <view class="mgb10">
          <Product mode="view" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity || 0" />
        </view>

        <view class="section">
          <view class="row"><text class="label">价格表编号</text><text class="value">{{ form.priceListNo }}</text></view>
          <view class="row"><text class="label">开票情况</text><text class="value">{{ form.invoicingStatus }}</text></view>
          <view class="row"><text class="label">运费</text><text class="value">{{ form.shippingCost }}</text></view>
          <view class="row"><text class="label">执行标准</text><text class="value">{{ getDicName('APPLICABLE_STANDARD',
            form.executionStandard, dicOptions.APPLICABLE_STANDARD) }}</text></view>
          <view v-if="form.executionStandard === 'OTHER'" class="row"><text class="label">标准</text><text
              class="value">{{
                form.executionStandardRemarks }}</text></view>
        </view>

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>具体质量要求</span>
        </view>
        <view class="section">
          <view class="row"><text class="label">件重条头</text><text class="value">{{ form.pieceWeightHeader }}</text>
          </view>
          <view class="row"><text class="label">表面</text><text class="value">{{ form.surface }}</text></view>
          <view class="row"><text class="label">公差</text><text class="value">{{ form.tolerance }}</text></view>
          <view class="row"><text class="label">性能</text><text class="value">{{ form.performance }}</text></view>
          <view class="row"><text class="label">成分</text><text class="value">{{ form.element }}</text></view>
          <view class="row"><text class="label">包装</text><text class="value">{{ form.packaging }}</text></view>
          <view class="row"><text class="label">备注</text><text class="value">{{ form.remarks }}</text></view>
        </view>
        <!-- 品质科 可填写（不是办事处内勤） -->
        <uni-list v-if="form.showProductionProcess" >
          <uni-list-item title="生产工艺">
            <template v-slot:footer>
              <uni-easyinput type="textarea" v-model="form.productionProcess" placeholder="请输入生产工艺"
                :inputBorder="false" />
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import { getDetailApi, updateApi } from '@/api/order_list.js'
import Product from './product.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import { getDicName } from '@/utils/dic.js'
import { getDicByCodes } from '@/utils/dic'

export default {
  name: 'OrderListApprove',
  components: { Product, SingleSelectSheet },
  props: { id: { type: [String, Number], default: '' } },
  data() {
    return {
      form: {
        code: '',
        supplier: '',
        buyer: '',
        // 默认当前日期 格式为 yyyy-MM-dd
        orderDate: new Date().toISOString().substring(0, 10),
        unit: '',
        totalQuantity: '',
        totalAmountExcludingTax: '',
        totalAmountIncludingTax: '',
        totalAmountCapital: '',
        depositInfo: '',
        packagingRequirements: '',
        paymentTerms: '',
        transportMode: '',
        destinationId: [],
        includesPackagingFee: '',
        includesTransportFee: '',
        designatedConsignee: '',
        specialTerms: '',
        executionStandard: '',
        executionStandardRemarks: '',
        specialInstructions: '',
        remarks: '',
        pieceWeightHead: '',
        surface: '',
        tolerance: '',
        performance: '',
        component: '',
        packaging: '',
      },
      initPurchaseOrderLineList: [],
      dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [] },
      sheet: { visible: false, title: '请选择', options: [], value: '', field: '' },
      isReadonly: false,
    }
  },
  computed: {
    roleCodes() {
      const g = this.$store && this.$store.getters
      return (g && g.roleCodes) || []
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        const v = (val !== undefined && val !== null) ? String(val) : ''
        if (v) this.loadDetail(v)
      }
    },
    roleCodes: {
      immediate: true,
      handler(val) {
        console.log('roleCodes', val);
        // 办事处内勤 可编辑（部分编辑字段），其他角色都是不可编辑
        if (val.includes('bscnq')) {
          this.isReadonly = false;
        } else {
          this.isReadonly = true;
        }
      }
    }
  },
  created() {
    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
    },
    getDicName: getDicName,
    async onSubmit() {
      const payload = { ...this.form }
      console.log('onSubmit__payload', payload)
      try {
        await updateApi(payload)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => { uni.redirectTo({ url: '/pages/order_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;
    },
    getFormValues() {
      const m = this.form || {}
      return JSON.parse(JSON.stringify(m))
    }
  }
}
</script>

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

.scroll {
  flex: 1;
  padding: 0 0 350rpx;
}



.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: start !important;

      .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;
    }
  }
}

/* 只读文本样式 */
.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: 120rpx;
  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);

  .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;
      }
    }
  }
}

.view-page {
  .scroll {
    padding: 0;
  }

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

    .status {
      position: absolute;
      top: 16rpx;
      right: 52rpx;
      width: 180rpx;
      height: 146rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;

      // 已下发
      &_ISSUED {
        background-image: url('~@/static/images/order_list/status_ISSUED.png');
      }

      // 待发货
      &_WAIT {
        background-image: url('~@/static/images/order_list/status_WAIT.png');
      }

      // 部分发货
      &_TRANSIT {
        background-image: url('~@/static/images/order_list/status_TRANSIT.png');
      }

      // 发货完成
      &_SHIPPED {
        background-image: url('~@/static/images/order_list/status_SHIPPED.png');
      }

      // 已签收
      &_DELIVERED {
        background-image: url('~@/static/images/order_list/status_DELIVERED.png');
      }

    }
  }

  .mgb10 {
    margin-bottom: 20rpx;
  }

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

    &:last-child {
      margin-bottom: 0;
    }

    &.company {
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      padding-top: 32rpx;
      line-height: 50rpx;
    }

    .label {
      max-width: 420rpx;
      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;

      &.act {
        color: $theme-primary;
      }

      .category {
        display: inline-block;
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        font-size: 24rpx;
        width: auto;

        &.category_A {
          background: #FFF0ED;
          color: #D54941;
        }

        &.category_B {
          background: #FFF1E9;
          color: #E37318;
        }

        &.category_C {
          background: #F2F3FF;
          color: $theme-primary;
        }

        &.category_D {
          background: #E3F9E9;
          color: #2BA471;
        }
      }
    }
  }

  .card {
    padding: 16rpx 0 8rpx;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style>