<template>
  <Page name="goods-info" flank>
    <template #content>
      <u-form :model="form" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="货物名称" required @click="choseGoodsName">
            <u-input v-model="form.goodsName" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item v-if="showGoodsValue" label="货物价值" required>
            <u-input v-model="form.goodsValue" border="none" type="digit" placeholder="请输入">
              <template slot="suffix">元</template>
            </u-input>
          </u-form-item>
          <u-form-item label="货物件数">
            <u-input v-model="form.goodsPiece" border="none" type="digit" placeholder="请输入，选填" />
          </u-form-item>
          <u-form-item label="货物吨数" required>
            <u-input v-model="form.goodsWeight" border="none" type="digit" placeholder="请输入" />
          </u-form-item>
          <u-form-item label="货物方数">
            <u-input v-model="form.goodsVolume" border="none" type="digit" placeholder="请输入，选填" />
          </u-form-item>
          <u-form-item label="发货单位" :required="ningXiaYouZhengFlag">
            <u-input v-model="form.dispatchUnit" border="none" placeholder="请输入" />
          </u-form-item>
          <u-form-item label="合同号" :required="ningXiaYouZhengFlag">
            <u-input v-model="form.customerContractNo" border="none" placeholder="请输入" />
          </u-form-item>
          <u-form-item label="运输班次号" :required="ningXiaYouZhengFlag">
            <u-input v-model="form.transportShiftNo" border="none" placeholder="请输入" />
          </u-form-item>
        </view>
      </u-form>
    </template>
    <template #footer>
      <u-button type="primary" @click="onSubmit">确定</u-button>
    </template>
  </Page>
</template>
<script>
import { urlParam } from '@/utils/param';

export default {
  name: 'goods-info',
  data() {
    return {
      showGoodsValue: '',
      ningXiaYouZhengFlag: '',
      projectCode: '',
      form: {
        goodsName: '',
        goodsValue: '',
        goodsPiece: '',
        goodsWeight: '',
        goodsVolume: '',
        dispatchUnit: '',
        customerContractNo: '',
        transportShiftNo: '',
      },
    };
  },
  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('data', data => {
      this.showGoodsValue = data.showGoodsValue || false;
      this.ningXiaYouZhengFlag = data.ningXiaYouZhengFlag || false;
      this.setHisData(data.form);
      this.projectCode = data.form.projectCode || '';
    });
  },
  methods: {
    setHisData(v) {
      Object.keys(this.form).forEach(k => {
        this.form[k] = v[k] || '';
      });
    },
    choseGoodsName() {
      uni.$off('select-common');
      uni.$once('select-common', option => {
        this.form.goodsName = option.name;
      });
      uni.navigateTo({
        url: `/pages/global/search-common${urlParam({
          mode: 'select',
          url: 'goodsName',
          title: '货物名称',
          label: 'name',
          value: '',
          params: `{"projectCode":"${this.projectCode}"}`,
        })}`,
      });
    },
    onSubmit() {
      this.getOpenerEventChannel().emit('submitData', this.form);
      // setTimeout(() => uni.navigateBack(), 500);
    },
  },
};
</script>

<style lang="scss">
.page-goods-info {
  &__footer {
    background: $color-white;
  }
  .card {
    color: #999999;
    background-color: $color-white;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;
    .u-form-item {
      padding-left: $padding-md !important;
      padding-right: $padding-sm !important;
    }
    .u-form-item + .u-form-item {
      border-top: 1px solid #f6f6f6;
    }
  }
}
</style>
