<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 in modifyDataList"
              :key="item.itemValue"
              :label="item.itemChineseName"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </Formitem>
        <Formitem
          label="修改内容"
          prop="modifyContent"
          v-if="batchModifyFormData.modifyData !== 'TRANSPORT_MODE'"
        >
          <el-input
            type="text"
            class="inputShadow"
            resize="none"
            v-model="batchModifyFormData.modifyContent"
            clearable
            placeholder="请输入修改内容"
          ></el-input>
        </Formitem>
        <!--  -->
        <Formitem label="运输方式" prop="modifyContent" v-else>
          <el-select
            type="text"
            id="inputInner--modifyContent"
            v-model="batchModifyFormData.modifyContent"
            clearable
            placeholder="请选择运输方式"
          >
            <el-option
              v-for="(item, index) in $store.getters.dict.DECLARE_TRAFMODE"
              :key="index"
              :label="item.itemChineseName"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </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";
import { getDictData } from "@/api/system/dict-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 = "";
      }
    },
    "batchModifyFormData.modifyData"(newVal, oldVal) {
      this.$set(this.batchModifyFormRules, "modifyContent", [
        {
          required: true,
          message:
            newVal !== "TRANSPORT_MODE" ? "请输入修改内容" : "请选择运输方式",
          trigger: "blur",
        },
      ]);
    },
  },
  created() {
    this.getModifyDataList();
  },
  methods: {
    getModifyDataList() {
      getDictData({ doctCode: "DATABASE_FIELD" })
        .then((res) => {
          if (res.code == "200") {
            this.modifyDataList = res.data;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    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(1);
              } else {
                this.alertWarningMsg(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
              this.alertWarningMsg(err.message);
              this.cancelModify(1);
            });
        } else {
          return false;
        }
      });
    },

    cancelModify(val) {
      this.batchModifyVisible = false;
      this.$emit("cancelBatchModify", val);
    },
  },
};
</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>