<template>
  <div class="app-container">
    <div
      style="
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      "
    >
      <h3>{{ storeInfo.shopName }} ID:{{ storeInfo.id }}</h3>

      <el-date-picker
        v-model="times"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="statisticsChange"
      >
      </el-date-picker>
    </div>
    <div class="header" style="width: 100%">
      <el-row class="row" :gutter="12">
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>全部上架商品(个)</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.listingProducts : 0 }}
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>店铺销售总额(元)</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.storeRefundAmount : 0 }}
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>成交金额(元)</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.storeSales : 0 }}
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>退款金额(元)</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.storeTransactionAmount : 0 }}
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>成交人数(人)</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.storeTransactionNum : 0 }}
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>成交笔数(笔)</span>
            </div>
            <div class="count">
              {{
                orderStatistics ? orderStatistics.storeTransactionPersonNum : 0
              }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="关键字" prop="key" label-width="100px">
          <el-input
            v-model="queryParams.key"
            placeholder="请输入订单编号/商品ID/商品名称搜索"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
          <el-cascader
            v-model="queryParams.categoryId"
            ref="formCascader"
            placeholder="请选择分类"
            :props="categoryprops"
            @change="cascaderChange"
          />
        </el-form-item>

        <el-form-item label="订单类型" prop="spuType" label-width="100px">
          <el-select
            v-model="queryParams.spuType"
            placeholder="请选择秒送订单状态"
            style="width: 22 0px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="同城秒送" value="1"> </el-option>
            <el-option label="农商批发" value="2"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="秒送订单状态"
          prop="orderStatusKey"
          label-width="100px"
        >
          <el-select
            v-model="queryParams.orderStatusKey"
            placeholder="请选择秒送订单状态"
            style="width: 22 0px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dict.type.sys_order_query_orderstatus_transmission"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="批发订单状态"
          prop="wholesaleStatus"
          label-width="100px"
        >
          <el-select
            v-model="queryParams.wholesaleStatus"
            placeholder="请选择批发订单状态"
            style="width: 22 0px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dict.type.sys_order_orderStatusKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间" prop="date" label-width="100px">
          <el-date-picker
            v-model="queryParams.date"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="spuList"
      :border="true"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        label="订单号"
        align="center"
        prop="carPayNo"
        width="300"
      />
      <el-table-column label="商品信息" align="center" prop="goodsDetails" />
      <el-table-column
        label="成交金额(元)"
        align="center"
        prop="paymentAmount"
      />
      <el-table-column label="订单类型" align="center" prop="spuType">
        <template slot-scope="scope">
          {{
            scope.row.spuType == 0
              ? "批发商品"
              : scope.row.spuType == 1
              ? "秒送商品"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <dict-tag
            v-if="scope.row.spuType == 1"
            :options="dict.type.sys_order_query_orderstatus_transmission"
            :value="scope.row.orderStatusKey"
          />
          ·
          <dict-tag
            v-if="scope.row.spuType == 0"
            :options="dict.type.sys_order_orderStatusKey"
            :value="scope.row.wholesaleStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="createTime">
        <template slot-scope="scope">
          {{
            scope.row.createTime
              ? $moment(parseInt(scope.row.createTime)).format(
                  "yyyy-MM-DD HH:mm:ss"
                )
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handledetail(scope.row)"
            >订单详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <order-dialog ref="orderRef"></order-dialog>
  </div>
</template>

<script>
import detailOrder from "./detail-order.vue";
import { storeInfo, statistics, queryOrderByShopId } from "@/api/chain/index";
import { getClassificationListPage } from "@/api/common/index";
export default {
  dicts: [
    "sys_order_query_orderstatus_transmission",
    "sys_order_orderStatusKey",
  ],
  components: {
    "order-dialog": detailOrder,
  },
  name: "detail",
  data() {
    return {
      times: [],
      loading: false,
      total: 0,
      spuList: [],
      createTime: [],
      orderStatistics: {},
      queryStatistics: {
        createStartTime: "",
        createEndTime: "",
        shopId: "",
      },
      shopId: "",
      storeInfo: {},
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        key: "",
        createStartTime: "",
        createEndTime: "",
        categoryId: "",
        orderStatusKey: "",
        wholesaleStatus: "",
        spuType: "",
        date: [],
      },
      categoryprops: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoad,
      },
    };
  },
  mounted() {
    this.queryStatistics.shopId = this.$route.query.id;
    this.storeInfo = this.$route.query;
    this.getstatisticsOrder();
    this.getList();
  },
  methods: {
    handledetail(record){
      this.$refs.orderRef.openDialog(record);
    },
    getstatisticsOrder() {
      statistics(this.queryStatistics).then((res) => {
        if (res.code == 200) {
          this.orderStatistics = res.data;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },

    /** 查询参数列表 */
    getList() {
      this.selectList = [];
      this.loading = true;
      queryOrderByShopId(this.queryParams).then((response) => {
        if (response.code == 200) {
          let list = response.data.records;
          this.spuList = list;
          this.total = response.data.total;
          this.loading = false;
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.createStartTime = "";
      this.queryParams.createEndTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    dateChange(val) {
      this.queryParams.createStartTime = val[0];
      this.queryParams.createEndTime = val[0];
    },
    cascaderChange(val) {
      this.queryParams.categoryId = val[val.length - 1];
    },
    statisticsChange(val) {
      if (val) {
        this.queryStatistics.createStartTime = val[0];
        this.queryStatistics.createEndTime = val[1];
      } else {
        this.queryStatistics.createStartTime = "";
        this.queryStatistics.createEndTime = "";
      }
      this.getstatisticsOrder();
    },

    categoryLazyLoad(node, resolve) {
      let that = this;
      let level = node.level;
      console.log(node);
      if (!node.data) {
        getClassificationListPage({ parentId: 0 }).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
          }));
          console.log("111", node);
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
            // level: 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 2) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 1,
            level: 1,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  .item {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 40px;
  }
  .row {
    background: #f4f4f4;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .title {
      text-align: center;
    }
    .count {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: rgb(64, 158, 255);
    }
    .zz {
      font-size: 14px;
      color: red;
      padding: 0px 10px;
    }
  }
}
.radio {
  margin: 20px 0px;
}
</style>
<style>
.el-radio-button__inner {
  width: 150px;
}
</style>
