<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="关键字">
              <a-input placeholder="请输入姓名、家长姓名、联系方式、备注" v-model="queryParam.keywords"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="录入日期">
                <a-range-picker v-model="queryParam.dateQ"
                  format="YYYY-MM-DD"
                  :placeholder="['开始日期', '结束日期']"
                  @change="onCreateTimeChange" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="状态">
                <a-select  v-model="selectValue" @change="handleInput">
                  <a-select-option value= 0 >全部</a-select-option>
                  <a-select-option v-for="(item, key) in typeOptions" :key="key" :value="item.value">
                    <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
                      {{ item.text || item.label }}
                    </span>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="销售">
                <j-select-user-by-dep placeholder="请选择销售" v-model="queryParam.salesCode"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="采单员">
                <j-select-user-by-dep placeholder="请选择采单员" v-model="queryParam.collectinoCode"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="采单员">
                <j-select-user-by-dep placeholder="请选择采单员" v-model="queryParam.collectinoCode"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="来源渠道">
                <!-- <j-dict-select-tag type="list" v-model="queryParam.collectinoCode" dictCode="customer_source" placeholder="请选择来源渠道" /> -->
                <a-select  v-model="queryParam.channel" placeholder="请选择来源渠道">
                  <a-select-option value= "99" >无渠道</a-select-option>
                  <a-select-option v-for="(item, key) in sourceOptions" :key="key" :value="item.value">
                    <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
                      {{ item.text || item.label }}
                    </span>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="qrcode">地推设置</a-button>
      <a-button @click="handleAdd" type="primary" icon="swap">名单分配  </a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('名单管理')">导出</a-button>
      <a-button type="primary" icon="import" @click="handlImport">导入</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>
        <!-- table的插槽必须写在table里面,外面展现不出来 -->
        <a slot="info" slot-scope="text, record" @click="handleInfo(record)" >
          {{text}}
          <a-icon v-if="record.sex == Number(1)" type="man" style="color:#1890ff;" />
          <a-icon v-if="record.sex ==  Number(2)" type="woman" style="color:tomato"/>
        </a>
        <span slot="action" slot-scope="text, record">
          <a @click="handleDialled(record)" v-if="record.status == '1' || record.status == '3' || record.status == '4'">
            未接听<span style="color:tomato" v-if="record.dialled !== null">({{record.dialled}})</span></a>
          <a-divider type="vertical" v-if="record.status == '1' || record.status == '3' || record.status == '4'" />
          <a @click="handleDelay(record)" v-if="record.status == '1' || record.status == '3' || record.status == '4'">
            延期处理<span style="color:tomato" v-if="record.delayNum !== null">({{record.delayNum}})</span></a>
          <a-divider type="vertical" v-if="record.status == '1' || record.status == '3' || record.status == '4'"/>

          <a @click="handleActive(record)" v-if="record.status == '5'">激活名单</a>
          <a-divider type="vertical" v-if="record.status == '5'" />

          <a @click="handleLogs(record)" v-if="record.status == '2' || record.status == '5'">操作日志</a>
          <a-divider type="vertical" v-if="record.status == '5'" />

          <a-dropdown v-if="record.status == '1' || record.status == '3' || record.status == '4' || record.status == '5'">
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleInvalid(record)">无效</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handlePotential(record)">转为潜客</a>
              </a-menu-item>
              <a-menu-item v-if="record.status != '5'">
                <a @click="handleLogs(record)" >操作记录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <!-- status -->
        <span slot="status" slot-scope="text, record" >
          <span v-if="record.status == '2'">
              {{text}}
              <span v-if="record.followStatus_dictText !== undefined">({{record.followStatus_dictText}})</span>
          </span>
          <span v-else-if="record.status == '3'">
            <span v-if="new Date().getTime() > new Date(record.delayDate).getTime()">{{text}}<span style="color:tomato">(待跟进)</span></span>
            <span v-else>{{text}}<span style="color:#37a691">(未到期)</span></span>
          </span>
          <span v-else-if="record.status == '5'">
            {{text}}<span style="color:tomato">({{record.invalidReason_dictText}})</span>
          </span>
          <span v-else>
            {{text}}
          </span>
        </span>
      </a-table>
    </div>
    <!-- 弹框 -->
    <customer-business-modal  ref="modalForm" @ok="modalFormOk"></customer-business-modal>
    <CustomerBusinessInvalid @childReturn="invalidReturn()" :childShow = "invalidVisiable" :para="invalidParam"></CustomerBusinessInvalid>
    <CustomerBusinessDelay @childReturn="delayReturn()" :childShow = "delayVisiable" :para="delayParam"></CustomerBusinessDelay>
    <CustomerBusinessLogs @childReturn="logsReturn()" :childShow = "logsVisiable" :para="logsParam"></CustomerBusinessLogs>
    <CustomerBusinessInfo @childReturn="infoReturn()" :childShow = "infoVisiable" :para="infoParam"></CustomerBusinessInfo>
    <CustomerBusinessEdit @childReturn="editReturn()" :childShow = "editVisiable" :para="editParam"></CustomerBusinessEdit>
    <CustomerBusinessActive @childReturn="activeReturn()" :childShow = "activeVisiable" :para="activeParam"></CustomerBusinessActive>
    <CustomerBusinessPotential @childReturn="potentialReturn()" :childShow = "potentialVisiable" :para="potentialParam"></CustomerBusinessPotential>
    <Upload @childReturn="uploadReturn()" :childShow = "uploadShow"></Upload>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import CustomerBusinessModal from './modules/CustomerBusinessModal'
  import {ajaxGetDictItems} from '@/api/api'
  import { postAction } from '../../../api/manage'
  import JEllipsis from "@/components/jeecg/JEllipsis"
  import { Empty } from 'ant-design-vue';
  import CustomerBusinessInvalid from './modules/CustomerBusinessInvalid.vue'
  import CustomerBusinessDelay from './modules/CustomerBusinessDelay.vue'
  import CustomerBusinessLogs from './modules/CustomerBusinessLogs.vue'
  import CustomerBusinessInfo from './modules/CustomerBusinessInfo.vue'
  import CustomerBusinessEdit from './modules/CustomerBusinessEdit.vue'
  import CustomerBusinessActive from './modules/CustomerBusinessActive.vue'
  import CustomerBusinessPotential from './modules/CustomerBusinessPotential.vue'
  import Upload from '../modules/Upload.vue'
  export default {
    name: 'CustomerBusinessList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JEllipsis,CustomerBusinessModal,CustomerBusinessInvalid,
    CustomerBusinessDelay,CustomerBusinessLogs,CustomerBusinessInfo,Upload,
    CustomerBusinessInfo,CustomerBusinessEdit,CustomerBusinessActive,CustomerBusinessPotential
    },
    data () {
      let ellipsis = (v, l = 20) => (<j-ellipsis value = {v} length = {l}/>)
      return {
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        description: '名单管理管理页面',
        // 表头
        columns: [
          {
            title:'姓名',
            align:"center",
            dataIndex: 'name',
            scopedSlots: { customRender: 'info' }
          },
          {
            title:'家长',
            align:"center",
            dataIndex: 'parents_dictText'
          },
          {
            title:'联系方式',
            align:"center",
            dataIndex: 'phone'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remarks',
            customRender: (text) => {
              return ellipsis(text);
            }
          },
          {
            title:'销售',
            align:"center",
            dataIndex: 'salesCode_dictText'
          },
          {
            title:'采单员',
            align:"center",
            dataIndex: 'collectinoCode_dictText'
          },
          {
            title:'操作时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status_dictText',
            scopedSlots: { customRender: 'status'}
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/customer/customerBusiness/list",
          delete: "/customer/customerBusiness/delete",
          deleteBatch: "/customer/customerBusiness/deleteBatch",
          exportXlsUrl: "/customer/customerBusiness/exportXls",
          importExcelUrl: "customer/customerBusiness/importExcel",
          
        },
        queryParam: {
          status: 1
        },
        dictOptions:[],
        editVisiable: false,
        superFieldList:[],
        selectValue: "1",
        typeOptions:[],
        age: 0,
        sourceOptions: [],
        infoParam: [],
        invalidVisiable: false,
        delayVisiable: false,
        activeVisiable: false,
        infoVisiable: false,
        potentialVisiable: false,
        invalidParam: {
          invalidReason: "1"
        },
        potentialParam: {},
        delayParam: {},
        editParam:{},
        activeParam:{},
        logsParam: {},
        logsOptions:[],
        logsVisiable: false,
        uploadShow: false,
      }
    },
    created() {
      this.getSuperFieldList();
      ajaxGetDictItems('customer_business_status', null).then((res) => {
        if (res.success) {
          this.typeOptions = res.result;
        }
      });
      ajaxGetDictItems('customer_source', null).then((res) => {
        if (res.success) {
          this.sourceOptions = res.result;
        }
      });
      
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'name',text:'姓名',dictCode:''})
        fieldList.push({type:'string',value:'sex',text:'性别',dictCode:''})
        fieldList.push({type:'date',value:'birthday',text:'生日'})
        fieldList.push({type:'string',value:'parents',text:'家长',dictCode:''})
        fieldList.push({type:'string',value:'phone',text:'联系方式',dictCode:''})
        fieldList.push({type:'string',value:'remarks',text:'备注',dictCode:''})
        fieldList.push({type:'string',value:'channel',text:'渠道来源',dictCode:''})
        fieldList.push({type:'string',value:'salesCode',text:'销售',dictCode:''})
        fieldList.push({type:'string',value:'collectinoCode',text:'采单员',dictCode:''})
        fieldList.push({type:'string',value:'status',text:'状态',dictCode:''})
        fieldList.push({type:'int',value:'dialled',text:'未接听',dictCode:''})
        fieldList.push({type:'int',value:'delayNum',text:'延迟次数',dictCode:''})
        fieldList.push({type:'string',value:'delayDate',text:'延迟日期',dictCode:''})
        this.superFieldList = fieldList
      },
      onCreateTimeChange: function (value, dateString) {
        this.queryParam.beginTime=dateString[0];
        this.queryParam.endTime=dateString[1];
      },
      handleInput(e) {
        if (e == 0) {
          this.queryParam.status = undefined
        } else {
          this.queryParam.status = e
        }
      },
      handleDialled(record) {
        let params = {
          id: record.id,
          status: 4,
          dialled: Number(record.dialled) + 1
        }
        postAction("/customer/customerBusiness/edit", params).then((res) => {
          if(res.success) {
            this.$message.success('编辑成功');
            this.loadData();
          }
        });
      },
      searchReset() {
        this.queryParam = {};
        this.queryParam= {
          status: 1
        };
        this.selectValue ="1",
        this.loadData();
      },
      handleInvalid(record) {
        this.invalidVisiable = true;
        this.invalidParam.id = record.id
      },
      handleEdit(record) {
        this.editVisiable = true;
        this.editParam = record;
      },
      handleLogs(record) {
        this.logsParam.cbId = record.id;
        this.logsVisiable = true;
      },
      handlePotential(record) {
        this.potentialVisiable = true;
        this.potentialParam = record;
      },
      handleActive(record) {
        this.activeVisiable = true;
        this.activeParam = {
          id: record.id
        }
      },
      handleInfo(record) {
        this.infoVisiable = true;
        this.infoParam = record;
      },
      invalidReturn() {
        this.invalidVisiable = false;
        this.invalidParam = {};
        this.invalidParam = {
          invalidReason: "1"
        };
        this.loadData();
      },
      handleDelay(record){
        this.delayVisiable = true;
        this.delayParam.id = record.id;
        this.delayParam.remarks = record.remarks;
        this.delayParam.delayNum = record.delayNum;
      },
      delayReturn() {
        this.delayVisiable = false;
        this.delayParam = {};
        this.loadData();
      },
      logsReturn() {
        this.logsVisiable = false;
        this.logsParam = {};
        this.loadData();
      },
      infoReturn() {
        this.infoVisiable = false;
        this.infoParam = [];
        this.loadData();
      },
      editReturn() {
        this.editVisiable = false;
        this.loadData();
      },
      activeReturn(){
        this.activeVisiable = false;
        this.loadData();
      },
      potentialReturn() {
        this.potentialVisiable = false;
        this.loadData();
      },
      handlImport() {
        this.uploadShow = true;
      },
      uploadReturn() {
        this.uploadShow = false;
        this.loadData();
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
<style lang="less">
  .leftStyle {
    position: absolute;
    left: -200px;
    top: 1px;
    font-size: 12px;
  }
  
  
  #appStyle {
    position: relative;
    top: 50px;
    left: 250px;
    width: 50%;
  }
  .logDetail {
      width: 100%;
      display: flex;
      flex-direction: column;
  }
  .ran {
      width: 15px; 
      height: 15px;
      border-radius: 50%;
      background: none; 
      border: 3px solid #1890ff;
  }
  </style>