<template>
  <div class="saleauth-wrapper">
    <div class="search-cont">
      <el-cascader
        v-model="sales"
        placeholder="请选择销售"
        style="width: 220px"
        :options="salesArr"
        :props="defaultSalesProps"
        :show-all-levels="false"
        :key="modifySales"
        collapse-tags
        clearable
        filterable
        @change="changeSales"
      >
      </el-cascader>
      <el-input
        placeholder="销售名称搜索"
        v-model="search_txt"
        style="max-width: 320px"
        @input="searchHandle"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        class="table-cont"
        v-loading="isShowloadding"
      >
        <el-table-column
          v-for="item in tableColumns"
          :key="item.label"
          :label="item.label"
          :prop="item.key"
          :min-width="item.minWidth"
          align="center"
        >
            <template slot-scope="{row}">
                <span v-if="item.key==='Enabled'">
                    {{row[item.key]===0?'已禁用':'已启用'}}
                </span>
                <span  v-else>{{ row[item.key]}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot="header" slot-scope="{}">
            <span>操作</span>
            <el-tooltip
              effect="dark"
              placement="top-start"
              content="该操作会禁用/启用该用户的添加客户权限并对用户发送消息"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <span
              @click="handleChangeAuth(row)"
              style="cursor: pointer"
              :style="{ color: row.Enabled===0 ? '#1DD441' : '#D1433A' }"
              >{{ row.Enabled===0 ? "启用" : "禁用" }}</span
            >
          </template>
        </el-table-column>
        <div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
          <img
            src="~@/assets/img/cus_m/nodata.png"
            alt=""
            style="display: block; width: 160px; height: 128px; margin: auto"
          />
          <span>暂无数据</span>
        </div>
      </el-table>
    </div>
    <el-pagination
      layout="total,prev,pager,next,jumper"
      background
      :current-page="page_no"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :total="total"
      style="float: right; margin-top: 20px"
    >
    </el-pagination>
  </div>
</template>

<script>
import { customInterence } from "@/api/api.js";
export default {
  data() {
    return {
      sales: "",
      salesArr: [],
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      search_txt: "",
      tableColumns: [
        {
          label: "销售姓名",
          key: "RealName",
        },
        {
          label: "所属分组",
          key: "DepartmentGroup",
          minWidth: 220,
        },
        {
          label: "状态",
          key: "Enabled",
        },
      ],
      tableData: [],
      isShowloadding: false,
      page_no: 1,
      pageSize: 10,
      total: 1,
    };
  },
  methods: {
    async getTableData() {
      this.isShowloadding = true;
      let salesArr=[]
        if(this.sales.length){
            salesArr=this.sales.map(item=>{
                return item[item.length-1]
            })
        }
      const res = await customInterence.getSalesData({
          KeyWord:this.search_txt,
          AdminIds:salesArr.join(','),
          CurrentIndex:this.page_no,
          PageSize:this.pageSize
      })
      if(res.Ret===200){
          const {List,Paging} = res.Data
          this.tableData = List
          this.page_no = Paging.CurrentIndex
          this.total = Paging.Totals
          this.pageSize = Paging.PageSize
      }
      this.isShowloadding = false;
    },
    getSale() {
      customInterence.getSales().then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    /* 选择销售时 */
    changeSales() {
      this.search_txt=''
      this.page_no = 1;
      this.getTableData();
    },
    searchHandle() {
        this.sales=''
        this.page_no = 1;
        this.getTableData();
    },
    handleChangeAuth(item) {
        customInterence.changeSaleAuth({
            AdminId:item.AdminId,
            Enabled:item.Enabled===0?1:0
        }).then(res=>{
            if(res.Ret===200){
                this.$message.success('操作成功')
                this.getTableData()
            }
        })
    },
    handleCurrentChange(page) {
        this.page_no = page
        this.getTableData()
    },
  },
  mounted() {
    this.getTableData();
    this.getSale();
  },
};
</script>
<style lang="scss">
.saleauth-wrapper {
  .el-cascader__search-input {
    min-width: 30px;
  }
}
</style>
<style scoped lang="scss">
.saleauth-wrapper {
  height: calc(100vh - 120px);
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 30px 20px;
  box-sizing: border-box;

  .frequency-cont {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .frequency-ul {
      display: flex;
      align-items: center;

      li {
        width: 110px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #b3d8ff;
        background: #ecf5ff;
        color: #409eff;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 20px;

        &.act {
          background: #409eff;
          color: #fff;
        }
      }
    }
  }

  .search-cont {
    display: flex;
    justify-content: space-between;
  }

  .table-wrap {
    margin-top: 20px;
  }
}
</style>
