<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    title="撤销单申报"
    :visible.sync="cancelVisible"
    :show-close="false"
    width="60%"
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        class="fedexFormStyle"
        ref="cancelForm"
        :model="cancelFormData"
        :rules="cancelFormRules"
        label-position="left"
        size="small"
      >
        <Formitem label="撤销原因" prop="cancellationReason">
          <el-select
            type="text"
            v-model="cancelFormData.cancellationReason"
            @change="changeCancellationReason"
            clearable
            placeholder=""
          >
            <el-option
              v-for="item in cancellationReasons"
              :key="item.itemValue"
              :label="item.itemValue"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </Formitem>
        <Formitem v-if="showOtherReason" label="其他原因" prop="otherReason">
          <el-input
            type="textarea"
            class="inputShadow"
            resize="none"
            v-model="cancelFormData.otherReason"
            clearable
            placeholder="请输入其它撤销原因"
          ></el-input>
        </Formitem>
      </el-form>
    </div>
    <div class="dialogOption entrySave revokeOperation">
      <el-button
        class="entrySaveButton entrySaveButton-background revokeSubmitBtn"
        type="primary"
        @click="submitRevoke"
        >提交</el-button
      >
      <el-button class="entrySaveButton" @click="cancelRevoke">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { declareDataUpload } from "@/api/declareData-api.js";
import { getDictData } from "@/api/system/dict-api.js";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    selectedDatas: {
      type: Array,
      default: () => [],
    },
    dropdownCode: {
      type: String,
      default: "full",
    },
  },
  data() {
    return {
      cancelVisible: false,
      showOtherReason: false,
      cancellationReasons: [],
      cancelFormData: {
        cancellationReason: "",
        otherReason: "",
      },
      cancelFormRules: {
        cancellationReason: [
          { required: true, message: "请选择撤销原因", trigger: "change" },
        ],
        otherReason: [
          { required: true, message: "请输入撤销原因", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.cancelVisible = val;
      }
    },
  },
  created() {
    this.getCancellationReasons();
  },
  methods: {
    getCancellationReasons() {
      getDictData({ doctCode: "CANCELLATION_REASON" })
        .then((res) => {
          if (res.code == "200") {
            this.cancellationReasons = res.data;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    changeCancellationReason(ev) {
      if (ev == "手工输入") {
        this.showOtherReason = true;
      } else {
        this.showOtherReason = false;
      }
    },
    submitRevoke() {
      if (!this.showOtherReason) {
        this.cancelFormData.otherReason = "";
      }
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          let obj = {
            cancellationReason:
              this.cancelFormData.otherReason ||
              this.cancelFormData.cancellationReason,
            declareIds: [],
            type: this.dropdownCode,
          };
          this.selectedDatas.forEach((item) => {
            obj.declareIds.push(item.declareId);
          });
          console.log("datas==", obj);
          declareDataUpload(obj)
            .then((res) => {
              if (res.code === "200") {
                // this.alertSuccessMsg(res.message);
                this.alertSuccessMsg("数据已成功提交申报，请等待海关回执。");
              } else {
                this.alertWarningMsg(res.message);
              }
              this.cancelRevoke();
            })
            .catch((err) => {
              console.log(err);
              this.cancelRevoke();
            });
        } else {
          return false;
        }
      });
    },

    cancelRevoke() {
      this.cancelVisible = false;
      this.showOtherReason = false;
      this.cancelFormData.cancellationReason = "";
      this.cancelFormData.otherReason = "";
      this.$emit("cancelRevoke");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.modelItem {
  width: 100%;
  .modelItem-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }
}
.revokeOperation {
  margin-bottom: 25px;
  .revokeSubmitBtn {
    margin-right: 30px;
  }
}
</style>