<template>
  <div class="container entry-records-points">
    <div>
      <el-autocomplete
        v-model="companyName"
        :fetch-suggestions="querySearchAsync"
        style="width: 220px; margin-right: 20px"
        @select="selectCompanyChange"
        clearable
        placeholder="请输入公司名称"
        @clear="clearCompanyHandleSearch"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-autocomplete>
      <el-cascader
        v-model="sales"
        placeholder="请选择销售"
        style="width: 200px; margin-right: 20px"
        :options="salesArr"
        :props="defaultSalesProps"
        :show-all-levels="false"
        collapse-tags
        clearable
        filterable
        @change="companyHandleSearch"
      >
      </el-cascader>
      <el-button type="primary" @click="$router.push('AddNewEntries')"> 新增</el-button>
      <a :href="exportUser" download>
        <el-button type="primary" style="width: 80px; margin-left: 15px">导出</el-button>
      </a>
    </div>

    <div style="margin-top: 20px">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column align="center" prop="CompanyName" label="客户名称"> </el-table-column>
        <el-table-column align="center" prop="SellerName" label="销售" width="100"> </el-table-column>
        <el-table-column align="center" prop="Quarter" label="季度" width="180">
          <template slot-scope="{ row }">
            <span>{{ row.Quarter.join(",") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ProportionTotal" label="总分" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.ProportionTotal }}{{ row.EnterScoreType == 2 ? "%" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Ranking" label="排名" width="100"> </el-table-column>
        <el-table-column align="center" prop="IsMergeScoring" label="合并打分" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.IsMergeScoring == 1 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="SecuritiesFirmsName" label="券商名称"> </el-table-column>
        <el-table-column align="center" prop="CreateTime" label="首次录入时间" width="180"> </el-table-column>
        <el-table-column align="center" prop="ModifyTime" label="最近更新时间" width="180"> </el-table-column>
        <el-table-column align="center" prop="name" label="操作" width="180">
          <template slot-scope="{ row }">
            <span class="editsty" @click="lookHandler(row)">查看明细</span>
            <span class="deletesty" @click="deleteHandle(row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="pageSize" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </div>
  </div>
</template>

<script>
import { customInterence, xClassCustomApi } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
export default {
  name: "EntryRecords",
  props: {
    searchVal: {
      type: String,
      default: "",
    },
  },
  components: { mPage },
  computed: {
    exportUser() {
      let baseUrl = process.env.API_ROOT + "/cygx/enterScore/list";
      let token = localStorage.getItem("auth") || "";
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      let paramStr = "";
      let params = {
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        KeyWord: this.companyName,
        AdminId: salesArr.join(","),
        IsExport: true,
      };
      for (let key in params) {
        paramStr = `${paramStr}&${key}=${params[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  data() {
    return {
      page_no: 1,
      pageSize: 10,
      total: 1,
      tableData: [],
      companyName: "",
      sales: "",
      salesArr: [], //销售
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
    };
  },
  watch: {
    searchVal() {
      this.getDataList();
    },
  },
  mounted() {
    this.getSale();
    this.getDataList();
  },
  methods: {
    // 公司名称
    companyHandleSearch(value) {
      this.page_no = 1;
      this.getDataList();
    },
    /* 获取销售 */
    getSale() {
      let status = 0;
      if (this.act_status == "流失") {
        status = 1;
      }
      customInterence.getSale({ Status: status }).then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    // 获取列表信息
    async getDataList() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      const res = await xClassCustomApi.enterScoreList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        KeyWord: this.companyName,
        AdminId: salesArr.join(","),
      });
      if (res.Ret === 200) {
        this.total = res.Data.Paging.Totals;
        this.tableData = res.Data.List;
      }
    },
    // 删除
    deleteHandle(item) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await xClassCustomApi.enterScoreDelete({
            EnterScoreId: item.EnterScoreId,
          });
          if (res.Ret === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getDataList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看
    lookHandler(item) {
      this.$router.push({
        path: "/EditNewEntries",
        query: { id: item.EnterScoreId },
      });
    },
    //
    async querySearchAsync(query, cb) {
      cb([]);
      if (query) {
        const res = await xClassCustomApi.enterScoreSearchlist({ KeyWord: query });
        if (res.Ret === 200) {
          this.querySearchList = res.Data.List.map((_) => {
            return {
              ..._,
              value: _.CompanyName,
            };
          });
          cb(this.querySearchList);
        }
      }
    },
    // 选择后客户名称的id
    selectCompanyChange(value) {
      this.companyId = value.CompanyId;
      this.page_no = 1;
      this.getDataList();
    },
    clearCompanyHandleSearch() {
      this.companyId = "";
      this.page_no = 1;
      this.getDataList();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="scss">
// .entry-records-points {
// }
</style>
