<template>
  <div>
    <el-button type="primary" size="small" @click="getWaitClue">自动分配</el-button>
    <el-drawer :with-header="false" append-to-body :visible.sync="dialogTableVisible" size="90%" top="30px">
      <div class="container">
        <p class="normal-title" style="margin-bottom:16px">自动分配</p>
        <p class="normal-margin">总共:&nbsp;{{total}}条</p>
        <p class="tips normal-margin">注：1、未匹配业务员的线索，分配时，系统将自动跳过，不予以分配；2、所属业务员有且仅有一个匹配结果。</p>
        <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght" :fixed="'operation'">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'sales'">
              <div v-if="scope.column.data.sales.length > 0">
                <el-tag size="mini" v-for="item in scope.column.data.sales" :key="item.hrid" effect="plain" style="margin-right: 5px">{{item.name}}</el-tag>
              </div>
              <p class="tips" v-else>未匹配</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">
            <el-button type="text" size="mini" @click="getMatchAgentList(scope.data)" :style="scope.data.sales.length === 0?'':'color:#d73a33'">{{scope.data.sales.length === 0?'匹 配':'更 换'}}</el-button>
          </template>
        </tableLayout>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
    <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>-->
            <i :style="scope.data.ismatch=== 1?'color:#3774f6':''" class="el-icon-success large-icon" @click="selectSaler(scope)"></i>
          </template>
        </tableLayout>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return{
      dialogTableVisible:false,
      dialogTableVisible2:false,
      agentlist:[],
      list:[],
      total:0,
      total2:0,
      selectRow:{},
      act_saler:'',
      searchValue:''
    }
  },
  methods:{
    async getWaitClue () {
      this.dialogTableVisible = true
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getWaitClue_Sales",
        "content": {
        }
      })
      this.list = res.data
      this.total = res.total
    },
    async getMatchAgentList (row) {
      this.dialogTableVisible2 = true
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getMatchSalesList",
        "content": {
          "sat_orderclueid":row.sat_orderclueid,
          "where":{
              "condition":this.searchValue
          }
        }
      })
      this.agentlist = res.data
      this.total2 = res.total
      this.selectRow = row
    },
    selectSaler (scope) {
      this.act_saler = scope.data
      this.selectRow.sales = [this.act_saler]
      console.log(this.selectRow);
      
      this.dialogTableVisible2 = false
    },
    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.dialogTableVisible = false
        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>