<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 fedexFormStyle-textarea"
        ref="cancelForm"
        :model="cancelFormData"
        :rules="cancelFormRules"
        label-position="left"
        size="small"
      >
        <Formitem label="撤销原因" prop="note" type="edit">
          <el-input
            type="textarea"
            class="inputShadow"
            resize="none"
            v-model="cancelFormData.note"
            clearable
            :autosize="{ minRows: 7, maxRows: 7 }"
            placeholder="请输入撤销原因"
            id="inputInner-edit-note"
          ></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(false)">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { declareDataUploadNew } from "@/api/declareData-api.js";
export default {
  name: "DeleteDialog",
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    selectedDatas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      cancelVisible: false,
      cancelFormData: {
        note: "",
      },
      cancelFormRules: {
        note: [{ required: true, message: "请输入撤销原因", trigger: "blur" }],
      },
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.cancelVisible = val;
      }
    },
  },
  created() {},
  methods: {
    submitRevoke() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          let obj = {
            note: this.cancelFormData.note,
            declareIds: [],
            type: "totalScore",
            deleteFlag: true,
          };
          obj.declareIds = this.selectedDatas.map((item) => item.declareId);

          console.log("datas==", obj);
          declareDataUploadNew(obj)
            .then((res) => {
              if (res.code === "200") {
                // this.alertSuccessMsg(res.message);
                this.alertSuccessMsg("数据已成功提交撤销，请等待海关回执。");
                this.cancelRevoke(true);
              } else {
                this.alertWarningMsg(res.message);
                this.cancelRevoke();
              }
            })
            .catch((err) => {
              console.log(err);
              this.cancelRevoke();
            });
        } else {
          return false;
        }
      });
    },

    cancelRevoke(flag = false) {
      this.cancelVisible = false;
      this.cancelFormData.note = "";
      this.$emit("cancelDelete", flag);
    },
  },
};
</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;
  }
}
.fedexFormStyle-textarea {
  .el-form-item {
    height: 200px;
  }
}
</style>