<template>
  <div>
    <div class="i-title">{{ title }}</div>
    <div style="text-align: right;margin-bottom: 10px">
      <el-button @click="exportList" class="export-excel" type="primary">导出报表</el-button>
    </div>
    <div>
      <el-table :data="tableData" border width="100%">
        <el-table-column label="订单名称">
          <template slot-scope="scope">
            <span class="lblue point">
              <nuxt-link
                target="_blank"
                :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
              >{{ scope.row.product_title }}</nuxt-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="用户">
          <template slot-scope="scope">
            <a
              class="link-type"
              :href="scope.row.user_url"
              target="_blank"
            >{{ scope.row.user_info.nickname }}({{ scope.row.uid }})</a>
          </template>
        </el-table-column>
        <el-table-column label="实际金额">
          <template slot-scope="scope">
            <template v-if="scope.row.channel != 'admin_confirm'">
              <!--            技术信用-->
              <div
                v-if="scope.row.product_type == 13"
              >
                <!--退款-->
                <span
                  v-if="scope.row.order_type == 8"
                >{{ (scope.row.real_amount / 100).toFixed(2) }}
              </span>
                <template v-else-if="scope.row.order_type == 4">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            提现-->
              <div v-else-if="scope.row.product_type == 200">
                <span class="green">
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            充值-->
              <div v-else-if="scope.row.product_type == 3">
                <div v-if="scope.row.operator_uid==41266">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                </div>
              </div>
              <!--            扣款-->
              <div v-else-if="scope.row.product_type == 300">
                <div v-if="scope.row.operator_uid==41266">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </div>
                <div v-else>
                  <span class="red">+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                </div>
              </div>
              <!--            云端意向金-->
              <div v-else-if="scope.row.product_type == 8">
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            雇佣-->
              <div v-else-if="scope.row.product_type == 4">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <span v-else-if="scope.row.order_type == 5">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <template v-else-if="scope.row.order_type == 4 || scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            云端押金-->
              <div v-else-if="scope.row.product_type == 400">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            云端工作-->
              <div v-else-if="scope.row.product_type == 9">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <template v-else-if="scope.row.order_type == 5">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" >
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--托管-->
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            整包-->
              <div v-else-if="scope.row.product_type == 2">
                <!--退款-->
                <span v-if="scope.row.order_type == 8">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <!--结薪-->
                <template v-else-if="scope.row.order_type == 5">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" >
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--托管-->
                <template v-else-if="scope.row.order_type == 1">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <!--解冻-->
                <template v-else-if="scope.row.order_type == 7">
                  <!--如果不是余额购买-->
                  <span v-if="scope.row.channel != 'balance' && scope.row.channel != 'qingtuanbao'" class="green">
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                  <span v-else>
                  {{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                </template>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <!--            查看机会-->
              <div v-else-if="scope.row.product_type == 1">
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
              <!--            其他-->
              <div v-else>
                <!--如果不是余额购买-->
                <span v-if="scope.row.channel != 'balance'" class="red">
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
                <span v-else>
                  +{{ (scope.row.real_amount / 100).toFixed(2) }}
                </span>
              </div>
            </template>
            <template v-else>
              <div v-if="scope.row.operator_uid != '41266'">
                  <span
                    v-if="parseInt(scope.row.real_amount)>0"
                    class="red"
                  >+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt(scope.row.real_amount) == 0">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span v-else class="green">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
              <div v-else>
                <span
                  v-if="parseInt(scope.row.real_amount)>0"
                >+{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span
                  v-else-if="parseInt(scope.row.real_amount) == 0">{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
                <span v-else>{{ (scope.row.real_amount / 100).toFixed(2) }}</span>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="channel_name" label="支付方式"></el-table-column>
        <el-table-column prop="order_state_name" label="订单状态"></el-table-column>
        <el-table-column prop label="创建时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="到账时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.pay_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop label="订单编号">
          <template slot-scope="scope">
            <nuxt-link
              target="_blank"
              :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
            >{{ scope.row.order_no }}
            </nuxt-link>
          </template>
        </el-table-column>
        <el-table-column prop="out_order_id" label="支付编号"></el-table-column>
        <el-table-column width="100" label="订单类型">
          <template slot-scope="scope">{{ scope.row.product_type_name }}</template>
        </el-table-column>
        <el-table-column prop="order_type_name" label="交易类型">
          <template slot-scope="scope">
            <span>{{ scope.row.order_type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联项目">
          <template slot-scope="scope">
            <a
              :href="scope.row.related_project.url?scope.row.related_project.url:'#'"
              target="_blank"
            >
              <span
                class="lblue"
              >{{ scope.row.related_project.name ? scope.row.related_project.name : "--" }}</span>
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="operator_uid" label="人工">
          <template slot-scope="scope">
            <span v-if="scope.row.operator_info.nickname">{{ scope.row.operator_info.nickname }}</span>
            <span>({{ scope.row.operator_uid }})</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="onClickPage"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
      ></el-pagination>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      title: "",
      activeName: '1',
      orderType: "",
      tableData: [],
      queryData: {}
    };
  },
  mounted() {
    if (!this.queryDataFormat()) {
      return false;
    }
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData() {
      this.$post("/api/admin/order/get_orders", this.queryData).then(res => {
        let data = res.data;
        if (res.status === 1) {
          this.tableData = data.orders;
          this.pageInfo.total = data.count;
        }
      });
    },

    async exportList() {
      let url =
        window.location.host +
        "/api/admin/order/export?product_type=" +
        this.queryData.product_type +
        "&start_time=" +
        this.queryData.start_time +
        "&end_time=" +
        this.queryData.end_time +
        "&date_type=" +
        this.queryData.date_type +
        "&status=" +
        this.queryData.status +
        "&artificial_mark=" +
        0 +
        "&active_name=cash_income";
      window.location.href = "https://" + url;
    },
    onClickPage() {
      this.queryDataFormat();
      this.getTableData();
    },
    handleClick(tab, event) {
      this.queryDataFormat();
      this.getTableData();
    },
    queryDataFormat() {
      let query = this.$route.query;
      if (JSON.stringify(query) === "{}") {
        this.$message.error('参数不正确');
        return false;
      }
      let arr = ['alipay', 'wxpay', 'apple'];
      if (!arr.includes(query.channel)) {
        this.$message.error('渠道不正确');
        return false;
      }
      let data = {
        view: "platform",
        channel: query.channel,
        start_time: query.start_time,
        end_time: query.end_time,
        date_type: 2,                              //1到账时间2创建时间
        status: 401,                               //401订单支付成功
        artificial_mark: 0,                        //0为开启人工财务1开启
        page: this.pageInfo.page,
        page_size: this.pageInfo.size,
        active_name: 'cash_income'

      }
      this.formatTitle(data.channel, data.start_time);
      this.queryData = data;
      return true;
    },
    formatTitle(channel, date) {
      let startDate = new Date(date);
      let title = '';
      switch (channel) {
        case 'alipay':
          title = '支付宝';
          break;
        case 'wxpay':
          title = '微信';
          break;
        case 'apple':
          title = '苹果';
          break;
      }
      this.title = startDate.getFullYear() + "年" + (startDate.getMonth() + 1) + "月份" + title + "收入订单";
    },
    formatDate(time) {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  }
};
</script>

<style scoped>
.i-title {
  margin: 0 0 10px 10px;
  font-size: 20px;
  font-weight: 600;

}

.table {
  height: calc(100% - 80px);
}

.text-title {
  font-weight: 600;
}

.header-bar > div {
  margin-bottom: 5px;
}

.green {
  color: rgba(37, 155, 36, 1);
}

.orange {
  color: rgba(255, 152, 0, 1);
}

.red {
  color: rgb(255, 2, 30);
}
</style>
