<template>
  <page-header-wrapper>
    <Grid>
      <a-card class="my-card">
        <AntQueryTable
          height="100%"
          ref="tx-table"
          :queryConfig="txTable.queryConfig"
          :tableConfig="txTable.tableConfig"
          :pageConfig="txTable.pageConfig"
          :showTool="txTable.showTool"
        >
          <template #toolbar-left>
            <a-button type="primary" icon="plus" @click="handleOpenAddModal">新增</a-button>
          </template>
          <template #tablecell-iconBase64="{ text }">
            <img :src="text" alt="" style="width: 100px; height: 70px; object-fit: contain" />
          </template>
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditModal(record)"></a-button>
            <a-button type="text-danger" icon="delete" @click="handleDelete(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
    </Grid>
    <AntFormModal
      :visible.sync="AEModal.visible"
      :title="AEModal.title"
      width="900px"
      :formConfig="{ labelCol: { span: 3 }, wrapperCol: { span: 19 } }"
      :formItems="AEModal.formItems"
      :formRules="AEModal.formRules"
      :formData="AEModal.formData"
      :onSubmit="handleSubmitAE"
      @success="handleSubmitAESuccess"
    ></AntFormModal>
  </page-header-wrapper>
</template>

<script>
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
export default {
  name: 'Txsjk',
  data() {
    return {
      txTable: {
        queryConfig: false,
        tableConfig: {
          query: (params) => getAction('/icon/list', params),
          columns: [
            { dataIndex: 'serial' },
            { dataIndex: 'iconName', title: '军标名称', width: 'auto', align: 'center' },
            { dataIndex: 'iconBase64', title: '军标图片', width: 'auto', align: 'center' },
            { dataIndex: 'action' },
          ],
        },
        pageConfig: true,
        showTool: true,
      },
      AEModal: {
        visible: false,
        title: '新增图形',
        formItems: [
          { label: '军标名称', prop: 'iconName' },
          { label: '军标图片', prop: 'iconBase64', component: 'Image2Base64' },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.formData = {}
      this.AEModal.visible = true
    },
    async handleOpenEditModal(record) {
      try {
        const res = await getAction(`/icon/${record.id}`)
        this.AEModal.formData = res.data
        this.AEModal.visible = true
      } catch (error) {
        console.log(error)
      }
    },
    handleSubmitAE(formData) {
      return this.$http({
        url: '/icon/save',
        method: 'post',
        data: formData,
      })
    },
    handleSubmitAESuccess() {
      this.$refs['tx-table'].commitAction('query')
    },
    async handleDelete(record) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该军标吗？' })
        const res = await getAction('/icon/remove/' + record.id)
        this.$message.success(res.message)
        this.$refs['tx-table'].commitAction('query')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
