<template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item prop="time">
        <el-date-picker
          v-model="dataForm.time"
          type="datetimerange"
          :picker-options="pickerOptions"
          :default-value="computedDatePickerDefaultValue()"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="创建时间开始时间"
          end-placeholder="创建时间结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="orderMiandan" v-if="miandan && miandan.length">
        <el-select v-model="dataForm.orderMiandan"
                   clearable
                   placeholder="平台来源">
          <el-option :label="item.name"
                     :value="item.value"
                     v-for="(item, index) in miandan"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="orderNumber">
        <el-input v-model="dataForm.orderNumber" placeholder="订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sizeChangeHandle(pageSize)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%">
      <el-table-column
        prop="orderNumber"
        header-align="center"
        align="center"
        width="160"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="orderName"
        header-align="center"
        align="center"
        width="220"
        label="订单名称">
      </el-table-column>
      <el-table-column
        prop="orderMiandan"
        header-align="center"
        align="center"
        label="订单来源">
      </el-table-column>
      <el-table-column
        prop="orderPrice"
        header-align="center"
        align="center"
        width="80"
        :show-overflow-tooltip="true"
        label="订单总价(金币)">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        header-align="center"
        align="center"
        width="180"
        :show-overflow-tooltip="true"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        header-align="center"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
        label="订单状态">
        <template slot-scope="scope">
          <p>{{ ['未支付', '已支付', '已取消'][scope.row.orderStatus] }}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderPayAt"
        header-align="center"
        align="center"
        width="180"
        label="订单支付时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <!--orderStatus：0未支付 1已支付 2已取消-->
          <el-button size="small" @click="funJumpOrderCheckPackage(scope.row)">查看包裹
          </el-button>
          <el-button type="primary"
                     size="small"
                     :disabled="isDisabled"
                     v-if="scope.row.orderStatus === 0"
                     @click.stop="submitFormBridge(scope.row, scope.$index)">支付
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>确认支付{{ orderPayParams.obj.orderPrice }}金币吗？</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'order-check-order',
  data () {
    return {
      dataForm: {
        time: [],
        orderMiandan: '',
        orderNumber: ''
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      selectionDataList: [],
      isDisabled: false,
      dialogVisible: false,
      orderPayParams: {
        obj: {},
        index: 0
      }
    }
  },
  computed: {
    ...mapState({
      miandan: state => state.common.webConfig.miandan
    })
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.dataForm = {
        time: [],
        orderMiandan: '',
        orderNumber: ''
      }
      this.dataList = []
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.selectionDataList = []
      this.isDisabled = false
      this.dialogVisible = false
      this.orderPayParams = {
        obj: {},
        index: 0
      }
      this.getDataList()
    }
  },
  methods: {
    // 设置data-picker默认值
    computedDatePickerDefaultValue () {
      // 当前时间
      const nowTime = new Date()
      const year = nowTime.getFullYear()
      const month = nowTime.getMonth() + 1
      const day = nowTime.getDate()
      let preYear = year
      let preMonth = month - 1
      if (preMonth === 0) {
        preYear = preYear - 1
        preMonth = 12
      }
      let preDays = new Date(preYear, preMonth, 1)
      return [`${preYear}-${preMonth}-${preDays.getDate()} 00:00:00`, `${year}-${month}-${day} 00:00:00`]
    },
    funJumpOrderCheckPackage (obj = {}) {
      const { orderNumber } = obj
      this.$router.push({ name: 'orderCheckPackage', query: { orderNumber: orderNumber } })
    },
    submitFormBridge (obj = {}, index) {
      this.orderPayParams = {
        obj: obj,
        index: index
      }
      this.dialogVisible = true
    },
    submitForm () {
      const { obj, index } = this.orderPayParams
      const { id, orderNumber } = obj
      this.isDisabled = true
      this.dialogVisible = false
      this.$http({
        url: this.$http.adornUrl('/gift/order/pay'),
        method: 'get',
        params: this.$http.adornParams({
          'id': id
        })
      }).then(({ data }) => {
        this.isDisabled = false
        if (data.status) {
          this.$set(this.dataList[index], 'orderStatus', 1)
          this.$message({
            type: 'success',
            message: data.msg,
            onClose: () => {
              this.$router.push({ name: 'orderCheckPackage', query: { orderNumber: orderNumber } })
            }
          })
          return
        }
        this.$message.error(data.msg)
      }).catch(() => {
        this.isDisabled = false
      })
    },
    // 获取数据列表
    getDataList () {
      const { time, orderMiandan, orderNumber } = this.dataForm
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/gift/order/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'pageSize': this.pageSize,
          'startCreateTime': Array.isArray(time) && time.length ? time[0] : '',
          'endStartTime': Array.isArray(time) && time.length ? time[1] : '',
          'orderNumber': orderNumber,
          'orderMiandan': orderMiandan
        })
      }).then(({ data }) => {
        if (data.status) {
          const { total, list } = data.data
          this.dataList = list
          this.totalPage = total
          this.$route.meta.isUseCache = true
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (['goodsOrderDetail'].includes(from.name)) {
        to.meta.isUseCache = false
      }
    })
  }
}
</script>
