<template>
  <el-dialog class="entryDialog classCUploadDialog" title="新增模拟回执管理" :visible.sync="outerVisible" :show-close="false"
    width="960px" :close-on-click-modal="false" :destroy-on-close="true" v-loading="loadings.dialogLoading"
    @close="close(false)">
    <div class="modelItem">
      <el-form class="fedexFormStyle" ref="formDataRef" :model="formData" label-position="top" size="small"
        :rules="rules">
        <el-row :gutter="5">
          <el-col :span="8">
            <Formitem label="回执类型" prop="receiptType" type="edit">
              <el-select type="text" id="inputInner-edit-receiptType" v-model="formData.receiptType" clearable
                filterable placeholder="" @change="receiptChange">
                <el-option v-for="item in receiptTypeList" :key="item.value" :label="item.itemChineseName"
                  :value="item.itemValue"></el-option>
              </el-select>
            </Formitem>
          </el-col>
          <!-- 订单回执=》 order === 提运单号 billNo/订单编号 orderNos/回执状态 receiptStatus -->
          <!-- 运单回执=》 waybill === 提运单号/物流运单编号 logisticsNos/回执状态 -->
          <!-- 清单总分单回执=》 totalScore === 提运单号/回执状态 -->
          <!-- 汇总回执=》 summaryApplication === 收发货人名称 summaryApplicationId/回执状态/电子口岸编号/汇总申请编号 sumNo -->

          <!-- 清单回执=》 list === 提运单号/物流运单编号/回执状态/电子口岸编号 preNo/清单编号 invtNo -->

          <template v-if="
            ['order', 'waybill', 'totalScore', 'list'].includes(
              formData.receiptType
            )
          ">
            <el-col :span="8">
              <Formitem label="提运单号" prop="billNo" type="edit">
                <el-input type="text" class="inputShadow" id="inputInner-edit-billNo" resize="none"
                  v-model="formData.billNo" clearable placeholder=""
                  :disabled="!!formData.orderNos || !!formData.logisticsNos" @blur="receiptXml"></el-input>
              </Formitem>
            </el-col>
          </template>
          <template v-if="['waybill', 'list'].includes(formData.receiptType)">
            <el-col :span="8" v-if="!formData.billNo">
              <Formitem prop="logisticsNos">
                <template #title>
                  <span>物流运单编号</span>
                  <span v-show="loadings.logisticsNosLoading" class="el-icon-loading"></span>
                </template>
                <FormTextareaInput :formData="formData" dataKey="logisticsNos" :curKey="Date.now()"
                  @formChange="formChange" />
              </Formitem>
            </el-col>
            <el-col :span="8" v-else>
              <Formitem label="物流运单编号" prop="logisticsNos">
                <el-input type="text" class="inputShadow" id="inputInner-edit-logisticsNos" resize="none"
                  v-model="formData.logisticsNos" clearable placeholder="" :disabled="true">
                </el-input>
              </Formitem>
            </el-col>
          </template>
          <template v-if="['order'].includes(formData.receiptType)">
            <el-col :span="8" v-if="!formData.billNo">
              <Formitem label="订单编号" prop="orderNos">
                <FormTextareaInput :formData="formData" dataKey="orderNos" :curKey="Date.now()"
                  @formChange="formChange" />
              </Formitem>
            </el-col>
            <el-col :span="8" v-else>
              <Formitem label="订单编号" prop="orderNos">
                <el-input type="text" class="inputShadow" id="inputInner-edit-orderNos" resize="none"
                  v-model="formData.orderNos" clearable placeholder="" :disabled="true"></el-input>
              </Formitem>
            </el-col>
          </template>
          <el-col :span="24" v-if="['order', 'waybill', 'list'].includes(formData.receiptType)">
          </el-col>

          <!-- 收发货人名称 -->
          <template v-if="['summaryApplication'].includes(formData.receiptType)">
            <el-col :span="8">
              <Formitem label="收发货人名称" prop="summaryApplicationId" type="edit">
                <el-select type="text" id="inputInner-edit-summaryApplicationId" v-model="formData.summaryApplicationId"
                  clearable filterable placeholder="" @change="receiptXml">
                  <el-option v-for="item in summaryApplicationList" :key="item.id"
                    :label="`${item.ebcName}(${item.startTime}-${item.endTime})`" :value="item.id"></el-option>
                </el-select>
              </Formitem>
            </el-col>
          </template>
          <!-- <el-col :span="8">
            <Formitem label="物流运单编号" prop="logisticsNo" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-logisticsNo"
                resize="none"
                v-model="formData.logisticsNo"
                clearable
                placeholder=""
                @blur="handleOtherInfo"
              ></el-input>
            </Formitem>
          </el-col> -->
          <el-col :span="8">
            <Formitem label="回执状态" prop="receiptStatus" type="edit">
              <el-select type="text" id="inputInner-edit-receiptStatus" v-model="formData.receiptStatus" clearable
                filterable placeholder="" @change="receiptXml">
                <el-option v-for="item in receiptStatusList" :key="item.itemValue" :label="item.itemChineseName"
                  :value="item.itemValue"></el-option>
              </el-select>
            </Formitem>
          </el-col>

          <template v-if="
            ['list', 'summaryApplication'].includes(formData.receiptType) &&
            logisticsNoArray.length < 2 &&
            !formData.billNo
          ">
            <el-col :span="8">
              <Formitem label="电子口岸编号" prop="preNo" type="edit">
                <el-input type="text" class="inputShadow" id="inputInner-edit-preNo" resize="none"
                  v-model="formData.preNo" clearable placeholder="" @blur="receiptXml" maxlength="18"></el-input>
              </Formitem>
            </el-col>
          </template>

          <!-- 汇总申请编号 sumNo -->
          <template v-if="['summaryApplication'].includes(formData.receiptType)">
            <el-col :span="8">
              <Formitem label="汇总申请编号" prop="sumNo" type="edit">
                <el-input type="text" class="inputShadow" id="inputInner-edit-sumNo" resize="none"
                  v-model="formData.sumNo" clearable placeholder="" @blur="receiptXml"></el-input>
              </Formitem>
            </el-col>
          </template>

          <template v-if="
            ['list'].includes(formData.receiptType) &&
            logisticsNoArray.length < 2 &&
            !formData.billNo
          ">
            <el-col :span="8">
              <Formitem label="清单编号" prop="invtNo" type="edit">
                <el-input type="text" class="inputShadow" id="inputInner-edit-invtNo" resize="none"
                  v-model="formData.invtNo" clearable placeholder="" @blur="receiptXml" maxlength="20"></el-input>
              </Formitem>
            </el-col>
          </template>
        </el-row>
        <div style="color: #e6a23c; margin-bottom: 10px; font-size: 12px" v-if="formData.receiptType === 'order'">
          <i class="el-icon-info"></i>
          提运单号和订单编号只能填写一个，如果填写提运单号，提运单下所有的订单编号回执状态都将新增模拟回执，如果填写订单编号，将只对填写的订单修改回执状态
        </div>
        <div v-if="formData.receiptType === 'waybill'" style="color: #e6a23c; margin-bottom: 10px; font-size: 12px">
          <i class="el-icon-info"></i>
          提运单号和物流运单编号只能填写一个，如果填写提运单号，提运单下所有的物流运单编号回执状态都将改变，如果填写物流运单编号，将只对填写的物流运单编号修改回执状态
        </div>

        <el-row :gutter="5">
          <el-col :span="24">
            <div class="textarea-text">
              <div style="color: #777777; margin-bottom: 10px">回执文本</div>
              <el-input type="textarea" :rows="12" class="inputShadow" resize="none" :readonly="true"
                v-model="receiptInfo"></el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="dialogOption entrySave">
      <el-button class="entrySaveButton" :disabled="loadings.submitLoading" @click="submit">确 定</el-button>
      <el-button class="entrySaveButton" @click="close(false)">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  generateReceiptXml,
  addInfo,
  getListInfo,
  searchMockReceiptSummary,
  getListInfoByLogisticsNo,
} from "@/api/receiptManagement-api.js";
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
    receiptStatusList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    receiptTypeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  watch: {
    outerVisible(val) {
      if (val) {
        this.receiptInfo = "";
      }
    },
  },
  data() {
    return {
      formData: {
        receiptType: "",
        logisticsNos: "",
        receiptStatus: "",
        preNo: "",
        invtNo: "",
        sumNo: "",
        billNo: "",
        orderNos: "",
        summaryApplicationId: "",
      },
      receiptInfo: "",
      rules: {
        receiptType: [
          {
            required: true,
            trigger: "blur",
            message: "请选择回执类型！",
          },
        ],
        billNo: [
          {
            required: true,
            trigger: "blur",
          },
        ],
        receiptStatus: [
          {
            required: true,
            trigger: "blur",
            message: "请选择回执状态！",
          },
        ],
        summaryApplicationId: [
          {
            required: true,
            trigger: "blur",
            message: "请选择收发货人名称！",
          },
        ],
        preNo: [
          {
            required: true,
            trigger: "blur",
            message: "电子口岸编号不能为空！",
          },
        ],
        invtNo: [
          {
            required: true,
            trigger: "blur",
            message: "清单编号不能为空！",
          },
        ],
      },
      orderNoList: [],
      loadings: {
        dialogLoading: false,
        submitLoading: false,
        logisticsNosLoading: false,
      },
      loadingText: "",
      summaryApplicationList: [],
      logisticsNoArray: [],
    };
  },

  methods: {
    receiptChange(value) {
      console.log(value);
      this.formData = {
        receiptType: value,
        logisticsNos: "",
        receiptStatus: "",
        preNo: "",
        invtNo: "",
        sumNo: "",
        billNo: "",
        orderNos: "",
        summaryApplicationId: "",
      };
      this.$refs.formDataRef?.resetFields();

      if (value === "totalScore") {
        this.$set(this.rules, "billNo", [
          {
            required: true,
            trigger: "blur",
            message: "请输入提运单号！",
          },
        ]);
        this.$forceUpdate();
      } else {
        this.$set(this.rules, "billNo", [
          {
            required: false,
            trigger: "blur",
            message: "请输入提运单号！",
          },
        ]);
        this.$forceUpdate();
      }
      if (value === "summaryApplication") {
        this.queryApplicationList();
      }
    },
    formChange(val) {
      this.formData = val;
      this.receiptXml();

      if (val.logisticsNos != null && val.logisticsNos != "") {
        this.logisticsNoArray = val.logisticsNos.split("\n");
      } else {
        this.logisticsNoArray = [];
      }
      //物流运单号只有一个时查询“电子运单编号”与“清单编号”
      if (val.receiptType == 'list' && this.logisticsNoArray.length === 1) {
        this.getListInfoByLogisticsNo(this.logisticsNoArray[0])
      } else {
        this.formData.preNo = "";
        this.formData.invtNo = "";
      }
    },
    queryApplicationList(name = "") {
      searchMockReceiptSummary({
        name,
      }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.summaryApplicationList = res.data;
        } else {
          this.alertWarningMsg(res.message);
        }
      });
    },
    handleOtherInfo() {
      if (this.formData.logisticsNo) {
        this.getOtherInfo(this.formData.logisticsNo);
      }
    },
    // 生成xml
    receiptXml() {
      console.log("==============");
      const copyFormData = { ...this.formData };

      if (!copyFormData.receiptType) {
        return;
      }

      if (copyFormData.receiptType === "order") {
        if (!copyFormData.billNo && !copyFormData.orderNos) {
          return;
        }
      } else if (copyFormData.receiptType === "waybill") {
        if (!copyFormData.billNo && !copyFormData.logisticsNos) {
          return;
        }
      } else if (copyFormData.receiptType === "totalScore") {
        if (!copyFormData.billNo) {
          // this.alertWarningMsg("请输入提运单号！");
          return;
        }
      } else if (copyFormData.receiptType === "list") {
        if (!copyFormData.billNo && !copyFormData.logisticsNos) {
          return;
        }
        if (copyFormData.logisticsNos && this.logisticsNoArray.length < 2) {
          if (!copyFormData.preNo) {
            return;
          }
          if (!copyFormData.invtNo) {
            return;
          }
        }
      } else if (copyFormData.receiptType === "summaryApplication") {
        //根据收发货人名称查询‘电子口岸编码’与‘汇总申请编号’
        this.getSummaryApplicationInfo()
        if (!copyFormData.summaryApplicationId) {
          return;
        }
      }

      if (copyFormData.orderNos != null && copyFormData.orderNos != "") {
        copyFormData.orderNos = copyFormData.orderNos.split("\n");
      } else {
        copyFormData.orderNos = [];
      }
      if (
        copyFormData.logisticsNos != null &&
        copyFormData.logisticsNos != ""
      ) {
        copyFormData.logisticsNos = copyFormData.logisticsNos.split("\n");
      } else {
        copyFormData.logisticsNos = [];
      }

      if (!this.formData.receiptStatus) {
        return;
      }

      generateReceiptXml({
        ...this.formData,
        ...copyFormData,
      }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.receiptInfo = res.data;
        } else {
          this.alertWarningMsg(res.message);
        }
      });
    },

    getOtherInfo(e) {
      getListInfo(e).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.formData.preNo = res.data.preNo;
          this.formData.invtNo = res.data.invtNo;
          this.$forceUpdate();
        } else {
          this.alertWarningMsg(res.message);
        }
      });
    },
    //数据保存
    submit() {
      let copyFormData = {
        ...this.formData,
      };
      if (copyFormData.orderNos != null && copyFormData.orderNos != "") {
        copyFormData.orderNos = copyFormData.orderNos.split("\n");
      } else {
        copyFormData.orderNos = [];
      }
      if (
        copyFormData.logisticsNos != null &&
        copyFormData.logisticsNos != ""
      ) {
        copyFormData.logisticsNos = copyFormData.logisticsNos.split("\n");
      } else {
        copyFormData.logisticsNos = [];
      }
      this.$refs.formDataRef.validate((valid) => {
        if (valid) {
          this.addapi({
            ...copyFormData,
          });
        }
      });
    },
    //新增
    addapi(val) {
      this.loadings.dialogLoading = true;
      addInfo(val)
        .then((res) => {
          if (res.code === "200") {
            if (!res.data) {
              this.msgSuccess(res.data || res.message);
            } else {
              const successStr = `成功修改清单 <span style='color:#67C23A;font-weight:600;'>${res.data.successCount}</span> 笔。`
              const errorStr = `失败修改清单 <span style='color:#F56C6C;font-weight:600;'>${res.data.failCount}</span> 笔，因为将清单模拟为结关，这些清单中不存在清单编号。`
              this.$message({
                showClose: true,
                type: 'success',
                dangerouslyUseHTMLString: true,
                message: `<span style='color:#666;'>${res.data.successCount > 0 ? successStr + (res.data.failCount > 0 ? errorStr : '') : errorStr}</span>`
              });
            }
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
            this.close(false);
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //根据物流运单号反填
    async getListInfoByLogisticsNo(logisticsNo) {
      console.log('物流运单号查询');
      this.loadings.logisticsNosLoading = true;
      getListInfoByLogisticsNo({
        logisticsNo,
      }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.formData.preNo = res.data.preNo;
          this.formData.invtNo = res.data.invtNo;
        }
      }).finally(() => {
        this.loadings.logisticsNosLoading = false;
      });
    },
    //根据收发货人名称反填
    async getSummaryApplicationInfo(summaryApplicationId) {
      console.log('收发货人名称查询');
      if (this.formData.summaryApplicationId === "" || this.formData.summaryApplicationId === null) {
        this.formData.preNo = "";
        this.formData.sumNo = "";
        return;
      }
      const summaryApplication = this.summaryApplicationList.find(item => item.id === this.formData.summaryApplicationId);
      if (!summaryApplication) {
        this.formData.preNo = "";
        this.formData.sumNo = "";
        return;
      } else {
        this.formData.preNo = summaryApplication.preNo;
        this.formData.sumNo = summaryApplication.sumNo;
      }
    },

    close(flag) {
      this.formData = {
        receiptType: "",
        logisticsNo: "",
        receiptStatus: "",
        preNo: "",
        invtNo: "",
      };
      this.loadings.dialogLoading = false;
      this.receiptInfo = "";
      this.$emit("close", flag);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.fedexFormStyle {
  .order-select-warp-ol {
    ::v-deep {
      .el-select__input {
        width: 35px !important;
        padding-top: 0 !important;
      }
    }
  }
}
</style>