<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >


      <el-form-item label="选择日期">
        <el-date-picker
          v-model="uploadDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>


      <el-form-item label="类型" prop="dataType">
        <el-select
          filterable
          v-model="queryParams.dataType"
          placeholder="选择类型"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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-button
           type="primary"
           plain
           size="mini"
           @click="upload"
           style="margin-bottom: 15px"
         >导出
         </el-button
         >-->
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dayArray" ref="multipleTable">

      <el-table-column label="时间" align="center" prop="date"></el-table-column>
      <el-table-column label="总Gmv" align="center" prop="gmv"></el-table-column>
      <el-table-column label="订单量" align="center" prop="orderNum"></el-table-column>
      <el-table-column label="有效Gmv" align="center" prop="validGmv"></el-table-column>
      <el-table-column label="有效订单" align="center" prop="validOrderNum"></el-table-column>
      <el-table-column label="预估佣金收入" align="center" prop="mcnPromotionAmount"></el-table-column>
      <el-table-column label="毛利率" align="center" prop="grossMargin">
        <template slot-scope="scope" v-if="scope.row.grossMargin != null">
          {{ scope.row.grossMargin + "%" }}
        </template>
      </el-table-column>
œ

    </el-table>

  </div>
</template>

<script>
import {refreshCache} from "@/api/system/dict/type";
import {downFilePost} from "@/api/supplyChain/supplyChain";
import {
  profitData
} from "@/api/jiaoyang/report";

export default {
  name: "JyGrossMargin",
  dicts: ["sys_normal_disable"],
  components: {},
  data() {
    return {
      typeList: [],
      dayArray: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: null,
      okIds: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      //上传文件类型
      fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openFp: false,
      formFp: {},
      // 是否可编辑
      edit: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoadingSale: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        promoterId: undefined,
        promoterName: undefined,
        dataType: 0,
        startDate: undefined,
        endDate: undefined,
      },
      uploadDate: [new Date(), new Date()],
      //页面所有的下拉数据
      queryParamsList: {
        typeList: [
          {value: 0, label: "汇总"},
          {value: 1, label: "自营"},
          {value: 2, label: "分销"},
        ],
      },
      // 表单参数
      form: {},
      formBroadcast: {
        ruleDetails: [],
      },
      //上传报表下拉数据
      formList: {},
      fileList: [],
      accept: "",
      //获取销售线索文件流
      dateFile: new FormData(),
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rules: {},
      rulesBroadcast: {
        ruleName: {
          required: true,
          message: "规则名称必填",
          trigger: "blur",
        },
        ruleType: {
          required: true,
          message: "规则类型必选",
          trigger: "change",
        },
      },
      // 分配销售展示列表
      ksInfo: null,
      userId: null,
    };
  },
  created() {
    this.userId = this.$store.getters.userId;

    let date = new Date();
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let dd = date.getDate();
    dd = dd < 10 ? "0" + dd : dd;
    this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
    this.getList();
  },
  filters: {},
  methods: {


    /** 查询字典类型列表 */
    getList() {
      this.dayArray = [];
      this.loading = true;
      profitData(
        this.addDateRange(
          {...this.queryParams},
          this.uploadDate,
          "startDate",
          "endDate")
        ).then((response) => {
            console.log(response)
            this.loading = false;
            this.dayArray = response.dayArray;

          })
          .catch((err) => {
            console.log(err);
          });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.confirmLoading = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.dateFile = null;
      this.resetForm("formBroadcast");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      let start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      let date = new Date(start);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      this.uploadDate = `${y}-${MM}-${dd}`;
      this.resetForm("queryForm");
      this.handleQuery();
    },


    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
    },
  },
};
</script>
<style lang="scss" scoped>
.entire-line {
  width: 100%;
}

::v-deep .entire-line .el-form-item__content {
  width: 60%;
}

::v-deep .el-form-item__label {
  white-space: nowrap;
}
</style>
<style scoped lang="scss">
::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
}

.item-name-calss p {
  margin: 0;
  text-align: left;
}

.tableBox {
  width: 100%;
}
</style>
