<template>
  <div class="comp-content">
    <Dialog
      v-model="diaVisible"
      diaTitle="数据统计看板布局设置"
      top="2vh"
      width="500"
      height="80%"
      body-class="table-form-dia"
      show-footer
      @close="closeFun"
    >
      <div class="content">
        <div class="table">
          <vxe-table
            ref="vxeTableRef"
            :data="tableData"
            height="100%"
            :row-config="{
              drag: true,
            }"
            :column-config="{
              resizable: true,
            }"
            @row-dragend="rowDragendFun"
          >
            <vxe-column type="seq" fixed="left" width="70" drag-sort />
            <vxe-column
              field="title"
              title="统计图表"
              fixed="left"
              align="center"
              header-align="center"
              :min-width="120"
            >
            </vxe-column>
            <vxe-column
              field="inBoard"
              title="看板中显示"
              align="center"
              header-align="center"
              width="90"
            >
              <template #default="{ row }">
                <el-switch v-model="row.inBoard" />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
          <el-button type="primary" @click="updateFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';

interface Props {
  modelValue: boolean;
  configJson?: string;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  configJson: '',
});

const emit = defineEmits(['update:modelValue', 'updateConfig']);
const diaVisible = ref(false);
const tableData = ref<any>([]);
const baseTable = [
  { key: 'userGroupProject', title: '用户组项目统计', inBoard: true },
  { key: 'userDifficultyCoefficient', title: '用户组难度系数统计', inBoard: true },
  { key: 'userTaskComplete', title: '用户组任务完成情况统计', inBoard: true },
  { key: 'projectTaskComplete', title: '项目任务完成情况统计', inBoard: true },
  { key: 'taskCompletionMechine', title: '任务完成统计（机台）', inBoard: true },
  { key: 'taskCompletionDiscipline', title: '任务完成统计（学科）', inBoard: true },
  { key: 'performanceCompletionMechine', title: '指标完成统计（机台）', inBoard: true },
  { key: 'performanceCompletionDiscipline', title: '指标完成统计（学科）', inBoard: true },
  { key: 'reviewPassed', title: '工位评审通过统计', inBoard: true },
];
const vxeTableRef = ref<any>();

watch(
  () => props.modelValue,
  (val: boolean) => {
    diaVisible.value = val;
    if (val) {
      updateTable();
    }
  }
);
const updateTable = () => {
  if (props.configJson) {
    tableData.value = JSON.parse(props.configJson);
  } else {
    tableData.value = [...baseTable];
  }
};
const updateFun = () => {
  emit('update:modelValue', false);
  emit('updateConfig', JSON.stringify(tableData.value));
};

const rowDragendFun = () => {
  tableData.value = vxeTableRef.value.getFullData();
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss">
.table-form-dia {
  height: 75vh;
  .content {
    height: 100%;
    .table {
      flex: 1;
      height: calc(100% - 48px);
      .actions {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 1px;
          background-color: var(--el-text-color-primary);
          filter: blur(5px);
        }
      }
    }
  }
}
</style>
