<template>
  <div>
    <div class="content">
      <dataTable :table-data="tableData" :columns="columns" :page-obj="pageObj" :breads="breads">
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </dataTable>
      <el-dialog :visible.sync="isEdit" title="支付账户编辑" width="25%">
        <data-form :search-data="searchData" :search-form="searchForm" :search-handle="searchHandle" size="medium" label-width="150px">
        </data-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
import dataForm from '@/components/dataForm.vue'
export default {
  name: 'list',
  components: {
    dataTable,
    dataForm
  },
  data() {
    return {
      isEdit: false,
      breads: ['财务管理 ', '支付账户管理'],
      tableData: [{
        name: '投标保证金账户',
        person: '谢天',
        data: '2017-10-01 15：00',
        phone: '18777777777'
      }, {
        name: '投标保证金账户',
        person: '谢天',
        data: '2017-10-01 15：00',
        phone: '18778888'
      }, {
        name: '投标保证金账户',
        person: '谢天',
        data: '2017-10-01 15：00',
        phone: '18777666'
      }

      ],
      columns: [{
        label: '账户名称',
        prop: 'name'
      },
      {
        label: '联系人',
        prop: 'person'
      },
      {
        label: '联系电话',
        prop: 'phone'
      },
      {
        label: '创建时间',
        prop: 'data',
        sortable: true
      },
      {
        slot: 'operate'
      }
      ], // 操作列

      pageObj: {

      },
      searchData: {
        name: '',
        bond: '',
        account: '',
        bank: '',
        person: '',
        phone: ''
      },
      searchForm: [{
        type: 'input',
        label: '账户名称：',
        prop: 'name',
        width: '100%',
        disabled: true
      },
      {
        type: 'input',
        label: '投标保证金结算账：',
        prop: 'bond',
        width: '100%',
        placeholder: '请输入'
      },
      {
        type: 'input',
        label: '投标保证金结算账号',
        prop: 'account',
        width: '100%',
        placeholder: '请输入'
      },
      {
        type: 'input',
        label: '投标保证金结算开户行',
        prop: 'bank',
        width: '100%',
        placeholder: '请输入'
      },
      {
        type: 'input',
        label: '投标保证金结算联系人',
        prop: 'person',
        width: '100%',
        placeholder: '请输入'
      },
      {
        type: 'input',
        label: '投标保证金结算电话',
        prop: 'phone',
        width: '100%',
        placeholder: '请输入'
      }
        // {
        // 	type: 'Select',
        // 	label: '性别',
        // 	prop: 'sex',
        // 	width: '120px',
        // 	options: sexs,
        // 	props: sexProps,
        // 	change: row => '',
        // 	placeholder: '请选择性别'
        // },

      ],
      searchHandle: [{
        label: '取消',
        handle: () => this.searchHandleForm()
      },
      {
        label: '确定',
        type: 'primary',
        handle: () => this.submit()
      }
      ],

      // 表单验证
      editRules: {
        name: [{
          requied: true,
          message: '请输入姓名',
          trigger: 'blur'
        }]
      }

    }
  },
  methods: {
    handleEdit(row) {
      this.isEdit = true
      this.searchData = row
    },
    searchHandleForm() {
      this.isEdit = false
    },
    submit() {
      console.log(this.searchData)
    }
  }
}
</script>

<style scoped>

</style>
