<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      formPath="publicCustomer" 
      tableName="publicCustomerTable" 
      idName="userid" 
      :apiId="{query:20221011133602,del:''}"
      :options="options"
      >
      <template v-slot:titleRight="scope">
        <el-divider direction="vertical"></el-divider>
        <el-dropdown size="medium" @command="handleCommand">
          <span class="el-dropdown-link">
            {{poolValue}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in poolList" :key="index" :command="item">{{item.poolname}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-slot:tbList="scope">
<!--        <div v-if="scope.data.column.columnname == 'leader'">-->
<!--          {{scope.data.column.data[[scope.data.column.columnname]].length > 0 ? scope.data.column.data[[scope.data.column.columnname]].name : '&#45;&#45;'}}-->
<!--        </div>-->
<!--        <div v-else-if="scope.data.column.columnname == 'grade' && customerLead">-->
<!--          {{customerLead.find(item => item.rowindex == scope.data.column.data[scope.data.column.columnname]).value}}-->
<!--        </div>-->
<!--        <div v-else-if="scope.data.column.columnname == 'datastatus'">-->
<!--          <span :style="scope.data.column.data[scope.data.column.columnname] == 0 ? '正常' : scope.data.column.data[scope.data.column.columnname] == 1 ? 'color:#cccccc' : 'color:red'">-->
<!--            {{scope.data.column.data[scope.data.column.columnname] == 0 ? '正常' : scope.data.column.data[scope.data.column.columnname] == 1 ? '作废' : '锁定'}}-->
<!--          </span>-->
<!--        </div>-->
<!--        <div v-else>-->
<!--          {{scope.data.column.data[scope.data.column.columnname] || scope.data.column.columnname == 'operation' ? scope.data.column.data[[scope.data.column.columnname]] : '&#45;&#45;'}}-->
<!--        </div>-->
        <div v-if="scope.data.column.columnname === 'isleader'">
          <span v-if="scope.data.column.data['leader'].length !== 0">已分配</span>
          <span v-else>未分配</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'contact'">
          <span>{{scope.data.column.data['leader'][0]?scope.data.column.data['leader'][0].name:''}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'grade'">
          <p v-if="scope.data.column.data.grade === 2">B级</p>
          <p v-if="scope.data.column.data.grade === 1">A级</p>
          <p v-if="scope.data.column.data.grade === 3">C级</p>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <status-change class="inline-16" @deleteSuccess="$refs.basicLayout.listData()" :data="scope.data.data" />
        <el-button size="mini" type="text" class="inline-16" @click="$router.push({path:'/PublicCustomerDetail',query:{id:scope.data.data.sa_customersid,rowindex:scope.data.data.rowindex,tabIndex:tabIndex}})">详 情</el-button>
      </template>
    </basicLayout>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
import statusChange from './components/statusChange'
export default {
  data () {
    return {
      options:[],
      customerType:'',
      customerLead:'',
      publicList:'',
      arealist:[],
      poolList:[],
      poolValue:'全部',
      tabIndex:""
    }
  },
  provide () {
    return {
      customerType:() => this.customerType,
      customerLead:() => this.customerLead,
      arealist:() => this.arealist,
      publicList:() => this.publicList
    }
  },
  components:{statusChange},
  methods:{
    /* 获取系统选项数据 */
    async getSysOption() {
      /* 获取客户类型 */
      let res = await this.$store.dispatch('optiontypeselect','customertypemx')
      this.customerType = res.data
      /* 获取客户等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','customergrade')
      this.customerLead = res2.data
      console.log(this.customerLead);
      
    },
    /* 获取公海数据 */
    async getPublicList() {
      const res = await this.$api.requested({
      "id": 20221009100702,
      "content": {
          "pageNumber": 1,
          "pageSize": 999999,
          "where": {
          }
      },
    })
      this.publicList = res.data
    },
    /* 获取省市县 */
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      this.arealist = this.tool.createMenu(res.data)
    },
    /*获取公海列表*/
    async queryPool(){
      const res = await this.$api.requested({
        "id": 20221009100702,
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": "",
            "startdate": "",
            "enddate": ""
          }
        },
      })
      this.poolList = res.data
    },
    handleCommand(command){
      console.log(command)
      this.tabIndex = command.sa_customerpoolid
      this.poolValue = command.poolname
      this.$refs['basicLayout'].param.content.where.sa_customerpoolid = command.sa_customerpoolid
      this.$refs['basicLayout'].listData()
      // this.tabIndex = command.name
      // this.editableTabsValue = command.title
      // this.$refs['list'].param.content.type = command.name
      // this.$refs['list'].param.content.isExport = 0
      // this.$refs['list'].listData()
      // this.$store.dispatch('sendDataToForm',)
    }
  },
  created() {
    this.getSysOption()
    this.getPublicList()
    this.query_arealist()
    this.queryPool()
  }
}

</script>
<style scoped>
/* /deep/.el-table__cell .cell {
  display: flex;
  justify-content: s;
} */
.el-dropdown-link {
  cursor: pointer;
  color: #151515;
  font-size: 16px;
}
.el-divider--vertical{
  margin: 0 16px;
}
.el-icon-arrow-down {
  font-size: 16px;
}
</style>