<template>
  <div>


    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="mini">
        <el-row>
          <el-form-item class="query-form-item">
            <el-input v-model="filterQuery.id" placeholder="记录ID" clearable></el-input>
          </el-form-item>

          <el-form-item class="query-form-item">
            <el-select v-model="filterQuery.status" placeholder="处理状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="异常" value="1"></el-option>
              <el-option label="已处理" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="query-form-item">
            <el-date-picker v-model="filterQuery.syncTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择同步时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button-group style="display:flex;">
              <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
              <el-button type="primary" icon="search" @click="getList">查询</el-button>
              <el-button type="primary" icon="search" @click="uploadData('IO_ORDER')"
              >
                同步单据
              </el-button>
              <el-button type="primary" icon="search" @click="uploadData('DOCUMENT_TYPE_DATA')"
                         v-if="configParms.typeBus==1||configParms.typeScan==1||configParms.typeThird==1">
                同步单据类型
              </el-button>
              <el-button type="primary" icon="search" @click="uploadData('THIRD_DATA')"
                         v-if="configParms.basicThirdDept==1||configParms.basicThirdInv==1||configParms.basicThirdProducts==1||configParms.basicThirdCorp==1">
                同步第三方基础数据
              </el-button>
              <el-button type="primary" icon="search" @click="uploadData('USER_DATA')"
                         v-if="configParms.basicDept==1 || configParms.basicInv==1|| configParms.sysUser==1">同步用户信息
              </el-button>
              <el-button type="primary" icon="search" @click="uploadData('SYS_SET_DATA')" v-if="configParms.systemConfig==1||configParms.entrustAction==1||configParms.printConfig==1
                 ||configParms.scanChangeConfig==1||configParms.busChangeConfig==1">同步系统设置信息
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="任务ID" prop="id" width="140" show-overflow-tooltip></el-table-column>

        <el-table-column label="任务类型" prop="type" width="140" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="140" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="statusFilterType(scope.row.status)">{{ status[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="180" prop="startTime" show-overflow-tooltip></el-table-column>
        <el-table-column label="结束时间" width="180" prop="endTime" show-overflow-tooltip></el-table-column>
        <el-table-column label="同步信息" prop="remark" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column label="同步文件" prop="cacheFilePath" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right" width="160">
          <template slot-scope="scope">

            <el-popconfirm @confirm="downFile(scope.row)" confirm-button-text='下载' cancel-button-text='不用了' class="mr10"
                           icon="el-icon-info" icon-color="blck" title="是否确认要下载文件？" v-if="scope.row.cacheFilePath">
              <el-button type="text" size="small" slot="reference">下载
              </el-button>
            </el-popconfirm>

            <!--            <el-button type="text" size="small" @click.native.stop="detailDialog(scope.row.id)">详情-->
            <!--            </el-button>-->
            <el-button type="text" size="small" @click.native.stop="deleteDialog(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="filterQuery.limit" @current-change="handleCurrentChange" layout="prev, pager, next"
                     :total="total" :current-page="filterQuery.page"></el-pagination>
    </el-card>

    <el-dialog title="同步信息" width="25%" :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="syncVisible">
      <span v-text="syncInfo" style="white-space:pre-line;" class="syncInfo"></span>
    </el-dialog>

  </div>
</template>

<script>
import {
  filterLog,
  deleteLog,
  createSchedule,
  findConfig,
  updateConfig,
  infoByStatus,
  uploadData
} from "@/api/sync/spsSyncStatus";
import store from "@/store";

export default {
  data() {
    return {
      filterQuery: {
        id: null,
        status: null,
        page: 1,
        limit: 10,
        syncTime: null,
      },
      list: [],
      headers: {},
      detailList: [],
      thirdSys: [],
      thirdSysDetail: null,
      total: 0,
      currentRow: null,
      editQuery: null,
      status: {
        1: "处理异常",
        2: "处理完成",
      },

      configQuery: {
        id: null,
        typeBus: null,
        typeScan: null,
        typeThird: null,
        basicProducts: null,
        basicCorp: null,
        basicInv: null,
        basicThirdProducts: null,
        basicThirdCorp: null,
        basicThirdInv: null,
        basicThirdBusOrder: null,
        orderScanFinish: null,
        dbDiProducts: null,
        downstreamEnable: null,
        syncTime: null,
      },
      uploadFileUrl: null,
      //uploadData: {
      //  thirdSys: "thirdId",
      //},
      templateDlUrl: null,
      checked: false,
      configParms: {},
      syncInfo: null,
      syncVisible: false
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        syncTime: null,
        id: null,
        status: null,
        page: 1,
        limit: 20,
      };
      this.syncTime = null;
      this.getList();
    },
    getList() {
      this.loading = true;
      filterLog(this.filterQuery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.list = response.data.list || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    getConfig() {
      findConfig()
        .then((response) => {
          if (response.code == 20000) {
            this.configQuery = response.data;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    saveConfig() {
      updateConfig(this.configQuery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.$message.success("更新成功！");
            this.getConfig();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },


    cancelDialog(val) {
      this.udiImportDetailVisible = false;
      this.thrCorpSelectVisible = false;
      if (val) {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },


    createScheduleDialog(type) {
      if (this.$isNotBlank(this.filterQuery.syncTime)) {
        this.$confirm("此操作将从" + this.filterQuery.syncTime + "开始同步最新数据，是否继续", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.createSchedule(type);
          })
          .catch(() => {
          });
      } else {
        this.createSchedule(type);
      }

    },

    createSchedule(type) {
      let query = {
        createType: type,
        syncTime: this.filterQuery.syncTime,
      }

      createSchedule(query)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.$message.success("创建成功！");
          } else if (response.code == 501) {
            this.$message.warning(response.message);
          } else {
            this.$message.error(response.message);
          }
          this.getList();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deleteDialog(rowId) {
      this.$confirm("此操作将删除该任务信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let dQuery = {
            id: rowId,
          };
          deleteLog(dQuery)
            .then((response) => {
              this.loading = false;
              if (response.code == 20000) {
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.message);
              }
              this.getList();
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
        });
    },

    downFile(rows) {
      infoByStatus({
        'id': rows.id,
        "dlType": 1,
      }).then(res => {
        let blob = new Blob([res])
        let fileName = rows.cacheFilePath.substring(rows.cacheFilePath.lastIndexOf('/'))
        let link = document.createElement("a")
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        window.URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      })
    },

    handleChange(response, files, fileList) {
      console.log(response);
      if (response.code != 20000) {
        this.$message.error(response.message);
        this.getList();
      } else {
        // console.log(files[0] + "\n" + this.fileList[0] + "\n" + fileList[0]);
        this.$message.success(response.data);
        this.getList();
      }
    },
    statusFilterType(status) {
      const statusMap = {
        2: "success",
        1: "danger",
      };
      return statusMap[status];
    },
    getSyncConfig() {
      findConfig()
        .then((response) => {
          if (response.code == 20000) {
            this.configParms = response.data;
          }
        })
        .catch(() => {
        });
    },
    detailDialog(id) {
      this.syncVisible = true;
      this.list.forEach(item => {
        if (id === item.id) {
          this.syncInfo = item.remark;
        }
      })
    },
    uploadData(exportType) {
      if (!this.filterQuery.syncTime) {
        this.$message.error("请选择同步时间");
        return false
      }
      let param = {
        exportType: exportType,
        syncTime: this.filterQuery.syncTime
      }
      uploadData(param).then((response) => {
        if (response.code == 20000) {
          this.filterQuery.page = 1
          this.$message.success("任务执行中，请稍后查看");
        } else {
          this.$message.error(response.message);
        }
        this.filterQuery.syncTime = null
        setTimeout(() => {
          this.getList();
        }, 666)
      })
        .catch(() => {
        });
    }
  },

  mounted() {
  },
  components: {},
  created() {
    this.headers = {
      ADMIN_ID: store.getters.adminId,
      ADMIN_TOKEN: store.getters.token,
    };
    this.getSyncConfig();
    this.getList();
    this.getConfig();
  },
};
</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 100px;
}

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-row {
  display: flex;
  flex-wrap: wrap;

}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}

.syncInfo {
  font-size: medium;
  font-family: "Microsoft YaHei";
  line-height: 25px;
}
</style>
