<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    title="离境单申报"
    :visible.sync="timeVisibleConfig"
    :show-close="false"
    width="700px"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    v-loading="loadings.dialogLoading"
    @close="close(false)"
  >
    <div style="margin-bottom: 10px">
      <span>
        提运单号 数量：<strong>{{ tableData.length }}</strong>
      </span>
      <span style="margin-left: 20px">
        物流运单编号 数量：<strong>{{ logisticsTotal }}</strong>
      </span>
    </div>

    <div class="modelItem" style="margin-bottom: 10px">
      <el-form
        class="fedexFormStyle"
        ref="formData"
        :model="formData"
        label-position="top"
        size="small"
      >
        <el-row :gutter="5">
          <el-col :span="18">
            <Formitem label="离境时间" prop="leaveTime" type="edit">
              <el-date-picker
                class="inputInner--leaveTime"
                id="inputInner-edit-leaveTime"
                v-model="formData.leaveTime"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                prefix-icon="none"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </Formitem>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :border="true"
      :pagination="false"
      :order="false"
      :height="tableMaxheight + 'px'"
      :maxHeight="tableMaxheight + 'px'"
    >
    </Table>

    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :disabled="loadings.submitLoading"
        @click="submit"
        >确 定</el-button
      >
      <el-button class="entrySaveButton" @click="close(false)">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { declareUpload, checkBillNo } from "@/api/declareData-api.js";
export default {
  props: {
    timeVisible: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      formData: {
        leaveTime: "",
      },
      timeVisibleConfig: false,
      headerData: [
        {
          name: "提运单号",
          value: "billNo",
          width: "180px",
          align: "left",
        },
        {
          name: "物流运单编号",
          value: "logisticsWaybillNumber",
          width: "",
          align: "left",
        },
      ],
      tableData: [],
      loadings: {
        dialogLoading: false,
        submitLoading: false,
      },
      loadingText: "",
      logisticsTotal: 0,
      tableMaxheight: 200,
    };
  },
  watch: {
    timeVisible(val) {
      if (val) {
        this.timeVisibleConfig = val;
        this.getBillNo();
      }
    },
  },
  methods: {
    getBillNo() {
      checkBillNo({
        declareIds: this.selected.map((item) => item.declareId),
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.data;
          const { total } = this.getLogisticsWaybillDetails(this.tableData);
          this.logisticsTotal = total;
          this.tableMaxheight =
            res.data.length >= 9 ? 500 : res.data.length * 50 + 50;
        }
      });
    },
    //数据保存
    submit() {
      let obj = {
        ...this.formData,
        declareIds: this.selected.map((item) => item.declareId),
        type: "logisticsDeparture",
      };
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addapi(obj);
        }
      });
    },
    getLogisticsWaybillDetails(data) {
      const numbers = data.reduce((acc, item) => {
        const validNumbers = item.logisticsWaybillNumber
          .split(",")
          .filter((num) => num && num.trim());
        return [...acc, ...validNumbers];
      }, []);

      return {
        total: numbers.length,
        numbers: numbers,
      };
    },
    //新增
    addapi(val) {
      this.loadings.dialogLoading = true;
      declareUpload(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },

    close(flag) {
      this.formData = {
        leaveTime: "",
      };
      this.loadings.dialogLoading = false;
      this.timeVisibleConfig = false;
      this.$emit("close", flag);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
</style>