<template>
  <div class="recharge-record card">
    <div class="search">
      <CustomForm
        :formConfig="queryformConfig"
        v-model="queryFormData"
        :isCustomButton="false"
        :isFlex="false">
        <template slot="btn">
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </template>
      </CustomForm>
    </div>
    <div class="table_wrap" v-loading="loading">
      <table-vue
        :sourceData="sourceData"
        ref="multipleTable"
        :tableColumns="usersTableColumns"></table-vue>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="paginationOptions.total"
        :page-size="paginationOptions.pageSize"
        :current-page="paginationOptions.currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from '../../common/api/axios'
import CustomForm from '@/common/components/base/CustomForm.vue'
import { mapState } from 'vuex'
import tableVue from '@/common/components/base/tableView.vue'

export default {
  name: 'asynchronousTask',
  components: {
    tableVue,
    CustomForm
  },
  data() {
    return {
      is_title: 1,
      ishowForm: false,
      select: '',
      sourceData: [],
      serviceNameList: { sysService: '系统服务同步' },
      formData: {},
      queryFormData: {},
      queryformConfig: [
        {
          prop: 'timeRange',
          type: 'datePicker',
          dateType: 'datetimerange',
          name: ' 提交时间',
          attrs: {
            'start-placeholder': '开始时间',
            'end-placeholder': '结束时间',
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            'default-time': ['00:00:00', '23:59:59']
          }
        },
        {
          prop: 'runStatus',
          type: 'select',
          name: '状态',
          options: [
            { label: '进行中', value: 0 },
            { label: '完成', value: 1 },
            { label: '失败', value: 2 }
          ]
        }
      ],

      dialogVisible: false,
      formId: null,

      paginationOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0
      },
      details: [],
      loading: false
    }
  },
  async created() {
    // await this.getServiceNameList()

    this.getList()
  },
  computed: {
    ...mapState(['reqMenu', 'employee']),
    usersTableColumns() {
      return [
        {
          label: '任务类型',
          key: 'taskType',
          render: (item) => <span>{this.serviceNameList[item.taskType]}</span>
        },
        {
          label: '任务标题',
          key: 'taskTitle',
          width: ''
        },
        {
          label: '异常信息',
          key: 'exceptionMsg',
          width: ''
        },
        {
          label: '状态',
          key: 'runStatus',
          width: '',
          render: (item) => (
            <span class={['text', this.getColor(item.runStatus)]}>
              {item.runStatus === 0
                ? '进行中'
                : item.runStatus === 1
                ? '完成'
                : '失败'}
            </span>
          )
        },
        {
          label: '操作人',
          key: 'operatorName',
          width: '100'
        },
        {
          label: '提交时间',
          key: 'submitTime',
          width: ''
        },
        {
          label: '开始时间',
          key: 'startTime',
          width: ''
        },
        {
          label: '结束时间',
          key: 'endTime',
          width: '100'
        },
        {
          label: '相关操作',
          key: '',
          fixed: 'right',
          width: '130',
          render: (item) =>
            (item.runStatus !== 1 && (
              <div>
                <span
                  title="重新发送"
                  class="icon-view resendMsg"
                  onClick={() => this.resendMsg(item.id)}>
                  <i class="el-icon-s-promotion"></i>
                </span>
              </div>
            )) ||
            ''
        }
      ]
    }
  },

  methods: {
    sizeChange(value) {
      this.paginationOptions.pageSize = value
      this.getList()
    },
    onCurrentChange(value) {
      this.paginationOptions.currentPage = value
      this.getList()
    },
    selectionChange(selection) {
      if (selection.length > 0) {
        this.select = selection
      }
    },

    search() {
      if (this.queryFormData.timeRange && this.queryFormData.timeRange.length) {
        this.queryFormData.minSubmitTime = this.queryFormData.timeRange[0]
        this.queryFormData.maxSubmitTime = this.queryFormData.timeRange[1]
      }
      this.getList()
    },

    // 查询
    getList() {
      this.loading = true
      const { pageSize, currentPage } = this.paginationOptions
      axios
        .post('sys/syncTaskLog/list_page ', {
          pageSize,
          currentPage,
          ...this.queryFormData
        })
        .then((res) => {
          if (res.code === 200) {
            this.sourceData = res.data.records
            this.paginationOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true
            })
          }
          this.loading = false
        })
    },

    async resendMsg(id) {
      const params = { id }
      try {
        this.$confirm('确认发送？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await axios.get('sys/syncTaskLog/retry_send', { params })
            this.$message.success('发送成功')
            this.getList()
          })
          .catch(() => {
            this.$message.warning('取消发送')
          })
      } catch (error) {
        console.log(error)
        this.$message.warning(error.message)
      } finally {
        this.loading = false
      }
    },
    getColor(status) {
      if (status === 0) {
        return 'afootStatus'
      } else if (status === 1) {
        return 'successStatus'
      } else {
        return 'failStatus'
      }
    }
  }
}
</script>
<style scoped lang="less">
.wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table_wrap {
  flex: 1;
  padding: 0;
}

.circle {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  margin-right: 5px;
}

.my-table .first {
  background-color: red !important;
  color: #fff !important;
}
::v-deep.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
  span {
    font-size: 12px !important;
  }
}
.el-switch__core {
  background-color: rgba(166, 166, 166, 1);
}
::v-deep.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
::v-deep.switchStyle .el-switch__label--right {
  z-index: 9;
  right: 20px;
}
::v-deep.switchStyle .el-switch__label.is-active {
  display: block;
}
::v-deep.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
.resendMsg {
  background-color: #ff9900;
  &:hover {
    background-color: #ffd36a;
  }
}
.text {
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
}
.afootStatus {
  background-color: #409eff;
}
.successStatus {
  background-color: #67c23a;
}
.failStatus {
  background-color: #f56c6c;
}
.recharge-record {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &::v-deep {
    .el-table .el-table__cell {
      padding: 6px 0;
    }

    .el-input__inner {
      padding: 0 4px;
    }

    .el-input--small .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    .el-icon-time:before {
      content: '';
    }

    .el-dialog__footer {
      text-align: center;

      .el-button--small {
        padding: 9px 50px;
      }
    }

    .el-dialog__body {
      padding: 10px 20px;
    }

    .el-icon-edit:before {
      color: #ff9800;
      font-weight: bold;
    }

    .el-range-editor--small .el-range-separator {
      line-height: 31px;
    }

    .header-row-class-name th {
      background-color: #f8f8f9;
    }

    .el-input-group__append {
      padding-left: 0;
    }
  }
}
</style>
