<template>
  <page-header-wrapper>
    <Grid :columns="['400px', 1]">
      <a-card title="装备分类管理" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" icon="plus" shape="circle" title="新增" @click="handleOpenAddZbflModal()"></a-button>
        </template>
        <a-tree
          :treeData="zbfl.treeData"
          :selectedKeys.sync="zbfl.selectedKeys"
          :expandedKeys.sync="zbfl.expandedKeys"
          @select="(_, event) => handleChangeZbflSelected(event.node.dataRef.data)"
        >
          <template #title="scope">
            <a-dropdown :trigger="['contextmenu']">
              <span>{{ scope.title }}</span>
              <span>{{ formatText(scope) }}</span>
              <template #overlay>
                <Flex class="contextmenu-zz">
                  <a-button
                    type="text-primary"
                    icon="edit"
                    title="编辑"
                    @click="handleOpenEditZbflModal(scope.key)"
                  ></a-button>
                  <a-button
                    type="text-primary"
                    icon="plus"
                    title="新增子项"
                    @click="handleOpenAddZbflModal(scope.key)"
                  ></a-button>
                  <a-button
                    type="text-danger"
                    icon="delete"
                    title="删除"
                    @click="handleDeleteZbfl(scope.key, scope.title)"
                  ></a-button>
                </Flex>
              </template>
            </a-dropdown>
          </template>
        </a-tree>
      </a-card>
      <a-card title="装备管理" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary">新增</a-button>
          <a-icon type="sync" style="font-size: 30px" />
        </template>
        <AntQueryTable
          ref="zb-table"
          :queryConfig="zb.queryConfig"
          :showTool="zb.showTool"
          :tableConfig="zb.tableConfig"
        ></AntQueryTable>
      </a-card>
    </Grid>
  </page-header-wrapper>
</template>

<script>
const listGridInfo = {
  Aircraft: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类型', dataIndex: 'type' },
    { title: '国家', dataIndex: 'operatorCountry' },
    { title: '军种', dataIndex: 'operatorService' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '服役年', dataIndex: 'yearCommissioned' },
    { title: '退役年', dataIndex: 'yearDecommissioned' },
  ],
  Ship: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类别', dataIndex: 'category' },
    { title: '所属国', dataIndex: 'operatorCountry' },
    { title: '所属军种', dataIndex: 'operatorService' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '服役年', dataIndex: 'yearCommissioned' },
    { title: '退役年', dataIndex: 'yearDecommissioned' },
    { title: '注释', dataIndex: 'comments' },
    { title: '类型', dataIndex: 'type' },
  ],
  Submarine: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类别', dataIndex: 'category' },
    { title: '所属国', dataIndex: 'operatorCountry' },
    { title: '所属军种', dataIndex: 'operatorService' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '服役年', dataIndex: 'yearCommissioned' },
    { title: '退役年', dataIndex: 'yearDecommissioned' },
    { title: '注释', dataIndex: 'comments' },
    { title: '类型', dataIndex: 'type' },
  ],
  Weapon: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '生产年代', dataIndex: 'generation' },
    { title: '所属国', dataIndex: 'operatorCountry' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '注释', dataIndex: 'comments' },
    { title: '类型', dataIndex: 'type' },
  ],
  Facility: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类别', dataIndex: 'category' },
    { title: '所属国', dataIndex: 'operatorCountry' },
    { title: '所属军种', dataIndex: 'operatorService' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '服役年', dataIndex: 'yearCommissioned' },
    { title: '退役年', dataIndex: 'yearDecommissioned' },
    { title: '注释', dataIndex: 'comments' },
    { title: '类型', dataIndex: 'type' },
  ],
  Satellite: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类别', dataIndex: 'category' },
    { title: '所属国', dataIndex: 'operatorCountry' },
    { title: '所属军种', dataIndex: 'operatorService' },
    { title: '造价(百万，￥)', dataIndex: 'cost' },
    { title: '服役年', dataIndex: 'yearCommissioned' },
    { title: '退役年', dataIndex: 'yearDecommissioned' },
    { title: '注释', dataIndex: 'comments' },
    { title: '类型', dataIndex: 'type' },
  ],
  Comm: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类型', dataIndex: 'type' },
    { title: '注释', dataIndex: 'comments' },
  ],
  Sensor: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类型', dataIndex: 'type' },
    { title: '注释', dataIndex: 'comments' },
    { title: '最大作用距离（公里）', dataIndex: 'rangeMax' },
  ],
  Loadout: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '挂载方案的作用', dataIndex: 'loadoutRole' },
    { title: '注释', dataIndex: 'comments' },
  ],
  Magazine: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '装甲', dataIndex: 'armorGeneral' },
    { title: '补给间隔时间（秒）', dataIndex: 'rof' },
    { title: '容量', dataIndex: 'capacity' },
    { title: '注释', dataIndex: 'comments' },
  ],
  Mount: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '注释', dataIndex: 'comments' },
  ],
  Propulsion: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类型', dataIndex: 'type' },
    { title: '注释', dataIndex: 'comments' },
  ],
  Warhead: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '炸药类型', dataIndex: 'explosivesType' },
    { title: '类型', dataIndex: 'type' },
    { title: '注释', dataIndex: 'comments' },
  ],
  Laser: [
    { title: '#DBID', dataIndex: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', width: 200, ellipsis: true },
    { title: '类型', dataIndex: 'type' },
    { title: '所属国', dataIndex: 'operatorCountry' },
  ],
}

export default {
  name: 'Zbsjk',
  data() {
    return {
      zbfl: {
        treeData: [],
        selectedKeys: [],
        expandedKeys: [],
      },
      zbflModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '上级装备分类',
            prop: 'parentId',
            component: 'AntOriginTreeSelect',
            options: {
              dataSource: () =>
                this.$http({
                  url: '/basedata/entity/getTreeNode',
                  method: 'get',
                  params: { parentId: '-1' },
                }).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
              valueKey: 'key',
            },
          },
          {
            label: '标识编码',
            prop: 'codeName',
          },
          {
            label: '装备分类名称',
            prop: 'name',
          },
        ],
        formRules: {
          codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
          name: [{ required: true, message: '请输入装备分类名称！', trigger: 'blur' }],
        },
        formData: {},
      },
      zb: {
        entityType: '',
        parentId: '',
        queryConfig: false,
        showTool: false,
        tableConfig: {
          query: (params) =>
            this.$http({
              url: '/basedata/' + this.zb.entityType.toLowerCase() + '/getList',
              method: 'post',
              data: { ...params, parentId: this.zb.parentId },
            }),
          columns: [{ dataIndex: 'serial' }, { dataIndex: 'action' }],
          immediate: false,
        },
      },
    }
  },
  created() {
    this.getZzTree()
  },
  methods: {
    formatText(scope) {
      console.log('----scope----', scope)
      return ''
    },
    async getZzTree() {
      try {
        const res = await this.$http({
          url: '/basedata/entity/getTreeNode',
          method: 'get',
          params: { parentId: '-1' },
        })
        this.zbfl.treeData = res.data
        this.zbfl.selectedKeys = [this.zbfl.treeData[0].key]
        this.handleChangeZbflSelected(this.zbfl.treeData[0].data)
      } catch (error) {
        console.log(error)
      }
    },
    handleChangeZbflSelected(data) {
      this.zb.entityType = data.entityType
      this.zb.parentId = data.id
      this.zb.tableConfig.columns = listGridInfo[data.entityType] || []
      this.$refs['zb-table'].commitAction('query')
    },
    handleOpenAddZbflModal(parentId) {
      this.zbflModal.title = '新建装备分类'
      this.zbflModal.mode = 'add'
      this.zbflModal.formData = { parentId }
      this.zbflModal.visible = true
    },
    async handleOpenEditZbflModal(id) {
      try {
        const res = await this.$http({
          url: `/baseData/fightPowerHierarchy/${id}`,
          method: 'get',
        })
        this.zbflModal.title = '编辑装备分类'
        this.zbflModal.mode = 'edit'
        this.zbflModal.formData = res.data
        this.zbflModal.visible = true
      } catch (error) {
        console.log(error)
        this.$message.error('未知错误，请重试')
      }
    },
    handleSubmitZbfl(formData) {
      return this.$http({
        url: `/baseData/fightPowerHierarchy/save`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitZbflSuccess() {
      this.getZzTree()
    },
    async handleDeleteZbfl(id, title) {
      try {
        await this.$confirm({ content: `确定删除装备分类-${title}？` })
        await this.$http({
          url: `/baseData/fightPowerHierarchy/remove/${id}`,
          method: 'get',
        })
        this.$message.success('删除成功')
        this.getZzTree()
      } catch (error) {}
    },
  },
}
</script>

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