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)
  },
  data() {
    return {
      params: {
        'sn': null,
        'company_name': null,
        'package_name': null,
        'order_status': null,
        'carrier_operator': null,
        'time': []
      },
      list_data: null,
      editObj: {
        show: false,
        data: null
      },
      detailObj: {
        show: false,
        data: null
      },
      search: {
        show: false
      },
      cancel_remark: '',
      logistics: null,
      logisticsParams: {
        logistics_company: '',
        logistics_no: ''
      },
      refundParams: {
        channel: '',
        account: '',
        remark: ''
      },
      table_titles: [
        {
          title: '订单编号',
          key: 'sn',
          width: 200
        },
        {
          title: '企业名称',
          key: 'company_name',
          width: 300
        },
        {
          title: '运营商',
          key: 'carrier_operator',
          width: 90
        },
        {
          title: '套餐名称',
          key: 'package_name',
          width: 110
        },
        {
          title: '套餐单价',
          key: '',
          width: 120,
          render: (h, { row, column, index }) => {
            let price = Number(row.unit_price / 100);
            return h('span', price.toFixed(2) + ' 元/周期');
          }
        },
        {
          title: '订单卡量',
          key: '',
          width: 100,
          render: (h, { row, column, index }) => {
            return h('span', Number(row.counts) + ' 张');
          }
        },
        {
          title: '订单金额',
          key: '',
          width: 100,
          render: (h, { row, column, index }) => {
            let price = Number(row.custom_price / 100);
            return h('span', price.toFixed(2)) + '元';
          }
        },
        {
          title: '订单状态',
          key: '',
          width: 100,
          render: (h, { row, column, index }) => {
            let html = [];

            html.push(h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              }
            }, row.order_status_name));

            return h('div', html);
          }
        },
        {
          title: '收款状态',
          key: '',
          width: 100,
          render: (h, { row, column, index }) => {
            let status = ['info', 'success', 'error'];

            let html = [];

            html.push(h('Button', {
              props: {
                type: status[row.transaction_status],
                size: 'small'
              }
            }, row.transaction_status_name));

            return h('div', html);
          }
        },
        {
          title: '下单时间',
          key: 'order_at',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 340,
          render: (h, {
            row,
            column,
            index
          }) => {
            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: 'md-eye'
                },
                class: ['btn'],
                on: {
                  click: (event) => {
                    this.isShowLoading(true);
                    API.show(row.id).then(res => {
                      this.isShowLoading(false);
                      if (res.code === 0) {
                        this.detailObj = {
                          show: true,
                          data: res.data
                        };
                      }
                    }).catch(() => { this.isShowLoading(false); });
                  }
                }
              }, '查看'));
            }

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

              // 已收款 -> 已退款 (要先取消订单)
              if (row.transaction_status === 1 && row.order_status === 1) {
                html.push(h('Button', {
                  props: {
                    type: 'error',
                    size: 'small',
                    disabled: false,
                    ghost: true
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      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;
                          }

                          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.refundParams.channel = '';
                            this.refundParams.account = '';
                            this.refundParams.remark = '';
                          });
                        }

                      });
                    }
                  }
                }, '确认退款'));
              }

              // 已下单 -> 取消订单 | 出库
              if (row.order_status === 0) {
                html.push(h('Button', {
                  props: {
                    type: 'info',
                    size: 'small',
                    disabled: false,
                    ghost: true
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      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;
                          }

                          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.cancel_remark = '';
                          });
                        }
                      });
                    }
                  }
                }, '取消订单'));

                html.push(h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    disabled: false,
                    ghost: true
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '请确认订单是否已出库?',
                        onOk: () => {
                          API.update({
                            order_status: 2
                          }, row.id).then(res => {
                            if (res.code == 0) {
                              this.$Message.success('修改成功');
                              this.request();
                            }
                          });
                        }
                      });
                    }
                  }
                }, '确认出库'));
              }

              // 已出库 -> 已发货
              if (row.order_status === 2) {
                html.push(h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    disabled: false,
                    ghost: true
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      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: () => {
                            API.update({
                              order_status: 3,
                              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();
                              }
                            });
                          }

                        });
                      });
                    }
                  }
                }, '订单发货'));
              }

              // 已发货 -> 已签收
              if (row.order_status === 3) {
                html.push(h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    disabled: false,
                    ghost: true
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '请确认订单是否确认签收?',
                        onOk: () => {
                          API.update({
                            order_status: 4
                          }, row.id).then(res => {
                            if (res.code == 0) {
                              this.$Message.success('修改成功');
                              this.request();
                            }
                          });
                        }
                      });
                    }
                  }
                }, '确认签收'));
              }
            }

            if (html.length) {
              return h('div', html);
            }
          }
        }
      ]
    };
  },
  created() {
    this.index(1);
  },
  methods: {
    /**
     * [index 列表]
     * @param  {Number} page [description]
     * @return {[type]}      [description]
     */
    index(page = 1) {
      let data = this.searchDataHandle({}, { page }, this.params);
      this.isShowLoading(true);
      API.index(data).then(res => {
        this.isShowLoading(false);
        if (res.code == 0) {
          this.list_data = res.data;
        }
      }).catch(() => {
        this.isShowLoading(false);
      });
    },

    /**
     * [openEdit 打开编辑弹窗]
     * @return {[type]} [description]
     */
    openEdit(bool, data = null) {
      this.editObj = {
        show: bool,
        data
      };
    },

    /**
     * [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] = null;
        }
      }
      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);
          });
        }
      });
    }
  }
};