<template>
  <div class="interfaceManager-wrap">
    <h2 class="title">分发管理</h2>
    <div class="main">
      <div class="button-wrap">
        <a-button type="add" @click="addForm">新增</a-button>
        <a-button type="delete" :disabled="$refs.table&&$refs.table.selectedRows.length===0" @click="deleteForm()">删除</a-button>
        <a-button type="edit" @click="editForm" :disabled="$refs.table&&$refs.table.selectedRows.length!==1">编辑</a-button>
        <a-button type="add" :disabled="$refs.table&&$refs.table.selectedRows.length!==1" @click="getUpdateStatus('0')">启用</a-button>
        <a-button type="delete" :disabled="$refs.table&&$refs.table.selectedRows.length!==1" @click="getUpdateStatus('1')">停用</a-button>
      </div>
      <div class="table-content">
        <FilterTable
          ref="table"
          :columns="columns"
          :searchInput="searchInput"
          :dataSource="dataSource"
          :total="total"
          @changeParams="changeParams"
        />
      </div>
      <a-modal
        width="800px"
        v-model="modalVisible"
        title="新增分发接口"
        :footer="null"
        :destroyOnClose="true"
        @ok="handleOk">
        <FormModalAdd ref="model" @handleOk="handleOk"/>
      </a-modal>

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

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import FormModalAdd from './components/FormModalAdd.vue'
import { getList, delFile, updateStatus } from '@/api/interfaceManager/interfaceManager'
var id = null
export default {
	components: {
		FilterTable,
		FormModalAdd
	},
	data() {
		return {
			id: id,
			columns: [
				{
					title: '序号',
					dataIndex: 'orderNum',
					key: 'orderNum',
					width: 120,
					align: 'center',
					scopedSlots: { customRender: 'orderNum' }
				},
				{
					title: '定时任务',
					dataIndex: 'taskType',
					key: 'taskType',
					align: 'center',
					scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender'
					},

					customRender: (text, record, index) => {
						if (text === '0') {
							return <span style="color:#2d60d6">已开启</span>
						} else if (text === '1') {
							return <span style="color:red">已关闭</span>
						}
					}
				},
				{
					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: 'createBy',
					key: 'createBy',
					align: 'center'
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					key: 'createTime',
					align: 'center'
				},
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
					align: 'center',
          customRender: (text, record, index) => {
            if (text === '0') {
              return <span style="color:#2d60d6">启用</span>
            } else if (text === '1') {
              return <span style="color:red">停用</span>
            }
          }
        }
			],
			dataSource: [],
			total: 0,
			// selectedStateWork: true,
      // selectedStateStop: true,

      searchInput: null,
			modalVisible: false,
      selectedRowsId: [],
			dataDetailArr: {},
			params: {
				pageSize: 10,
				pageNum: 1
			}

		}
	},
	mounted() {
		this.getListArr()
	},

	methods: {
		addForm() {
			this.modalVisible = true
			setTimeout(() => {
				this.$refs.model.submitType = 'add'
				this.$refs.model.basicForm = {}
			}, 0)
		},
		editForm() {
			const id = this.$refs.table.selectedRows[0].id
			this.modalVisible = true
			setTimeout(() => {
				this.$refs.model.submitType = 'edit'
				this.$refs.model.getDetailArr(id)
			}, 0)
		},
		handleOk() {
			this.modalVisible = false
			this.getListArr('')
		},
		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)
				}
			})
		},

		// 批量更改状态
    getUpdateStatus(status) {
			const _selectedRowsId = this.$refs.table.selectedRows
			_selectedRowsId.forEach((item) => {
				this.selectedRowsId.push(item.id)
			})
			const ids = this.selectedRowsId
      status === '0' ? (status = '0') : (status = '1')
      updateStatus({ ids: ids.join(','), status }).then((res) => {
        if (res.code === 200) {
          this.getListArr()
					this.selectedRowsId = []
          if (ids.length === 1) {
            this.selectedStateWork = !this.selectedStateWork
            this.selectedStateStop = !this.selectedStateStop
          }
        }
      })
    },

		// 删除
    deleteForm() {
			const _selectedRowsId = this.$refs.table.selectedRows
			_selectedRowsId.forEach((item) => {
				this.selectedRowsId.push(item.id)
			})
      var that = this
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk() {
          return delFile(that.selectedRowsId).then(() => {
            that.clearSelectedRows()
            that.getListArr('')
            that.$message.success('删除成功', 3)
						that.selectedRowsId = []
          })
        },
        onCancel() {
            that.$message.success('取消删除', 3)
						that.selectedRowsId = []
				}
      })
			console.log('this.selectedRowsId:', that.selectedRowsId)
    },
		clearSelectedRows() {
			this.$refs.table.selectedRows = []
			this.$refs.table.selectedRowKeys = []
			this.selectedRowsId = []
      // console.log('清空啦！！！！！')
    }

	},
	watch: {
		params: {
			deep: true,
			immediate: true,
			handler(val) {
				this.getListArr(0)
			}
		}
	}

}
</script>

<style lang='less' scoped>
.interfaceManager-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;
      }
    }
		.ant-modal{
			width: 800px !important;
		}
  }
</style>
