<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 150px;" placeholder="请输入手机号码" />
      <el-select v-model="listQuery.callResultArray" clearable multiple style="width: 230px" class="filter-item" placeholder="请选择电访结果状态">
        <el-option v-for="type in resultOBOption" :key="type.label" :label="type.value" :value="type.label" />
      </el-select>
      <el-button v-permission="['GET /admin/built/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <el-tabs v-model="listQuery.campaignId" @tab-click="handleClick">
      <el-tab-pane v-for="item in campaigns" :key="item.id" :label="item.name+'('+item.count+')'" :name="item.id" />
    </el-tabs>

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" fit highlight-current-row>
      <el-table-column align="center" label="客户名称" prop="customer.customerName" />
      <el-table-column align="center" label="手机" prop="customer.tel" />
      <!--<el-table-column align="center" label="任务来源" prop="callSource">
        <template slot-scope="scope">
          <el-tag>{{ filterSource(scope.row.callSource) }}</el-tag>
        </template>
      </el-table-column>-->

      <el-table-column align="center" label="上次跟进结果" prop="callResult">
        <template slot-scope="scope">
          <el-tag :type="scope.row.callResult==0 ? 'warning' : 'success' ">{{ filterResult(scope.row.callResult) }} </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="上次跟进时间" prop="lastCallTime" />
      <el-table-column align="center" label="下次跟进时间" prop="nextCallTime" />
      <el-table-column align="center" label="备注" prop="remark" />

      <el-table-column align="center" label="操作" min-width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/built/detail']" style="margin-left:0px;padding-left:5px" type="info" plain icon="el-icon-edit" size="mini" @click="handleCall(scope.row)">
            处理
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 订单详情对话框 -->

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>

</template>

<script>
import { listBuilt, listBuiltCount } from '@/api/built'
import { allChannel } from '@/api/channel'
import SvgIcon from '@/components/SvgIcon'// svg组件
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'

const resultOBMap = [
  { label: '0', value: '未拨打' },
  { label: '1', value: '个人回拨' },
  { label: '2', value: '无应答' },
  { label: '3', value: '通话中' },
  { label: '4', value: '关机' },
  { label: '5', value: '停机' },
  { label: '6', value: '成功' },
  { label: '7', value: '空号' },
  { label: '8', value: '无法接通' },
  { label: '9', value: '拒访' }
]

const resultIbMap = [
  { label: '6', value: '接通' },
  { label: '8', value: '未接起' }
]

const sourceMap = [
  { label: 'IB', value: '进电' },
  { label: 'IM', value: '聊天工具' },
  { label: 'EMAILL', value: '邮件' },
  { label: 'APP', value: 'APP' },
  { label: 'H5', value: 'H5' }
]

export default {
  name: 'Calltask',
  components: { BackToTop, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      resultIBOption: Object.assign({}, resultIbMap),
      resultOBOption: Object.assign({}, resultOBMap),
      sourceOption: Object.assign({}, sourceMap),
      campaigns: [],
      listQuery: {
        page: 1,
        limit: 20,
        campaignId: '',
        callResultArray: [],
        mobile: '',
        sort: 'create_time',
        order: 'desc'
      },
      callForm: {
        callResult: undefined,
        consults: [],
        remark: undefined,
        callbacktime: undefined,
        callbackremark: undefined

      },
      userForm: {
        name: undefined,
        idType: undefined,
        tel: undefined,
        tel2: undefined,
        customerAddr: undefined,
        source: undefined

      },
      rules: {
        name: [{ required: true, message: '任务标题不能为空', trigger: 'blur' }]
      }

    }
  },
  created() {
    listBuiltCount().then(res => {
      this.campaigns = res.data.data
      if (this.campaigns.length > 0) {
        this.listQuery.campaignId = this.campaigns[0].id
      }
      // 获取当前campaign得数据
      this.getList()
    })
  },
  methods: {
    filterResult(result) {
      var rs = resultOBMap.filter(item => {
        if (parseInt(item.label) === result) { return item }
      })
      if (rs == null) { return '未拨打' }

      return rs[0].value
    },
    filterSource(source) {
      sourceMap.filter(item => {
        if (parseInt(item.label) == result) { return item[0].value }
      })
    },
    formatTime(time) {
      if (time == null || time === '') {
        return ''
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getList() {
      this.listLoading = true
      listBuilt(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    formatStepStatus(value, time) {
      return 1
    },
    handleFilter() {
      console.info(this.listQuery)
      this.getList()
    },
    handleClick(e) { // tab点击
      this.listQuery.campaignId = e.name
      this.getList()
    },
    handleCall(row) {
     console.log(row);
    //  this.$store.commit('showPanel',{customerId:row.customerId,panelType:'IB'});
     this.$store.commit('showPanel',{customerId:row.customerId,panelType:'OB',builtId:row.id,startTime:this.formatTime(new Date()),ticketType:0});
     this.$store.dispatch('CUSTOMER_DETAIL',{id:row.customerId});
    },
    updateUser() {

    }
  }
}
</script>

<style>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }
.marker
{
  color: #606266;
margin-top:20px;
margin-bottom:10px;
}
.el-date-editor
{
  width: auto !important
}
/* .dialog-footer{
  float: right;
  margin-top: 5px
} */
.el-form-item{
  margin-bottom: 10px
}
  .table-layout {
    margin-top: 10px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }
  .tableRowStyle{
    height: 40px;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .color-danger {
    color: #F56C6C;
    font-size: 18px;
  }

  .app-content {
     min-height: calc(100vh - 50px);
     border: 2px solid #dfe6ec;
     padding: 10px;
  }
</style>
