<template>
  <div class="commission pagePadding">
    <ex-table
      v-loading="loading"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
      :table="table"
      :data="tableData"
      :columns="columns"
      :page="pageInfo"
      :size="size"
      @page-curr-change="handlePageChange"
      @page-size-change="handleSizeChange"
      @screen-reset="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
      "
      @screen-submit="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
      "
    >
      <template #table-header="{}">
        <div style="width: 100%">
          <el-row>
            <el-col :span="24" style="padding: 0 0 0 80px">
              <el-col :span="8" style="width: 600px">
                <el-form
                  :inline="true"
                  :size="searchSize"
                  :label-position="'top'"
                  class="demo-form-inline-search"
                >
                  <el-form-item label="确认单下单时间区间">
                    <period-date-picker
                      :start="parmValue.qrd_start"
                      :end="parmValue.qrd_end"
                      :type="1"
                      :width="'135px'"
                      :size="searchSize"
                      @timeReturned="timeReturned1($event)"
                    />
                  </el-form-item>
                  <el-form-item label="回款时间区间">
                    <period-date-picker
                      :start="parmValue.start"
                      :end="parmValue.end"
                      :type="1"
                      :width="'135px'"
                      :size="searchSize"
                      @timeReturned="timeReturned2($event)"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="4" style="width: 44px">
                <el-button
                  :size="searchSize"
                  type="primary"
                  class="fr"
                  icon="el-icon-search"
                  @click="searchList"
                />
              </el-col>
              <el-col :span="4" style="width: 66px">
                <el-button
                  type="warning"
                  class="fr"
                  v-if="powers.some((item) => item == '024')"
                  :size="searchSize"
                  @click="restSearch"
                >
                  重置
                </el-button>
              </el-col>
              <el-col
                :span="4"
                style="width: 83px"
                class="fr"
                v-if="powers.some((item) => item == '049')"
              >
                <el-button
                  type="primary"
                  class="fr"
                  icon="el-icon-download"
                  :size="searchSize"
                  @click="Export()"
                  >导出</el-button
                >
              </el-col>
              <el-col :span="3" style="width: 66px; float: right">
                <el-button
                  v-if="powers.some((item) => item == '002')"
                  :size="searchSize"
                  type="primary"
                  style="float: right; margin-left: 5px"
                  @click="searchList"
                >
                  刷新
                </el-button>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </template>

      <template #operation="{ scope }">
        <el-tooltip
          v-if="powers.some((item) => item == '007')"
           
          effect="dark"
          content="详情"
          placement="top"
        >
          <i
            class="el-icon-view tb-icon"
            @click="openModal(scope.row.companyNo, scope.row.companyName, true)"
          ></i>
        </el-tooltip>
      </template>
    </ex-table>
    <no-auth v-else></no-auth>
    <!-- 弹窗 新增/修改 -->
  </div>
</template>
<script>
import ExTable from "@/components/ExTableNew.vue";
import asyncRequest from "@/apis/service/search/commission";
import PeriodDatePicker from "@/components/PeriodDatePicker";
import mixinPage from "@/mixins/elPaginationHandle";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import urlConfig from "@/apis/url-config";
export default {
  name: "commission",
  mixins: [mixinPage, resToken],
  components: {
    ExTable,
    PeriodDatePicker,
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "commission"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      name: "",
      contector: "",
      loading: false,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        qrd_start: "",
        qrd_end: "",
        hk_start: "",
        hk_end: "",
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "supperinfo",
          label: "公司名称",
          fixed: "left",
          "min-width": "150",
        },
        {
          prop: "sale_name",
          label: "销售人员",
          width: "70",
        },
        {
          prop: "depart",
          label: "部门",
          width: "65",
        },
        {
          prop: "qrd_type",
          label: "订单类型",
          width: "85",
        },
        {
          prop: "qrdNo",
          label: "广源订单号码",
          width: "138",
        },

        {
          prop: "cgdNo",
          label: "采购单编号",
          width: "138",
        },

        {
          prop: "khzzxz",
          label: "客户属性",
          "min-width": "90",
        },

        {
          prop: "khcomp",
          label: "所属分公司",
          "min-width": "90",
        },

        {
          prop: "companyName",
          label: "客户名称",
          "min-width": "150",
        },
        {
          prop: "product_name",
          label: "产品名称",
          "min-width": "140",
        },
        {
          prop: "cat_f",
          label: "一级分类",
          "min-width": "90",
        },
         {
          prop: "sale_price",
          label: "销售单价",
          "min-width": "90",
        },
        {
          prop: "order_num",
          label: "销售数量",
          "min-width": "90",
        },

        {
          prop: "sale_total",
          label: "销售总额",
          "min-width": "90",
        },
        {
          prop: "ordertime",
          label: "确认单下单时间",
          width: "145",
        },
        {
          prop: "addtime",
          label: "回款日期",
          width: "145",
        },
        {
          prop: "fund_fee",
          label: "回款金额",
          "min-width": "140",
        },

        {
          prop: "pay_day",
          label: "账期",
          "min-width": "90",
        },
      ],
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    async timeReturned1(e) {
      if (e.startTime !== "") {
        this.parmValue.qrd_start = e.startTime;
      } else {
        this.parmValue.qrd_start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.qrd_end = e.endTime;
      } else {
        this.parmValue.qrd_end = "";
      }
    },
    async timeReturned2(e) {
      if (e.startTime !== "") {
        this.parmValue.hk_start = e.startTime;
      } else {
        this.parmValue.hk_start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.hk_end = e.endTime;
      } else {
        this.parmValue.hk_end = "";
      }
    },
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        qrd_start: "",
        qrd_end: "",
        hk_start: "",
        hk_end: "",
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      this.searchList();
    },

    async timeVerification() {
      return new Promise(async (resolve, reject) => {
        if (
          this.parmValue.qrd_start === "" &&
          this.parmValue.qrd_end === "" &&
          this.parmValue.hk_start === "" &&
          this.parmValue.hk_end === ""
        ) {
          resolve({ ok: false, msg: "请选择时间区间！" });
        } else if (
          (this.parmValue.qrd_start === "" && this.parmValue.qrd_end !== "") ||
          (this.parmValue.qrd_start !== "" && this.parmValue.qrd_end === "")
        ) {
          resolve({ ok: false, msg: "确认单下单时间区间不完整！" });
        } else if (
          (this.parmValue.hk_start === "" && this.parmValue.hk_end !== "") ||
          (this.parmValue.hk_start !== "" && this.parmValue.hk_end === "")
        ) {
          resolve({ ok: false, msg: "确认单下单时间区间不完整！" });
        } else {
          resolve({ ok: true, msg: "ok" });
        }
      });
    },
    // 刷新表格
    async searchList() {
      if (!this.loading) {
        this.timeVerification()
          .then(async (r) => {
            if (!r.ok) {
              this.$message.warning(r.msg);
            } else {
              this.loading = true;
              const res = await asyncRequest.list(this.parmValue);
              if (res && res.code === 0 && res.data) {
                this.tableData = res.data.list;
                this.pageInfo.total = Number(res.data.count);
              } else if (res && res.code >= 100 && res.code <= 104) {
                await this.logout();
              } else {
                this.tableData = [];
                this.pageInfo.total = 0;
              }
              this.loading = false;
            }
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      }
    },
    /**
     * 批量导出开票信息
     */
    async Export() {
      if (!this.loading) {
        this.timeVerification().then(async (r) => {
          if (!r.ok) {
            this.$message.warning(r.msg);
          } else {
            this.loading = true;
            let url = "Admin/downreportcw";
            let httpType = `aplication/zip`;
            let title1 =
              this.parmValue.qrd_start !== ""
                ? `确认单下单时间${this.parmValue.qrd_start}至${this.parmValue.qrd_end}`
                : "";
            let title2 =
              this.parmValue.hk_start !== ""
                ? `回款时间${this.parmValue.hk_start}至${this.parmValue.hk_end}`
                : "";
            axios({
              method: "post",
              url: urlConfig.baseURL + url,
              responseType: "blob",
              data: this.parmValue,
              headers: {
                Accept: httpType,
              },
            })
              .then((res) => {
                if (res && res.status == 200 && res.data) {
                  let blob = new Blob([res.data], {
                    type: httpType,
                  });
                  let url = window.URL.createObjectURL(blob);
                  let aLink = document.createElement("a");
                  aLink.style.display = "none";
                  aLink.href = url;
                  aLink.setAttribute(
                    "download",
                    `提成数据报表${
                      this.parmValue.qrd_start !== "" &&
                      this.parmValue.hk_start !== ""
                        ? title1 + "&&" + title2
                        : this.parmValue.qrd_start !== ""
                        ? title1
                        : title2
                    }.zip`
                  );
                  document.body.appendChild(aLink);
                  aLink.click();
                  document.body.removeChild(aLink); //下载完成移除元素
                  window.URL.revokeObjectURL(url); //释放掉blob对象

                  this.$message.success(title + `信息导出成功！`);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                } else {
                  this.$message.error(res.data.message);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                }
              })
              .catch((error) => {
                console.log(error);
                this.loading = false;
              });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.commission {
  label.el-form-item__label {
    padding: 0 !important;
    line-height: 20px !important;
  }
  .demo-form-inline-search.el-form--inline.el-form--label-top {
    .el-form-item {
      margin-bottom: 0;
      > label.el-form-item__label {
        padding: 0 !important;
        line-height: 20px !important;
      }
    }
  }
}
</style>
