<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-size: large">数据更新</span>
      </div>
      <div style="width: 80%;">
        <el-form ref="downloadParams" :model="updateParams" label-width="130px">
          <el-form-item label="按时间段更新">
            <el-col :span="4">
              <el-date-picker
                  style="width: 100%;"
                  v-model="updateParams.startDate"
                  type="month"
                  value-format="yyyy-MM"
                  :picker-options="pickerOptions"
                  placeholder="开始时间">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-date-picker
                  style="width: 100%; margin-left: 10px;"
                  v-model="updateParams.endDate"
                  type="month"
                  value-format="yyyy-MM"
                  :picker-options="pickerOptions"
                  placeholder="结束时间">
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button-group>
                <el-button
                    type="primary"
                    style="width: 120px; margin-left: 20px;"
                    @click="updateData(0)"
                >
                  更新
                </el-button>
              </el-button-group>
            </el-col>
          </el-form-item>

          <el-form-item label="按产品DI更新">
            <el-col :span="8">
              <el-input v-model="updateParams.nameCode" placeholder="产品DI" clearable="true"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button-group>
                <el-button
                    type="primary"
                    style="width: 120px; margin-left: 20px;"
                    @click="updateData(1)"
                >
                  更新
                </el-button>
              </el-button-group>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="el-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span style="font-size: large">更新日志</span>
      </div>
      <el-form
          :inline="true"
          :model="queryParams"
          size="mini"
      >

        <el-form-item class="query-form-item" label="类型">
          <el-select
              v-model="queryParams.type"
              placeholder="类型"
          >
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select
              v-model="queryParams.downloadType"
              placeholder="类型"
          >
            <el-option
                v-for="item in downloadTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <span style="color: #000; margin-left: 10px; margin-right: 6px"
            >创建日期:</span
            >
          <el-date-picker
              :picker-options="pickerOptions"
              v-model="dateRange"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="onSubmit"
            >查询
            </el-button
            >

          </el-button-group>
        </el-form-item>
      </el-form>
      <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
          :row-style="rowStyle"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="类型" prop="type" width="100">
          <template slot-scope="scope">

            <el-tag
                :type="statusFilterType(scope.row.type)"
            >{{ getType(scope.row.type) }}
            </el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="下载类型" prop="downloadType" width="80">
          <template slot-scope="scope">
            <span>{{ getDownloadType(scope.row.downloadType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="日期" prop="downloadDate" width="100"/>
        <el-table-column label="提示行数" prop="totalCount" width="80"/>
        <el-table-column label="实际行数" prop="realCount" width="80"/>
        <el-table-column label="插入行数" prop="insertCount" width="80"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="140"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="结果信息" align="center" prop="msg" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" fixed="right" width="220">
          <template slot-scope="scope">

            <el-button
                type="text"
                size="small"
                :disabled="scope.row.type=='info' || scope.row.type=='success'"
                @click.native.s.stop="continueDownload(scope.row)">
              继续下载
            </el-button>

            <el-button
                type="text"
                size="small"
                @click.native.s.stop="downloadData(scope.row)">
              重新下载
            </el-button>
            <el-button
                type="text"
                size="small"
                @click.native.stop="showContent(scope.row)"
            >详情
            </el-button>

            <el-button
                type="text"
                size="small"
                @click.native.stop="deleteClick(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          :current-page="queryParams.page"
          :page-size="queryParams.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {updateUdiDate} from "@/api/UDIDownload/udiDataUpdate";
import {isBlank} from "@/utils/strUtil";

export default {
  name: "udiDataUpdate",
  data() {
    return {
      updateParams: {
        startDate: null,
        endDate: null,
        nameCode: null,
        type: null
      },
      total: 0,
      loading: false,
      list: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      queryParams: {
        type: null,
        downloadType: null,
        page: 1,
        limit: 20
      },
      typeOptions: null,
      downloadTypeOptions: [],
      dateRange: null
    }
  },
  created() {

  },
  methods: {
    onReset() {
      this.queryParams = {
        type: null,
        downloadType: null,
        page: 1,
        limit: 20
      }
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
    onSubmit() {
      this.queryParams.page = 1;
      this.getList();
    },
    getList() {

    },
    updateData(type) {
      if (type === 0) {
        if (isBlank(this.updateParams.startDate) || isBlank(this.updateParams.endDate)) {
          this.$message.error("请选择下载起止时间");
          return;
        }
      }
      this.updateParams.type = type;
      updateUdiDate(this.updateParams).then((res) => {
        if (res.code === 20000) {
          this.$message.success("更新成功");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    rowStyle({row, rowIndex}) {
      let rowBackground = {};
      if (row.type == 'error') {
        //rowBackground.background="#f6f5ee";
        rowBackground.color = '#f60303';
      }

      return rowBackground;
    },
    statusFilterType(status) {
      const statusMap = {
        'info': "info",
        'warning': "warning",
        'error': "danger",
        'success': "success",
      };
      return statusMap[status];
    },
  }
}
</script>

<style scoped>


</style>
