<script setup>
import { ref } from 'vue'

const tableData = ref([
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
])
const statusMap = [
  {
    type: 'loading',
    text: '处理中'
  },
  {
    type: 'success',
    text: '正常'
  },
  {
    type: 'error',
    text: '异常'
  },
  {
    type: 'info',
    text: '待审批'
  },
  {
    text: '自定义颜色',
    color: '#666666'
  }
]
const columns = ref([
  {
    key: "instanceType",
    title: "普通",
  },
  {
    type: 'slot',
    slotName: 'middle'
  },
  {
    type: 'format',
    key: "productType",
    title: "文本格式化",
    format([data, row, i]) {
      return `自定义${row.instanceType + i}`
    },
    group: [
      {label: '全部', value: ''},
      {label: '运行中', value: 'active'},
      {label: '已关闭', value: 'stopped'}
    ],
    hideGroupHeader: true
  },
  {
    key: "instanceName",
    title: "link可点击带回调",
    type: 'link',
    click: ([val, row, i]) => {
      alert(`我被点击了${val}`)
    },
    format([data, row, i]) {
      return `别看了点我`
    },
  },
  {
    key: "region",
    title: "状态",
    type: 'status',
    width: 100,
    props([data, row, i]) {
      return statusMap[i]
    }
  }
]);

function changeGroup(val) {
  console.log('change-group',val)
  alert(`我被点击了${JSON.stringify(val)}`)
}

function clickRow(data, i, key) {
  console.log('click-row', {
    data, i, key
  })
  alert(`我被点击了第${i + 1}行`)
}

const tableInstance = ref(null)
function checkAll() {
  tableInstance.value.checkAll()
}
function uncheckAll() {
  tableInstance.value.uncheckAll()
}


</script>

<template>
  <div>
    <div class="search">
      <Button class="margin-right-base" type="primary" @click="checkAll">全选</Button>
      <Button type="primary" @click="uncheckAll">全不选</Button>
    </div>
    <CommonTable
        ref="tableInstance"
        :data="tableData"
        :columns="columns"
        :group="{ productType: '' }"
        @$change:group="changeGroup"
        @clickRow="clickRow"
    >
      <template v-slot:middle>
        <TableColumn title="中间插槽" key="test1">
          <template v-slot:template="[data, index]">
            <Input size="small" value="请输入" style="width: 70%" />
          </template>
        </TableColumn>
      </template>
      <TableColumn fixed="right" title="操作" key="test2">
        <template v-slot:template="[data, index]">
          <div>
            <Button type="link">编辑</Button>
            <Button type="link">删除</Button>
          </div>
        </template>
      </TableColumn>
    </CommonTable>
  </div>
</template>

<style scoped lang="less">
.search {
  padding: 10px 0;
  text-align: right;
  .margin-right-base {
    margin-right: 20px;
  }
}
</style>
