<template>
  <page-header-wrapper>
    <Grid>
      <a-card class="my-card">
        <AntQueryTable
          height="100%"
          ref="fd-table"
          :queryConfig="fdTable.queryConfig"
          :tableConfig="fdTable.tableConfig"
          :pageConfig="fdTable.pageConfig"
          :showTool="fdTable.showTool"
        >
          <template #toolbar-left>
            <a-button type="primary" icon="plus" @click="handleOpenAddModal()">新增</a-button>
          </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 { getAction, postAction } from '@/api/manage'

export default {
  data() {
    return {
      fdTable: {
        queryConfig: false,
        tableConfig: {
          query: () => getAction('/team/list'),
          columns: [
            { dataIndex: 'serial' },
            { dataIndex: 'name', title: '分队名称', width: 'auto', minWidth: 160 },
            {
              dataIndex: 'type',
              title: '分队类型',
              width: 'auto',
              minWidth: 160,
              align: 'center',
              customRender: (text) => ['作战分队', '保障分队'][text],
            },
            { dataIndex: 'action' },
          ],
        },
        pageConfig: true,
        showTool: true,
      },
      AEModal: {
        visible: false,
        title: '',
        formItems: [
          { label: '分队名称', prop: 'name' },
          {
            label: '分队类型',
            prop: 'type',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { title: '作战分队', id: 0 },
                  { title: '保障分队', id: 1 },
                ],
              }),
            },
          },
          { label: '分队军标', prop: 'iconId', component: 'IconSelector' },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.title = '新增分队'
      this.AEModal.formData = {}
      this.AEModal.visible = true
    },
    handleOpenEditModal(record) {
      this.AEModal.title = '编辑分队'
      this.AEModal.formData = { ...record }
      this.AEModal.visible = true
    },
    handleSubmitAE(formData) {
      return postAction('/team/save', formData)
    },
    handleSubmitAESuccess() {
      this.$refs['fd-table'].commitAction('query')
    },
    async handleDelete(record) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该分队吗？' })
        const res = await getAction('/team/remove/' + record.id)
        this.$message.success(res.message)
        this.$refs['fd-table'].commitAction('query')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

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