<template>
  <div class="inline-16">
    <el-button size="mini" @click="getMatchAgentList" type="primary">分 配</el-button>
    <el-drawer title="匹配业务员" append-to-body :visible.sync="dialogTableVisible2"  :show-close="false" size="80%" top="30px">
      <div class="container">
        <div class="flex-align-center flex-between">
          <p class="normal-margin">总共:&nbsp;{{total2}}条</p>
          <el-input class="normal-margin" size="small" prefix-icon="el-icon-search" style="width:180px" v-model="searchValue" placeholder="输入搜索关键词" clearable @clear="(search = '',getMatchAgentList(selectRow))" @keyup.native.enter="getMatchAgentList(selectRow)"></el-input>
        </div>
        <tableLayout :layout="tablecols2" :data="agentlist" :custom="true" :height="tableHieght">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'ismatch'">
              <p :style="scope.column.data.ismatch === 1?'color:#52c41a':''">{{scope.column.data.ismatch === 1?'是':'否'}}</p>
            </div>
            <div v-else-if="scope.column.columnname === 'province'">
              <span>{{scope.column.data.province}} - {{scope.column.data.city}} - {{scope.column.data.county}}</span>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
          <template v-slot:opreation="scope">
            <i :style="act_saler.hrid === scope.data.hrid?'color:#3774f6':''" class="el-icon-success large-icon" @click="selectSaler(scope)"></i>
          </template>
        </tableLayout>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return{
      dialogTableVisible2:false,
      agentlist:[],
      list:[],
      total:0,
      total2:0,
      selectRow:{},
      act_saler:'',
      searchValue:''
    }
  },
  methods:{
    async getMatchAgentList (row) {
      this.dialogTableVisible2 = true
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getMatchSalesList",
        "content": {
          "sat_orderclueid":this.$route.query.id,
          "where":{
              "condition":this.searchValue
          }
        }
      })
      this.agentlist = res.data
      this.total2 = res.total
      this.selectRow = row
    },
    selectSaler (scope) {
      this.$confirm('是否将线索分配给当前选中业务员','提示',{
        "confirmButtonText":'确定',
        "cancelButtonText":'取消'
      }).then ( async () => {
        let arr = [{sat_orderclueid:this.$route.query.id,hrid:scope.data.hrid}]
        const res = await this.$api.requested({
          "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
          "method": "matchAgent_Sales",
          "content": {
            "matchlist": arr
          }
        })
        console.log(res);
        this.tool.showMessage(res,() => {
          this.dialogTableVisible2 = false
          this.$emit('onSuccess')
        })
      })
    },
    async onSubmit () {
      let arr = []
      arr = this.list.filter(e=> e.sales.length > 0).map(e=> {
        console.log(e)
        return {sat_orderclueid:e.sat_orderclueid,hrid:e.sales[0].hrid}
      });
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "matchAgent_Sales",
        "content": {
          "matchlist": arr
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
      })
    }
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['distributionSalerTable'].tablecols
    this.tablecols2 = this.tool.tabelCol(this.$route.name)['canSelectSalerTable'].tablecols
    
  }
}

</script>
<style scoped>
.tips{color:#999}
.large-icon {
  font-size: 20px;
  color:#999;
  cursor: pointer;
}
</style>