<template>
  <div class="ws-file-import-expert">
    <v-stepper
      v-model="step"
      class="elevation-0 transparent"
    >
      <v-stepper-header class="elevation-0">
        <v-stepper-step
          step="1"
          editable
        >
          選擇上傳來源
        </v-stepper-step>

        <v-divider></v-divider>
        <v-stepper-step
          step="2"
          editable
        >
          確認匯入內容
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step
          step="3"
          editable
        >
          匯入完成結果
        </v-stepper-step>
      </v-stepper-header>
      <v-stepper-items class="mt-5">
        <v-stepper-content
          step="1"
          class="pa-0"
        >
          <WsCard>
            <v-card-text style="min-height:390px">
              <WsState
                type="radio"
                label="請先選擇上傳來源"
                :items="uploadItems"
                v-model="dataFromService"
              ></WsState>
              <WsStateFileDragUpload
                v-if="dataFromService"
                v-model="file"
              />
            </v-card-text>
          </WsCard>
        </v-stepper-content>
        <v-stepper-content
          step="2"
          class="pa-0"
        >
          <WsCard v-if="serviceImportDatas&&_serviceImportDatas">
            <v-card-title>確認匯入內容</v-card-title>
            <v-card-text style="min-height:390px">
              <p>資料筆數：{{serviceImportDatas.length}}</p>
              <p>符合篩選條件筆數({{filterDes}})：{{_serviceImportDatas.length}}</p>
              <v-data-table
                v-if="_serviceImportDatas.length"
                :headers="_headers"
                :items="_serviceImportDatas"
                :items-per-page="5"
              ></v-data-table>
            </v-card-text>
          </WsCard>
        </v-stepper-content>
        <v-stepper-content
          step="3"
          class="pa-0"
        >
          <WsCard>
            <v-card-title>匯入完成結果</v-card-title>
            <v-card-text style="min-height:390px">
              <v-tabs v-model="orderImportTab">
                <v-tabs-slider></v-tabs-slider>
                <v-tab>
                  <v-badge
                    color="pink"
                    :value="exist_orders.length"
                    :content="exist_orders.length"
                  >
                    已存在訂單
                  </v-badge>
                </v-tab>
                <v-tab>
                  <v-badge
                    color="pink"
                    :value="no_product_orders.length"
                    :content="no_product_orders.length"
                  >
                    查無對應商品
                  </v-badge>
                </v-tab>
                <v-tab>
                  <v-badge
                    color="pink"
                    :value="multiple_product_match_orders.length"
                    :content="multiple_product_match_orders.length"
                  >
                    對應重複商品
                  </v-badge>
                </v-tab>
                <v-tab>
                  <v-badge
                    color="green"
                    :value="success_import_orders.length"
                    :content="success_import_orders.length"
                  >
                    成功匯入
                  </v-badge>
                </v-tab>

                <v-tab-item>
                  <v-data-table
                    v-if="exist_orders.length"
                    :headers="_headers"
                    :items="exist_orders"
                    :items-per-page="5"
                  ></v-data-table>
                </v-tab-item>
                <v-tab-item>
                  <v-data-table
                    v-if="no_product_orders.length"
                    :headers="_headers"
                    :items="no_product_orders"
                    :items-per-page="5"
                  ></v-data-table>
                </v-tab-item>
                <v-tab-item>
                  <v-data-table
                    v-if="multiple_product_match_orders.length"
                    :headers="_headers"
                    :items="multiple_product_match_orders"
                    :items-per-page="5"
                  ></v-data-table>
                </v-tab-item>
                <v-tab-item>
                  <v-data-table
                    v-if="success_import_orders.length"
                    :headers="_headers"
                    :items="success_import_orders"
                    :items-per-page="5"
                  ></v-data-table>
                </v-tab-item>
              </v-tabs>
            </v-card-text>
          </WsCard>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
    <WsMainBottomNav>
      <template v-if="step==1">
        <WsBtn
          :loading="serviceImportLoading"
          @click="$_onServiceOrderImportSubmit()"
          minWidth="100px"
          color="primary"
        >匯入</WsBtn>
      </template>
      <template v-else-if="step==2">
        <WsBtn
          :loading="orderImportLoading"
          @click="$_onOrderImportSubmit()"
          minWidth="100px"
          color="primary"
        >確認匯入</WsBtn>
      </template>
      <template v-else-if="step==3">
        <WsBtn
          minWidth="100px"
          color="primary"
          :to="redirectRoute"
        >回到訂單頁</WsBtn>
      </template>
    </WsMainBottomNav>
  </div>
</template>

<script>
export default {
  data: () => ({
    step: 1,
    orderImportTab: 1,
    serviceImportFinish: false,
    serviceImportDatas: null,
    dataFromService: null,
    file: null,
    serviceImportLoading: false,
    orderImportLoading: false,
    uploadItems: [
      {
        text: "蝦皮",
        value: "shopee"
      },
      {
        text: "露天",
        value: "ruten"
      },
      {
        text: "買動漫",
        value: "myacg"
      }
    ],
    headers: {
      myacg: [
        { width: "100px", value: "order_date", text: "訂購日期" },
        { width: "100px", value: "order_type", text: "訂單類型" },
        { width: "100px", value: "order_no", text: "訂單編號" },
        { width: "100px", value: "product_no", text: "商品編號" },
        { width: "100px", value: "store_product_no", text: "店家產品編號" },
        { width: "100px", value: "user_account", text: "買家編號" },
        { width: "100px", value: "product_name", text: "商品名稱" },
        { width: "100px", value: "count", text: "數量" },
        { width: "100px", value: "product_price", text: "商品單價" },
        { width: "100px", value: "spec", text: "規格" },
        { width: "100px", value: "price", text: "商品金額" },
        {
          width: "100px",
          value: "collection_handling_fee",
          text: "代收手續費"
        },
        { width: "100px", value: "freight", text: "運費" },
        { width: "100px", value: "shopping_fee", text: "購物金" },
        { width: "100px", value: "order_price", text: "訂單金額" },
        { width: "100px", value: "pay_way", text: "付款方式" },
        { width: "100px", value: "pay_date", text: "付款時間" },
        { width: "100px", value: "ship_date", text: "出貨日期" },
        { width: "100px", value: "pay_status", text: "撥款狀況" },
        { width: "100px", value: "product_price_2", text: "商品金額" },
        { width: "100px", value: "freight_2", text: "運費" },
        {
          width: "100px",
          value: "transaction_handling_fee",
          text: "交易手續費"
        },
        {
          width: "100px",
          value: "creditcard_handling_fee",
          text: "信用卡手續費"
        },
        {
          width: "100px",
          value: "store_collection_freight",
          text: "超商代收運費"
        },
        { width: "100px", value: "order_revenue", text: "訂單收入" },
        { width: "100px", value: "store_invoice_no", text: "賣家發票號碼" },
        { width: "100px", value: "receiver_name", text: "收件人姓名" },
        { width: "100px", value: "receiver_mobile", text: "手機" },
        { width: "100px", value: "receiver_tel", text: "連絡電話" },
        { width: "100px", value: "receiver_mail", text: "Email" },
        { width: "100px", value: "ship_way", text: "運送方式" },
        {
          width: "100px",
          value: "receiver_address",
          text: "收件地址(收件門市)"
        },
        { width: "100px", value: "remark", text: "備註" },
        { width: "100px", value: "is_edited_order", text: "是否為修改訂單" }
      ],
      shopee: [
        { value: "order_no", width: "100px", text: "訂單編號 (單)" },
        { value: "order_status", width: "100px", text: "訂單狀態 (單)" },
        {
          value: "return_status",
          width: "100px",
          text: "退貨 / 退款狀態 (單)"
        },
        { value: "user_account", width: "100px", text: "買家帳號 (單)" },
        {
          value: "order_created_at",
          width: "100px",
          text: "訂單成立時間 (單)"
        },
        { value: "price", width: "100px", text: "訂單小計 (單)" },
        { value: "freight", width: "100px", text: "買家支付的運費 (單)" },
        { value: "total_price", width: "100px", text: "訂單總金額 (單)" },
        { value: "shopee_subsidy", width: "100px", text: "蝦皮補貼 (單)" },
        { value: "shopee_discount", width: "100px", text: "蝦幣折抵 (單)" },
        {
          value: "shopee_creditcard_discount",
          width: "100px",
          text: "蝦皮信用卡活動折抵 (單)"
        },
        { value: "coupon_no", width: "100px", text: "折扣券代碼 (單)" },
        {
          value: "store_coupon_price",
          width: "100px",
          text: "賣家折扣券折抵金額 (單)"
        },
        { value: "shopee_feeback_coupon", width: "100px", text: "蝦幣回饋券" },
        {
          value: "shopee_feeback_coupon_price",
          width: "100px",
          text: "蝦皮折扣券折抵金額 (單)"
        },
        { value: "handling_fee", width: "100px", text: "成交手續費 (單)" },
        { value: "service_fee", width: "100px", text: "活動服務費" },
        { value: "money_flow_fee", width: "100px", text: "金流服務費" },
        {
          value: "installment_period",
          width: "100px",
          text: "分期付款期數 (單)"
        },
        {
          value: "creditcar_handling_fee_rate",
          width: "100px",
          text: "信用卡手續費利率 (單)"
        },
        { value: "product_name", width: "100px", text: "商品名稱 (品)" },
        {
          value: "product_selection_name",
          width: "100px",
          text: "商品選項名稱 (品)"
        },
        { value: "product_price", width: "100px", text: "商品原價 (品)" },
        {
          value: "product_activity_price",
          width: "100px",
          text: "商品活動價格 (品)"
        },
        { value: "product_no", width: "100px", text: "主商品貨號" },
        { value: "product_selection_no", width: "100px", text: "商品選項貨號" },
        { value: "count", width: "100px", text: "數量" },
        {
          value: "promote_bundle_index",
          width: "100px",
          text: "促銷組合指標 (品)"
        },
        {
          value: "promote_bundle_tag",
          width: "100px",
          text: "蝦皮促銷組合折扣:促銷組合標籤(品)"
        },
        { value: "receiver_address", width: "100px", text: "收件地址 (單)" },
        { value: "receiver_tel", width: "100px", text: "收件者電話 (單)" },
        {
          value: "receiver_store_no",
          width: "100px",
          text: "取件門市店號 (單)"
        },
        { value: "receiver_city", width: "100px", text: "城市 (單)" },
        { value: "receiver_district", width: "100px", text: "行政區 (單)" },
        { value: "postal_code", width: "100px", text: "郵遞區號 (單)" },
        { value: "receiver_name", width: "100px", text: "收件者姓名 (單)" },
        { value: "sending_way", width: "100px", text: "寄送方式 (單)" },
        { value: "ship_way", width: "100px", text: "出貨方式 (單)" },
        {
          value: "creditcard_last_four_no",
          width: "100px",
          text: "信用卡後四碼 (單)"
        },
        { value: "ready_time", width: "100px", text: "備貨時間 (單)" },
        { value: "pay_way", width: "100px", text: "付款方式 (單)" },
        {
          value: "latest_ship_time",
          width: "100px",
          text: "最晚出貨日期 (單)"
        },
        {
          value: "package_search_no",
          width: "100px",
          text: "包裹查詢號碼 (單)"
        },
        { value: "pay_time", width: "100px", text: "買家付款時間 (單)" },
        { value: "ship_time", width: "100px", text: "實際出貨時間 (單)" },
        {
          value: "order_submit_time",
          width: "100px",
          text: "訂單完成時間 (單)"
        },
        { value: "buyer_remark", width: "100px", text: "買家備註 (單)" },
        { value: "remark", width: "100px", text: "備註 (單)" }
      ],
      ruten: [
        {
          text: "賣出時間",
          value: "sale_date"
        },
        {
          text: "商品編號",
          value: "product_no"
        },
        {
          text: "商品名稱",
          value: "product_name"
        },
        {
          text: "規格",
          value: "spec"
        },
        {
          text: "項目",
          value: "items"
        },
        {
          text: "賣家自用料號",
          value: "store_custom_no"
        },
        {
          text: "得標金額",
          value: "winning_price"
        },
        {
          text: "數量",
          value: "count"
        },
        {
          text: "商品總價",
          value: "product_amount_price"
        },
        {
          text: "買家帳號",
          value: "user_account"
        },
        {
          text: "交易狀態",
          value: "transaction_status"
        },
        {
          text: "收件人姓名",
          value: "receiver_name"
        },
        {
          text: "電話",
          value: "receiver_tel"
        },
        {
          text: "手機",
          value: "receiver_mobile"
        },
        {
          text: "收件地址",
          value: "receiver_store"
        }
      ]
    },
    exist_orders: [],
    no_product_orders: [],
    multiple_product_match_orders: [],
    success_import_orders: []
  }),
  computed: {
    _serviceImportDatas() {
      if (!this.filter) {
        return this.serviceImportDatas;
      } else {
        return this.filter(this.serviceImportDatas);
      }
    },
    _headers() {
      if (!this.dataFromService) {
        return null;
      } else if (!this.headers[this.dataFromService]) {
        return null;
      } else {
        return this.headers[this.dataFromService];
      }
    }
  },
  methods: {
    upload() {},
    async $_onServiceOrderImportSubmit() {
      if (!this.dataFromService) {
        alert("未選取資料來源");
        return;
      }
      this.serviceImportLoading = true;
      const formData = new FormData();
      formData.append("file", this.file);
      const postUrl = `${this.excelImportUrlPre}/${this.dataFromService}`;
      try {
        const res = await this.$axios.post(postUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        });
        this.serviceImportDatas = res.data;
        this.step = 2;
      } catch (error) {
        alert("匯入發生錯誤，請檢查上傳檔案是否符合選項");
      } finally {
        this.serviceImportLoading = false;
      }
    },
    async $_onOrderImportSubmit() {
      const postUrl = `${this.orderImportUrlPre}/${this.dataFromService}`;
      try {
        this.orderImportLoading = true;
        const res = await this.$axios.post(postUrl, {
          data: this._serviceImportDatas
        });
        this.exist_orders = res.data.exist_orders;
        this.no_product_orders = res.data.no_product_orders;
        this.multiple_product_match_orders =
          res.data.multiple_product_match_orders;
        this.success_import_orders = res.data.success_import_orders;
        this.step = 3;
      } catch (error) {
        alert("匯入訂單發生錯誤");
      } finally {
        this.orderImportLoading = false;
      }
    }
  },
  props: {
    redirectRoute: {
      type: String,
      default: "/order"
    },
    excelImportUrlPre: {
      type: String,
      default: "/excel_import"
    },
    orderImportUrlPre: {
      type: String,
      default: "/order/import"
    },
    filterDes: {
      type: String,
      default: null
    },
    filter: {
      type: Function,
      default: null
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-file-import-expert.scss";
</style>