<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="formData"
        :model="formData"
        :rules="rules"
        label-position="top"
        size="small"
      >
        <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="receiptXml"
              >
                <el-option
                  v-for="item in receiptTypeList"
                  :key="item.value"
                  :label="item.itemChineseName"
                  :value="item.itemValue"
                ></el-option>
              </el-select>
            </Formitem>
          </el-col>
          <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
                disabled
                placeholder=""
                @blur="handleOtherInfo"
              ></el-input>
              <!-- <el-select
                type="text"
                id="inputInner-edit-logisticsNo"
                v-model="formData.logisticsNo"
                :remote="true"
                disabled
                clearable
                filterable
                collapse-tags
                :remote-method="remoteMethod"
                placeholder=""
                @change="handleOtherInfo"
                class="order-select-warp-ol"
              >
                <el-option
                  v-for="item in orderNoList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select> -->
            </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>
        </el-row>
        <el-row :gutter="5" v-if="formData.receiptType == 'list'">
          <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"
              ></el-input>
            </Formitem>
          </el-col>
          <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"
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="24">
            <!-- <Formitem label="回执文本" prop="receiptInfo" type="edit">
              <el-input
                type="textarea"
                :rows="4"
                class="inputShadow"
                id="inputInner-edit-receiptInfo"
                resize="none"
                v-model="formData.receiptInfo"
                clearable
                placeholder=""
              ></el-input>
            </Formitem> -->
            <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,
} from "@/api/receiptManagement-api.js";
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
    receiptStatusList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    receiptTypeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    logisticsNo: {
      type: String,
      default: "",
    },
  },

  watch: {
    outerVisible(val) {
      console.log(val);
      if (val) {
        this.formData.logisticsNo = this.logisticsNo;
        this.formData.receiptType = "list";
        this.receiptInfo = "";
        setTimeout(() => {
          this.getOtherInfo(this.logisticsNo);
        }, 100);
      }
    },
  },

  data() {
    return {
      formData: {
        receiptType: "",
        logisticsNo: "",
        receiptStatus: "",
        preNo: "",
        invtNo: "",
      },
      receiptInfo: "",
      rules: {
        receiptType: [
          {
            required: true,
            trigger: "blur",
            message: "请选择回执类型！",
          },
        ],
        logisticsNo: [
          {
            required: true,
            trigger: "blur",
            message: "物流运单编号不能为空！",
          },
        ],
        receiptStatus: [
          {
            required: true,
            trigger: "blur",
            message: "请选择回执状态！",
          },
        ],
        preNo: [
          {
            required: true,
            trigger: "blur",
            message: "电子口岸编号不能为空！",
          },
        ],
        invtNo: [
          {
            required: true,
            trigger: "blur",
            message: "清单编号不能为空！",
          },
        ],
      },
      orderNoList: [],
      loadings: {
        dialogLoading: false,
        submitLoading: false,
      },
      loadingText: "",
    };
  },

  methods: {
    handleOtherInfo() {
      if (this.formData.logisticsNo) {
        this.getOtherInfo(this.formData.logisticsNo);
      }
    },
    // 生成xml
    receiptXml() {
      if (!this.formData.receiptType) {
        return;
      }
      if (!this.formData.logisticsNo) {
        return;
      }
      if (!this.formData.receiptStatus) {
        return;
      }
      if (!this.formData.preNo) {
        return;
      }
      if (!this.formData.invtNo) {
        return;
      }
      generateReceiptXml({
        ...this.formData,
        logisticsNo: this.formData.logisticsNo,
      }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.receiptInfo = res.data;
        } else {
          this.alertWarningMsg(res.message);
        }
      });
    },
    // remoteMethod(query) {
    //   console.log(query);
    //   this.getOrderList(query, true);
    // },
    // getOrderList(val, flag) {
    //   if (!this.formData.receiptType) {
    //     return;
    //   }
    //   searchOrderNo({
    //     receiptType: this.formData.receiptType,
    //     logisticsNo: flag ? val : "",
    //   }).then((res) => {
    //     if (res.code === "200") {
    //       this.orderNoList = res.data;
    //     } else {
    //       this.alertWarningMsg(res.message);
    //     }
    //   });
    //   this.receiptXml();
    // },
    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.$set(this.formData, "preNo", res.data.preNo);
          // this.$set(this.formData, "invtNo", res.data.invtNo);
          this.$forceUpdate();
        } else {
          this.alertWarningMsg(res.message);
        }
      });
    },
    //数据保存
    submit() {
      let obj = {
        ...this.formData,
      };
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addapi({
            ...obj,
            logisticsNos: [this.formData.logisticsNo],
          });
        }
      });
    },
    //新增
    addapi(val) {
      this.loadings.dialogLoading = true;
      addInfo(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
          }
        })
        .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>