<script lang="ts" setup name="CustomChart">
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
const emits = defineEmits(['watchChild', 'refresh'])
const dialogFormVisible = ref(false) // 对话框是否显示

const dataFormRef = ref()
const dataForm = ref({
  type: '',
  name: '',
})
const rules: FormRules = {
  type: [{ required: true, message: '图表类型必选', trigger: ['blur', 'change'] }],
  name: [{ required: true, message: '图表名称必选', trigger: ['blur', 'change'] }],
} // 前端校验规则

// 重置表单
const resetForm = () => {

}

const initDialog = () => {
  dialogFormVisible.value = true
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}

const chartList = ref([
  {
    type: 'line',
    icon: 'icon-set-line',
    name: '折线图',
  },
  {
    type: 'pie',
    icon: 'icon-set-pie',
    name: '饼图',
  },
  {
    type: 'ring',
    icon: 'icon-set-ring',
    name: '环图',
  },
  {
    type: 'bar-vertical',
    icon: 'icon-set-bar-vertical',
    name: '柱状图-水平',
  },
  {
    type: 'bar-horizontal',
    icon: 'icon-set-bar-horizontal',
    name: '柱状图-垂直',
  },
  {
    type: 'table',
    icon: 'icon-set-table',
    name: '表格',
  },
  {
    type: 'rank',
    icon: 'icon-set-rank',
    name: '排行榜',
  },
])
const selectChart = (item: any) => {
  dataForm.value.type = item.type
  dataFormRef.value.clearValidate('type')
}
const saveData = () => {
  dataFormRef.value.validate((valid: any) => {
    // if (valid) {
    // }
  })
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="自定义数据" append-to-body>
    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="图表类型" prop="type">
            <div class="type-container">
              <div v-for="item in chartList" :key="item.type">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="item.name"
                  placement="top"
                >
                  <svg-icon :class="dataForm.type === item.type ? 'border' : ''" :name="item.icon" class="icon-button-icon" @click="selectChart(item)" />
                </el-tooltip>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-row />
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="图表名称" prop="name">
            <el-input v-model.trim="dataForm.name" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="dataForm.type === 'line'" :gutter="20">
        <el-col :span="20">
          <el-form-item label="x轴数据" prop="xAxisData">
            <el-input v-model.trim="dataForm.xAxisData" type="text" placeholder="多个数据用,分割。示例: 周一,周二" />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="数据名称" prop="dataName">
            <el-input v-model.trim="dataForm.dataName" type="text" placeholder="多个数据用,分割。示例: 在用,禁用,停用" />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="数据" prop="data">
            <el-input v-model.trim="dataForm.data" type="text" placeholder="多个数据用,分割。示例: [5,3],[2,6] 注意[]里面数字数量需等于x轴数据的个数" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.border {
  border: 2px solid #000;
}

.type-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.icon-button-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  // border: 1px solid #000;

  &:hover {
    cursor: pointer;
    // width: 45px;
    // height: 45px;
    box-shadow: 4px 4px 15px #666;
  }
}
</style>