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)
  },
  data() {
    return {
      params: {
        type: 0,
        sn: '',
        transaction_no: '',
        company_name: '',
        package_name: '',
        order_status: '',
        carrier_operator: '',
        trashed: '',
        sim: '',
        time: []
      },
      type: 0,
      list_data: null,
      editObj: {
        show: false,
        data: null
      },
      detailObj: {
        show: false,
        data: null
      },
      cardsObj: {
        show: false
      },
      search: {
        show: false
      },
      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.haveJurisdiction('update')) {
              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')) {
              // 排单
              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() {
    if (this.type === 0) {
      this.table_titles.splice(7, 0, {
        title: '退货量',
        key: 'refunds',
        width: 80
      });
    }

    if (this.type !== 0) {
      this.table_titles.splice(9, 2);
    }
  },
  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 data = this.searchDataHandle({}, { page, limit }, this.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) {
          this.downloadFile(res.data);
        } else {
          this.$Modal.success({
            title: '提示',
            content: '当前导出数据量大，已进入后台队列导出模式，请稍后至导出列表查看下载。'
          });
        }
        this.isShowLoading(false);
      }).catch(() => {
        this.isShowLoading(false);
      });
    },

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

    /**
     * [openCards 打开选卡弹窗]
     * source 0:选创建订单页面打开 1:从选卡按钮打开 2:从排单按钮打开
     * @return {[type]} [description]
     */
    openCards(bool, source, orderObj = {}) {
      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] = [];
        } 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.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.orderConfirmShow = false;
              this.request();
            }
            this.isShowLoading(false);
            this.cancel_remark = '';
          });
        }
      });
    },
    // 订单排单
    orderShip() {
      let row = this.row;
      this.$Modal.confirm({
        title: '提示',
        content: '请确认订单是否已排单?',
        onOk: () => {
          this.isShowLoading(true);
          API.update({
            order_status: 2
          }, row.id).then(res => {
            if (res.code == 0) {
              this.$Message.success('修改成功');
              this.orderConfirmShow = false;
              this.request();
            }
            this.isShowLoading(false);
          });
        }
      });
    },
    handleOrderSuccess(value) {
      let page = value ? this.list_data.current_page : 1;
      this.cardsObj.show = false;
      this.$store.dispatch('initOrder');
      this.index(page);
    },
    handleMyCompletePackages(value) {
      this.handleCompletePackages(this.type, value);
    }
  }
};