<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" v-show="searchShow">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="6">
                        <a-form-item  label="激活号码：">
                            <a-input placeholder="" v-model="queryParam.orderPhone"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="6">
                        <a-form-item  label="销售人：">
                          <a-input  placeholder="" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="4">
                        <a-form-item label="销售县分">
                            <a-select v-model="queryParam.salesSubst" @change="getSchool">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in subNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-item label="销售学校">
                            <a-select v-model="queryParam.salesSchool">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="6">
                      <a-form-item  label="激活时间：">
                        <a-range-picker @change="onChangeActivateTime" />
                      </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="6">
                      <a-form-item  label="上传时间：">
                        <a-range-picker @change="onChangeCreateTime" />
                      </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="6">
                        <a-form-item  label="销售账号：">
                            <a-input  placeholder="" v-model="queryParam.account"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="6">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="审核状态">
                        <a-select placeholder="请选择" v-model="queryParam.status">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="0">重复放号</a-select-option>
                                <a-select-option key="1">未审核</a-select-option>
                                <a-select-option key="2">系统审核不通过</a-select-option>
                                <a-select-option key="3">充值审核通过</a-select-option>
                                <a-select-option key="4">充值审核不通过</a-select-option>
                                <a-select-option key="5">审核通过</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                  <a-col :md="6" :sm="6">
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="销售时段">
                      <a-select placeholder="请选择" v-model="queryParam.preType">
                        <a-select-option key="">请选择</a-select-option>
                        <a-select-option key="前置">前置</a-select-option>
                        <a-select-option key="开学">开学</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                    <a-col :md="6" :sm="6">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="订单类型">
                            <a-select placeholder="请选择" v-model="queryParam.orderType">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="1">放号登记</a-select-option>
                                <a-select-option key="0">新用户办理</a-select-option>
                                <a-select-option key="2">存量升级</a-select-option>
                                <a-select-option key="3">小白卡</a-select-option>
                                <a-select-option key="4">羊城通</a-select-option>
                                <a-select-option key="5">线上预制卡</a-select-option>
                                <a-select-option key="6">线上小白卡</a-select-option>
                                <a-select-option key="7">自助终端</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="6">
                      <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="审核锁定">
                        <a-select placeholder="请选择" v-model="queryParam.lockState">
                          <a-select-option key="">全部</a-select-option>
                          <a-select-option key="是">是</a-select-option>
                          <a-select-option key="否">否</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                      <a-col :md="6" :sm="6">
                          <a-button @click="search()" type="primary">查询</a-button>
                           <a-divider type="vertical"/>

                          <a-button  v-show="!callback" @click="exportList()" style="margin-left: 10px">导出</a-button>
                          <a-dropdown>
                              <a-menu slot="overlay" @click="handleMenuClick">
                                  <a-menu-item key="1">
                                      <a-icon type="arrow-up" />放号上传
                                  </a-menu-item>
                                  <a-menu-item key="2">
                                      <a-icon type="arrow-up" />充值审核
                                  </a-menu-item>
                                  <a-menu-item key="3">
                                    <a-icon type="arrow-up" />批量修改
                                  </a-menu-item>
                                  <a-menu-item key="4">
                                    <a-icon type="arrow-up" />锁定
                                  </a-menu-item>
                              </a-menu>
                            <a-button style="margin-left: 8px">
                              导入
                              <a-icon type="down" />
                            </a-button>
                          </a-dropdown>

                      </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="table-page-search-wrapper show-search-button">
            <a-button size="small" type="link" @click="changeSearchShow">
              <span v-if="searchShow">
                收起<a-icon type='up'/>
              </span>
              <span v-else>
                展开<a-icon type='down'/>
              </span>
            </a-button>
        </div>
        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" :pageSize="pageSize" bordered ref="table" size="small" class="flex-filling">
            <template slot="imageUrl" slot-scope="text">
                <img style="width: 20%" :src="apis + text" @click="imgClick(text)">
            </template>
            <template slot="operation" slot-scope="text,record">
<!--            <a  @click="modifyfunction(record)">编辑</a>-->
                <!--<a-divider type="vertical"/>-->
                <a  @click="showModal(record)">备注</a>
                <!--<a-divider type="vertical"/>-->
            </template>
            <template slot="orderTypeScope" slot-scope="text">
                <p v-if="text=='1'">放号登记</p>
                <p v-if="text=='0'">新用户办卡</p>
                <p v-if="text=='2'">存量升级</p>
                <p v-if="text=='3'">小白卡</p>
                <p v-if="text=='4'">羊城通</p>
                <p v-if="text=='5'">线上预制卡</p>
                <p v-if="text=='6'">线上小白卡</p>
                <p v-if="text=='7'">自助终端</p>
            </template>
            <template slot="statusScope" slot-scope="text">
                <p v-if="text=='0'">重复放号</p>
                <p v-if="text=='1'">未审核</p>
                <p v-if="text=='2'">系统审核不通过</p>
                <p v-if="text=='3'">充值审核通过</p>
                <p v-if="text=='4'">系统审核不通过</p>
                <p v-if="text=='5'">审核通过</p>
            </template>
        </s-table>

      <a-modal v-model="visible" title="备注" ok-text="确认" cancel-text="取消" @ok="hideModal">
        <span>备注内容：</span>
        <a-input v-model="customRemark"></a-input>
      </a-modal>

        <a-modal
                title="批量导入"
                :visible="modifyvisible"
                @ok="createfunctionOk"
                @cancel="createfunctionCancel"
                html-type="submit"
                width="400px"
        >
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p style="text-align:center">{{ importTile }}</p>
                </a-col>
            </a-row>
            <import-btn :url="importUrl" :responseFun="doPush">
                <a-tooltip placement="topLeft" title="导入文件" arrowPointAtCenter>
                    <a-row :gutter="24">
                        <a-col :md="24" :sm="12">
                            <p>
                                选择文件：
                                <a-button type="primary">选择文件</a-button>
                            </p>
                        </a-col>
                    </a-row>
                </a-tooltip>
            </import-btn>
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p v-show="FHTemplate">
                        模板下载：
                        <a-button type="primary" @click="downloadTemplateFH">放号上传模板</a-button>
                    </p>
                    <p v-show="CZTemplate">
                        模板下载：
                        <a-button type="primary" @click="downloadTemplateCZ">充值审核模板</a-button>
                    </p>
                    <p v-show="PLTemplate">
                        模板下载：
                        <a-button type="primary" @click="downloadTemplatePL">批量修改模板</a-button>
                    </p>
                    <p v-show="SDTemplate">
                        模板下载：
                        <a-button type="primary" @click="downloadTemplateSD">锁定导入模板</a-button>
                    </p>
<!--                    <p v-show="LJTemplate">-->
<!--                        模板下载：-->
<!--                        <a-button type="primary" @click="downloadTemplateLJ">累计审核模板</a-button>-->
<!--                    </p>-->
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import moment from 'dayjs'
    import {
        getList,
        deleteOrder,
        downloadTemplateFH,downloadTemplateCZ,downloadTemplatePL, downloadTemplateSD,
        downloadResult,exportList,customRemark
    } from "@/api/school-center/salesListAPI"
    import {cloneObject,exportFile} from '@/utils/util';
    import ImportBtn from "../../../components/sysmanage/ImportBtn";
    import {getSchoolNames, initSubstName} from "../../../api/school-center/louZhang/louZhangManagerAPI";

    export default {
        name: "salesList",
        components: {
            STable,ImportBtn
        },
        data: function () {
            return {
                pageSize: 200,
                searchShow: true,
                emptyText: {emptyText: '暂无数据'},
                previewVisible: false,
                previewImage: '',
                fileList: [],
                apis:'',
                fileid:{},
                visible: false,
                customRemark: '',
                customId: 0,
                brackgroundurl:"manager/ciop/school/schoolManagement/qrcodeUpload",
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                FHTemplate: false,
                CZTemplate: false,
                PLTemplate: false,
                SDTemplate: false,
                importUrl: "",
                importTile: "",
                modifyvisible: false,
                modifyForm: {
                    id: '',
                    title: '',
                    desc: '',
                    integral: '',
                    activityType: '',
                    subclass: '',
                    imageUrl: '',
                    range: '',
                    sort: '',
                },
                subNameList: [],
                packageName:[],
                chosePages:[],
                products:[],
                schoolNames: [],
                subNames: [],
                //输入框列表
                queryParam: {
                    orderPhone: '',
                    name: '',
                    account: '',
                    status: '',
                    orderType: '',
                    salesSubst: '',
                    salesSchool: '',
                    createTimeStart: '',
                    createTimeEnd: '',
                    activateTimeStart: '',
                    activateTimeEnd: '',
                    preType: '',
                    lockState: ''
                },
                columns: [
                    {dataIndex: 'salesSchool', width: 200, title: '销售学校', align: "center"},
                    {dataIndex: 'salesSubst', width: 80, title: '销售县分', align: "center"},
                    {dataIndex: 'orderPhone', width: 120, title: '电信激活号码', align: "center"},
                    {dataIndex: 'name', width: 80, title: '放号人', align: "center"},
                    {dataIndex: 'account', width: 120, title: '放号人账号', align: "center"},
                    {dataIndex: 'createTime', width: 160, title: '上传时间', align: "center",
                      customRender: (text, row, index) => {
                        return moment(text).format("YYYY-MM-DD HH:mm:ss");
                      }
                    },
                    {
                        dataIndex: 'orderType', width: 80, title: '订单类型', align: "center",
                        scopedSlots: {customRender: "orderTypeScope"}
                    },
                    {dataIndex: "preType", width:80, title:'销售时段', align : "center"},
                    {dataIndex: "dataErrorRemark", width:200, title:'数据错误提示', align : "center"},
                    {dataIndex: "lockState", width:80, title:'是否锁定', align : "center"},
                    {dataIndex: 'networkName', width: 200, title: '所属网点', align: "center"},
                    {dataIndex: 'networkCode', width: 130, title: '网点编码', align: "center"},
                    {
                        dataIndex: 'status', width: 120, title: '审核状态', align: "center",
                        scopedSlots: {customRender: "statusScope"}
                    },
                    {dataIndex: 'remark', width: 240, title: '审核备注', align: "center",ellipsis:true},
                    {dataIndex: 'auditTime', width: 160, title: '审核时间', align: "center",
                      customRender: (text, row, index) => {
                        if (text == null) {
                          return "";
                        }
                        return moment(text).format("YYYY-MM-DD HH:mm:ss");
                      }
                    },
                    {dataIndex: 'activateTime', width: 160, title: '激活时间', align: "center",
                      customRender: (text, row, index) => {
                        if (text == null) {
                          return "";
                        }
                        return moment(text).format("YYYY-MM-DD HH:mm:ss");
                      }
                    },
                    {dataIndex: 'recentlyAmount', width: 80, title: '最近充值', align: "center"},
                    {dataIndex: 'recentlyBonus', width: 120, title: '最近充值激励', align: "center"},
                    {dataIndex: 'allBonus', width: 120, title: '应发总激励', align: "center"},
                    {dataIndex: 'nonSendBonus', width: 80, title: '未发激励', align: "center"},
                    {dataIndex: 'sendBonus', width: 80, title: '已发激励', align: "center"},
                    {dataIndex: 'oldCombo', width: 200, title: '原套餐', align: "center"},
                    {dataIndex: 'upgradeCombo', width: 200, title: '升级套餐', align: "center"},
                    {dataIndex: 'customRemark', width: 120, title: '备注', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 120,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                    },
                    ]
                ,
                rowdata: parameter => {
                    const env = process.env.NODE_ENV; //获取当前环境
                    if(env === 'development'){     //测试环境默认添加前缀
                        this.apis = '/api/';
                    }

                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    //表示
                    let obj = cloneObject(this.queryParam)
                    return getList(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.emptyText.emptyText = '查询失败！'
                            this.$message.error("查询失败！", 5);

                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {

                            if (res.data.records.length==0){
                                return data
                            }
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods:{
            showModal(record) {
              if (record == undefined || record == null) {
                this.customRemark = "";
                this.customId = 0;
              }else{
                this.customId = record.id;
                this.customRemark = record.customRemark;
              }
              this.visible = true;
            },
            hideModal() {
              this.visible = false;
              let params = {};
              params.id = this.customId;
              params.customRemark = this.customRemark;
              customRemark(params).then(res => {
                if(res.state == "success"){
                  this.$message.success(res.data ? res.data : '更新成功', 5)
                  this.search();
                  return null;
                }else{
                  this.$message.error(res.data ? res.data : '更新失败', 5)
                }
              })
            },
            changeSearchShow() {
                this.searchShow = this.searchShow ? false : true;
                this.$refs.table.setHeight();
              this.$nextTick(() =>{
                setTimeout(()=>{ //为防止表头高度变化，延迟300s
                    this.$refs.table.setHeight();
                },100)
              })
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            handleMenuClick(e) {
                if (e.key == "1") {
                    this.handleSubmit1();
                }
                if (e.key == "2") {
                    this.handleSubmit2();
                }
                if (e.key == "3") {
                    this.handleSubmit3();
                }
                if (e.key == "4") {
                    this.handleSubmit4();
                }
            },
            handleSubmit1() {
                this.importTile = "放号上传";
                this.FHTemplate = true;
                this.importUrl = "manager/ciop/salesList/importOrder";
                this.modifyvisible = true;
            },
            handleSubmit2() {
                this.importTile = "充值审核";
                this.CZTemplate = true;
                this.importUrl = "manager/ciop/salesList/importRechargeData";
                this.modifyvisible = true;
            },
            handleSubmit3() {
              this.importTile = "批量修改";
              this.PLTemplate = true;
              this.importUrl = "manager/ciop/salesList/importBatchUpdate";
              this.modifyvisible = true;
            },
            handleSubmit4() {
              this.importTile = "审核锁定";
              this.SDTemplate = true;
              this.importUrl = "manager/ciop/salesList/importAuditLock";
              this.modifyvisible = true;
            },
            downloadTemplateFH: function() {
                exportFile(downloadTemplateFH(), "放号上传清单.xlsx");
            },
            downloadTemplateCZ: function() {
                exportFile(downloadTemplateCZ(), "充值审核清单.xlsx");
            },
            downloadTemplatePL: function () {
              exportFile(downloadTemplatePL(), "批量修改清单.xlsx");
            },
            downloadTemplateSD: function () {
              exportFile(downloadTemplateSD(), "锁定导入清单.xlsx");
            },
            // downloadTemplateLJ: function() {
            //     exportFile(downloadMoBanKD(), "累计充值审核清单.xlsx");
            // },
            createfunctionOk() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            createfunctionCancel() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            clearmodel() {
                this.importTile = "";
                this.FHTemplate = false;
                this.CZTemplate = false;
                this.PLTemplate = false;
                this.SDTemplate = false;
                this.importUrl = "";
            },
            // 执行上传
            doPush(res) {
                console.log(res);
                if (!res || !res.response) {
                    this.$message.error("上传文件出错！", 10);
                    return false;
                }
                const response = res.response;
                if (response.state !== "success") {
                    this.$message.error(response.msg ? response.msg : "上传文件出错！", 5);
                    return false;
                }
                this.$message.success("上传成功！" + response.data, 5);
                if(response.data.msg.indexOf("返回导入结果清单") > -1){
                    exportFile(downloadResult({"key": response.data.key}), "导入结果清单.xlsx");
                }
                this.createfunctionCancel();
                this.search();

            },
            deleteOrder(id){
                let params = {};
                params.id = id;

                deleteOrder(params).then(res => {
                    if(res.state == "success"){
                        this.$message.success(res.data ? res.data : '删除成功', 5)
                        this.search();
                        return null;
                    }

                    this.$message.success(res.data ? res.data : '删除失败', 5);
                })
            },
            exportList(){
                exportFile(exportList(this.queryParam),'销售清单.xlsx');
            },
            getSchool() {
                this.schoolNames = [];
                this.queryParam.salesSchool = '';
                getSchoolNames({"substName": this.queryParam.salesSubst}).then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.schoolName === 'null')
                                return;
                            this.schoolNames.push({
                                value: r.schoolName,
                                text: r.schoolName
                            })
                        })
                    }
                })
            },
            initSubstName() {
                initSubstName().then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.subName === 'null')
                                return;
                            this.subNames.push({
                                value: r.subName,
                                text: r.subName
                            })
                        })
                    }
                })
            },
            onChangeActivateTime(date, dateString) {
              console.log("入网时间");
              console.log(dateString);

                this.queryParam.activateTimeStart = dateString[0];
                this.queryParam.activateTimeEnd = dateString[1];
            },
            onChangeCreateTime(date, dateString) {
                console.log("上传时间");
                console.log(dateString);
                this.queryParam.createTimeStart = dateString[0];
                this.queryParam.createTimeEnd = dateString[1];
            }
        },
        mounted() {
            this.initSubstName();
            this.getSchool();
        }
    }
</script>

<style scoped>
.show-search-button {
  text-align: right;
  margin: 0px 0px 10px 0px;
}
.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th{
  padding:10px 0px;
}
.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td{
  padding:0px;
}
</style>

