
<template>
<!-- :detailPath="{path:'/clueDetail_private'}" -->
  <div>
    <div style="margin-bottom:16px">
      <!-- <el-select class="inline-16" v-model="params.content.where.cluetype" style="margin-right:10px" size="small" placeholder="请选择人员类别" @change="typeChange" clearable>
      <el-option label="经销商" value="经销商">
      </el-option>
      <el-option label="业务员" value="业务员">
      </el-option>
      </el-select> -->
      <el-input class="inline-16" type="text" v-model="params.content.where.condition" size="small" style="width:200px" placeholder="请输入搜索内容" @keyup.native.enter="getList(params.content.pageNumber=1)"></el-input>
      <slot name="addClue" />
    </div>
    <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" height="40vh" fixedName="operation">
      <template v-slot:customcol="scope">
          <span v-if="scope.column.columnname == 'province'">
            {{scope.column.data.province}}-{{scope.column.data.city}}-{{scope.column.data.county}}
          </span>
          <div v-else-if="scope.column.columnname == 'allocationstatus'">
          <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '待分配'">{{scope.column.data[[scope.column.columnname]]}}</span>
          <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '已分配'">{{scope.column.data[[scope.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.column.columnname == 'totalinvestment'">
          <span>{{scope.column.data[[scope.column.columnname]] !== 0?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else-if="scope.column.columnname == 'costofconstruction'">
          <span>{{scope.column.data[[scope.column.columnname]] !== 0?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else-if="scope.column.columnname == 'leadername'">
          <span>{{scope.column.data.leader ?scope.column.data.leader[0].name:'--'}}</span>
        </div>
          <div v-else-if="scope.column.columnname == 'status'">
            <span style="color:#999999" v-if="scope.column.data[[scope.column.columnname]] == '已过期'">{{scope.column.data[[scope.column.columnname]]}}</span>
          <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '跟进中'">{{scope.column.data[[scope.column.columnname]]}}</span>
          <span style="color:#3874f6" v-else-if="scope.column.data[[scope.column.columnname]] == '待跟进'">{{scope.column.data[[scope.column.columnname]]}}</span>
          <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '已无效'">{{scope.column.data[[scope.column.columnname]]}}</span>
          <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已转化'">{{scope.column.data[[scope.column.columnname]]}}</span>
          </div>
          <span v-else-if="scope.column.columnname != 'operation' && !scope.column.data[scope.column.columnname]">--</span>
          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
      </template>
      <template v-slot:opreation="scope">
        <slot name="editClue" :data="scope.data" />
        <slot name="delClue" :data="scope.data" />
      </template>
    </tableLayout>
    <el-pagination
      background
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.content.pageNumber"
      :page-size="params.content.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

export default {
  components:{
    
  },
  data () {
    return {
      options:[],
      tablecols:[],
      list:[],
      total:0,
      params: {
        'id':20221102102602,
        "content": {
          "nocache":true,
          "pageNumber": 1,
          "pageSize": 20,
          "sat_campaignid": '',
            "where":{
              "condition":"",
              "status":"",
              "cluetype":'业务员',
            }
        }
      }
    }
  },
  provide () {
    return {
    }
  },
  methods:{
    async getList () {
      this.params.content.sat_campaignid = this.$route.query.id
      let res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
    },
    typeChange () {
      this.tablecols = this.params.content.cluetype == '经销商' ? this.tool.tabelCol(this.$route.name).clueTable.tablecols : this.tool.tabelCol(this.$route.name).clueSalerTable.tablecols
      this.params.content.pageNumber = 1
      this.getList()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getList()
    },
  },
  created () {
    this.tablecols = this.params.content.cluetype == '经销商' ? this.tool.tabelCol(this.$route.name).clueTable.tablecols : this.tool.tabelCol(this.$route.name).clueSalerTable.tablecols
    this.getList()
    
  }
}

</script>
<style scoped>
/deep/.el-pagination {
  text-align: right;
  margin-top: 10px;
  margin-right: 40px;
}
</style>