<template>
  <div class="full-box zhglcss" style="overflow: hidden">
    <div class="" style="width: 100%;height:100%;">
      <div class="top-tip-box t-title">当前位置：后台系统管理 > 数据采集</div>
      <div class="table-info-box">
        <div class="table-search-box onerow">
          <div class="search-info-box" style="">
            <div class="search-item">
              <div class="search-item-label">任务类型</div>
              <el-select v-model="filter.type" filterable clearable placeholder="请选择" style="width: 130px;">
                <el-option label="全部" value=""></el-option>
                <el-option  v-for="item in taskTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div class="search-item" v-if="false">
              <div class="search-item-label">导入时间</div>
              <el-date-picker
                v-model="timeFilter"
                type="daterange"
                unlink-panels
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:260px">
              </el-date-picker>
            </div>
            <div class="search-item">
              <div class="search-item-label">导入时间</div>
              <el-date-picker
                type="date"
                v-model="filter.startDate"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                style="width:150px;float: left;">
              </el-date-picker>
            </div>
            <div class="search-item" style="margin-left: 10px;">
              <div class="search-item-label">至</div>
              <el-date-picker
                type="date"
                v-model="filter.endDate"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width:150px;float: left;">
              </el-date-picker>
            </div>
            <div class="search-item" style="margin-left: 20px">
              <div class="search-item-label" >关键字</div>
              <el-input v-model="filter.name" placeholder="支持任务名称查询"  clearable style="width:215px;" ></el-input>
            </div>
            <el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
            <el-button class="operate-btn" type="primary" @click="showAdd">新增</el-button>
          </div>
          <div class="search-border-box">
            <div class="sbb-line"></div>
            <div class="sbb-role"></div>
          </div>
        </div>
        <div class="table-result-boxx">
          <div class="table-container-style">
            <el-table :data="tableData.list" height="200">
              <el-table-column type="index" align="center" label="编号" width="80"></el-table-column>
              <el-table-column prop="name" align="center" label="任务名称" ></el-table-column>
              <el-table-column prop="type" align="center" label="任务类型"></el-table-column>
              <el-table-column prop="status" align="center" label="采集状态" ></el-table-column>
              <el-table-column prop="createTime" align="center" label="采集时间"></el-table-column>
              <el-table-column prop="result" align="center" label="采集结果" ></el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <div class="table-edit-btn" @click="showRowData(scope.row)" v-if="false">上传</div>
                  <div class="table-edit-btn" @click="downloadFile(scope.row)">下载</div>
                  <div class="table-edit-btn" @click="deleteModule(scope.row)">删除</div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!---->
    <el-dialog title="新增" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
      <el-form :model="addForm" :rules="addRules" ref="addForm" :label-width="formLabelWidth+'px'">
        <el-form-item label="任务类型" prop="type">
          <el-select v-model="addForm.type" clearable filterable placeholder="请选择" @change="changeType">
            <el-option  v-for="item in taskTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据时间" prop="dataTime">
          <el-date-picker v-model="addForm.dataTime" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择月份" @change="changeType"></el-date-picker>
        </el-form-item>
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="addForm.name" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务备注" prop="taskName" style="margin-bottom: 0" v-if="false">
          <el-checkbox-group v-model="addForm.checkedList">
            <el-checkbox v-for="item in rwbzCheckList" :label="item.name" :key="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传" prop="fileList">
          <el-upload :action='GLOBAL.BASE_HTTP_URL+"/dx-economy-api/file"' :limit=1 name="files" :before-remove="beforeAttachmentRemove" :on-exceed="handleAttachmentExceed" :file-list="addForm.fileList" :on-success="onUploadSuccess" accept=".xls,.xlsx">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-tooltip class="item" effect="dark" content="下载任务类型模板" placement="bottom" :disabled="disabled" v-if="false">
          <el-button size="small" type="primary" style="position: absolute;right: 58px;top:300px" @click="downloadFile" :disabled="disabled"><i class="el-icon-download"></i></el-button>
        </el-tooltip>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateModule('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'yjManage',
    data () {
      return {
        timeFilter:[new Date().format("yyyy-")+"01-01",new Date().format("yyyy-MM-dd")],
        filter:{type:'',name:'',startDate:new Date().format("yyyy-")+"01-01",endDate:new Date().format("yyyy-MM-dd")},
        dialogVisible:false,
        taskTypeList:[],
        rwbzCheckList: [{id:1,name:'数据导入'}],
        rwbzCheckList1: [{id:1,name:'数据导入'},{id:2,name:'前台展示'}],
        formLabelWidth: 120,
        addRules:{
          type: [
            { required: true, message: '请选择任务类型', trigger: 'change' }
          ],
          name : [
            { required: true, message: '请输入任务名称', trigger: 'blur' }
          ],
          dataTime: [
            { required: true, message: '请选择数据日期', trigger: 'blur' }
          ],
          fileList: [
            { required: true, message: '请选择上传文件' }
          ]
        },
        addForm: {type: "",name : "",dataTime : "",checkedList:[],fileId :'',fileList:[]},
        disabled:false,
        tableData:{
          list: [ ],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
        timer:null
      }
    },
    created(){
      this.getTypeList();
      this.getDataList();
    },
    mounted(){
      this.$nextTick(function () {
        this.timer = setInterval(this.getDataList,30000)
      })
    },
    beforeDestroy() {
      if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    watch:{
      /*"addForm.type":function () {
        if(this.addForm.type != "") {
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      },*/
    },
    methods:{
      /*列表*/
      searchResult(){
        this.getDataList();
      },
      getTypeList: function () {
        let _this = this;
        _this.$http.get('/dx-economy-api/importRecord/types', {params: {}}).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            _this.taskTypeList = _data.data;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      getDataList: function (pager) {
        let _this = this;
        _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
        _this.$http.get('/dx-economy-api/importRecord/page', {params: $.extend({pageNum: _this.tableData.pageNum,pageSize: _this.tableData.pageSize},_this.filter)}).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            _this.tableData.list = _data.data.list;
            _this.tableData.pageNum = _data.data.pageNum;
            _this.tableData.pageSize = _data.data.pageSize;
            _this.tableData.pages = _data.data.pages;
            _this.tableData.total = _data.data.total;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      handlePageChange: function (page) {
        this.getDataList(page);
      },
      /*新增*/
      changeType(){
        let vm = this
        let types ='';
        vm.taskTypeList.forEach(function (item) {
          if(item.code === vm.addForm.type){
            types = item.name;
          }
        });
        vm.addForm.name = types +'  '+ vm.addForm.dataTime;
      },
      resetForm(formName) {
        var _this = this;
        if(!_this.$Util.isEmpty(_this.$refs[formName])){
          _this.$refs[formName].resetFields();
          _this.addForm = {type: "",name : "",dataTime : "",checkedList:[],fileList: []};
        }
      },
      showAdd(){
        this.resetForm("addForm");
        this.dialogVisible = true;
      },
      updateModule: function (formName) {
        var _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            var _form = _this.addForm;
            _this.$http.post('/dx-economy-api/importRecord', _form).then(function (resp) {
              var _data = resp.data;
              if (_data.code === 200) {
                _this.$message.success("新增成功！");
                _this.getDataList(1);
              } else {
                _this.$message.error(_data.message);
              }
            }).catch();
            _this.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      /*新增-文件上传*/
      handleAttachmentExceed() {
        this.$message.warning("当前限制选择1个文件");
      },
      beforeAttachmentRemove(file) {
        let _this = this;
        return new Promise(function (resolve,reject) {
          _this.$confirm(`确定移除 ${ file.name }？`,'提示', {type: 'warning'}).then(() => {
            let fileId = file.response.data;
            console.log(fileId)
            if(fileId.includes(":")){
              let _list = fileId.split(":");
              _this.$http.delete('/dx-economy-api/file/'+_list[0]).then( resp => {
                let _data = resp.data;
                if(_data.code === 200){
                  _this.addForm.fileList.forEach(function (item,index) {
                    if(item.response.data.startsWith(_list[0]+":")){
                      _this.addForm.fileList.splice(index,1);
                      return false;
                    }
                  });
                  resolve();
                }else{
                  reject()
                }
              });
            }
          }).catch(() => {
            reject();
          });
        });
      },
      onUploadSuccess(response,file) {
        var _this = this;
        if(!_this.$Util.isEmpty(response) && response.code === 200 && !_this.$Util.isEmpty(response.data)){
          var _list = response.data.split(":");
          if(_list.length === 2){
            _this.addForm.fileList.push(file);
            _this.addForm.fileId = _list[0];
            _this.$refs["addForm"].validate((valid) => {return valid});
          }
        }
      },
      /*end*/
      downloadFile(data){
        let vm = this
        vm.$http.get('/dx-economy-api/file/'+data.fileId).then(() => {
          vm.$notify({
            title: '提示',
            message: '导出当前数据成功！',
            type: 'success'
          });
        });
      },
      downloadFile1(){
        let _this = this,_path="" ,_name = "";
        _this.$http.get('/zhyw/excel/type').then(function (resp) {
          let _data = resp.data;
          _data.data.forEach(function (item) {
            if(item.id === _this.addForm.type){
              _path = item.path;
              _name = item.name;
            }
          });

          if (_data.code == 200) {
            // 下载文件
            _this.$http.get('/zhyw/file',{
              params:{
                fileName: _name,
                filePath: _path
              }
            }).then(() => {
            });
          } else {
            _this.$message.error(_data.message);
          }
        });

      },
      deleteModule: function (rowData) {
        var _this = this;
        _this.$confirm('确认删除？','提示', {type: 'warning'}).then(() => {
          if(!_this.$Util.isEmpty(rowData) && !_this.$Util.isEmpty(rowData.id)){
            _this.$http.delete('/dx-economy-api/importRecord/'+rowData.id).then(function (resp) {
              var _data = resp.data;
              if (_data.code === 200) {
                _this.$message.success("删除成功");
                _this.getDataList();
              } else {
                _this.$message.error(_data.message);
              }
            });
          }
        }).catch(() => {});
      },
    }
  }
</script>
<style></style>
<style scoped>
  .table-result-boxx{height:calc(100% - 95px);}
  .el-form-item{margin-bottom:15px;}
  .el-form-item label{width: 90px;}
  .aaa{}
  .aaa{}
</style>