<template>
  <div class="container normal-panel normal-margin">
    <el-button type="default" size="small" @click="getWaitClue">分配经销商</el-button>
    <el-dialog title="数据预览" :visible.sync="dialogTableVisible" width="90%" top="30px">
      <p class="normal-margin">总共:&nbsp;{{total}}条</p>
      <p class="tips normal-margin">注：1、未匹配经销商的线索，分配时，系统将自动跳过，不予以分配；2、所属经销商有且仅有一个匹配结果。</p>
      <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'agent'">
            <div v-if="scope.column.data.agent.length > 0">
              <el-tag size="mini" v-for="item in scope.column.data.agent" :key="item.sa_agentsid" effect="plain">{{item.agentname}}</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)">{{scope.data.agent.length === 0?'匹 配':'更 换'}}</el-button>
        </template>
      </tableLayout>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="匹配经销商" :visible.sync="dialogTableVisible2" width="90%" top="30px">
      <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_agent.sa_agentsid === scope.data.sa_agentsid?'color:#3774f6':''" class="el-icon-success large-icon" @click="selectAgent(scope)"></i>
        </template>
      </tableLayout>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return{
      dialogTableVisible:false,
      dialogTableVisible2:false,
      agentlist:[],
      list:[],
      total:0,
      total2:0,
      selectRow:{},
      act_agent:'',
      searchValue:''
    }
  },
  methods:{
    async getWaitClue () {
      this.dialogTableVisible = true
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getWaitClue",
        "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": "getMatchAgentList",
        "content": {
          "sat_orderclueid":row.sat_orderclueid,
          "where":{
              "condition":this.searchValue
          }
        }
      })
      this.agentlist = res.data
      this.total2 = res.total
      this.selectRow = row
    },
    selectAgent (scope) {
      this.act_agent = scope.data
      this.selectRow.agent = [this.act_agent]
      this.dialogTableVisible2 = false
    },
    async onSubmit () {
      let arr = []
      arr = this.list.filter(e=> e.agent.length > 0).map(e=> {
        return {sat_orderclueid:e.sat_orderclueid,sa_agentsid:e.agent[0].sa_agentsid}
      });
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "matchAgent",
        "content": {
          "matchlist": arr
        }
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.$emit('onSuccess')
      })
    }
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['distributionTable'].tablecols
    this.tablecols2 = this.tool.tabelCol(this.$route.name)['canSelectAgentTable'].tablecols
    
  }
}

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