<template>
  <div class="app-container">
    <div class="header boxShadow">
      <!-- <div class="header-title">通风设备</div> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="接入系统">
          <!-- <el-select v-model="formInline.systemName" placeholder="活动区域" clearable>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
          <el-input v-model="formInline.systemName" placeholder="请输入系统名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%;" clearable></el-date-picker>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%;" clearable></el-date-picker>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" icon="el-icon-search">查 询</el-button>
          <el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus">新 增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list-table">
      <el-table :data="tableData" style="width: 100%" stripe fit highlight-current-row :header-cell-style="{'background-color':'#f5f5f5','text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="systemName" label="接入系统" width="180">
        </el-table-column>
        <el-table-column prop="systemIp" label="目标主机IP" width="180">
        </el-table-column>
        <el-table-column prop="systemEncoding" label="系统编码">
        </el-table-column>
        <el-table-column prop="systemAdministrator" label="管理员">
        </el-table-column>
        <el-table-column prop="adminTel" label="管理员电话">
        </el-table-column>
        <el-table-column prop="adminEmail" label="管理员邮箱">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
    <el-dialog title="数据交换配置" width="60%" :visible.sync="dialogFormVisible" center>
      <el-form :model="diaForm" :label-width="formLabelWidth">
        <el-row>
          <el-col :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="系统名称">
              <el-input v-model="diaForm.systemName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="IP地址">
              <el-input v-model="diaForm.systemIp" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="系统编码">
              <el-input v-model="diaForm.systemEncoding" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="接口名称">
              <el-input v-model="diaForm.interfaceName" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="接口名称2">
              <el-input v-model="diaForm.interfaceName" autocomplete="off"></el-input>
            </el-form-item> -->
          </el-col>
          <el-col :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="管理员">
              <el-input v-model="diaForm.systemAdministrator" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="管理员电话">
              <el-input v-model="diaForm.adminTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="管理员邮箱">
              <el-input v-model="diaForm.adminEmail" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="交换频率">
              <el-select v-model="diaForm.switchingFrequency" placeholder="请选择" style="width:100%;">
                <el-option label="每日一次" value="daily"></el-option>
                <el-option label="每周一次" value="weekly"></el-option>
                <el-option label="每月一次" value="monthly"></el-option>
                <el-option label="每季一次" value="quarterly"></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="交换频率">
              <el-select v-model="diaForm.switchingFrequency" placeholder="请选择" style="width:100%;">
                <el-option label="每日一次" value="daily"></el-option>
                <el-option label="每周一次" value="weekly"></el-option>
                <el-option label="每月一次" value="monthly"></el-option>
                <el-option label="每季一次" value="quarterly"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" :loading='loading' @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getChangeList, addChangeINfo } from '@/api/dataSynchronism/index.js'
export default {
  data () {
    return {
      loading: false,
      formInline: {
        systemName: '',
        startTime: '',
        endTime: ''
      },
      tableData: [{
        systemName: '购销合同系统',
        systemIp: '101.25.125.012',
        systemEncoding: 'GX-20230325101',
        systemAdministrator: '李四',
        adminTel: '13201654587',
        adminEmail: "13201654587@163.com",
        createTime: '2023-03-20 15:07:03',
      },
      {
        systemName: '购销合同系统',
        systemIp: '101.25.125.012',
        systemEncoding: 'GX-20230325101',
        systemAdministrator: '李四',
        adminTel: '13201654587',
        adminEmail: "13201654587@163.com",
        createTime: '2023-03-20 15:07:03',
      },
      {
        systemName: '购销合同系统',
        systemIp: '101.25.125.012',
        systemEncoding: 'GX-20230325101',
        systemAdministrator: '李四',
        adminTel: '13201654587',
        adminEmail: "13201654587@163.com",
        createTime: '2023-03-20 15:07:03',
      },],
      listQuery: {
        condition: "",
        page: 1,
        limit: 10,
        total: 10,
      },
      dialogFormVisible: false,
      formLabelWidth: '100px',
      diaForm: {
        orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode,
        systemName: '',
        systemIp: '',
        systemEncoding: '',
        systemAdministrator: '',
        adminTel: '',
        adminEmail: '',
        interfaceName: '',
        switchingFrequency: ''
      },
    }
  },
  created () {

  },
  mounted () {
    this.getList()
  },
  methods: {
    indexMethod (index) {
      return index * 2;
    },
    search () {
      this.getList()
    },
    getList () {
      let condition = {
        systemName: this.formInline.systemName,
        orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode,
        // orgCode: "12312",
        startTime: this.formInline.startTime,
        endTime: this.formInline.endTime
      }
      let data = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      getChangeList(data).then(res => {
        // console.log(res, 'getChangeList')
        if (res.code == 200) {
          this.tableData = res.data.records
          this.listQuery.limit = res.data.size
          this.listQuery.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    save () {
      this.loading = true
      addChangeINfo(this.diaForm).then(res => {
        // console.log(res, 'addChangeINfo')
        if (res.code == 200) {
          this.loading = false
          this.$message.success("新增成功")
          this.dialogFormVisible = false
          this.$nextTick(() => {
            this.getList()
          })
        } else {
          this.loading = false
        }
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    handleAdd () {
      this.dialogFormVisible = true
    },
    sizeChange (v) {
      this.listQuery.limit = v
      console.log(`每页 ${v} 条`);
      this.list.splice(v, this.list.length - 1)
    },
    pageChange (v) {
      this.listQuery.page = v
      console.log(`当前页: ${v}`);
    },

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  // display: flex;
  // justify-content: space-between;
}
.header {
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  min-height: 60px;
  display: flex;
  // flex-direction: column;
  // justify-content:center;
  align-items: center;
  margin-bottom: 15px;
  .header-title {
    font-size: 14px;
    font-weight: 600;
    padding-left: 10px;
    border-left: 4px solid #5283e7;
  }
  .van-notice-bar {
    padding: 10px 0 10px 0;
  }
  .el-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.list-table {
  width: 100%;
  background-color: #fff;
  // height: 100%;
  height: calc(100vh - 185px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
}
::v-deep .el-tree-node__content {
  height: 40px;
}
::v-deep .el-tree-node__label {
  font-size: 16px;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  color: #5283e7;
  font-weight: bold;
}
</style>