<template>
  <div class="app-container customer_potential">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="filter-container">
          <el-input v-model="keyword" placeholder="请输入关键字" class="filter-item"/>
          <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
          <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
          <el-button v-permission="'HY_import'" type="primary" class="filter-item" @click="btn_import"><svg-icon icon-class="daoru" />导入</el-button>
          <el-button v-permission="'HY_export'" type="primary" class="filter-item" @click="btn_export"><svg-icon icon-class="daochu" />导出</el-button>
          <el-button v-permission="'HY_deletes'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deletes">批量删除</el-button>
        </div>
        <el-table v-loading="loading" :data="dataLists" border stripe @selection-change="changeSelects">
          <el-table-column type="selection" width="40"/>
          <el-table-column type="index" label="编号" align="center" fixed width="60"/>
          <el-table-column prop="companyame" label="仓库名称" align="center" min-width="200" />
          <el-table-column prop="customerdept" label="仓库属性" align="center" min-width="100" />
          <el-table-column prop="goodsnumber" label="商品数量" align="center" min-width="100" />
          <el-table-column label="操作" width="220" align="center" class-name="oparate_btn" fixed="right">
            <template slot-scope="scope">
              <!-- <el-button v-permission="'HY_detail'" size="mini" plain type="success" @click="btn_detail(scope.row.id)">详情</el-button> -->
              <el-button v-permission="'HY_edit'" size="mini" plain type="primary" @click="btn_edit(scope.row.id)">编辑</el-button>
              <el-button v-permission="'HY_delete'" size="mini" plain type="danger" @click="btn_delete(scope.row.id)">删除</el-button>
              <el-button v-permission="'HY_allocation'" size="mini" plain type="warning" @click="btn_allocation(scope.row.id)">调拨</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="pageParams.total > 0" :total="pageParams.total" :pageindex.sync="pageParams.pageindex" :pagesize.sync="pageParams.pagesize" class="pagination" @pagination="getListR" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { Send } from '@/utils/telWebsocket'
import { filterContent } from '@/utils'
import { getCallOutprefix } from '@/api/teloperation'
import { getDictionary } from '@/api/commonAPI'
import { getCusListsR, deleteCusUserR, addFollowinfo } from '@/api/warehouseManagment/warehouseList'
import detail from './detail'
import edit from './edit'
import add from './add'
import importCusInfo from './importCusInfo'
import allocation from './allocation'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'CustomerInfoQZ',
  components: {
    Pagination
  },
  filters: {
    timeFilter: function(value) {
      return value === '0001-01-01 00:00:00' ? '-' : value
    }
  },
  data() {
    return {
      loading: false,
      searchDate: '',
      keyword: '',
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      multipleSelection: [], // 列表选中的数据
      dataLists: [] // 列表数据
    }
  },
  computed: {
    ...mapGetters([
      'usercode', // 工号
      'extension', // 分机号
      'telIsLogin', // 是否签入
      'telSeatState', // 坐席状态
      'telLineState', // 线路状态
      'telIsVisCallout' // 外呼面板是否显示
    ]),
    // 是否可以点击外呼
    isAllowCallout: function() {
      // `this` 指向 vm 实例
      return this.telIsLogin && this.telSeatState === 2 && this.telLineState === 1
    }
    //
  },
  created() {
    this.getListR()
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getListR()
      }
    }
  },
  methods: {
    getListR() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // 第几页
          pagesize: this.pageParams.pagesize, // 每页几条信息
          keyword: this.keyword.replace(/\s+/g, ""), // 否	string	模糊查询（姓名，手机号码，固话）
          gjstime: this.searchDate && this.searchDate[0], // 跟进开始时间
          gjetime: this.searchDate && this.searchDate[1], // 跟进结束时间
          customertype: '潜在客户'
        }
        getCusListsR(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.data.total
            this.dataLists = response.data.rows
          }
        })
        resolve()
      })
    },
    changeSelects(val) {
      this.multipleSelection = val
    },
    // 搜索
    btn_search() {
      this.pageParams.pageindex = 1
      this.getListR()
    },
    btn_add() {
      this.$layer.iframe({
        content: {
          content: add, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['60%', '45%'],
        title: '添加仓库信息'
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: edit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId, 'custid': this.leftowId } // props
        },
        area: ['60%', '45%'],
        title: '编辑仓库信息'
      })
    },
    btn_detail(editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['60%', '75%'],
        title: '查看仓库信息'
      })
    },
    //仓库调拨
    btn_allocation(allocationId){
      this.$layer.iframe({
        content: {
          content: allocation, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': allocationId } // props
        },
        area: ['40%', '55%'],
        title: '调拨商品数量'
      })
    },
    btn_delete(editId) {
      this.$confirm('您确定要将此潜在客户项目信息删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCusUserR(editId).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.getListR()
              this.$message.success('删除成功!')
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    btn_deletes() {
      const ids = []
      for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message.warning('没有可删除的选项')
        return
      }
      this.btn_delete(ids)
    },
    // 导入
    btn_import() {
      this.$layer.iframe({
        content: {
          content: importCusInfo, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {}// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '380px'],
        shadeClose: false,
        title: '导入潜在客户项目信息'
      })
    },
    // 导出
    btn_export() {
      const exportUrl = this.$store.getters.serverConfig.BASE_API + 'workorderapi/api/CusCustomer/exportexcel?pageindex=' + this.pageParams.pageindex +
      '&pagesize=' + this.pageParams.pagesize +
      '&keyword=' + this.keyword +
      '&gjstime=' + (this.searchDate && this.searchDate[0]) +
      '&gjetime=' + (this.searchDate && this.searchDate[1]) +
      '&customertype=潜在客户'
      window.location.href = exportUrl
    },
    // 跟进客户项目信息
    btn_followup(editId) {
      this.$prompt('请输入跟进内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPattern: /\S/, // 匹配任何非空白字符。等价于[^ \f\n\r\t\v]。
        inputErrorMessage: '您还没有输入跟进的内容！'
      })
        .then(({ value }) => {
          const params = {
            id: editId, // 跟进的客户项目信息id
            content: filterContent.delHtmlTag(value) //	跟进内容
          }
          addFollowinfo(params).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.getListR()
              this.$message.success('跟进成功!')
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消跟进！')
        })
    },
    // 转移项目负责人
    btn_transfer(editId) {
      this.$layer.iframe({
        content: {
          content: transferUser, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['50%', '45%'],
        title: '转移项目负责人'
      })
    },
    // 改变为签约客户
    btn_change(editId) {
      this.$layer.iframe({
        content: {
          content: addOrEditR, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId, 'isPotential': true } // props
        },
        area: ['60%', '90%'],
        title: '改变为签约客户'
      })
    },
    // 点击电话号码外呼
    btn_clickCallout(calltel) {
      this.$confirm('您确定要对此客户发起呼叫吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getCallOutprefix(calltel).then(response => {
            if (response.state.toLowerCase() === 'success') {
              const res = response.data
              this.scoketDatas = {
                'Type': 'MakeCall',
                'AgentID': this.usercode,
                'AgentExten': this.extension,
                'Header': res.fix, // 号码前缀 用于截断前缀得到真实号码
                'DestinationNumber': res.phone //
              }
              store.dispatch('ChangeCallNum', calltel)
              Send(this.scoketDatas)
              // store.dispatch('UpdateCalloutScreen', false)// 关闭外呼面板
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消呼叫')
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .customer_potential{
    .el-table .el-button+.el-button{
      margin-left: 0;
      margin-bottom: 5px;
    }
  }
</style>
