<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="4" :sm="12" style="height:35px">
                    <a-form-item label="网点编码：">
                      <a-input placeholder="网点编码" v-model="queryParam.networkCode"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="12" style="height:35px">
                    <a-form-item label="网点名：">
                      <a-input placeholder="网点名" v-model="queryParam.networkName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="12" style="height:35px">
                    <a-form-item label="学校：">
                      <a-input placeholder="学校" v-model="queryParam.schoolName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="12" style="height:35px">
                    <a-form-item label="县份：">
                      <a-input placeholder="县份" v-model="queryParam.areaName"></a-input>
                    </a-form-item>
                  </a-col>
                  <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                    <a-col :md="4" :sm="24">
                      <a-button @click="search()" type="primary">查询</a-button>
                      <a-divider type="vertical"/>
                      <a-button @click="add()" type="primary">添加</a-button>
                      <a-divider type="vertical"/>
                      <a-button @click="imp">批量导入</a-button>
                      <a-divider type="vertical"/>
                      <a-button v-show="!callback" @click="handleSubmit">导出</a-button>
                      <a-button v-show="callback" style="margin-left: 10px">
                        导出中
                        <a-spin style="margin-left: 5px" size="small"/>
                      </a-button>
                    </a-col>
                  </span>
                </a-row>
            </a-form>
          <a-modal
              title="批量导入"
              :visible="impXXModal"
              @ok="impOk"
              @cancel="impCancel"
              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="yrymXXmoBan">
                  模板下载：
                  <a-button type="primary" @click="downloadXXMoBan">学校导出模板</a-button>
                </p>
              </a-col>
            </a-row>
            <a-row :gutter="24" :v-show="yrymXXmoBan">
              <a-col :md="24" :sm="12">
                <p>说明：</p>
                <p>1.批量导入请严格按照模版进行导入;</p>
              </a-col>
            </a-row>
          </a-modal>
        </div>
      <!--编辑----弹框-->
      <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
        <a-form :form="Formtable">
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="网点编码">
            <a-input placeholder="网点编码" v-decorator="[ 'networkCode', {rules: [{ required: true, message: '网点编码不能为空！' ,whitespace:true}]} ]"></a-input>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="网点名">
            <a-input placeholder="网点名" v-decorator="[ 'networkName', {rules: [{ required: true, message: '网点名不能为空！' ,whitespace:true}]} ]"></a-input>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="县份">
            <a-select placeholder="请选择" v-decorator="[ 'areaName', {rules: [{ required: true, message: '县分不能为空！' ,whitespace:true}]} ]">
              <a-select-option key="">请选择</a-select-option>
              <a-select-option v-for="data in subNameList"  :key="data" :value="data">
                {{ data}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="学校">
            <a-select placeholder="请选择" v-decorator="[ 'schoolName', {rules: [{ required: true, message: '学校不能为空！' ,whitespace:true}]} ]">
              <a-select-option key="">请选择</a-select-option>
              <a-select-option v-for="data in schoolNameList"  :key="data" :value="data">
                {{ data}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="前置开始时间">
            <a-date-picker placeholder="前置开始时间" v-decorator="[ 'springStartTime']" style="width:300px" format="YYYY-MM-DD"/>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="开学时间">
            <a-date-picker placeholder="前置开始时间" v-decorator="[ 'springEndTime']" style="width:300px" format="YYYY-MM-DD"/>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="充值大于50奖励">
            <a-input placeholder="充值大于50奖励" v-decorator="[ 'greaterFifty']"></a-input>
          </a-form-item>
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="充值大于100奖励">
            <a-input placeholder="充值大于100奖励" v-decorator="[ 'greaterHundred' ]"></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
        <!--列表-->
        <s-table
                :columns="columns"
                :data="rowdata"
                bordered
                ref="table"
                size="small"
                class="flex-filling"
                :locale="emptyText"
        >
          <template slot="operation" slot-scope="text,record">
            <a @click="modifyfunction(record)" v-if="isEdit">编辑</a>
            <a-divider type="vertical" v-if="isDelete"/>
            <a-popconfirm title="是否要删除此行？" @confirm="deleteId(record.id)" v-if="isDelete">
              <a>删除</a>
            </a-popconfirm>
          </template>
        </s-table>
    </div>

</template>

<script>
    import STable from "@/components/table";
    import {excelMBOut,reportList, reportDownload,insertData, modifyData,deleteId} from "../../../api/school-center/networkPlace/networkPlaceAPI";
    import {cloneObject, exportFile} from "@/utils/util";
    import moment from "moment";
    import {TreeSelect} from "ant-design-vue";
    export default {
        name: "NetworkPlace",
        components: {
            STable,
            TreeSelect,
        },
        data() {
            return {
              isEdit:true,
              isDelete:true,
              yrymXXmoBan: false,
              impXXModal:false,
              importUrl: "",
              importTile: "",
              emptyText: {emptyText: '暂无数据'},
              callback: false,
              // form
              Formtable: this.$form.createForm(this, {name: 'Formtable'}),
              titleName:"",
              queryParam: {
                networkCode: "",
                networkName: "",
                areaName:"",
                schoolName:"",
              },
              modifyvisible: false,
              modifyForm: {
                id:"",
                networkCode: "",
                networkName: "",
                areaName:"",
                schoolName:"",
                springStartTime:"",
                springEndTime:"",
                greaterFifty:"",
                greaterHundred:""
              },
              subNameList: [],
              schoolNameList: [],
              columns: [
                {title: "网点编码", dataIndex: "networkCode", width: 120},
                {title: "网点名", dataIndex: "networkName", width: 250},
                {title: "学校", dataIndex: "schoolName", width: 130},
                {title: "县分", dataIndex: "areaName", width: 50},
                {title: "前置开始时间", dataIndex: "springStartTime", width: 100,
                  customRender: function (text, record, index) {
                    //text:当前行的值,record: 当前行的数据, index：索引
                    if (text == null) {
                      return "";
                    }
                    return moment(text).format("YYYY-MM-DD");
                  },
                },
                {title: "开学时间", dataIndex: "springEndTime", width: 100,
                  customRender: function (text, record, index) {
                    //text:当前行的值,record: 当前行的数据, index：索引
                    if (text == null) {
                      return "";
                    }
                    return moment(text).format("YYYY-MM-DD");
                  },
                },
                {title: "充值大于50奖励", dataIndex: "greaterFifty", width: 100},
                {title: "充值大于100奖励", dataIndex: "greaterHundred", width: 100},
                {
                  dataIndex: "operation",
                  width: 100,
                  title: "操作",
                  scopedSlots: {customRender: "operation"},
                  fixed: "right"
                }
              ],
              rowdata: parameter => {
                  let params = {
                      pageNo: parameter.pageNo,
                      pageSize: parameter.pageSize
                  };
                  let obj = cloneObject(this.queryParam);
                  //表示
                  return reportList(Object.assign(params, obj)).then(res => {
                    let data = {};
                    if (res.state !== "success") {
                      this.$message.error("查询失败！", 5);
                      this.emptyText.emptyText = '查询失败！'
                      data = {
                        data: [],
                        pageSize: parameter.pageSize,
                        pageNo: 1,
                        totalCount: 0
                      };
                    } else {
                      data = {
                        data: res.data.records,
                        pageSize: parameter.pageSize,
                        pageNo: parameter.pageNo,
                        totalCount: res.data.total
                      };
                      if (this.subNameList.length==0){
                        res.data.records[0].subNameList.forEach((key)=>{
                          this.subNameList.push(key.subNameList)
                        })
                        res.data.records[0].schoolNameList.forEach((key)=>{
                          this.schoolNameList.push(key.schoolNameList)
                        })
                      }
                    }
                    return data;
                  });
              }
            };
        },
        methods: {
            moment,
            search() {
                this.$refs.table.refresh({search: true});
            },
            handleSubmit() {
                this.callback = true;
                let today = new Date();
                today.setTime(today.getTime());
                let s2 = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
                exportFile(
                    reportDownload(this.queryParam),
                    "网点清单报表" + s2 + ".xlsx",
                    this.downloadstatu
                );
            },
            // 执行上传
            doPush(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 : "上传文件出错！", 10);
                return false;
              }
              this.$message.success("上传成功！" + response.data, 5);
              this.impXXModal = false;
            },
            add(){
              this.titleName="添加"
              this.more = 6;
              this.modifyForm.id = "";
              this.modifyForm.networkCode = "";
              this.modifyForm.networkName = "";
              this.modifyForm.schoolName = "";
              this.modifyForm.areaName = "";
              this.modifyForm.springStartTime = "";
              this.modifyForm.springEndTime = "";
              this.modifyForm.greaterFifty = "";
              this.modifyForm.greaterHundred = "";
              this.modifyvisible=true;
            },
            modifyfunction(data){
              // 清空编辑选中内容
              this.more = 6;
              //初始化
              this.titleName="编辑学校"
              this.modifyForm.id=data.id
              setTimeout(()=>{
                this.Formtable.setFieldsValue({
                  networkName: data.networkName,
                  networkCode: data.networkCode,
                  schoolName:data.schoolName,
                  areaName:data.areaName,
                  springStartTime:data.springStartTime == undefined ? "" : moment(new Date(data.springStartTime)).format("YYYY-MM-DD"),
                  springEndTime:data.springEndTime == undefined ? "" : moment(new Date(data.springEndTime)).format("YYYY-MM-DD"),
                  greaterFifty: data.greaterFifty,
                  greaterHundred:data.greaterHundred,
                })
              },50);
              this.modifyvisible=true;
            },
            deleteId(id){
              let params = {};
              params.id = id;
              deleteId(params).then(res => {
                  if(res.state == 'success'){
                    this.$message.info("删除成功",2);
                  }else{
                    this.$message.info("删除失败",2);
                  }
                this.search();
              });
            },
            //提交表单
            createfunctionOk(){
              this.Formtable.validateFields(['networkCode','networkName','schoolName','areaName', 'springStartTime',"springEndTime","greaterFifty", 'greaterHundred'], {force: true}, (err, values)=>{
                if (!err){
                  this.modifyForm.networkCode = values.networkCode;
                  this.modifyForm.networkName = values.networkName;
                  this.modifyForm.schoolName = values.schoolName;
                  this.modifyForm.areaName = values.areaName;
                  this.modifyForm.greaterFifty = values.greaterFifty;
                  this.modifyForm.greaterHundred = values.greaterHundred;
                  this.modifyForm.springStartTime = values.springStartTime;
                  this.modifyForm.springEndTime = values.springEndTime;
                  for (let key in this.modifyForm) {
                    if (this.modifyForm[key]==undefined){
                      this.modifyForm[key]=""
                    }
                  }
                  this.modifyForm.springStartTime = this.modifyForm.springStartTime == "" ? "" : moment(new Date(this.modifyForm.springStartTime)).format("YYYY-MM-DD");
                  this.modifyForm.springEndTime = this.modifyForm.springEndTime == "" ? "" : moment(new Date(this.modifyForm.springEndTime)).format("YYYY-MM-DD");
                  //插入数据
                  if (this.modifyForm.id==""){
                    insertData(this.modifyForm).then(res=>{
                      if (res.state=="success") {
                        this.$message.success(res.data ? res.data : '添加成功！', 5);
                        this.search();
                        this.modifyvisible=false
                        return null;
                      }
                      this.$message.error(res.data ? res.data : res.message, 5);
                    })
                    return null;
                  }
                  //修改数据
                  modifyData(this.modifyForm).then(res=>{
                    if (res.state=="success") {
                      this.$message.success(res.data ? res.data : '修改成功！', 5);
                      this.search();
                      this.modifyvisible=false;
                      return null;
                    }
                    this.$message.error(res.data ? res.data : res.message, 5);
                  })
                }
              })
            },
            createfunctionCancel(){
              this.Formtable.setFieldsValue({
                networkName: "",
                networkCode: "",
                areaName:"",
                schoolName:"",
                springStartTime:"",
                springEndTime:"",
                greaterFifty: "",
                greaterHundred: "",
              })
              this.modifyForm.id=""
              this.modifyvisible=false;
            },

            downloadstatu() {
                this.callback = false;
            },
            downloadXXMoBan:function (){
              exportFile(excelMBOut(), "网点清单模板.xlsx");
            },
            impOk() {
            },
            impCancel() {
              this.impXXModal = false;
              this.clearmodel();
            },
            imp(){
              this.handleSubmit1();
            },
            clearmodel() {
              this.importTile = "";
              this.yrymXXmoBan = false;

              this.importUrl = "";
            },
            handleSubmit1() {
              this.importTile = "网点批量导入";
              this.yrymXXmoBan = true;
              this.importUrl = "manager/ciop/networkPlace/importDate";
              this.impXXModal = true;
            },

        },
    };
</script>

<style scoped>
</style>