<template>
  <div class="distributionLog-wrap">
    <h2 class="title">分发日志</h2>
    <div class="main">
      <div class="table-content">
        <FilterTable
          ref="table"
          :columns="columns"
          :dataSource="dataSource"
          :total="total"
          @changeParams="changeParams"/>
      </div>
      <a-modal
        v-model="modalVisible"
        :title="status"
        :footer="null"
        @ok="handleOk">
        <div v-if="status=== '发送消息'">{{ sendParams }}</div>
        <div v-if="status=== '回调消息'">{{ sendResult }}</div>
      </a-modal>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import { getList } from '@/api/serviceMasterData/distributionLog'

export default {
  components: {
    FilterTable
  },
  data() {
    var vm = this
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'orderNum',
          key: 'sort',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '接口名称',
          dataIndex: 'interfaceName',
          key: 'interfaceName',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '目标系统',
          dataIndex: 'targetName',
          key: 'targetName',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '分发方式',
          dataIndex: 'triggerType',
          key: 'triggerType',
          align: 'center',

          customRender: (text, record, index) => {
            if (text === '0') {
              return <span>自动分发</span>
            } else if (text === '1') {
              return <span>手动分发</span>
            }
          }

        },
        {
          title: '定时规则',
          dataIndex: 'taskCycle',
          key: 'taskCycle',
          align: 'center',

          customRender: (text, record, index) => {
            if (text === '0') {
              return <span>无</span>
            } else if (text === '1') {
              return <span>实时</span>
            } else if (text === '2') {
              return <span>每时</span>
            } else if (text === '3') {
              return <span>每天</span>
            } else if (text === '4') {
              return <span>自定义</span>
            }
          }
        },

        {
          title: '分发类型',
          dataIndex: 'distributionType',
          key: 'distributionType',
          align: 'center',
           customRender: (text, record, index) => {
            if (text === '0') {
              return <span>全量分发</span>
            } else if (text === '1') {
              return <span>增量分发</span>
            }
          }
        },
        {
          title: '分发状态',
          dataIndex: 'sendStatus',
          key: 'sendStatus',
          align: 'center',

          customRender: (text, record, index) => {
            if (text === '0') {
              return <span style="color:#00F946">分发成功</span>
            } else if (text === '1') {
              return <span style="color:red">分发失败</span>
            }
          }

        },
        {
          title: '分发时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center'
        },

        {
          title: '详情',
          colSpan: 2,
          dataIndex: 'detail',
          key: 'detail',
          align: 'center',
          width: 100,
          customRender: (text, record, index) => {
            var child = vm.$createElement('button', {
              domProps: {
                innerHTML: '发送信息'
              },
              on: {
                click: function() {
                  vm.sendParamsFun(record)
                }
              },
              style: {
                cursor: 'pointer'
              }
            })
            var obj = {
              children: child,
              attrs: {}
            }
            return obj
          }

        },
        {
          title: '详情',
          colSpan: 0,
          align: 'center',
          customRender: (text, record, index) => {
            var child = vm.$createElement('button', {
              domProps: {
                innerHTML: '回调信息'
              },
              on: {
                click: function() {
                  vm.sendResultFun(record)
                }
              },
              style: {
                cursor: 'pointer'
              }

            })
            var obj = {
              children: child,
              attrs: {}
            }
            return obj
          }

        }

      ],
      dataSource: [],
      total: 0,
      modalVisible: false,
      sendParams: '', // 发送
      sendResult: '', // 回调
      status: null,

      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
		this.getListArr()
	},
  methods: {
    sendParamsFun(index) {
      this.modalVisible = true
      this.sendParams = index.sendParams
      this.status = '发送消息'
      console.log(index.sendParams)
    },
    sendResultFun(index) {
      this.modalVisible = true
      this.sendResult = index.sendResult
      this.status = '回调消息'
      console.log(index.sendResult)
    },
    changeParams(key, value) {
			this.$set(this.params, key, value)
		},
		getListArr() {
			getList(this.params).then((res) => {
				if (res.code === 200) {
					const resRows = res.rows
					resRows.forEach((item, index) => {
            item.orderNum = index + 1
					})
					this.dataSource = resRows
					this.total = res.total

					// console.log('分发日志:', this.dataSource)
				}
			})
		},

    handleOk() {
      this.modalVisible = false
    }
  },
  watch: {
		params: {
			deep: true,
			immediate: true,
			handler(val) {
				this.getListArr(0)
			}
		}
	}
}
</script>

<style lang='less' scoped>
.distributionLog-wrap {
  margin: 0 20px;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 25px 0;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .title {
    font-family: SourceHanSansCN-Medium;
    font-size: 18px;
    color: #171d33;
    margin-bottom: 20px;
    border-left: 4px solid #3b75f5;
    padding-left: 20px;
  }
  .main {
    padding: 0 40px;
    .button-wrap {
      margin: 30px 0 15px;
    }
    button{
      background: none;
      border: none;
      display: inline-block;
      margin: 0 5px;
      padding: 0;
      box-shadow: none;
    }

  }

  .ant-table-tbody > tr > td button{
    color: #2f54eb;
  }
}
</style>
<style lang='less'>
.distributionLog-wrap {
  .ant-table-tbody > tr > td:last-child{
    padding-left: 0;
  }
  .ant-table-tbody > tr > td:nth-child(10){
    padding-right: 0;
  }
}
</style>
