<template>
  <el-dialog
    :title="$t('declaration.indexD.dialogTitle')"
    :visible="bodyDialogVisible"
    width="65%"
    center
    @close="closeDialog"
    @open="openDialog"
  >
    <!-- 表头 -->
    <el-form
      class="fedexFormStyle"
      ref="bodyDialogForm"
      v-loading="dialogLoading"
      :model="formInfo"
      label-position="top"
      :disabled="disabled"
    >
      <el-row :gutter="5">
        <!-- 中文品名 -->
        <el-col :span="8">
          <Formitem
            :label="$t('entry.detial.form.label1')"
            :type="type"
            prop="inputItem"
            :disabled="false"
          >
            <el-input
              type="text"
              :id="'inputInner-' + type + '-inputItem'"
              v-model="formInfo.inputItem"
              @blur="inputItemBlur"
            ></el-input>
          </Formitem>
        </el-col>
        <!-- 商品编号 -->
        <el-col :span="8">
          <Formitem
            :label="$t('entry.detial.form.label3')"
            :type="type"
            prop="skuCode"
            :disabled="false"
          >
            <el-input
              type="text"
              :id="'inputInner-' + type + '-skuCode'"
              v-model="formInfo.skuCode"
              @blur="inputItemBlur"
            ></el-input>
          </Formitem>
        </el-col>
        <!-- 商品名称 -->
        <el-col :span="8">
          <Formitem
            :label="$t('entry.skuCodeDialog.table.label2')"
            :type="type"
            prop="skuName"
            :disabled="false"
          >
            <el-input
              type="text"
              :id="'inputInner-' + type + '-skuName'"
              v-model="formInfo.skuName"
              @blur="inputItemBlur"
            ></el-input>
          </Formitem>
        </el-col>
      </el-row>
      <el-row :gutter="5" v-for="(rowItem, idx) in rowList" :key="idx">
        <el-col :span="6" v-for="(item, index) in rowItem" :key="index">
          <Formitem :label="item.element" :prop="item.key" :disabled="false">
            <el-input
              v-if="
                item.element != '品牌类型' && item.element != '出口享惠情况'
              "
              type="text"
              :id="'inputInner--' + item.key"
              v-model="elementForm[item.key]"
            ></el-input>
            <el-select
              v-else-if="item.element == '品牌类型'"
              :id="'inputInner--' + item.key"
              v-model="elementForm[item.key]"
              placeholder=""
            >
              <el-option
                v-for="(val, idx) in dictData.brandType"
                :key="idx"
                :label="val.name"
                :value="val.code"
              ></el-option>
            </el-select>
            <el-select
              v-else-if="item.element == '出口享惠情况'"
              :id="'inputInner--' + item.key"
              v-model="elementForm[item.key]"
              placeholder=""
            >
              <el-option
                v-for="(val, idx) in dictData.exportBenefits"
                :key="idx"
                :label="val.name"
                :value="val.code"
              ></el-option>
            </el-select>
          </Formitem>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { getHscode } from "@/api/detial-api.js";
export default {
  props: {
    formInfo: {
      type: Object,
      default: null,
    },
    dictData: {
      type: Object,
      default: null,
    },
    bodyDialogVisible: {
      type: Boolean,
      default: null,
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: this.bodyDialogVisible,
      dialogLoading: false,
      rowList: [],
      elementForm: {
        element0: "",
        element1: "",
        element2: "",
        element3: "",
        element4: "",
        element5: "",
        element6: "",
        element7: "",
        element8: "",
        element9: "",
        element10: "",
        element11: "",
        element12: "",
        element13: "",
        element14: "",
        element15: "",
        element16: "",
        element17: "",
        element18: "",
        element19: "",
        element20: "",
      },
    };
  },
  watch: {},
  methods: {
    inputItemBlur(val) {
      this.$emit("inputItemBlur", this.activeDetial);
    },
    closeDialog() {
      (this.elementForm = {
        element0: "",
        element1: "",
        element2: "",
        element3: "",
        element4: "",
        element5: "",
        element6: "",
        element7: "",
        element8: "",
        element9: "",
        element10: "",
        element11: "",
        element12: "",
        element13: "",
        element14: "",
        element15: "",
        element16: "",
        element17: "",
        element18: "",
        element19: "",
        element20: "",
      }),
        (this.rowList = []);
      this.visible = false;
      this.$emit("closeDialog", this.visible);
    },
    openDialog() {
      this.dialogLoading = true;
      let arr = this.formInfo.model.split("|");
      arr.forEach((item, index) => {
        if (item.split(":")[0] != "品名") {
          if (item.split(":")[0] == "品牌类型") {
            this.elementForm[`element${index}`] = item.split(":")[1]
              ? "brandType_" + item.split(":")[1]
              : "";
          } else if (item.split(":")[0] == "出口享惠情况") {
            this.elementForm[`element${index}`] = item.split(":")[1]
              ? "exportBenefits_" + item.split(":")[1]
              : "";
          } else {
            this.elementForm[`element${index}`] = item.split(":")[1]
              ? item.split(":")[1]
              : "";
          }
        }
      });
      return new Promise((resolve, reject) => {
        getHscode({
          condition: this.formInfo.skuCode,
          pageIndex: 1,
          pageSize: 20,
        })
          .then((res) => {
            if (res.code === "200") {
              this.rowList = []
              let codeInfo = res.data.extra.hsCodes;
              let elementList = this.hscodeElementInfo(codeInfo[0]);
              let elementItem = [];
              let arr = [];
              elementList.forEach((item, index) => {
                if (item.element != "品名") {
                  if (elementItem.length < 4) {
                    elementItem.push(item);
                    if (index == elementList.length - 1) {
                      arr.push(elementItem);
                      // this.rowList.push(elementItem);
                      elementItem = [];
                    }
                  } else {
                    // this.rowList.push(elementItem);
                    arr.push(elementItem);
                    elementItem = [];
                    if (index == elementList.length - 1) {
                      elementItem.push(item);
                      // this.rowList.push(elementItem);
                      arr.push(elementItem);
                    } else {
                      elementItem.push(item);
                    }
                  }
                }
              });
              this.rowList = arr;
              this.dialogLoading = false;
              resolve();
            } else {
              this.alertWarningMsg(res.message);
              reject();
            }
          })
          .catch((err) => {
            reject();
          });
      });
    },
  },
  filters: {
    clearNull(value) {
      if (value == null) {
        return "";
      } else {
        return value;
      }
    },
  },
};
</script>