<!--
 * @Author: Devin
 * @Date: 2023-02-07 14:24:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-17 16:47:02
 * @Description: card-demo
-->
<template>
  <div class="demo">
    <common-card-group
      :card-numbers="cardNumbers"
      :card-infos="cardInfos"
      :span="6"
      :btns="btns"
      :cards="cards"
      @handel-click-create-card="handelClickCreateCard"
    ></common-card-group>
  </div>

  <common-dialog
    v-if="showDiaog"
    :title="'创建复杂表格'"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <common-complex-form :complex-forms="complexForms"></common-complex-form>
  </common-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

function edit() {
  ElMessage('编辑');
}
function start() {}
//
const cardNumbers = ref<any>([
  { label: '信息1', name: 'name1' },
  { label: '信息2', name: 'name2' },
  { label: '信息3', name: 'name3' }
]);

const cardInfos = ref<any>([{ label: '厂商', name: 'name' }]);
const btns = ref<any>([
  {
    label: '启用',
    name: 'start',
    icon: 'common-bianji',
    color: '#7b93a7',
    onClick: start
  },
  {
    label: '编辑',
    name: 'edit',
    icon: '',
    onClick: edit
  },
  {
    label: '删除',
    name: 'delete',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: edit
  }
]);
const cards = ref<any>([
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  }
]);

const showDiaog = ref<any>(true);
// 添加新卡片
function handelClickCreateCard() {
  showDiaog.value = true;
}

// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    value: '',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input', value: '' },
        { label: '单位', name: 'unit', type: 'select', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入数据长度'
    }
  }
]);

// 关闭弹窗
function closeDialog() {
  showDiaog.value = false;
}

// 确认创建
function confirmDialog() {
  closeDialog();
}
</script>

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