<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
  </div>
</template>
<script>
var buttons = [
  // [
  //   {
  //     'text': '',
  //     'url': 'https://'
  //   },
  //   {
  //     'text': '',
  //     'url': 'https://'
  //   }
  // ],
  // [
  //   {
  //     'text': '',
  //     'url': 'https://'
  //   }
  // ]
]
const languageOpt = [
  {
    label: '中文',
    value: 'zh'
  }, {
    label: '英语',
    value: 'en'
  }, {
    label: '越南',
    value: 'vi'
  }
]
export default {

  data() {
    return {
      loading: false,
      searchForm: [
        {
          label: '关键字',
          type: 'input',
          prop: 'button',
          clearable: false
        }, {
          label: '语言',
          type: 'select',
          prop: 'language',
          options: languageOpt,
          clearable: false
        }, {
          label: '说明',
          type: 'input',
          prop: 'explain',
          clearable: false
        },
        {
          label: '分组',
          prop: 'group_id',
          type:'select',
          options: [
            {
              label:'系统配置',
              value: 0
            }, {
              label:'用户配置',
              value: 1
            }

          ]
        }
      ],
      columns: [
        {
          label: '回复关键字',
          prop: 'button'
        },
        {
          label: '回复内容',
          prop: 'reply'
        },
        {
          label: '语言',
          prop: 'language',
          method: (row) => languageOpt.find(item => item.value === row.language)?.label
        },
        {
          label: '说明',
          prop: 'explain'
        },

        // {
        //   label: '更新时间',
        //   prop: 'updated_at'
        // },
        // {
        //   label: '创建时间',
        //   prop: 'created_at'
        // }
      ],
      rowsActions: [
        {
          key: 'edit',
          label: '编辑'
        },
        {
          key: 'delete',
          vIF: (row) => row.group_id !== 0,
          label: '删除'
        }
      ],
      apis: {
        list: {
          url: '/keyboard',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        },
        add: {
          url: '/keyboard/submit'
        },
        edit: {
          url: '/keyboard/submit'
        },
        delete: {
          url: '/keyboard/delete',
          method: 'post'
        }
      },
      tableOptions: {
        add: {
          show: true,
          initData: () => {
            return {
              buttons: buttons
            }
          }
        }
      },
      editForm:
        [
          {
            body: [
              {
                label: '语言',
                type: 'select',
                prop: 'language',
                options: languageOpt,
                clearable: false,
                rules: [
                  {
                    required: true,
                    message: '语言',
                    trigger: 'change'
                  }
                ]
              },
              {
                label: '回复关键字',
                type: 'input',
                prop: 'button',
                disabled: (row) => row.id ? row.group_id === 0 : false,
                clearable: false,
                rules: [
                  {
                    required: true,
                    message: '回复关键字',
                    trigger: 'change'
                  }
                ]
              },

              {
                label: '回复内容',
                type: 'textarea',
                prop: 'reply',
                clearable: false,
                rules: [
                  {
                    required: true,
                    message: '回复内容',
                    trigger: 'change'
                  }
                ]
              },
              {
                label: '说明',
                type: 'textarea',
                prop: 'explain',
                clearable: false,
                rules: [
                  {
                    required: true,
                    message: '回复关键字',
                    trigger: 'change'
                  }
                ]
              },
              {
                label: '图片',
                type: 'uploadOneImage',
                prop: 'image',
                rules: [
                  {
                    required: false,
                    message: '图片',
                    trigger: 'change'
                  }
                ]
              },
              {
                label: '按钮',
                type: 'buttons',
                prop: 'buttons',
                colSpan: 24
              }
            ]
          }
        ],
      editConfig:
        {
          // size:'small'
          // addTip: '注：备注',
          // editTip: '注：备注'
        }
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    onValueChange(val) {

    },
    onSubmit(params) {
      this.$refs.table.getList(params)
    }
  }
}
</script>
