<template>
  <div class="control" v-loading.fullscreen.lock="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.6)">
    <div class="body">
      <el-form ref="ruleForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="评价标准:" prop="name">
              <el-input v-model="form.name" placeholder="请输入评价标准" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-button type="primary" style="float: right; margin-left: 10px" @click="save" :disabled="type === 'view'">确定</el-button>
            <el-button type="primary" style="float: right; margin-left: 10px" @click="enable" :disabled="type === 'view'">{{
              statusText
            }}</el-button>
            <el-button type="primary" icon="Plus" style="float: right" :disabled="type === 'view'" @click="openDialog({}, '0', 'add')">
              新增评价类型</el-button
            >
            <upload
              class="upload"
              style="float: right"
              action="/prod-api/sponge/assessTargetConfigControllerItem/exportTargetConfigControllerItem"
              :data="{ targetId: controlId }"
              :disabled="type === 'view'"
              @success="
                data => {
                  uploadSuccess(data);
                }
              "
            >
              <el-button type="primary" icon="Upload" :disabled="type === 'view'"> 导入</el-button>
            </upload>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="tableRef"
        :data="treeData"
        :max-height="670"
        element-loading-text="数据加载中..."
        row-key="nodeCode"
        v-loading="tableLoading"
      >
        <!-- <el-table-column type="index" width="55" label="序号"  /> -->
        <el-table-column label="评价类型" prop="evaluationType" width="140px">
          <template #default="{ row }">
            <span>{{ row.level === '0' ? row.evaluationType : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="控制项" prop="controlItem" width="120px">
          <template #default="{ row }">
            <span>{{ row.level === '1' ? row.controlItem : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价标准" prop="evaluationCriterion" width="280px">
          <template #default="{ row, $index }">
            <div v-html="formatSearch(row, $index, row.evaluationCriterion)" v-if="row.level === '2'"></div>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="是否需要评价" prop="evaluationOpen" width="110px">
          <template #default="{ row }">
            <el-switch v-model="row.evaluationOpen" active-value="true" inactive-value="false" :disabled="type === 'view'" />
          </template>
        </el-table-column>
        <el-table-column label="启用状态" prop="status" width="90px">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-value="1"
              inactive-value="0"
              @change="
                val => {
                  statusChange(row, val);
                }
              "
              :disabled="row.statusDisabled || type === 'view'"
            />
          </template>
        </el-table-column>
        <el-table-column label="启用时间" prop="enableTime" show-overflow-tooltip width="160px" />
        <el-table-column label="停用时间" prop="stopTime" show-overflow-tooltip width="160px" />
        <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
        <el-table-column label="修改日期" prop="updateTime" show-overflow-tooltip width="160px" />
        <el-table-column label="排序" width="110px">
          <template #default="{ row }">
            <el-button type="primary" link :disabled="getSortIsDisabled(row, 'ascending') || type === 'view'" @click="ascHandle(row)"
              >升序</el-button
            >
            <el-button type="primary" link :disabled="getSortIsDisabled(row, 'descending') || type === 'view'" @click="descHandle(row)"
              >降序</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              v-if="row.level === '0'"
              @click="openDialog(row, row.level * 1 + 1 + '', 'add')"
              :disabled="type === 'view'"
              >新增控制项</el-button
            >
            <el-button
              type="primary"
              link
              v-if="row.level === '1'"
              @click="openDialog(row, row.level * 1 + 1 + '', 'add')"
              :disabled="type === 'view'"
              >新增评价标准</el-button
            >
            <el-button type="primary" link v-if="row.level === '2'" @click="copy(row)" :disabled="type === 'view'">复制</el-button>
            <el-button type="primary" link @click="openDialog(row, row.level, 'view')">查看</el-button>
            <el-button type="primary" link @click="openDialog(row, row.level, 'edit')" :disabled="type === 'view'">修改</el-button>
            <el-button type="danger" link @click="del(row)" :disabled="type === 'view'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="visible"
      :title="`${operateInfo.text}`"
      :close-on-click-modal="false"
      :width="operateInfo.width"
      :before-close="close"
      class="dialog"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogFormRules"
        v-if="operateInfo.level"
        :disabled="operateInfo.type === 'view' || type === 'view'"
      >
        <el-row>
          <el-col :span="20" :offset="2" v-if="operateInfo.level === '0'">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" placeholder="请输入评价类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.level === '1'">
          <el-col :span="12">
            <el-form-item label="控制项:" prop="controlItem">
              <el-input v-model="dialogForm.controlItem" placeholder="请输入控制项" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.level === '2'">
          <el-col :span="12">
            <el-form-item label="评价标准:" prop="evaluationCriterion">
              <el-input v-model="dialogForm.evaluationCriterion" placeholder="请输入评价标准" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制项:" prop="controlItem">
              <el-input v-model="dialogForm.controlItem" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="operateInfo.type !== 'view'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import useUserStore from '@/store/modules/user';
import {
  getAssessTargetConfigControllerItem,
  assessTargetConfigControllerItemBatchUpdate,
  assessTargetConfigOpen,
  assessTargetConfigClose,
} from '@/api/preassess/examineManage.js';
import { optTextMap } from '@/utils/map';
import { inheritAttr } from '@/utils/v3';
import useTable from '../mixins';
import upload from '../upload.vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
  checkObj: {
    type: Object,
    default: {},
  },
});
let { type, status, engineeringType, controlId } = props.checkObj;
const statusText = ref(status === '1' ? '停用' : '启用');
const {
  form,
  treeData,
  visible,
  curRow,
  operateInfo,
  getTreeCurRow,
  search,
  resetQuery,
  goBack,
  close,
  statusChange,
  setStatusDisabled,
  getSortIsDisabled,
  copy,
  del,
  ascHandle,
  descHandle,
  formatSearch,
  expand,
  checkData,
} = useTable(proxy, uuidv4);
const dialogForm = reactive({
  evaluationType: '',
  controlItem: '',
  evaluationCriterion: '',
});
const loading = ref(false);
const tableLoading = ref(false);

const dialogFormRules = reactive({
  evaluationType: [{ required: true, trigger: 'blur', message: '评价类型不能为空' }],
  controlItem: [{ required: true, trigger: 'blur', message: '控制项不能为空' }],
  evaluationCriterion: [{ required: true, trigger: 'blur', message: '评价标准不能为空' }],
});

const operateMap = new Map([
  ['0', { width: '24%', text: '评价类型' }],
  ['1', { width: '48%', text: '控制项' }],
  ['2', { width: '48%', text: '评价标准' }],
]);
const openDialog = (row, level, type) => {
  console.log(row);
  curRow.value = row;
  operateInfo.level = level;
  operateInfo.type = type;
  operateInfo.text = optTextMap.get(type) + operateMap.get(level).text;
  operateInfo.width = operateMap.get(level).width;
  visible.value = true;
  nextTick(() => {
    setDialogForm(row, level, type);
  });
};

const setDialogForm = (row, level, type) => {
  inheritAttr(row, dialogForm);
  switch (level) {
    case '1':
      dialogForm.evaluationType = row.evaluationType;
      break;
    case '2':
      dialogForm.evaluationType = row.evaluationType;
      dialogForm.controlItem = row.controlItem;
    default:
      break;
  }
};

const submit = () => {
  console.log(operateInfo, dialogForm);
  proxy.$refs.dialogFormRef.validate(valid => {
    if (valid) {
      const treeDataCurRow = getTreeCurRow(treeData.value, curRow.value);
      const row = {
        assessTargetConfigId: controlId,
        evaluationType: '',
        controlItem: '',
        evaluationCriterion: '',
        evaluationOpen: 'false',
        enableTime: '',
        stopTime: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
        updateBy: useUserStore().name,
        updateTime: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
        status: '0',
        parentNodeCode: '0',
      };
      if (operateInfo.type === 'add') {
        row.nodeCode = uuidv4();
        row.level = operateInfo.level;
        switch (operateInfo.level) {
          case '0':
            row.evaluationType = dialogForm.evaluationType;
            row.statusDisabled = false;
            treeData.value.unshift(row);
            row.sort = treeData.value.length;
            break;
          case '1':
            row.evaluationType = dialogForm.evaluationType;
            row.controlItem = dialogForm.controlItem;
            row.parentNodeCode = curRow.value.nodeCode;
            row.statusDisabled = curRow.value.status === '0';
            if (!treeDataCurRow.children) treeDataCurRow.children = [];
            row.sort = treeDataCurRow.children.length + 1;
            treeDataCurRow.children.unshift(row);
            break;
          case '2':
            row.evaluationType = dialogForm.evaluationType;
            row.controlItem = dialogForm.controlItem;
            row.evaluationCriterion = dialogForm.evaluationCriterion;
            row.parentNodeCode = curRow.value.nodeCode;
            row.statusDisabled = curRow.value.status === '0';
            if (!treeDataCurRow.children) treeDataCurRow.children = [];
            row.sort = treeDataCurRow.children.length + 1;
            treeDataCurRow.children.unshift(row);
            break;
          default:
            break;
        }
        nextTick(() => {
          proxy.$refs.tableRef.toggleRowExpansion(treeDataCurRow, true);
        });
      } else if (operateInfo.type === 'edit') {
        switch (operateInfo.level) {
          case '0':
            treeDataCurRow.evaluationType = dialogForm.evaluationType;
            if (treeDataCurRow?.children?.length) {
              for (const item of treeDataCurRow.children) {
                item.evaluationType = treeDataCurRow.evaluationType;
                if (item?.children?.length) {
                  for (const it of item.children) {
                    it.evaluationType = treeDataCurRow.evaluationType;
                  }
                }
              }
            }
            break;
          case '1':
            treeDataCurRow.controlItem = dialogForm.controlItem;
            if (treeDataCurRow?.children?.length) {
              for (const item of treeDataCurRow.children) {
                item.controlItem = treeDataCurRow.controlItem;
              }
            }
            break;
          case '2':
            treeDataCurRow.evaluationCriterion = dialogForm.evaluationCriterion;
            break;
          default:
            break;
        }
      }
      close();
    }
  });
};

const getTableData = async () => {
  tableLoading.value = true;
  const res = await getAssessTargetConfigControllerItem(controlId);
  tableLoading.value = false;
  if (res?.code !== 200) return;
  treeData.value = res?.data || [];
  setFields(treeData.value, '0');
  setSort(treeData.value);
  setStatusDisabled(treeData.value);
  nextTick(() => {
    expand();
  });
  console.log(treeData.value);
};

const setFields = (data, level) => {
  for (const item of data) {
    item.level = level;
    switch (level) {
      case '0':
        item.sort = item.evaluationTypeRank;
        break;
      case '1':
        item.sort = item.controlItemRank;
        break;
      case '2':
        item.sort = item.evaluationCriterionRank;
        break;
      default:
        break;
    }
    if (item.children) {
      setFields(item.children, level * 1 + 1 + '');
    }
  }
};

const setSort = data => {
  data.sort((a, b) => {
    return b.sort - a.sort;
  });
  for (const item of data) {
    if (item.children) {
      setSort(item.children);
    }
  }
};

const save = async () => {
  loading.value = true;
  let params = JSON.parse(JSON.stringify(treeData.value));
  const flag = checkData(params);
  if (flag) return proxy.$modal.msgError('表格数据至少要填写到评价标准');
  setParams(params);
  console.log(params);
  const res = await assessTargetConfigControllerItemBatchUpdate(params);
  loading.value = false;
  if (res?.code !== 200) return;
  proxy.$modal.msgSuccess('操作成功！');
};

const setParams = data => {
  for (const item of data) {
    if (item.level === '0') {
      item.evaluationTypeRank = item.sort;
    } else if (item.level === '1') {
      item.controlItemRank = item.sort;
    } else if (item.level === '2') {
      item.evaluationCriterionRank = item.sort;
    }
    if (item.children) {
      setParams(item.children);
    }
  }
};

const enable = () => {
  proxy.$modal
    .confirm(`是否确认${statusText.value}?`)
    .then(async () => {
      let method = status === '1' ? assessTargetConfigClose : assessTargetConfigOpen;
      const formData = new FormData();
      formData.append('id', controlId);
      formData.append('engineeringType', engineeringType);
      formData.append('assessType', 'control');
      const res = await method(formData);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess('操作成功！');
      if (status === '1') {
        status = '0';
        statusText.value = '启用';
      } else {
        status = '1';
        statusText.value = '停用';
      }
    })
    .catch(() => {});
};

const uploadSuccess = data => {
  console.log(data);
  if (data) getTableData();
};

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.control {
  padding: 10px;
  height: 92vh;
  overflow-y: hidden;
  .header {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid #e4e7ed;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
    }
    :deep(.el-page-header__header) {
      .el-page-header__left {
        .el-page-header__back {
          .el-page-header__icon {
            font-size: 20px;
            font-weight: 700;
          }
          .el-page-header__title {
            font-size: 16px;
          }
        }
      }
    }
  }
  .body {
    height: calc(100% - 74px);
    overflow: auto;
    overflow-x: hidden;
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    padding: 20px;
    :deep(.el-table) {
      .light {
        background-color: rgb(252, 247, 0);
      }
    }
  }
}
</style>