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
      },
      logistics: null,
      logisticsParams: {
        'logistics_company': '',
        'logistics_no': ''
      },
      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: 160,
          render: (h, { row, column, index }) => {
            let price = Number(row.unit_price / 100);
            return h('span', price.toFixed(2));
          }
        },
        {
          title: '订单卡量(张）',
          key: 'counts',
          width: 135
        },
        {
          title: '订单金额（元）',
          key: '',
          width: 135,
          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 html = [];

            html.push(h('Button', {
              props: {
                type: row.transaction_status ? 'success' : 'error',
                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('index')) {
              html.push(h('Button', {
                props: {
                  type: 'success',
                  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 && !row.order_status) {
                html.push(h('Button', {
                  props: {
                    type: 'info',
                    size: 'small',
                    disabled: false
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '是否确认取消订单？',
                        onOk: () => {
                          API.update({
                            order_status: 1
                          }, row.id).then(res => {
                            if (res.code == 0) {
                              this.$Message.success('修改成功');
                              this.request();
                            }
                          });
                        }
                      });
                    }
                  }
                }, '取消订单'));
              }

              if (!row.transaction_status) {
                html.push(h('Button', {
                  props: {
                    type: 'error',
                    size: 'small',
                    disabled: false
                  },
                  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.order_status === 0) {
                html.push(h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    disabled: false
                  },
                  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
                  },
                  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
                  },
                  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.paginate(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);
          });
        }
      });
    }
  }
};