<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>