<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>
            </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.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>
      </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,getSubstList,getSchoolList,
  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: "clsjSalesList",
  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: '2',
        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: "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 => {
          console.log("列表数据");
          console.log(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>

