<template>
  <div class="push-record-wrap">
    <en-table-layout toolbar pagination :tableData="tableData" :loading="loading" >
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
        </div>
        <div class="toolbar-search">
          <en-table-search @search="searchEvent" @advancedSearch="advancedSearchEvent" advanced advancedWidth="465" placeholder="请输入摘要内容">
            <template slot="advanced-content">
              <el-form ref="advancedForm" :model="advancedForm" label-width="100px">
                <el-form-item label="业务类型">
                  <el-select v-model="advancedForm.business_type" placeholder="请选择" clearable>
                    <el-option v-for="typeItem in businessType" :key="typeItem.value" :label="typeItem.label" :value="typeItem.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="目标系统">
                  <el-select v-model="advancedForm.target_system" placeholder="请选择" clearable>
                    <el-option v-for="typeItem in targetType" :key="typeItem.value" :label="typeItem.label" :value="typeItem.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="advancedForm.status" placeholder="请选择" clearable>
                    <el-option label="成功" value="Success" />
                    <el-option label="失败" value="Fail" />
                    <el-option label="待推送" value="Wait" />
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
          </en-table-search>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column label="同步结果" prop="remark" />

        <el-table-column label="同步时间" width="160">
          <template slot-scope="scope"><span v-if="scope.row.produce_time">{{ scope.row.produce_time | unixToDate }}</span>
          </template>
        </el-table-column>

        <el-table-column label="业务类型" prop="business_type" :formatter="filterBusinessType" />

        <el-table-column label="同步状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 'Success'">成功</span>
            <span v-else-if="scope.row.status === 'Fail'">失败</span>
            <span v-else-if="scope.row.status === 'Wait'">待推送</span>
          </template>
        </el-table-column>

        <el-table-column label="同步目标系统" prop="target_system" :formatter="filterTargetType"></el-table-column>

        <el-table-column label="摘要" prop="summary"></el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleSyncLogAgain(scope.row)"
              :disabled="scope.row.status !== 'Fail'">再次推送</el-button>
          </template>
        </el-table-column>
      </template>
      <!--分页-->
      <el-pagination slot="pagination" v-if="pageData" @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange" :current-page="pageData.page_no" :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="pageData.data_total">
      </el-pagination>
    </en-table-layout>
  </div>
</template>

<script>
import * as API_Order from '@/api/order.js'
import * as API_Setting from '@/api/setting'
export default {
  name: 'pushRecord',
  data() {
    return {
      /** 列表loading状态 */
      loading: false,
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },
      /** 列表数据 */
      tableData: null,
      /** 列表分页数据 */
      pageData: null,
      /** 高级搜索数据 */
      advancedForm: {
        sn: '',
        target: '',
        module: '',
        status: ''
      },
      /** 目标类型 */
      targetType: [],
      /** 业务类型 */
      businessType: []
    }
  },
  filters: {
  },
  mounted() {
    this.GET_SyncLogList()
    this.getTypeList()
  },
  methods: {
    filterBusinessType(row) {
      return this.businessType.find(v => { return v.value === row.business_type }).label
    },
    filterTargetType(row) {
      return this.targetType.find(v => { return v.value === row.target_system }).label
    },
    /** 获取类型常量 */
    getTypeList() {
      API_Setting.getDictDataInfo('erp_message_push_target_system').then(res => {
        this.targetType = res
      })
      API_Setting.getDictDataInfo('erp_message_push_bussness_type').then(res => {
        this.businessType = res
      })
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.GET_SyncLogList()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.GET_SyncLogList()
    },

    /** 搜索事件触发 */
    searchEvent(data) {
      Object.keys(this.advancedForm).forEach(key => delete this.params[key])
      this.params = {
        ...this.params,
        page_no: 1,
        summary: data
      }
      this.GET_SyncLogList()
    },

    /** 高级搜索事件触发 */
    advancedSearchEvent() {
      this.params.summary = ''
      this.params = {
        ...this.params,
        ...this.advancedForm,
        page_no: 1
      }
      this.GET_SyncLogList()
    },

    /** 再次推送 */
    handleSyncLogAgain(row) {
      this.$confirm('请确认是否再次推送当前订单？', '提示', { type: 'warning' }).then(() => {
        API_Order.syncLogAgain(row.id).then(() => {
          this.$message.success('操作成功！')
          this.GET_SyncLogList()
        })
      })
    },

    /** 获取订单推送记录数据 */
    GET_SyncLogList() {
      this.loading = true
      API_Order.syncLogList(this.params).then(response => {
        this.loading = false
        this.tableData = response.data.map(item => {
          item.remark = 'code:999 body:{\"code\":\"GL_Doc_OuterSaveFailed\",\"message\":\"[\\\"0000存货的辅助核算未能找到对应的存货\\\"]\",\"data\":{\"Code\":\"GL_Doc_OuterSaveFailed\",\"StatusCode\":400,\"operatingValue\":\"[\\\"0000存货的辅助核算未能找到对应的存货\\\"]\",\"islogerror\":\"1\",\"variables\":[\"[\\\"0000存货的辅助核算未能找到对应的存货\\\"]\"]}}"'
          return item
        })
        this.pageData = {
          page_no: response.page_no,
          page_size: response.page_size,
          data_total: response.data_total
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
