<template>
  <div class="app-container">
    <div>
      <el-input
        v-model="listQuery.username__contains"
        placeholder="手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-refresh-left"
        @click="resetFilter"
      >刷新重置</el-button>
    </div>
    <el-table
      :data="consumerList"
      style="width: 100%;margin-top:10px;"
      border
      fit
      v-loading="listLoading"
      highlight-current-row
      max-height="600"
      @sort-change="changeSort"
      @selection-change="handleSelectionChange"
    >
      
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="手机号" sortable="custom" prop="username">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="小程序OpenId" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.openid }}</template>
      </el-table-column>
      <el-table-column label="用户类型">
        <template slot-scope="scope">{{ scope.row.role_name }}</template>
      </el-table-column>
      <el-table-column label="单位" sortable="custom" prop="company">
        <template
          slot-scope="scope"
          v-if="scope.row.company_name != null"
        >{{ scope.row.company_name }}</template>
      </el-table-column>
      <el-table-column label="缴费学科">
        <template slot-scope="scope">
          <el-tag v-for="item in scope.row.subjects_name" :key="item">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="工作类别" sortable="custom" prop="workscope">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.workscope_name">{{ scope.row.workscope_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建信息" sortable="custom" prop="create_time">
        <template slot-scope="scope">
          <span v-if="scope.row.create_admin_">{{ scope.row.create_admin_.username }}/</span>
          <span>{{ scope.row.create_time.substring(0,10) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right" width="260">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="primary"
              size="small"
              @click="handleClaim(scope)"
              v-if="checkPermission(['consumer_claim'])"
            >认领</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getConsumerList,
  claimConsumer
} from "@/api/crm";

import { genTree, deepClone } from "@/utils";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

const listQuery = {
  page: 1,
  limit: 20,
  adminoff: true,
};
export default {
  components: { Pagination },
  watch: {
  },
  data() {
    return {
      consumerList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        adminoff: true,
      },
      selects: [],
    };
  },
  computed: {},
  watch: {
    
  },
  created() {
    this.getList();
  },
  methods: {
    changeSort(val) {
      if (val.order == "ascending") {
        this.listQuery.ordering = val.prop;
      } else {
        this.listQuery.ordering = "-" + val.prop;
      }

      this.getList();
    },
    handleSelectionChange(val) {
      let selects = [];
      for (var i = 0; i < val.length; i++) {
        selects.push(val[i].id);
      }
      this.selects = selects;
    },
    checkPermission,
    getList() {
      this.listLoading = true;
      getConsumerList(this.listQuery).then((response) => {
        this.consumerList = response.data.results;
        this.total = response.data.count;
        this.listLoading = false;
      });
    },

    resetFilter() {
      this.listQuery = {
        page: 1,
        limit: 20,
        adminoff: true,
      };
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleClaim(scope) {
this.$confirm("确定认领该用户吗?", "提示", {
      }).then(()=>{
        claimConsumer(scope.row.id).then(res=>{
          this.$message.success('认领成功,可去列表修改')
          this.getList()
        })
      })
    },
  },
};
</script>
