<template>
  <div class="systemManger-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>
      </div>
      <a-modal title="Title" :visible="visible" @ok="delItem" @cancel="handleCancel">
        <p>确认删除所选中数据</p>
      </a-modal>
      <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" @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 } from '@/api/serviceMasterData/systemManger'
export default {
  components: {
    FilterTable,
    FormModalAdd
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'orderNum',
          key: 'orderNum',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'orderNum' }
        },
        {
          title: '系统代码',
          dataIndex: 'targetCode',
          key: 'targetCode',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '系统名称',
          dataIndex: 'targetName',
          key: 'targetName',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          key: 'createBy'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime'
        }
      ],
      dataSource: [],
      total: 0,
      searchInput: null,
      modalVisible: false,
      selectedRowsId: [],

      params: {
        pageSize: 10,
        pageNum: 1
      },
      visible: false
    }
  },
  mounted() {
    this.getListArr()
  },
  methods: {
    addForm() {
      this.modalVisible = true
      setTimeout(() => {
        this.$refs.model.submitType = 'add'
        this.$refs.table.selectedRows[0] = {
          targetName: '',
          targetCode: '',
          aseKey: '',
          rsapublicKey: '', //	rsa公钥
          rsaprivateKey: '' // rsa私钥
        }
        console.log('this.$refs.table.selectedRows[0]:', this.$refs.table.selectedRows[0])
        this.$refs.model.form = Object.assign({}, this.$refs.table.selectedRows[0])
      }, 300)
    },
    editForm() {
      this.modalVisible = true
      setTimeout(() => {
        this.$refs.model.submitType = 'edit'
        this.$refs.model.form = Object.assign({}, this.$refs.table.selectedRows[0])
      }, 300)
    },
    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)
        }
      })
    },
    delItem() {
      var that = this
      this.$refs.table.selectedRows.forEach((item) => {
        if (item.status === '0') {
          delFile([item.id]).then((res) => {
            that.clearSelectedRows()
            that.getListArr('')
            that.$message.success('删除成功', 3)
            that.visible = false
            that.confirmLoading = false
          })
        } else {
          that.$message.error('被引用的不能删除')
          that.visible = false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 删除
    deleteForm() {
      // const _selectedRowsId = this.$refs.table.selectedRows
      // _selectedRowsId.forEach((item) => {
      // 	this.selectedRowsId.push(item.id)
      // })
      this.visible = true
      //   var that = this
      //   this.$confirm({
      //     title: '确认删除所选中数据?',
      //     onOk() {
      //       return delFile(that.selectedRowsId).then(() => {
      //         that.clearSelectedRows()
      //         that.getListArr('')
      //         that.$message.success('删除成功', 3)
      //       })
      //     },
      //     onCancel() {}
      //   })
    },
    clearSelectedRows() {
      this.$refs.table.selectedRows = []
      this.$refs.table.selectedRowKeys = []
      // console.log('清空啦！！！！！')
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getListArr(0)
      }
    }
  }
}
</script>

<style lang='less' scoped>
.systemManger-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;
    }
  }
}
</style>
