<template>
    <el-dialog
    class="entryDialog classCUploadDialog"
       title="批量修改"
       :visible.sync="batchModifyVisible"
       :show-close="false"
       width="60%"
       :close-on-click-modal="false"
     >
      <div>
     <el-form class="fedexFormStyle"
           ref="batchModifyForm"
           :model="batchModifyFormData"
           :rules="batchModifyFormRules"
           label-position="left"
           size="small"
         >
       <Formitem label="修改数据" prop="modifyData">
            <el-select
            type="text"
            v-model="batchModifyFormData.modifyData"
            clearable
            placeholder=""
            >
            <el-option
            v-for="(item, index) in modifyDataList"
            :key="index"
            :label="item.name"
            :value="item.value"
            ></el-option>
            </el-select>
        </Formitem>
        <Formitem label="修改内容" prop="modifyContent">
            <el-input
                type="text"
                class="inputShadow"
                resize="none"
                v-model="batchModifyFormData.modifyContent"
                clearable
                placeholder="请输入修改内容"
              ></el-input>
        </Formitem>
     </el-form>
     </div>
       <div class="dialogOption entrySave revokeOperation">
         <el-button
           class="entrySaveButton entrySaveButton-background revokeSubmitBtn"
           type="primary"
           @click="formSubmit"
           >确定</el-button>
           <el-button
           class="entrySaveButton"
           @click="cancelModify"
           >关闭</el-button>
       </div>
   </el-dialog>
   </template>
     
     <script>
     import { bathDeclareDate } from "@/api/declareData-api.js";
     export default {
       props: {
         showDialog: {
           type: Boolean,
           default: false,
         },
         selectedDatas:{
            type:Array,
            default:() => []
        },
       },
       data() {
         return {
            batchModifyVisible:false,
            batchModifyFormData:{
              modifyData:'',
              modifyContent:''
            },
            batchModifyFormRules: {
                modifyData: [{ required: true, message: '请选择修改数据', trigger: 'change' }],
                modifyContent: [{ required: true, message: '请输入修改内容', trigger: 'blur' }],
            },
            modifyDataList:[
                {name:'提运单号',value:'BILLNO'},
                {name:'航班航次号',value:'FLIGHT_NUMBER'},
            ]
         };
       },
       watch: {
           showDialog(val) {
               if (val) {
                   this.batchModifyVisible = val
                   this.batchModifyFormData.modifyData=""
                   this.batchModifyFormData.modifyContent=""
               }
           },
     },
     created() {
     },
       methods: {
        formSubmit(){
         this.$refs.batchModifyForm.validate((valid) => {
             if (valid) {
            let obj = {
                declareIds: [],
                modifyData: this.batchModifyFormData.modifyData,
                modifyContent: this.batchModifyFormData.modifyContent,
            };
            this.selectedDatas.forEach((item) => {
              obj.declareIds.push(item.declareId);
            });
            console.log('datas==', obj)
            bathDeclareDate(obj).then((res) => {
                if (res.code === "200") {
                   this.msgSuccess('批量修改成功')
                   this.cancelModify()
                } else {
                  this.alertWarningMsg(res.message);
                }
                
              })
              .catch((err) => {
                console.log(err);
                this.alertWarningMsg(err.message);
                this.cancelModify()
              });
           } else {
               return false;
             }
           });
       },
   
       cancelModify(){
          this.batchModifyVisible = false
          this.$emit('cancelBatchModify')
       }
       },
     };
     </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>