<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 label="物流运单编号" prop="logisticsNos">
                <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,
} 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,
      },
      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 = [];
      }
    },
    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") {
        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") {
            this.msgSuccess(res.data || res.message);
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
            this.close(false);
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },

    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>