import * as API from "api/virtual/orders";
import * as CONFIGS from "api/virtual/configs";
export default {
  name: "Orders",
  components: {
    UiEdit: resolve => require(["views/virtual/orders/edit"], resolve),
    UiDetail: resolve => require(["views/virtual/orders/detail"], resolve),
    UiCards: resolve => require(["views/virtual/orders/cards"], resolve),
    UiShip: resolve => require(["views/virtual/orders/ship"], resolve)
  },
  data() {
    return {
      params: {
        type: 0,
        sn: "",
        transaction_no: "",
        company_name: "",
        package_name: "",
        order_status: "",
        carrier_operator: "",
        trashed: "",
        sim: "",
        time: [
          this.moment()
            .subtract("1", "months")
            .startOf("month")
            .format("YYYY-MM-DD"),
          this.moment()
            .subtract("1", "months")
            .endOf("month")
            .format("YYYY-MM-DD")
        ]
      },
      type: 0,
      locked: true,
      list_data: null,
      editObj: {
        show: false,
        data: null
      },
      detailObj: {
        show: false,
        data: null
      },
      cardsObj: {
        show: false
      },
      shipObj: {
        show: false,
        data: null
      },
      search: {
        show: true
      },
      row: {}, // 当前行
      orderConfirmShow: false,
      cancel_remark: "",
      logistics: null,
      logisticsParams: {
        logistics_company: "",
        logistics_no: ""
      },
      refundParams: {
        channel: "",
        account: "",
        remark: ""
      },
      table_titles: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            let row = params.row;

            let html = [];

            html.push(h("div", { class: ["umar-b5"] }, "---- 订单信息 ----"));

            let col = [];

            col.push(
              h("Col", { props: { span: 6 }, class: [] }, "订单编号: " + row.sn)
            );
            col.push(
              h(
                "Col",
                { props: { span: 6 }, class: [] },
                "支付流水号: " + row.transaction_no
              )
            );
            col.push(
              h(
                "Col",
                { props: { span: 6 }, class: [] },
                "订单备注: " + row.remark
              )
            );

            if (row.order_status === 1) {
              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "订单取消理由: " + row.extends.cancel_remark
                )
              );
            }

            html.push(h("Row", { class: [] }, col));

            if (row.transaction_status === 2) {
              col = [];
              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "退款方式: " + row.extends.refund_channel
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "退款账号: " + row.extends.refund_account
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 12 }, class: [] },
                  "退款备注: " + row.extends.refund_remark
                )
              );
              html.push(h("Row", {}, col));
            }

            if (this.type === 0) {
              html.push(
                h(
                  "div",
                  { class: ["umar-t10", "umar-b5"] },
                  "---- 物流信息 ----"
                )
              );

              col = [];

              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "收货人: " + row.contacts
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "联系电话: " + row.mobile
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 12 }, class: [] },
                  "收货地址: " +
                    (row.area ? row.area.join(" ") : "") +
                    " " +
                    row.address
                )
              );

              html.push(h("Row", { class: [] }, col));

              col = [];

              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "物流单号: " + row.logistics_no
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 6 }, class: [] },
                  "物流公司: " + row.logistics_company_name
                )
              );
              col.push(
                h(
                  "Col",
                  { props: { span: 12 }, class: [] },
                  "物流备注: " + row.logistics_remark
                )
              );

              html.push(h("Row", { class: [] }, col));
            }

            return h("div", { class: ["fz-13"] }, html);
          }
        },
        {
          title: "ID",
          key: "id",
          minWidth: 80
        },
        {
          title: "企业名称",
          key: "company_name",
          minWidth: 240,
          tooltip: true
        },
        {
          title: "运营商",
          key: "carrier_operator_name",
          minWidth: 90
        },
        {
          title: "套餐名称",
          key: "package_name",
          minWidth: 120
        },
        {
          title: "套餐单价",
          key: "unit_price",
          minWidth: 100
        },
        {
          title: "订单量",
          key: "",
          minWidth: 80,
          render: (h, context) => {
            return h("span", Number(context.row.counts));
          }
        },
        {
          title: "订单金额",
          key: "custom_price",
          minWidth: 120
        },
        {
          title: "支付方式",
          key: "pay_channel_name",
          minWidth: 120
        },
        {
          title: "订单状态",
          key: "",
          minWidth: 100,
          render: (h, context) => {
            let row = context.row;
            let status = ["error", "default", "warning", "primary", "success"];

            return h(
              "Button",
              {
                props: {
                  type: status[row.order_status],
                  size: "small"
                },
                class: ["btn"],
                on: {
                  click: () => {
                    if (!row.deleted_at && this.haveJurisdiction("update")) {
                      this.row = row;
                      // 已出库 -> 已发货
                      if (row.order_status === 0) {
                        this.orderConfirmShow = true;
                      }

                      // 已排单 -> 已出库
                      if (row.order_status === 2) {
                        this.$Modal.confirm({
                          title: "提示",
                          content: "请确认订单是否已出库?",
                          onOk: () => {
                            this.isShowLoading(true);
                            API.update(
                              {
                                order_status: 3
                              },
                              row.id
                            ).then(res => {
                              if (res.code == 0) {
                                this.$Message.success("修改成功");
                                this.request();
                              }
                              this.isShowLoading(false);
                            });
                          }
                        });
                      }

                      // 已出库 -> 已发货
                      if (row.order_status === 3) {
                        this.getLogistics().then(logistics => {
                          this.$Modal.confirm({
                            title: "请填写发货信息",
                            render: h => {
                              let Options = [];
                              for (const key in logistics) {
                                Options.push(
                                  h(
                                    "Option",
                                    {
                                      props: {
                                        key: key,
                                        value: key
                                      }
                                    },
                                    logistics[key]
                                  )
                                );
                              }

                              let Select = h(
                                "Select",
                                {
                                  props: {
                                    value: this.logisticsParams
                                      .logistics_company,
                                    placeholder: "请选择快递公司..."
                                  },
                                  class: ["umar-b10"],
                                  on: {
                                    "on-change": val => {
                                      this.logisticsParams.logistics_company = val;
                                    }
                                  }
                                },
                                Options
                              );

                              let Input = h("Input", {
                                props: {
                                  value: this.logisticsParams.logistics_no,
                                  autofocus: true,
                                  placeholder: "请输入快递单号..."
                                },
                                on: {
                                  input: val => {
                                    this.logisticsParams.logistics_no = val;
                                  }
                                }
                              });

                              return h("div", [Select, Input]);
                            },
                            onOk: () => {
                              this.isShowLoading(true);
                              API.update(
                                {
                                  order_status: 4,
                                  logistics_company: this.logisticsParams
                                    .logistics_company,
                                  logistics_no: this.logisticsParams
                                    .logistics_no
                                },
                                row.id
                              ).then(res => {
                                if (res.code == 0) {
                                  this.$Message.success("修改成功");
                                  this.request();
                                }
                                this.isShowLoading(false);
                              });
                            }
                          });
                        });
                      }

                      // 已发货 -> 已签收
                      if (row.order_status === 4) {
                        this.$Modal.confirm({
                          title: "提示",
                          content: "请确认订单是否确认签收?",
                          onOk: () => {
                            this.isShowLoading(true);
                            API.update(
                              {
                                order_status: 5
                              },
                              row.id
                            ).then(res => {
                              if (res.code == 0) {
                                this.$Message.success("修改成功");
                                this.request();
                              }
                              this.isShowLoading(false);
                            });
                          }
                        });
                      }
                    }
                  }
                }
              },
              row.order_status_name
            );
          }
        },
        {
          title: "收款状态",
          key: "",
          minWidth: 100,
          render: (h, context) => {
            let row = context.row;
            let status = ["error", "success", "default"];

            return h(
              "Button",
              {
                props: {
                  type: status[row.transaction_status],
                  size: "small"
                },
                class: ["btn"],
                on: {
                  click: () => {
                    if (!row.deleted_at && this.haveJurisdiction("update")) {
                      // 未收款 -> 已收款
                      if (row.transaction_status === 0) {
                        this.$Modal.confirm({
                          title: "提示",
                          content: "请确认是否已收款?",
                          onOk: () => {
                            this.isShowLoading(true);
                            API.update(
                              {
                                transaction_status: 1
                              },
                              row.id
                            ).then(res => {
                              if (res.code == 0) {
                                this.$Message.success("修改成功");
                                this.request();
                              }
                              this.isShowLoading(false);
                            });
                          }
                        });
                      }

                      // 已收款 -> 已退款 (要先取消订单)
                      if (
                        row.transaction_status === 1 &&
                        row.order_status === 1
                      ) {
                        this.$Modal.confirm({
                          title: "请填写退款信息并确认",
                          render: h => {
                            let refundHtml = [];

                            let Options = [];
                            Options.push(
                              h(
                                "Option",
                                {
                                  props: {
                                    key: "bank",
                                    value: "bank"
                                  }
                                },
                                "银行转账"
                              )
                            );
                            Options.push(
                              h(
                                "Option",
                                {
                                  props: {
                                    key: "alipay",
                                    value: "alipay"
                                  }
                                },
                                "支付宝转账"
                              )
                            );

                            refundHtml.push(
                              h(
                                "Select",
                                {
                                  props: {
                                    value: this.refundParams.channel,
                                    placeholder: "请选择退款方式..."
                                  },
                                  class: ["umar-b10"],
                                  on: {
                                    "on-change": val => {
                                      this.refundParams.channel = val;
                                    }
                                  }
                                },
                                Options
                              )
                            );

                            refundHtml.push(
                              h("Input", {
                                props: {
                                  value: this.refundParams.account,
                                  autofocus: true,
                                  placeholder: "请输入退款账号..."
                                },
                                class: ["umar-b10"],
                                on: {
                                  input: val => {
                                    this.refundParams.account = val;
                                  }
                                }
                              })
                            );

                            refundHtml.push(
                              h("Input", {
                                props: {
                                  value: this.refundParams.remark,
                                  autofocus: true,
                                  placeholder: "请输入退款备注..."
                                },
                                class: ["umar-b10"],
                                on: {
                                  input: val => {
                                    this.refundParams.remark = val;
                                  }
                                }
                              })
                            );

                            return h("div", refundHtml);
                          },
                          onOk: () => {
                            if (!this.refundParams.channel) {
                              this.$Message.error("请选择退款方式");
                              return;
                            }

                            if (!this.refundParams.account) {
                              this.$Message.error("请输入退款账号");
                              return;
                            }
                            this.isShowLoading(true);
                            API.update(
                              {
                                transaction_status: 2,
                                extends: {
                                  refund_channel: this.refundParams.channel,
                                  refund_account: this.refundParams.account,
                                  refund_remark: this.refundParams.remark
                                }
                              },
                              row.id
                            ).then(res => {
                              if (res.code == 0) {
                                this.$Message.success("修改成功");
                                this.request();
                              }
                              this.isShowLoading(false);

                              this.refundParams.channel = "";
                              this.refundParams.account = "";
                              this.refundParams.remark = "";
                            });
                          }
                        });
                      }
                    }
                  }
                }
              },
              row.transaction_status_name
            );
          }
        },
        {
          title: "下单时间",
          key: "order_at",
          minWidth: 110,
          render: (h, context) => {
            return h(
              "span",
              this.moment(context.row.order_at).format("YYYY-MM-DD")
            );
          }
        },
        {
          title: "操作",
          key: "action",
          minWidth: 300,
          render: (h, context) => {
            let row = context.row;
            row.unit_price = Number(row.unit_price);
            let html = [];

            if (row.deleted_at) {
              return h(
                "Tag",
                {
                  props: {
                    color: "default"
                  }
                },
                "该订单已被删除"
              );
            }

            if (this.haveJurisdiction("show")) {
              html.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "dashed",
                      size: "small",
                      disabled: false,
                      icon: "ios-list"
                    },
                    class: ["btn"],
                    on: {
                      click: event => {
                        this.show(row);
                      }
                    }
                  },
                  "清单"
                )
              );
            }

            if (
              this.locked &&
              this.moment(row.order_at).isBefore(
                this.moment()
                  .subtract("1", "months")
                  .startOf("month")
                  .format("YYYY-MM-DD")
              )
            ) {
              html.push(
                h(
                  "Tag",
                  {
                    props: {
                      color: "default"
                    }
                  },
                  "数据已锁定"
                )
              );
              return h("div", html);
            }

            if (this.haveJurisdiction("update") && row.order_status !== 1) {
              html.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      disabled: false,
                      icon: "md-create"
                    },
                    class: ["btn"],
                    on: {
                      click: event => {
                        this.openEdit(true, 2, row);
                      }
                    }
                  },
                  "编辑"
                )
              );
            }

            if (this.haveJurisdiction("update") && row.order_status !== 1) {
              // 排单
              if (row.shipments !== row.counts) {
                html.push(
                  h(
                    "Tooltip",
                    {
                      props: {
                        content: "已排单" + row.shipments + "张"
                      },
                      class: ["umar-r5"]
                    },
                    [
                      h(
                        "Button",
                        {
                          props: {
                            type: "success",
                            size: "small",
                            icon: "md-list-box"
                          },
                          class: ["btn"],
                          on: {
                            click: () => {
                              this.openCards(true, 2, row);
                            }
                          }
                        },
                        "排单"
                      )
                    ]
                  )
                );
              }
            }

            if (this.haveJurisdiction("destroy") && row.shipments) {
              html.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "warning",
                      size: "small",
                      disabled: false,
                      icon: "md-timer"
                    },
                    class: ["btn"],
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: "提示",
                          content: "重置将清空该订单的排单记录，请谨慎操作",
                          onOk: () => {
                            this.isShowLoading(true);
                            API.reset({
                              ids: row.id
                            })
                              .then(res => {
                                this.isShowLoading(false);
                                if (res.code == 0) {
                                  this.$Message.success("操作成功");
                                  this.request();
                                }
                              })
                              .catch(() => {
                                this.isShowLoading(false);
                              });
                          }
                        });
                      }
                    }
                  },
                  "重置"
                )
              );
            }

            if (this.haveJurisdiction("destroy") && !row.shipments) {
              html.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      disabled: false,
                      icon: "md-trash"
                    },
                    class: ["btn"],
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: "提示",
                          content: "作废后该订单及排单记录不可使用，请谨慎操作",
                          onOk: () => {
                            this.isShowLoading(true);
                            API.destroy({
                              ids: row.id
                            }).then(res => {
                              if (res.code == 0) {
                                this.$Message.success("操作成功");
                                this.request();
                              }
                            });
                          }
                        });
                      }
                    }
                  },
                  "作废"
                )
              );
            }

            if (html.length) {
              return h("div", html);
            }
          }
        }
      ]
    };
  },
  created() {
    this.index(1);
  },
  mounted() {
    this.table_titles.splice(10, 1); // 隐藏收款状态

    if (this.type === 0) {
      this.table_titles.splice(7, 0, {
        title: "排单量",
        key: "shipments",
        width: 80
      });

      this.table_titles.splice(8, 0, {
        title: "退货量",
        key: "refunds",
        width: 80
      });
    }

    if (this.type !== 0) {
      this.table_titles.splice(9, 1);
    }
  },
  methods: {
    // 查看订单明细
    show(row) {
      this.detailObj = {
        show: true,
        data: row
      };
    },
    /**
     * [index 列表]
     * @param  {Number} page [description]
     * @return {[type]}      [description]
     */
    index(page = 1, limit = 15) {
      this.isShowLoading(true);
      this.type = Number(this.$route.params.type);
      this.params.type = Number(this.$route.params.type);
      let params = JSON.parse(JSON.stringify(this.params));

      params.orderBy = "order_at";
      params.sortedBy = "desc";

      let data = this.searchDataHandle({}, { page, limit }, params);
      API.index(data)
        .then(res => {
          if (res.code == 0) {
            this.list_data = res.data;
          }
          this.isShowLoading(false);
        })
        .catch(() => {
          this.isShowLoading(false);
        });
    },
    exportOrders() {
      this.isShowLoading(true);
      let params = this.parseParams(this.params);
      params.type = Number(this.$route.params.type);

      API.exportOrders(params)
        .then(res => {
          if (res.code === 0) {
            if (res.data) {
              this.downloadFile(res.data);
            } else {
              this.$Modal.success({
                title: "提示",
                content:
                  "当前导出数据量大，已进入后台队列导出模式，请稍后至导出列表查看下载。"
              });
            }
          }
          this.isShowLoading(false);
        })
        .catch(() => {
          this.isShowLoading(false);
        });
    },
    exportOrderCards() {
      this.isShowLoading(true);
      let params = this.parseParams(this.params);
      params.type = Number(this.$route.params.type);

      API.cardsExport(params)
        .then(res => {
          this.isShowLoading(false);

          if (res.code === 0) {
            if (res.data) {
              this.downloadFile(res.data);
            } else {
              this.$Modal.success({
                title: "提示",
                content:
                  "当前导出数据量大，已进入后台队列导出模式，请稍后至导出列表查看下载。"
              });
            }
          }
        })
        .catch(() => {
          this.isShowLoading(false);
        });
    },

    /**
     * [openEdit 打开编辑弹窗]
     * source 0:从创建订单按钮打开 1:从选卡页面打开 2:从编辑打开
     * @return {[type]} [description]
     */
    openEdit(bool, source, data = null) {
      console.log('source', source);
      this.editObj = {
        show: bool,
        source,
        data
      };
    },

    /**
     * [openCards 打开选卡弹窗]
     * source 0:选创建订单页面打开 1:从RD按钮打开 2:从排单按钮打开
     * @return {[type]} [description]
     */
    openCards(bool, source, orderObj = {}) {
      console.log('source', source);
      this.cardsObj = {
        show: bool,
        source,
        orderObj
      };
    },

    /**
     * [request 刷新]
     * @return {[type]} [description]
     */
    request() {
      const result = this.list_data;
      let page = result.current_page;

      if (result && result.data.length == 1) {
        page = this.returnPage(
          result.total,
          result.current_page,
          result.per_page
        );
      }

      this.index(page);
    },

    resetSearch() {
      for (let k in this.params) {
        if (k === "time") {
          this.params[k] = [
            this.moment()
              .subtract("1", "months")
              .startOf("month")
              .format("YYYY-MM-DD"),
            this.moment()
              .subtract("1", "months")
              .endOf("month")
              .format("YYYY-MM-DD")
          ];
        } else {
          this.params[k] = "";
        }
      }
      this.index(1);
    },
    getLogistics() {
      return new Promise(resolve => {
        if (this.logistics) {
          resolve(this.logistics);
        } else {
          CONFIGS.get("logistics").then(res => {
            if (res.code === 0) {
              this.logistics = res.data;
            }
            resolve(this.logistics);
          });
        }
      });
    },
    // 取消订单
    orderCannel() {
      let row = this.row;
      this.$Modal.confirm({
        render: h => {
          return h("Input", {
            props: {
              value: this.cancel_remark,
              autofocus: true,
              placeholder: "..."
            },
            on: {
              input: val => {
                this.cancel_remark = val;
              }
            }
          });
        },
        title: "请输入取消理由",
        onOk: () => {
          if (!this.cancel_remark) {
            this.$Message.error("请输入取消理由");
            return;
          }
          this.orderConfirmShow = false;
          this.isShowLoading(true);
          API.update(
            {
              order_status: 1,
              extends: {
                cancel_remark: this.cancel_remark
              }
            },
            row.id
          ).then(res => {
            if (res.code == 0) {
              this.$Message.success("取消成功");
              this.request();
            }
            this.isShowLoading(false);
            this.cancel_remark = "";
          });
        }
      });
    },
    // 订单排单
    orderShip() {
      let row = this.row;

      this.shipObj = {
        show: true,
        data: row
      };
    },
    handleOrderSuccess(value) {
      let page = value ? this.list_data.current_page : 1;
      this.cardsObj.show = false;
      this.editObj.show = false;
      this.shipObj.show = false;
      this.orderConfirmShow = false;
      this.$store.dispatch("initOrder");
      this.index(page);
    },
    handleMyCompletePackages(value) {
      this.handleCompletePackages(this.type, value);
    }
  }
};
