<template>
  <div>
    <div style="width:60%;margin:100px auto;">
      <vxe-table
          border
          resizable
          highlight-hover-row
          highlight-current-row
          height="500"
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="Name"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>
          <vxe-table-column field="age" title="Age"></vxe-table-column>
          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
          <vxe-table-column title="操作" width="100" show-overflow>
            <template v-slot="{ row }">
              <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
              <vxe-button type="text" icon="fa fa-trash-o"></vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>

        <vxe-modal ref="xModal" v-model="showEdit" title="编辑&保存" width="800" resize destroy-on-close>
          <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
            <vxe-form-item title="Basic information" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
            <vxe-form-item title="Name" field="name" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
            <vxe-form-item title="Nickname" field="nickname" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入昵称'}}"></vxe-form-item>
            <vxe-form-item title="Role" field="role" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入角色'}}"></vxe-form-item>
            <vxe-form-item title="Sex" field="sex" span="12" :item-render="{name: 'select', options: sexList}"></vxe-form-item>
            <vxe-form-item title="Age" field="age" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入年龄'}}"></vxe-form-item>
            <vxe-form-item title="Other information" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
            <vxe-form-item title="Number" field="num" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数值'}}"></vxe-form-item>
            <vxe-form-item title="Date" field="date3" span="12" :item-render="{name: 'input', attrs: {type: 'date', placeholder: '请选择日期'}}"></vxe-form-item>
            <vxe-form-item title="Address" field="address" span="24" :title-prefix="{message: '啦啦啦，就是这么强大！！！', icon: 'fa fa-question-circle'}" :item-render="{name: 'textarea', attrs: {placeholder: '请输入地址'}}"></vxe-form-item>
            <vxe-form-item align="center" span="24">
              <vxe-button type="submit" status="primary">保存</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
              <vxe-button @click="$refs.xModal.close()">取消</vxe-button>
            </vxe-form-item>
          </vxe-form>
        </vxe-modal>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {"id":1000000,"name":"TT0","nickname":"徐徐0","role":"前端","role1":"","key":"home.label.key0","language":"zh_CN","content":"内容0","checked":false,"checked1":true,"checked2":true,"checked3":true,"checked4":true,"checkedList":[],"flag":true,"flag1":"Y","flag2":"N","date":"2020-02-07T03:24:54.299Z","date1":"2020-02-07T03:24:54.299Z","date2":"09:00:00","date3":"2020-02-07","date4":"2020-02-07T03:24:54.299Z","date5":"09:00","date6":null,"date7":"2020-02-07T03:24:54.299Z","date8":"2020-02-07T03:24:54.299Z","date9":"2020-02-07T03:24:54.299Z","date10":"2020-02-07T03:24:54.299Z","date11":[],"date12":"2020-02-07","date13":"2020-02-07","num":"0","num1":"0","num2":"0.0","num3":"0.0","num4":"0.00","num5":"0.00","num6":"0","color":"rgba(255, 0, 0, 0.8)","slider":40,"list":[],"time":1581046254299,"sex":"1","sex1":["1"],"sex2":"1","sex3":1,"sex4":1,"sex5":"1","amount":94667600,"bankCard":"6200000100000000","age":16,"age1":"18","region":[19,199,1773],"rate":2,"rate1":"2","state":"value:Washington","address":"vxe-table 从入门到放弃 - 地址0","address2":"地址 地址地址 地址0","img":"static/other/img2.gif","img1":"static/other/img2.gif","html1":"<span style=\"color:red;\">我是一段Html代码</span><br><span style=\"color:blue;\">vxe-table 从入门到放弃0</span><br><span style=\"color:green;\">绿到你发慌！</span>","html2":"<span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到住院0</span><span style=\"color:green;\">绿到你发慌！</span>","html3":"0 -> <span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到放弃0</span><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>","text":"0 -> 徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv","updateTime":1581045894299,"createTime":1581045894299,"attr1":"","attr2":[],"attr3":"","attr4":"","attr5":0,"loading":false,"info":{"name2":"name2_0","more":{"sex2":"1","age2":26}},"_XID":"row_1"},{"id":1000001,"name":"dd1","nickname":"蒋蒋1","role":"项目经理","role1":"1","key":"home.label.key1","language":"en_US","content":"Content1","checked":false,"checked1":false,"checked2":false,"checked3":false,"checked4":false,"checkedList":[],"flag":false,"flag1":"N","flag2":"Y","date":"2020-02-07T05:24:54.299Z","date1":"2020-02-07T05:24:54.299Z","date2":"09:00:00","date3":"","date4":"2020-02-07T05:24:54.299Z","date5":"09:00","date6":null,"date7":"2020-02-07T05:24:54.299Z","date8":"2020-02-07T05:24:54.299Z","date9":"2020-02-07T05:24:54.299Z","date10":"2020-02-07T05:24:54.299Z","date11":[],"date12":"","date13":"","num":"0","num1":"0","num2":"0.6","num3":"0.8","num4":"0.35","num5":"0.97","num6":"0","color":null,"slider":0,"list":[],"time":1581053454299,"sex":"0","sex1":["0"],"sex2":"0","sex3":0,"sex4":0,"sex5":"0","amount":76566532,"bankCard":"6200000100000001","age":30,"age1":"30","region":[1,1,5],"rate":0,"rate1":"0","state":"","address":"vxe-table 从入门到放弃 - 地址1","address2":"地址 地址地址 地址1","img":"static/other/img1.gif","img1":"","html1":"","html2":"","html3":"1 -> <span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到放弃1</span><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>","text":"1 -> 徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv","updateTime":1581053094299,"createTime":1581053094299,"attr1":"","attr2":[],"attr3":"1","attr4":"","attr5":0,"loading":false,"info":{"name2":"name2_1","more":{"sex2":"0","age2":30}},"_XID":"row_2"},
      ],
      selectRow: null,
      showEdit: false,
      sexList: [
        { label: '', value: '' },
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      formData: null,
      formRules: {
        name: [
          { required: true, message: '请输入名称' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
        ],
        nickname: [
          { required: true, message: '请输入昵称' }
        ],
        sex: [
          { required: true, message: '请选择性别' }
        ]
      }
    }
  },
   created () {
    this.tableData = window.MOCK_DATA_LIST.slice(0, 20)
  },
  methods: {
    formatterSex ({ cellValue }) {
      let item = this.sexList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    editEvent (row) {
      this.formData = {
        name: row.name,
        nickname: row.nickname,
        role: row.role,
        sex: row.sex,
        age: row.age,
        num: row.num,
        date3: row.date3,
        address: row.address
      }
      this.showEdit = true
    },
    submitEvent () {
      this.showEdit = false
      this.$XModal.message({ message: '保存成功', status: 'success' })
      Object.assign(this.selectRow, this.formData)
    }
  }
};
</script>

<style>
</style>