<template>
  <div class="normal-card">
    <Header>
      <add @updataList="updataList" v-if="tool.checkAuth($route.name,'insert')"></add>
      <export-btn v-if="tool.checkAuth($route.name,'export')"></export-btn>
      <move type="more" :teamList="teamList" :data="checkboxArr" @updataList="getList()" v-show="checkboxArr.length >= 1"></move>
    </Header>
    <div class="content">
      <div class="select" v-if="tool.checkAuth($route.name,'read')">
        <search @searchActive="searchActive" @clearData="clearData"></search>
        <div class="status">
          <span style="margin-right:10px">状态:</span>
          <el-select size="small" v-model="param.content.where.status" @change="selectChange" clearable>
            <el-option value="待跟进">待跟进</el-option>
            <el-option value="跟进中">跟进中</el-option>
            <el-option value="丢单">丢单</el-option>
            <el-option value="已成交">成交</el-option>
            <el-option value="无效">无效</el-option>
            <el-option value="已过期">已过期</el-option>
          </el-select>
        </div>
      </div>
      <table1 :layout="tablecols" :custom="true" :checkbox="true" :data="list" :height="tableHieght"
        @checkboxCallBack="checkboxCallBack" v-if="tool.checkAuth($route.name,'read')">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'rowindex'" style="display:flex;align-items: center;">
            <p>{{ scope.column.data[scope.column.columnname] }}</p>
            <span :class="scope.column.data.isTeam == '总部' ? 'all-team' : 'team'">{{ scope.column.data.isTeam }}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'leadername'">
            <p>{{ scope.column.data[scope.column.columnname]}}</p>
          </div>
          <div v-else-if="scope.column.columnname == 'city'">
            <p>{{ scope.column.data.province }}、{{ scope.column.data.city }}、{{ scope.column.data.county }}</p>
          </div>
          <div v-else-if="scope.column.columnname == 'status'">
            <p :style="{'color':statusStyle[scope.column.data[scope.column.columnname]]}">
              {{ scope.column.data[scope.column.columnname] }}</p>
          </div>
          <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
        </template>
        <template v-slot:opreation="scope">
          <div class="handle">
            <slot name="detail" :data="scope"></slot>
            <slot name="edit" :data="scope"></slot>
            <slot name="goUp" :data="scope"></slot>
            <slot name="move" :data="scope"></slot>
          </div>
        </template>
      </table1>
      <div style="margin-top: 16px; text-align: right">
        <el-pagination background small @current-change="handleCurrentChange" :current-page="param.content.pageNumber"
          :page-size="param.content.pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import search from '@/components/search/index'
import table1 from '@/components/table/index'
import { log } from '@antv/g2plot/lib/utils'
import Header from '@/SManagement/archives_upload/components/Header'
import move from '@/SManagement/orderclue/components/move'
import exportBtn from '@/SManagement/orderclue/components/export'
import add from '@/SManagement/orderclue/components/add'

export default {
  name: 'list',
  data () {
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "selectList",
        "content": {
          "isAll": false,
          "nocache":true,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": "",
            "status": ""
          }
        }
      },
      //表格配置数据
      tablecols: [],
      total: 0,
      list: [],
      userName:JSON.parse(window.sessionStorage.getItem('active_account')).name,
      //table选中数据
      checkboxArr: [],
      statusStyle: {
        '待跟进': '#FA8C16',
        '跟进中': '#52C41A',
        '丢单': '#FF3B30',
        '无效': '#999999',
        '已成交': '#333333',
        '已过期': '#999999',
      }
    };
  },
  props:['teamList'],
  components: { search, Header , exportBtn, table1, move , add },
  computed: {
  },
  watch: {
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      let res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      console.log(this.list);
      
    },
    searchActive (data) {
      this.param.content.where.condition = data
      this.param.content.pageNumber = 1
      this.getList()
    },
    clearData () {
      this.param.content.where.condition = ''
      this.param.content.pageNumber = 1
      this.getList()
    },
    handleCurrentChange (n) {
      this.param.content.pageNumber = n
      this.getList()
    },
    selectChange () {
      this.param.content.pageNumber = 1
      this.getList()
    },
    updataList () {
      this.param.content.pageNumber = 1
      this.getList()
    },
    checkboxCallBack (data) {
      this.checkboxArr = data.map(item => item.sat_orderclueid)
    }
  },
  mounted () {
    this.tablecols = this.tool.tabelCol(this.$route.name).orderclueList.tablecols;
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.normal-card {
  background: #F5F5F5;
  padding: 0;
  height: 100%;
}
.select {
  display: flex;
  font-size: 14px;
  background: #ffffff;
  padding: 16px 0;
}
.content {
  background: #ffffff;
  padding: 0 16px;
  min-height: calc(100% - 80px);
}
.handle {
  color: #4f7bfd;
  display: flex;
}
/deep/.handle p {
  cursor: pointer;
  margin-right: 10px;
}
.all-team {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #3874f6;
  color: #3874f6;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 5px;
}
.team {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #fa8c16;
  color: #fa8c16;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 5px;
}
</style>
