<template>
  <div class="report">
    <!-- <nav-header title="冷链食品申报" @back="$router.go(-1)" /> -->
    <div class="main">
      <van-form @submit="onSubmit" ref="goodsForm">
        <div class="userInfo">
          <van-field
            v-model="form.name1"
            label="联系人姓名"
            readonly
            required
            :rules="[{ required: true, message: '请填写联系人姓名' }]"
          />
          <van-field
            v-model="form.phone1"
            label="手机号码"
            readonly
            required
            :rules="[
              { required: true, message: '请填写手机号码' }
            ]"
          />
        </div>
        <div class="carInfo">
          <div class="title">
            <div class="icon"></div>
            <p>车辆信息</p>
          </div>
          <van-field
            v-model="form.carNumber"
            label="车牌号"
            required
            placeholder="请填写车牌号"
            :rules="[{ required: true, message: '请填写车牌号' }]"
          />
          <van-field
            v-model="form.driverName"
            label="司机姓名"
            required
            placeholder="请填写司机姓名"
            :rules="[{ required: true, message: '请填写司机姓名' }]"
          />
          <van-field
            v-model="form.driverPhone"
            label="联系方式"
            type="number"
            required
            placeholder="请输入司机联系方式"
            :rules="[
              { required: true, message: '请输入司机联系方式' },
              { pattern: phoneReg, message: '请输入正确内容' }
            ]"
          />
        </div>
        <div class="carInfo">
          <div class="title">
            <div class="icon"></div>
            <p>仓库信息</p>
          </div>
          <van-field
            :value="form.address"
            label="仓库"
            required
            placeholder="请选择仓库"
            readonly
            clickable
            :rules="[
              { required: true, message: '请选择仓库', trigger: 'onChange' }
            ]"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="
                addressList.map(item => {
                  return item.company;
                })
              "
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </div>
        <div class="carInfo">
          <div class="title">
            <div class="icon"></div>
            <p>上传清晰照片</p>
          </div>
          <van-field label="驾驶员苏康码照片" required>
            <template #input>
              <van-uploader
                :after-read="afterRead"
                v-model="form.health"
                max-count="1"
              />
            </template>
          </van-field>
          <van-field label="驾驶员7天内核酸检测报告照片" required>
            <template #input>
              <van-uploader
                :after-read="afterRead"
                v-model="form.nuclein"
                max-count="1"
              />
            </template>
          </van-field>
          <van-field label="营业执照照片" required>
            <template #input>
              <van-uploader
                :after-read="afterRead"
                v-model="form.license"
                max-count="1"
              />
            </template>
          </van-field>
          <van-field label="食品经营许可证" required>
            <template #input>
              <van-uploader
                :after-read="afterRead"
                v-model="form.permit"
                max-count="1"
              />
            </template>
          </van-field>
        </div>
        <div
          class="goodInfo"
          v-for="(item, index) in form.goods"
          :key="item.id"
        >
          <div class="info">
            <div class="title">
              <div class="icon"></div>
              <p>商品信息</p>
              <van-icon
                v-if="index > 0"
                size="25"
                class="delete_icon"
                name="delete"
                @click="delegoods(item.id)"
              />
            </div>
            <van-field
              :value="item.goodsStateName"
              label="货物商品类型"
              required
              placeholder="请选择货物商品类型"
              readonly
              clickable
              :rules="[
                {
                  required: true,
                  message: '请选择货物商品类型',
                  trigger: 'onChange'
                }
              ]"
              @click="item.showGoodsPicker = true"
            />
            <van-popup v-model="item.showGoodsPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  goodsStateList.map(res => {
                    return res.text;
                  })
                "
                @confirm="(value, index) => onGoodsConfirm(value, index, item)"
                @cancel="item.showGoodsPicker = false"
              />
            </van-popup>
            <van-field
              v-if="item.goodsStateName"
              :value="item.goodsState1Name"
              label="货物商品分类"
              required
              placeholder="请选择货物商品分类"
              readonly
              clickable
              :rules="[
                {
                  required: true,
                  message: '请选择货物商品分类',
                  trigger: 'onChange'
                }
              ]"
              @click="showclick(item)"
            />
            <van-popup v-model="item.showGoods1Picker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  goodsState1List1.map(res => {
                    return res.text;
                  })
                "
                @confirm="(value, index) => onGoods1Confirm(value, index, item)"
                @cancel="(value, index) => onGoods1Cancel(value, index, item)"
              />
              <div class="searchInput">
                <van-search
                  v-model="goodsName"
                  @input="goodsNameChange"
                  placeholder="请输入商品分类名称搜索"
                />
              </div>
            </van-popup>
            <van-field
              v-model="item.customs"
              label="报关单号(海关编号)"
              required
              placeholder="请输入报关单号"
              :rules="[{ required: true, message: '请输入报关单号' }]"
            />
            <van-field
              v-model="item.shipper"
              readonly
              label="货主名称"
              required
              clickable
              placeholder="请输入货主名称"
              :rules="[{ required: true, message: '请输入货主名称' }]"
            >
              <template #button>
                <van-button
                  size="small"
                  @click="item.showShipperPicker = true"
                  type="primary"
                  native-type="button"
                  >选择货主名称</van-button
                >
              </template>
            </van-field>
            <van-popup v-model="item.showShipperPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  shipperList1.map(res => {
                    return res.orgName;
                  })
                "
                @confirm="
                  (value, index) => onShipperConfirm(value, index, item)
                "
                @cancel="(value, index) => onShipperCancel(value, index, item)"
              />
              <div class="searchInput">
                <van-search
                  v-model="shipperName"
                  @input="shipperNameChange"
                  placeholder="请输入货主名称搜索"
                />
              </div>
            </van-popup>
            <van-field
              v-model="item.credit"
              label="统一社会信用代码"
              readonly
              required
              clickable
              placeholder="请输入统一社会信用代码"
              :rules="[{ required: true, message: '请输入统一社会信用代码' }]"
            >
              <template #button>
                <van-button
                  size="small"
                  @click="item.showShipper1Picker = true"
                  type="primary"
                  native-type="button"
                  >选择信用代码</van-button
                >
              </template>
            </van-field>
            <van-popup v-model="item.showShipper1Picker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  shipperList2.map(res => {
                    return res.orgRegno;
                  })
                "
                @confirm="
                  (value, index) => onShipper1Confirm(value, index, item)
                "
                @cancel="(value, index) => onShipper1Cancel(value, index, item)"
              />
              <div class="searchInput">
                <van-search
                  v-model="shipperRegno"
                  @input="shipperRegnoChange"
                  placeholder="请输入统一社会信用代码搜索"
                />
              </div>
            </van-popup>
            <van-field
              v-model="item.certno"
              label="检验检疫证编号"
              required
              placeholder="请输入检验检疫证编号"
              :rules="[{ required: true, message: '请输入检验检疫证编号' }]"
            />
            <van-field
              v-model="item.entryDate"
              label="入境时间"
              required
              readonly
              placeholder="请选择入境时间"
              :rules="[{ required: true, message: '请选择入境时间' }]"
              @click="item.showentryDatePicker = true"
            />
            <van-popup v-model="item.showentryDatePicker" position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择入境时间"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="value => onDateConfirm(value, item)"
                @cancel="item.showentryDatePicker = false"
              />
            </van-popup>
            <van-field
              :value="item.portentryName"
              label="入境口岸"
              required
              placeholder="请选择入境口岸"
              readonly
              clickable
              :rules="[
                {
                  required: true,
                  message: '请选择入境口岸',
                  trigger: 'onChange'
                }
              ]"
              @click="item.showportentryPicker = true"
            />
            <van-popup v-model="item.showportentryPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  portentryList1.map(item => {
                    return item.text;
                  })
                "
                @confirm="
                  (value, index) => onPortentryConfirm(value, index, item)
                "
                @cancel="(value, index) => portentryCancel(value, index, item)"
              />
              <div class="searchInput">
                <van-search
                  v-model="shopsName"
                  @input="shopsNameChange"
                  placeholder="请输入口岸名称搜索"
                />
              </div>
            </van-popup>
            <van-field
              :value="item.sourceTypeName"
              label="食品来源"
              required
              readonly
              clickable
              placeholder="请选择食品来源"
              :rules="[
                {
                  required: true,
                  message: '请选择食品来源',
                  trigger: 'onChange'
                }
              ]"
              @click="item.showSourcePicker = true"
            />
            <van-popup v-model="item.showSourcePicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  sourceList.map(item => {
                    return item.text;
                  })
                "
                @confirm="(value, index) => onSourceConfirm(value, index, item)"
                @cancel="item.showSourcePicker = false"
              />
            </van-popup>
            <van-field
              v-model="item.container"
              label="集装箱号"
              required
              placeholder="请输入集装箱号"
              :rules="[{ required: true, message: '请输入集装箱号' }]"
            />
            <van-field
              v-model="item.goodsName"
              label="商品名称"
              required
              placeholder="请输入商品名称"
              :rules="[{ required: true, message: '请输入商品名称' }]"
            />
            <van-field
              v-model="item.consigner"
              label="发货人"
              required
              placeholder="请输入发货人"
              :rules="[{ required: true, message: '请输入发货人' }]"
            />
            <van-field
              v-model="item.tradeWeight"
              label="报关单重量(KG)"
              type="digit"
              required
              placeholder="请输入报关单重量"
              :rules="[{ required: true, message: '请输入报关单重量' }]"
            />
            <van-field
              v-model="item.weight"
              label="入库重量(KG)"
              type="number"
              required
              placeholder="请输入入库重量"
              :rules="[{ required: true, message: '请输入入库重量' }]"
            />
            <van-field
              v-model="item.number"
              label="件数"
              type="number"
              required
              placeholder="请输入件数"
              :rules="[{ required: true, message: '请输入件数' }]"
            />
            <van-field
              v-model="item.specification"
              label="包装规格（千克/件）"
              type="number"
              required
              placeholder="请输入包装规格（千克/件）"
              :rules="[
                { required: true, message: '请输入包装规格（千克/件）' }
              ]"
            />
            <van-field
              v-model="item.register"
              label="注册号"
              required
              placeholder="请输入注册号"
              :rules="[{ required: true, message: '请输入注册号' }]"
            />
            <van-field
              v-model="item.placeOrigin"
              label="原产地"
              required
              readonly
              clickable
              placeholder="请输入原产地"
              :rules="[{ required: true, message: '请输入原产地' }]"
              @click="item.showplaceOriginPicker = true"
            />
            <van-popup v-model="item.showplaceOriginPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  placeOriginList1.map(item => {
                    return item.text;
                  })
                "
                @confirm="
                  (value, index) => onPlaceOriginConfirm(value, index, item)
                "
                @cancel="
                  (value, index) => onPlaceOriginCancel(value, index, item)
                "
              />
              <div class="searchInput">
                <van-search
                  v-model="placeName"
                  @input="placeNameChange"
                  placeholder="请输入口岸名称搜索"
                />
              </div>
            </van-popup>
            <van-field
              v-model="item.productionTime"
              label="生产日期"
              required
              readonly
              placeholder="请选择生产日期"
              :rules="[{ required: true, message: '请选择生产日期' }]"
              @click="item.showcurrentDatePicker = true"
            />
            <van-popup v-model="item.showcurrentDatePicker" position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择生产日期"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="value => oncurrentDateConfirm(value, item)"
                @cancel="item.showcurrentDatePicker = false"
              />
            </van-popup>
            <van-field
              v-model="item.verifyMonth"
              label="保质期(月)"
              type="number"
              required
              placeholder="请输入保质期(月)"
              :rules="[{ required: true, message: '请输入保质期(月)' }]"
            />
            <van-field
              v-model="item.productionNumber"
              label="生产批号"
              required
              placeholder="请输入生产批号"
              :rules="[{ required: true, message: '请输入生产批号' }]"
            />
            <van-field
              :value="item.goodsFlowRegionName"
              label="商品流向地区"
              required
              readonly
              clickable
              placeholder="请选择商品流向地区"
              :rules="[
                {
                  required: true,
                  message: '请选择商品流向地区',
                  trigger: 'onChange'
                }
              ]"
              @click="item.showAreaPicker = true"
            />
            <van-popup v-model="item.showAreaPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  areaList.map(item => {
                    return item.text;
                  })
                "
                @confirm="(value, index) => onAreaConfirm(value, index, item)"
                @cancel="item.showAreaPicker = false"
              />
            </van-popup>
            <van-field
              v-model="item.goodsFlowAddress"
              label="商品流向(详细地址)"
              required
              placeholder="请输入商品流向(详细地址)"
              :rules="[{ required: true, message: '请输入商品流向(详细地址)' }]"
            />
            <van-field
              :value="item.operateName"
              label="企业经营类型"
              required
              placeholder="请选择企业经营类型"
              readonly
              clickable
              :rules="[
                {
                  required: true,
                  message: '请选择企业经营类型',
                  trigger: 'onChange'
                }
              ]"
              @click="item.showOpPicker = true"
            />
            <van-popup v-model="item.showOpPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="
                  operateList.map(item => {
                    return item.name;
                  })
                "
                @confirm="(value, index) => onOpConfirm(value, index, item)"
                @cancel="item.showOpPicker = false"
              />
            </van-popup>
          </div>
          <div class="imginfo">
            <div class="title">
              <div class="icon"></div>
              <p>上传清晰照片</p>
            </div>
            <van-field label="报关单照片" required>
              <template #input>
                <van-uploader
                  :after-read="afterRead"
                  v-model="item.bill"
                  max-count="1"
                />
              </template>
            </van-field>
            <van-field label="货物清单照片" required>
              <template #input>
                <van-uploader
                  :after-read="afterRead"
                  v-model="item.inventory"
                  max-count="1"
                />
              </template>
            </van-field>
            <van-field label="检疫证照片" required>
              <template #input>
                <van-uploader
                  :after-read="afterRead"
                  v-model="item.certificate"
                  max-count="1"
                />
              </template>
            </van-field>
          </div>
        </div>
      </van-form>
      <van-button class="addgoods" block @click="addgoods"
        >新增商品信息</van-button
      >
      <div class="ordertime">
        <div class="title">
          <div class="icon"></div>
          <p>预约入库时间</p>
        </div>
        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="item in timeList"
            :title="item.title"
            :key="item.name"
            :name="item.name"
          >
            <div class="content">
              <div
                class="cell"
                v-for="time in item.children"
                :key="time.label"
                @click="selectTime(item, time)"
              >
                <div class="font">
                  <div class="dot"></div>
                  <p>{{ time.label }}</p>
                </div>
                <img
                  v-if="time.check"
                  src="@/assets/coldfood/checked_icon.png"
                  alt=""
                />
                <img v-else src="@/assets/coldfood/uncheck_icon.png" alt="" />
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div style="height: 20px"></div>
    </div>
    <van-button class="submit" block @click="send">提交</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Form,
  Field,
  Button,
  Popup,
  Picker,
  Uploader,
  Icon,
  Collapse,
  CollapseItem,
  Radio,
  DatetimePicker,
  Search
} from "vant";
// import NavHeader from "@/components/NavHeader";
import {
  uploadFile,
  report,
  detail,
  update,
  getAddress,
  getOperate,
  getArea,
  getProductTypeDict,
  getHSCodeDict,
  getCompanyInfo,
  getPortEntryDict,
  getCountryDict
} from "@/api/coldfood";
import { getDays } from "@/utils/utils";
import { phoneReg } from "@/utils/constant";

Vue.use(Form)
  .use(Field)
  .use(Popup)
  .use(Picker)
  .use(Button)
  .use(Icon)
  .use(Radio)
  .use(Uploader)
  .use(Collapse)
  .use(CollapseItem)
  .use(DatetimePicker)
  .use(Search);

let goodsId = 1;

export default {
  components: {
    // NavHeader
  },
  data() {
    return {
      userInfo: {},
      driverCode: null,
      chainCode: null,
      activeNames: [],
      phoneReg,
      form: {
        name: "", // 联系人姓名
        phone: "", // 手机号码
        name1: "", // 联系人姓名
        phone1: "", // 手机号码
        carNumber: "", // 车牌号
        driverName: "", // 司机姓名
        driverPhone: "", // 司机联系方式
        address: "", // 仓库名
        addressCode: "", // 仓库编号
        goods: [
          {
            id: goodsId,
            customs: "", // 报关单号(海关编号)
            shipper: "", // 货主名称
            credit: "", // 统一社会信用代码
            tradeOrgid: "", // 企业编号
            certno: "", // 检验检疫证编号
            entryDate: "", // 入境时间
            portentryName: "", // 入境口岸名称
            portentryCode: "", //入境口岸ID
            sourceType: "", // 食品来源，传给后端
            sourceTypeName: "", // 食品来源，前端名称
            container: "", // 集装箱
            goodsName: "", // 商品名称
            consigner: "", // 发货人
            tradeWeight: "", // 报关单重量(千克)
            weight: "", // 入库重量
            number: "", // 件数
            specification: "", //包装规格（千克/件）
            register: "", // 注册号
            placeOrigin: "", // 原产地名称
            countryOfOriginCode: "", //原产地Id
            productionTime: "", // 生产日期
            verifyMonth: "", // 保质期
            productionNumber: "", // 生产批号
            goodsState: "", // 货物商品类型Id，传给后端
            goodsStateName: "", // 货物商品类型，前端名称
            goodsState1: "", //货物商品分类，传给后端
            goodsState1Name: "", //货物商品分类，前端名称
            goodsFlowRegion: "", // 商品流向地区code
            goodsFlowRegionName: "", // 商品流向地区
            goodsFlowAddress: "", // 商品流向(详细地址)
            operateName: "", // 企业经营类型
            operateCode: "", // 企业经营类型
            bill: [], //报关单照片
            inventory: [], // 货物清单照片
            certificate: [], // 检疫证照片
            showOpPicker: false,
            showAreaPicker: false,
            showGoodsPicker: false,
            showGoods1Picker: false,
            showShipperPicker: false,
            showShipper1Picker: false,
            showentryDatePicker: false,
            showcurrentDatePicker: false,
            showportentryPicker: false,
            showplaceOriginPicker: false,
            showSourcePicker: false
          }
        ],
        determineTime: "", // 预约入库时间
        health: [], // 苏康码
        nuclein: [], //核算报告
        license: [], // 营业执照
        permit: [] // 许可证
      },
      showPicker: false,
      timeList: [], // 时间列表
      addressList: [], // 仓库列表
      operateList: [], // 经营类型列表
      areaList: [], // 地区列表
      goodsStateList: [], //货物商品类型
      goodsState1List: [], // 货物商品分类
      goodsState1List1: [],
      shipperList: [], // 企业信息
      shipperList1: [],
      shipperList2: [],
      portentryList: [], //入境口岸列表
      portentryList1: [],
      placeOriginList: [], //原产地列表
      placeOriginList1: [],
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(), // 入境时间 生产日期
      goodsName: "", // 货物商品分类模糊搜索
      shipperName: "", // 货主名称模糊搜索
      shipperRegno: "", // 统一社会信用代码模糊搜索
      shopsName: "", // 入境口岸模糊搜索
      placeName: "", // 原产地模糊搜索
      sourceList: [{ text: "口岸", value: "port" }] // 食品来源列表
    };
  },
  methods: {
    //货物商品分类选择框进行搜索
    goodsNameChange: function(val) {
      if (this.searcheTimer) {
        clearTimeout(this.searcheTimer);
        this.searcheTimer = null;
      }
      this.searcheTimer = setTimeout(() => {
        this.searchGoods(val.trim());
      }, 500);
    },
    searchGoods(val) {
      if (!val) {
        this.goodsState1List1 = this.goodsState1List;
      } else {
        this.goodsState1List1 = this.goodsState1List.filter(item => {
          return item.text.indexOf(val) !== -1;
        });
      }
    },
    // 货主名称选择框进行搜索
    shipperNameChange: function(val) {
      if (this.searcheTimer) {
        clearTimeout(this.searcheTimer);
        this.searcheTimer = null;
      }
      this.searcheTimer = setTimeout(() => {
        this.shipperNamesearch(val.trim());
      }, 500);
    },
    shipperNamesearch(val) {
      if (!val) {
        this.shipperList1 = this.shipperList;
      } else {
        this.shipperList1 = this.shipperList.filter(item => {
          return item.orgName.indexOf(val) !== -1;
        });
      }
    },
    // 统一社会信用代码选择框进行搜索
    shipperRegnoChange: function(val) {
      if (this.searcheTimer) {
        clearTimeout(this.searcheTimer);
        this.searcheTimer = null;
      }
      this.searcheTimer = setTimeout(() => {
        this.shipperRegnosearch(val.trim());
      }, 500);
    },
    shipperRegnosearch(val) {
      if (!val) {
        this.shipperList2 = this.shipperList;
      } else {
        this.shipperList2 = this.shipperList.filter(item => {
          return item.orgRegno.indexOf(val) !== -1;
        });
      }
    },
    // 入境口岸选择框进行搜索
    shopsNameChange: function(val) {
      if (this.searcheTimer) {
        clearTimeout(this.searcheTimer);
        this.searcheTimer = null;
      }
      this.searcheTimer = setTimeout(() => {
        this.search(val.trim());
      }, 500);
    },
    search(val) {
      if (!val) {
        this.portentryList1 = this.portentryList;
      } else {
        this.portentryList1 = this.portentryList.filter(item => {
          return item.text.indexOf(val) !== -1;
        });
      }
    },
    // 原产地选择框进行搜索
    placeNameChange: function(val) {
      if (this.searcheTimer) {
        clearTimeout(this.searcheTimer);
        this.searcheTimer = null;
      }
      this.searcheTimer = setTimeout(() => {
        this.searchplaceName(val.trim());
      }, 500);
    },
    searchplaceName(val) {
      if (!val) {
        this.placeOriginList1 = this.placeOriginList;
      } else {
        this.placeOriginList1 = this.placeOriginList.filter(item => {
          return item.text.indexOf(val) !== -1;
        });
      }
    },
    send() {
      this.$refs.goodsForm.submit();
    },
    onSubmit() {
      const { driverCode, chainCode, form } = this;
      if (!form.determineTime) {
        this.$toast("请选择预约时间");
        return;
      }
      let phototFlag = true;
      // 预约申请所需要的照片校验
      if (
        form.health.length <= 0 ||
        form.nuclein.length <= 0 ||
        form.license.length <= 0 ||
        form.permit.length <= 0
      ) {
        this.$toast("请上传必要的清晰图片");
        phototFlag = false;
        return;
      }
      // 商品中需要照片校验
      form.goods.map(item => {
        if (
          item.bill.length <= 0 ||
          item.inventory.length <= 0 ||
          item.certificate.length <= 0
        ) {
          this.$toast("请上传必要的清晰图片");
          phototFlag = false;
          return;
        }
      });
      //入库重量不得大于报关单重量
      form.goods.map(item => {
        if (Number(item.tradeWeight) < Number(item.weight)) {
          this.$toast("入库重量不得大于报关单重量");
          phototFlag = false;
          return;
        }
      });
      if (phototFlag) {
        let params = {
          appId: 1234,
          userId: this.userInfo.userId,
          carNumber: form.carNumber,
          determineTime: form.determineTime,
          addressCode: form.addressCode,
          driverName: form.driverName,
          driverPhone: form.driverPhone,
          name: form.name,
          phone: form.phone,
          goods: form.goods.map(item => {
            return {
              appId: 1234,
              container: item.container,
              shipper: item.shipper,
              credit: item.credit,
              tradeOrgId: item.tradeOrgid,
              certNo: item.certno,
              customs: item.customs,
              entryDate: item.entryDate,
              portEntryCode: item.portentryCode,
              portEntryName: item.portentryName,
              sourceType: item.sourceType,
              goodsState: item.goodsState,
              goodsFlowAddress: item.goodsFlowAddress,
              goodsFlowRegion: item.goodsFlowRegion,
              goodsName: item.goodsName,
              hsCode: item.goodsState1,
              hsName: item.goodsState1Name,
              consigner: item.consigner,
              tradeWeight: item.tradeWeight,
              number: item.number,
              specification: item.specification,
              placeOrigin: item.placeOrigin,
              countryOriginCode: item.countryOfOriginCode,
              productionNumber: item.productionNumber,
              productionTime: item.productionTime,
              verifyMonth: item.verifyMonth,
              register: item.register,
              weight: item.weight,
              operateCode: item.operateCode,
              pictureList: [
                {
                  pictureType: 1, // 报关单
                  picture: item.bill[0].url
                },
                {
                  pictureType: 2, // 货物清单
                  picture: item.inventory[0].url
                },
                {
                  pictureType: 3, // 检疫证
                  picture: item.certificate[0].url
                }
              ]
            };
          }),
          picture: [
            {
              pictureType: 4, // 4苏康码
              picture: form.health[0].url
            },
            {
              pictureType: 7, //核算报告
              picture: form.nuclein[0].url
            },
            {
              pictureType: 5, // 5营业执照
              picture: form.license[0].url
            },
            {
              pictureType: 6, // 6食品营业许可证
              picture: form.permit[0].url
            }
          ]
        };
        console.log(params);
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "申报提交中..."
        });
        if (driverCode) {
          params.chainCode = chainCode;
          params.driverCode = driverCode;
          update(params).then(() => {
            this.$toast.success(
              "您的申报信息已更改，申报结果可在我的预约中进行查看。"
            );
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          });
        } else {
          report(params).then(() => {
            this.$toast.success(
              "您的申报信息已受理，申报结果可在我的预约中进行查看。"
            );
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          });
        }
      }
    },
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      let params = {
        appId: 1234,
        driverCode: this.driverCode
      };
      detail(params).then(res => {
        this.$toast.clear();
        let determineTime = res.data.determineTime;
        let date = determineTime.slice(0, 10);
        let time = determineTime.slice(11);
        let flag = false;
        this.timeList.map(item => {
          if (item.title === date) {
            this.activeNames = [item.name];
            item.children.map(child => {
              if (child.label === time) {
                child.check = true;
                flag = true;
              }
            });
          }
        });
        if (!flag) determineTime = "";
        this.chainCode = res.data.chainCode;
        this.form = {
          name: res.data.name,
          phone: res.data.phone,
          name1: res.data.name.substring(0,1)+(res.data.name.length == 2 ? '*' : '**'),
          phone1: res.data.phone.substring(0,3)+'****'+res.data.phone.substring(7,12),
          carNumber: res.data.carNumber,
          driverName: res.data.driverName,
          driverPhone: res.data.driverPhone,
          determineTime: determineTime,
          address: res.data.address,
          addressCode: res.data.addressCode,
          goods: res.data.goods.map(item => {
            return {
              id: item.code,
              showOpPicker: false,
              showAreaPicker: false,
              showGoodsPicker: false,
              showGoods1Picker: false,
              showShipperPicker: false,
              showShipper1Picker: false,
              showentryDatePicker: false,
              showcurrentDatePicker: false,
              showportentryPicker: false,
              showplaceOriginPicker: false,
              showSourcePicker: false,
              customs: item.customs,
              shipper: item.shipper,
              credit: item.credit,
              tradeOrgid: item.tradeOrgId,
              certno: item.certNo,
              entryDate: item.entryDate,
              portentryName: item.portEntryName,
              portentryCode: item.portEntryCode,
              sourceType: item.sourceType,
              sourceTypeName: item.sourceType ? this.sourceList[0].text : "",
              container: item.container,
              goodsName: item.goodsName,
              consigner: item.consigner,
              tradeWeight: item.tradeWeight,
              weight: item.weight,
              number: item.number,
              specification: item.specification,
              register: item.register,
              placeOrigin: item.placeOrigin,
              countryOfOriginCode: item.countryOriginCode,
              productionTime: item.productionTime,
              verifyMonth: item.verifyMonth,
              productionNumber: item.productionNumber,
              goodsFlowRegion: item.areaId,
              goodsFlowRegionName: item.goodsFlowRegion,
              goodsFlowAddress: item.goodsFlowAddress,
              operateName: item.operateName,
              operateCode: item.operateCode,
              goodsState: item.goodsState,
              goodsStateName: item.goodsStateName,
              goodsState1: item.hsCode,
              goodsState1Name: item.hsName,
              bill: item.pictureList
                .filter(item => {
                  return item.pictureType === 1;
                })
                .map(item => {
                  item.url = item.picture;
                  return item;
                }),
              inventory: item.pictureList
                .filter(item => {
                  return item.pictureType === 2;
                })
                .map(item => {
                  item.url = item.picture;
                  return item;
                }),
              certificate: item.pictureList
                .filter(item => {
                  return item.pictureType === 3;
                })
                .map(item => {
                  item.url = item.picture;
                  return item;
                })
            };
          }),
          health: res.data.picture
            .filter(item => {
              return item.pictureType === 4;
            })
            .map(item => {
              item.url = item.picture;
              return item;
            }), // 苏康码
          nuclein: res.data.picture
            .filter(item => {
              return item.pictureType === 7;
            })
            .map(item => {
              item.url = item.picture;
              return item;
            }), //核算报告
          license: res.data.picture
            .filter(item => {
              return item.pictureType === 5;
            })
            .map(item => {
              item.url = item.picture;
              return item;
            }), // 营业执照
          permit: res.data.picture
            .filter(item => {
              return item.pictureType === 6;
            })
            .map(item => {
              item.url = item.picture;
              return item;
            }) // 许可证
        };
      });
    },
    addgoods() {
      if (this.form.goods.length < 10) {
        this.form.goods.push({
          id: goodsId + 1,
          customs: "", // 报关单号(海关编号)
          shipper: "", // 货主名称
          credit: "", // 统一社会信用代码
          tradeOrgid: "", // 企业编号
          certno: "", // 检验检疫证编号
          entryDate: "", // 入境时间
          portentryName: "", // 入境口岸名称
          portentryCode: "", //入境口岸ID
          sourceType: "", // 食品来源，传给后端
          sourceTypeName: "", // 食品来源，前端名称
          container: "", // 集装箱
          goodsName: "", // 商品名称
          consigner: "", // 发货人
          tradeWeight: "", // 报关单重量(千克)
          weight: "", // 入库重量
          number: "", // 件数
          specification: "", //包装规格（千克/件）
          register: "", // 注册号
          placeOrigin: "", // 原产地名称
          countryOfOriginCode: "", //原产地Id
          productionTime: "", // 生产日期
          verifyMonth: "", // 保质期
          productionNumber: "", // 生产批号
          goodsState: "", // 货物商品类型Id，传给后端
          goodsStateName: "", // 货物商品类型，前端名称
          goodsState1: "", //货物商品分类，传给后端
          goodsState1Name: "", //货物商品分类，前端名称
          goodsFlowRegion: "", // 商品流向地区code
          goodsFlowRegionName: "", // 商品流向地区
          goodsFlowAddress: "", // 商品流向(详细地址)
          operateName: "", // 企业经营类型
          operateCode: "", // 企业经营类型
          bill: [], //报关单照片
          inventory: [], // 货物清单照片
          certificate: [], // 检疫证照片
          showOpPicker: false,
          showAreaPicker: false,
          showGoodsPicker: false,
          showGoods1Picker: false,
          showShipperPicker: false,
          showShipper1Picker: false,
          showentryDatePicker: false,
          showcurrentDatePicker: false,
          showportentryPicker: false,
          showplaceOriginPicker: false,
          showSourcePicker: false
        });
        goodsId = goodsId + 1;  
      } else {
        this.$toast("每批最多上传十条商品信息，请分批次上传");
      }
    },
    delegoods(id) {
      this.form.goods = this.form.goods.filter(item => {
        return item.id !== id;
      });
    },
    selectTime(date, time) {
      if (time.check) {
        time.check = !time.check;
        this.form.determineTime = "";
      } else {
        this.timeList.map(item => {
          item.children.map(time => {
            time.check = false;
          });
        });
        time.check = !time.check;
        this.form.determineTime = `${date.title} ${time.label}`;
      }
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData();
      param.append("file", file.file);
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传图片中..."
      });
      uploadFile(param)
        .then(res => {
          this.$toast.clear();
          file.status = "done";
          file.message = "上传成功";
          file.url = res.data;
        })
        .catch(err => {
          console.log(err);
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    initOperateCode() {
      getOperate({ appId: 1234 }).then(res => {
        this.operateList = res.data;
      });
    },
    onOpConfirm(value, index, item) {
      item.operateName = value;
      item.operateCode = this.operateList[index].code;
      item.showOpPicker = false;
    },
    initDetermineTime() {
      let arr = getDays(5);
      this.timeList = arr.map((item, index) => {
        return {
          title: item,
          name: index + 1,
          children: [
            {
              label: "09:00-12:00",
              check: false
            },
            {
              label: "13:00-16:00",
              check: false
            }
            // {
            //   label: "16:00-20:00",
            //   check: false,
            // },
          ]
        };
      });
    },
    initAddressList() {
      getAddress({ appId: 1234 }).then(res => {
        this.addressList = res.data;
      });
    },
    initArea() {
      getArea({ type: 2 }).then(res => {
        // console.log(res);
        this.areaList = res;
      });
    },
    initGoodsstate() {
      getProductTypeDict().then(res => {
        // console.log('货物商品类型-----',res);
        this.goodsStateList = res.data;
      });
    },
    initGoods1state(val) {
      if (val) {
        getHSCodeDict({ productType: val }).then(res => {
          // console.log('货物商品分类-----',res);
          this.goodsState1List = res.data;
          this.goodsState1List1 = res.data;
        });
      }
    },
    initShipper() {
      getCompanyInfo().then(res => {
        console.log("企业信息--------", res);
        this.shipperList = res.data;
        this.shipperList1 = res.data;
        this.shipperList2 = res.data;
      });
    },
    initPortentry() {
      getPortEntryDict().then(res => {
        // console.log('入境口岸------',res);
        this.portentryList = res.data;
        this.portentryList1 = res.data;
      });
    },
    initPlaceOrigin() {
      getCountryDict().then(res => {
        console.log("原产地-------", res);
        this.placeOriginList = res.data;
        this.placeOriginList1 = res.data;
      });
    },
    onConfirm(value, index) {
      this.form.address = value;
      this.form.addressCode = this.addressList[index].code;
      this.showPicker = false;
    },
    showclick(item) {
      item.showGoods1Picker = true;
      this.initGoods1state(item.goodsState);
    },
    onAreaConfirm(value, index, item) {
      item.goodsFlowRegionName = value;
      item.goodsFlowRegion = this.areaList[index].value;
      item.showAreaPicker = false;
    },
    onShipperConfirm(value, index, item) {
      item.shipper = value;
      item.credit = this.shipperList1[index].orgRegno;
      item.tradeOrgid = this.shipperList1[index].id;
      item.showShipperPicker = false;
      this.shipperName = "";
      this.shipperRegno = "";
    },
    onShipperCancel(value, index, item) {
      item.showShipperPicker = false;
      this.shipperName = "";
      this.shipperRegno = "";
    },
    onShipper1Confirm(value, index, item) {
      item.credit = value;
      item.shipper = this.shipperList2[index].orgName;
      item.tradeOrgid = this.shipperList2[index].id;
      item.showShipper1Picker = false;
      this.shipperRegno = "";
      this.shipperName = "";
    },
    onShipper1Cancel(value, index, item) {
      item.showShipper1Picker = false;
      this.shipperRegno = "";
      this.shipperName = "";
    },
    onGoodsConfirm(value, index, item) {
      item.goodsStateName = value;
      item.goodsState = this.goodsStateList[index].value;
      item.showGoodsPicker = false;
      this.initGoods1state(item.goodsState);
    },
    onGoods1Confirm(value, index, item) {
      item.goodsState1Name = value;
      item.goodsState1 = this.goodsState1List1[index].value;
      item.showGoods1Picker = false;
      this.goodsName = "";
    },
    onGoods1Cancel(value, index, item) {
      item.showGoods1Picker = false;
      this.goodsName = "";
    },
    onDateConfirm(value, item) {
      item.entryDate =
        value.getFullYear() +
        "-" +
        (value.getMonth() + 1 > 9
          ? value.getMonth() + 1
          : "0" + (value.getMonth() + 1)) +
        "-" +
        (value.getDate() > 9 ? value.getDate() : "0" + value.getDate());
      item.showentryDatePicker = false;
    },
    oncurrentDateConfirm(value, item) {
      item.productionTime =
        value.getFullYear() +
        "-" +
        (value.getMonth() + 1 > 9
          ? value.getMonth() + 1
          : "0" + (value.getMonth() + 1)) +
        "-" +
        (value.getDate() > 9 ? value.getDate() : "0" + value.getDate());
      item.showcurrentDatePicker = false;
    },
    onPortentryConfirm(value, index, item) {
      item.portentryName = value;
      item.portentryCode = this.portentryList1[index].value;
      item.showportentryPicker = false;
      this.shopsName = "";
    },
    portentryCancel(value, index, item) {
      item.showportentryPicker = false;
      this.shopsName = "";
    },
    onPlaceOriginConfirm(value, index, item) {
      item.placeOrigin = value;
      item.countryOfOriginCode = this.placeOriginList1[index].value;
      item.showplaceOriginPicker = false;
      this.placeName = "";
    },
    onPlaceOriginCancel(value, index, item) {
      item.showplaceOriginPicker = false;
      this.placeName = "";
    },
    onSourceConfirm(value, index, item) {
      item.sourceTypeName = value;
      item.sourceType = this.sourceList[index].value;
      item.showSourcePicker = false;
    }
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    this.form.name = this.userInfo.realName;
    this.form.phone = this.userInfo.mobileNo;
    this.form.name1 = this.userInfo.realName.substring(0,1)+(this.userInfo.realName.length == 2 ? '*' : '**');
    this.form.phone1 = this.userInfo.mobileNo.substring(0,3)+'****'+this.userInfo.mobileNo.substring(7,12);
    this.initDetermineTime();
    this.initAddressList();
    this.initOperateCode();
    this.initArea();
    this.initPortentry();
    this.initPlaceOrigin();
    this.initGoodsstate();
    this.initShipper();
    this.driverCode = this.$route.query.code;
    if (this.driverCode) {
      this.init();
    }
  }
};
</script>

<style lang="stylus">
.report {
  .searchInput {
    position: absolute;
    top: 2rem;
    z-index: 999;
    width: 100%;
  }

  .main {
    height: calc(100vh - 90px);
    overflow-y: auto;

    .van-cell {
      border-bottom: 1px solid #eee;
    }

    .van-uploader__upload {
      border: 1px solid #eee;
    }

    .title {
      position: relative;
      height: 80px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #eee;

      .icon {
        width: 6px;
        height: 32px;
        background: #EB4E3F;
      }

      p {
        margin-left: 10px;
        font-size: 32px;
        font-weight: 600;
        color: #333333;

        span {
          font-size: 28px;
          font-weight: 400;
          color: #333333;
        }
      }

      .delete_icon {
        position: absolute;
        right: 20px;
        line-height: 80px;
        color: #EB4E3F;
      }
    }

    .carInfo {
      margin-top: 20px;
    }

    .goodInfo {
      .info {
        margin-top: 20px;
      }

      .imginfo {
        margin-top: 20px;
      }
    }

    .addgoods {
      width: 690px;
      height: 80px;
      margin: 30px;
      background: #EB4E3F;
      border-radius: 40px;
      font-size: 36px;
      font-weight: 500;
      color: #FFFFFF;
    }

    .ordertime {
      .content {
        width: 100%;
        height: 210px;
        background: #F3F6F9;

        .cell {
          padding: 0 30px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .font {
            display: flex;
            align-items: center;

            .dot {
              width: 10px;
              height: 10px;
              background: #EB4E3F;
              border-radius: 5px;
            }

            p {
              margin-left: 20px;
              font-size: 28px;
              font-weight: 400;
              color: #333333;
            }
          }

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }
  }

  .submit {
    width: 100%;
    height: 90px;
    background: #EB4E3F;
    font-size: 36px;
    font-weight: 500;
    color: #FFFFFF;
  }
}
</style>
