<template>
  <div class="app-container">
    <div class="filter-container">
<!--        <el-input :size="sizeType" v-model="search.clientName" placeholder="客户名称" style="width: 200px;" class="filter-item"/>-->
<!--      <el-button :size="sizeType" type="primary" icon="el-icon-search" @click="searchData">-->
<!--        搜索-->
<!--      </el-button>-->
      <el-button :size="sizeType" type="green" icon="el-icon-plus" @click="addInfo">
        增加
      </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
        </el-tooltip>
      </div>
    </div>
    <el-table
      :size="sizeType"
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      border
      style="margin-top: 10px"
      ref="orderTable"
      width="300px"
      max-height="600"
      default-expand-all>
      <el-table-column label="操作" width="150px">
        <template slot-scope="{row}">
          <el-button size="mini" @click="handleEdit(row)" type="primary">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="业务员姓名" prop="saleManName" width="150px"></el-table-column>
      <el-table-column label="登记日期" prop="createTime" width="130">
        <template slot-scope="{row}">
          <span v-if="row.createTime">{{ row.createTime | getTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getList"/>
    <el-dialog title="订单详情" :visible.sync="detailVisible" class="orderDetailDialog" width="1200px" top="10px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog" :noDoubleClick="true"></cancledialog>
    <order-step ref="orderStep"></order-step>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1200px">
      <div class="formContent">
        <span>日期：{{indexDate}}</span>
        <div class="row">
          <div class="col el-col-3 border-left-none" style="display: flex">
            <span class="colText">业务额统计</span>
          </div>
          <div class="col el-col-21 border-left-none">
            <div class="row border-left-none border-right-none">
              <div class="col el-col-5">
                <span>当日下单单数</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.dayOrderCount" disabled></el-input>
              </div>
              <div class="col el-col-5">
                <span>当日确认业务额</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.dayConfirmOrderMoney" disabled></el-input>
              </div>
              <div class="col el-col-5">
                <span>当月确认总额</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.monthConfirmOrderMoney" disabled></el-input>
              </div>
            </div>
            <div class="row border-left-none border-right-none">
              <div class="col el-col-5">
                <span>当日单色单数</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.daySingleColorOrderCount"></el-input>
              </div>
              <div class="col el-col-5">
                <span>单色当日确认业务额</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.dayConfirmSingleColorOrderMoney"></el-input>
              </div>
              <div class="col el-col-5">
                <span>当月确认单色</span>
              </div>
              <div class="col el-col-3">
                <el-input type="textarea" v-model="reportInfo.monthConfirmSingleColorOrder"></el-input>
              </div>
            </div>
            <div class="row border-left-none border-right-none">
              <div class="col el-col-5">
                <span>当日逻辑单数</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.dayLogicOrderCount"></el-input>
              </div>
              <div class="col el-col-5">
                <span>逻辑当日确认业务额</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.dayConfirmLogicOrderMoney"></el-input>
              </div>
              <div class="col el-col-5">
                <span>当月确认逻辑</span>
              </div>
              <div class="col el-col-3">
                <el-input type="textarea" v-model="reportInfo.monthConfirmLogicOrder"></el-input>
              </div>
            </div>
            <div class="row border-left-none border-right-none">
              <div class="col el-col-5">
                <span>当日未确认单数</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.dayWaitConfirmOrderCount" disabled></el-input>
              </div>
              <div class="col el-col-5">
                <span>当日未确认业务额</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.dayWaitConfirmOrderMoney" disabled></el-input>
              </div>
              <div class="col el-col-5">
                <span>当日报价数</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput = "value=Number(value.replace(/[^\d.]/g,''))" type="number" v-model="reportInfo.dayQuoteCount"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="border-bottom: 1px solid #d6d6d6">
          <div class="col el-col-3 border-left-none" style="display: flex">
            <span class="colText">开发客户统计</span>
          </div>
          <div class="col  el-col-21 border-left-none">
            <div class="row border-left-none border-right-none">

              <div class="col el-col-8">
                <span>总客户数</span>
              </div>
              <div class="col el-col-5">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.totalClientCount"></el-input>
              </div>
              <div class="col el-col-8">
                <span>潜在客户数</span>
              </div>
              <div class="col el-col-3">
                <el-input oninput="value=Number(value.replace(/[^\d.]/g,''))" v-model="reportInfo.potentialClientCount"></el-input>
              </div>
            </div>
            <div class="row border-left-none border-right-none">
              <div class="col el-col-8">
                <span>当日合作客户新增数</span>
              </div>
              <div class="col el-col-5">
                <el-input type="number" v-model="reportInfo.dayAddClientCount" disabled></el-input>
              </div>
              <div class="col el-col-8">
                <span>当月总合作客户数</span>
              </div>
              <div class="col el-col-3">
                <el-input type="number" v-model="reportInfo.monthClientCount" disabled></el-input>
              </div>
            </div>
            <div class="row border-left-none border-right-none" style="height: 110px">
              <div class="col el-col-8" style="display: flex">
                <span class="colText">当日回访客户数及明细</span>
              </div>
<!--              <div class="col el-col-16">
                <el-input type="textarea" minlength="150" maxlength="10000" show-word-limit :rows="4" v-model="reportInfo.dayVisitClient"></el-input>
              </div>-->
              <div-editable style="text-align: left !important;line-height: 20px;padding: 5px" class="col el-col-16" minlength="150" maxlength="10000" show-word-limit :rows="2" v-model="reportInfo.dayVisitClient">
              </div-editable>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="clickLoading" @click="dialogStatus==='1'?addBtn():editBtn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index.js'
import OrderDetail from '@/components/orderDetail/orderDetail'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import OrderStep from '@/components/orderStep/orderStep'
import { exportData } from '@/api/orderCharge/orderCollection'
import {
  addSaleManReport,
  getSaleManReport,
  getSaleManReportList, initSaleManReport,
  updateSaleManReport
} from '@/api/order/saleManReportList'
import {mapGetters} from 'vuex'
import DivEditable from '@/components/saleManReport/divEditable.vue'
const searchForm = {
  clientName: '',
  financeCode: '',
  chargeCode: '',
  orderCode: '',
  accountName: '',
  voucherCode: '',
  chargeMan: '',
  platformOrderID: '',
  dataKind: '',
  beginTime: '',
  endTime: '',
  receiveCode: '',
  payMan: ''
}
const reportInfo = {
  dayOrderCount: '',
  dayConfirmOrderMoney: '',
  daySingleColorOrderCount: '0',
  dayConfirmSingleColorOrderMoney: '0',
  dayLogicOrderCount: '0',
  dayConfirmLogicOrderMoney: '0',
  dayWaitConfirmOrderCount: '',
  dayWaitConfirmOrderMoney: '',
  dayVisitClient: '',
  totalClientCount: '0',
  potentialClientCount: '0',
  dayAddClientCount: '',
  monthClientCount: '',
  monthConfirmOrderMoney: '',
  monthConfirmSingleColorOrder: '',
  monthConfirmLogicOrder: '',
  dayQuoteCount:""
}
export default {
  name: 'CollectionRecords',
  computed: {
    ...mapGetters([
      "userId"
    ])
  },
  components: {
    OrderStep,
    OrderDetail,
    Cancledialog,
    DivEditable
  },
  data() {
    return {
      sizeType: 'mini',
      detailVisible: false,
      search: {
        createBy:""
      },
      clickLoading: false,
      tableData: [],
      collection: {},

      listLoading: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      searchTime: [],
      dialogTitle: '添加报表',
      dialogStatus: '1',
      dialogVisible: false,
      indexDate: parseTime(new Date()),
      reportInfo: Object.assign({},reportInfo)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetForm() {
      this.search = Object.assign({}, searchForm)
      this.searchTime = []
    },
    getList() {
      var _that = this;

      var params = {
        "createBy":_that.$store.state.user.userId
      }
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      // console.log(data);
      getSaleManReportList(data).then(response => {
        // console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.collection = response.collection
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 刷新表格
    tableRefresh() {
      // 刷新变革
      this.getList()
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getList()
    },
    addInfo() {
      const _that = this
      _that.dialogVisible = true
      _that.dialogTitle = '添加报表'
      _that.dialogStatus = '1'
      _that.reportInfo=Object.assign({},reportInfo)
      _that.indexDate = parseTime(new Date())
      // console.log(_that.$store.state.user.userId);
      var data = {
        idUser: _that.$store.state.user.userId
      }
      initSaleManReport(data).then(res =>{
        // console.log(res);
        var data = res.data
        _that.reportInfo.dayAddClientCount = data.dayAddClientCount
        _that.reportInfo.dayConfirmOrderMoney = data.dayConfirmOrderMoney
        _that.reportInfo.dayOrderCount = data.dayOrderCount
        _that.reportInfo.dayWaitConfirmOrderCount = data.dayWaitConfirmOrderCount
        _that.reportInfo.dayWaitConfirmOrderMoney = data.dayWaitConfirmOrderMoney
        _that.reportInfo.monthClientCount = data.monthClientCount
        _that.reportInfo.monthConfirmOrderMoney = data.monthConfirmOrderMoney
        _that.reportInfo.dayQuoteCount = data.dayQuoteCount
      })
    },
    addBtn() {
      const _that = this
      if(_that.reportInfo.dayVisitClient.length <=150){
        _that.$message.warning('明细不得少于150字')
        return
      }
      _that.clickLoading = true
      var data = {
        saleManDayReport: _that.reportInfo
      }
      addSaleManReport(data).then(res =>{
        // console.log(res);
        if(res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message.success('添加成功')
          _that.clickLoading = false
          _that.getList()
        }
      }).catch(err =>{
        _that.clickLoading = false
      })
    },

    handleEdit(row) {
      const _that = this
      _that.dialogTitle = '编辑报表'
      _that.dialogStatus = '2'
      _that.dialogVisible = true
      _that.indexDate = parseTime(new Date())
      var data = {
        id: row.id
      }
      getSaleManReport(data).then(res => {
        // console.log(res)
        var data = res.data
        _that.reportInfo = {
          id: data.id,
          dayOrderCount: data.dayOrderCount,
          dayConfirmOrderMoney: data.dayConfirmOrderMoney,
          daySingleColorOrderCount: data.daySingleColorOrderCount,
          dayConfirmSingleColorOrderMoney: data.dayConfirmSingleColorOrderMoney,
          dayLogicOrderCount: data.dayLogicOrderCount,
          dayConfirmLogicOrderMoney: data.dayConfirmLogicOrderMoney,
          dayWaitConfirmOrderCount: data.dayWaitConfirmOrderCount,
          dayWaitConfirmOrderMoney: data.dayWaitConfirmOrderMoney,
          dayVisitClient: data.dayVisitClient,
          totalClientCount: data.totalClientCount,
          potentialClientCount: data.potentialClientCount,
          dayAddClientCount: data.dayAddClientCount,
          monthClientCount: data.monthClientCount,
          monthConfirmOrderMoney: data.monthConfirmOrderMoney,
          monthConfirmSingleColorOrder: data.monthConfirmSingleColorOrder,
          monthConfirmLogicOrder: data.monthConfirmLogicOrder,
          dayQuoteCount: data.dayQuoteCount,
        }
      })
    },
    editBtn() {
      const _that = this
      if(_that.reportInfo.dayVisitClient.length <=150){
        _that.$message.warning('明细不得少于150字')
        return
      }
      _that.clickLoading = true
      var data = {
        saleManDayReport: _that.reportInfo
      }
      updateSaleManReport(data).then(res =>{
        // console.log(res);
        if(res.httpCode == 200) {
          _that.dialogVisible = false
          _that.clickLoading = false
          _that.$message.success('修改成功')
          _that.getList()
        }
      }).catch(err =>{
        _that.clickLoading = false
      })
    },

    // 导出
    exportBtn() {
      const _that = this
      var data = {
        code: 'OrderChargeData_Exporter',
        exportName: '收款记录导出',
        params: _that.search
      }
      exportData(data).then(res => {
        // console.log(res)
        if (res.httpCode == 200) {
          _that.$message.success('导出成功，请前至系统管理-我的任务中进行查看和下载')
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.filter-item{
  padding: 5px 0;
}
.formContent{
  width: 100%;
  margin: 0 auto;
}
.borderStyle{
  //border: 1px solid #d6d6d6;
}
.row{
  min-height: 48px;
  line-height: 48px;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row nowrap;
  border: 1px solid #d6d6d6;
  border-bottom: 0px;
}
.col .row:first-child,{
  border-top: 1px;
}
.col{
  min-height: 30px;
  border-left: 1px solid #d6d6d6;
  text-align: center;
}
::v-deep.el-input{
  padding: 5px;
}
.border-left-none{
  border-left: 0px;
}
.border-right-none{
  border-right: 0px;
}
.colText{
  width: 100%;
  margin: auto 0;
}

::v-deep input::-webkit-outer-spin-button,::v-deep input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
::v-deep input[type = 'number']{
  -moz-appearance: textfield !important;
}
::v-deep.el-input.is-disabled .el-input__inner{
  color: #06328b;
}
</style>
