<template>
  <div>
    <el-form ref="cusDeclarationForm" :rules="rules" :model="cusDeclaration" label-width="120px">
      <el-form-item label="单证要求">我司全代 <el-button type="primary" style="margin-left:10px;" @click="downloadVGM">VGM声明</el-button>
      </el-form-item>
      <el-form-item label="柜重" prop="cabinetWeight">
        <el-input v-model="cusDeclaration.cabinetWeight" placeholder="请输入柜重" clearable />
      </el-form-item>
      <el-form-item label="货重" prop="cargoWeight">
        <el-input v-model="cusDeclaration.cargoWeight" placeholder="请输入货重" clearable />
      </el-form-item>
      <el-form-item label="VGM重量（柜重+货重）">
        <el-input v-model="cusDeclaration.vgmWeight" placeholder="请输入VGM重量" clearable />
      </el-form-item>
      <el-form-item label="报关方式" prop="method">
        <el-select v-model="cusDeclaration.method" placeholder="请选择报关方式">
          <el-option v-for="item in methods" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="正常报关订单">
      </el-form-item>
      <el-form-item label="报关公司名称">
        <el-select v-model="cusDeclaration.companyName" placeholder="请选择报关公司名称">
        </el-select>
      </el-form-item>
      <el-form-item label="截关时间">
        <el-date-picker type="date" placeholder="请选择日期" v-model="cusDeclaration.cutTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="cusDeclaration.status">
          <el-radio v-for="item in status" :key="item.value" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 查验 -->
      <div v-show="cusDeclaration.status === '3'">
        <el-form-item label="查验">
          <el-radio-group v-model="cusDeclaration.check">
            <el-radio v-for="item in checkItems" :key="item.value" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <!-- 退场 -->
      <div v-show="cusDeclaration.check === '1' || cusDeclaration.check === '2'">
        <el-form-item label="查验时间">
          <el-date-picker type="date" placeholder="请选择日期" v-model="cusDeclaration.checkTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="查验前图片">
          <el-upload action="" :limit="1" :file-list="cusDeclaration.checkFile">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="新封条">
          <el-input v-model="cusDeclaration.newSeal" placeholder="请输入新封条" clearable />
        </el-form-item>
      </div>

      <!-- 放行 -->
      <el-form-item label="放行时间" v-show="cusDeclaration.status === '2' || cusDeclaration.check === '2'">
        <el-date-picker type="date" placeholder="请选择日期" v-model="cusDeclaration.releaseTime"></el-date-picker>
      </el-form-item>

      <el-form-item label="装箱单">
        <el-button type="primary">下载装箱单</el-button>
      </el-form-item>
      <el-form-item label="报关单">
        <el-button type="primary">下载所有报关单</el-button>
      </el-form-item>

    </el-form>
    <el-row class="operate-button">
      <el-button type="primary">保存</el-button>
      <el-button type="success" @click="onSubmit">提交</el-button>
      <el-button @click="cancel">关闭</el-button>
      <el-button type="primary" @click="extraCost">额外费用</el-button>
    </el-row>

    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog customsClearance" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
      <el-row>
        <el-row>
          <el-form label-width="100px">
            <el-form-item label="订单号" class="two-element">
              <el-input v-model="orderNo" placeholder="请输入订单号" clearable />
              <el-button type="primary" icon="el-icon-search"></el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-table :data="[{}]">
            <el-table-column label="订单号" align="center" prop="selfNo" />
            <el-table-column label="报关费用" align="center" prop="orderFees">
              <template slot-scope="scope">
                <el-input v-model="scope.row.orderFees" placeholder="请输入内容" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="small">确定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="cost-title">
          <div>额外费用订单</div>
          <div>
            <el-button size="small">重置</el-button>
          </div>
        </el-row>
        <el-row>
          <el-table :data="[{}]">
            <el-table-column type="selection" width="55" />
            <el-table-column label="订单号" align="center" prop="selfNo" />
            <el-table-column label="报关费用" align="center" prop="customsFees">
              <template slot-scope="scope">
                <el-input v-model="scope.row.customsFees" placeholder="请输入内容" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="small">修改</el-button>
                <el-button size="small">重置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 报关
 */
export default {
  name: "cusDeclaration",
  data() {
    return {
      // 报关方式
      methods: [
        {
          value: "1",
          label: "整柜买单报关",
        },
        {
          value: "2",
          label: "整柜正常报关",
        },
        {
          value: "3",
          label: "买单报关+正常报关",
        },
      ],
      // 状态
      status: [
        {
          value: "1",
          label: "报关中",
        },
        {
          value: "2",
          label: "放行",
        },
        {
          value: "3",
          label: "查验",
        },
      ],
      // check
      checkItems: [
        {
          value: "1",
          label: "退场",
        },
        {
          value: "2",
          label: "部分退场",
        },
        {
          value: "3",
          label: "查验后放行",
        },
      ],
      // 报关对象
      cusDeclaration: {},
      // 校验
      rules: {
        cabinetWeight: [{ required: true, message: "必填", trigger: "change" }],
        cargoWeight: [{ required: true, message: "必填", trigger: "change" }],
        method: [{ required: true, message: "必填", trigger: "change" }],
      },
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
      },
      // 订单号
      orderNo: "",
    };
  },
  watch: {
    "cusDeclaration.status"(val) {
      if (val !== "3") {
        this.$set(this.cusDeclaration, "check", "");
      }
    },
  },
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs["cusDeclarationForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
        }
      });
    },
    /** 取消 */
    cancel() {
      this.$emit("closeDialog");
    },
    // 下载VGM
    downloadVGM() {
      window.open(
        "http://pdatest.groupage.cn//apivue/boxTrack/vgmExport?token=930b11a41d9ca06f306d157f336a5dcb&id=1752"
      );
    },
    // 额外费用
    extraCost() {
      this.$set(this.dialogConfig, "title", "自编号");
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
  },
};
</script>

<style lang="scss">
.customsClearance {
  .cost-title {
    display: flex;
    align-items: center;
    margin: 20px 0;
    border-left: 5px solid gray;
    > div:first-child {
      margin-left: 10px;
    }
    > div:last-child {
      flex: 1;
      text-align: right;
    }
  }
}
</style>
