<template>
  <common-modal
    :width="750"
    :maskClosable="false"
    :visible="visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="常用意见管理"
    wrapClassName="project-modal"
    :body-style="{ paddingBottom: '8px', minHeight: '30vh' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="table-tool">
      <div class="table-tool-left">
        <a-space :size="16">
          <span class="total-num">共 {{ total }} 条</span>
        </a-space>
      </div>
      <div class="table-tool-right">
        <a @click="addClick">新增</a>
      </div>
    </div>
    <s-table
      :columns="columns"
      rowKey="id"
      size="middle"
      bordered
      ref="tableRef"
      @rowDragEnd="rowDragEnd"
      :rangeSelection="false"
      :pagination="false"
      :data-source="dataSource"
      :animate-rows="false"
    >
      <template #bodyCell="{ column, text, record, index }">
        <template v-if="column.dataIndex == 'commentContent'">
          <div class="editable-cell">
            <div v-if="editableData[record.id + column.dataIndex]" class="editable-cell-input-wrapper">
              <a-input
                v-model:value="copyData.commentContent"
                placeholder="请输入"
                ref="durationRef"
                :bordered="false"
                @blur="noLoadData(record, column.dataIndex)"
                @pressEnter="noLoadData(record, column.dataIndex)"
              ></a-input>
            </div>
            <div v-else class="editable-cell-text-wrapper">
              <span v-if="text">{{ text }}</span>
              <span v-if="!text" class="placeholder-title">请输入</span>
            </div>
          </div>
        </template>
        <template v-if="column.dataIndex == 'action'">
          <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="remove(index)"></icon-font>
        </template>
      </template>
    </s-table>
    <template #footer>
      <a-button class="border-radius grey" :loading="loading" @click="updateVisible(false)" type="link">取消</a-button>
      <a-button class="border-radius" :loading="loading" type="primary" @click="save">确定</a-button>
    </template>
  </common-modal>
</template>

<script setup name="FastRemarkManage">
import { message } from 'ant-design-vue';
import { generateRandomId } from '@/utils/common/util';
import { ref, onMounted, nextTick, computed } from 'vue';
import { FlowRemarkApi } from '../../api/FlowRemarkApi';

const props = defineProps({
  visible: Boolean,
  list: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(['update:visible', 'done']);

// 弹框加载状态
const loading = ref(false);

const total = computed(() => {
  return dataSource.value?.length || 0;
});

const dataSource = ref([]);

const columns = ref([
  {
    title: '排序',
    dataIndex: '#',
    key: '#',
    rowDrag: true,
    align: 'center',
    width: '50px'
  },
  {
    title: '常用意见',
    dataIndex: 'commentContent',
    customCell: ({ record }) => {
      return {
        class: editableData.value[record.id + 'commentContent'] ? '' : 'cell-not-ima-hover',
        onClick: () => editClick(record, 'commentContent')
      };
    }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);

const editableData = ref({});
// 复制的内容
const copyData = ref({});

const durationRef = ref(null);

onMounted(() => {
  dataSource.value = props.list;
});

const addClick = () => {
  let obj = {
    commentContent: '',
    id: generateRandomId(16)
  };
  dataSource.value.push(obj);
  dataSource.value = [...dataSource.value];
};

const rowDragEnd = () => {};

const noLoadData = (record, dataIndex) => {
  delete editableData.value[record.id + dataIndex];
};

const editClick = (record, dataIndex) => {
  editableData.value = {};
  copyData.value = {};
  editableData.value[record.id + dataIndex] = true;
  copyData.value = record;
  nextTick(() => {
    durationRef.value && durationRef.value.focus();
  });
};

const remove = index => {
  dataSource.value.splice(index, 1);
  dataSource.value = [...dataSource.value];
};

// 切换弹框显示隐藏状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  if (dataSource.value.find(item => item.commentContent == '')) {
    message.warning('意见不能为空');
    return;
  }

  let flowUserCommentList = dataSource.value.map((item, index) => {
    return { ...item, fldSort: index + 1 };
  });
  FlowRemarkApi.updateTotal({ flowUserCommentList: flowUserCommentList }).then(res => {
    if (res.code == '00000') {
      message.success(res.message);
      emits('update:visible', false);
      emits('done', flowUserCommentList);
    }
  });
};
</script>

<style scoped lang="less">
:deep(.surely-table) {
  border-radius: 0px !important;
}

:deep(.surely-table-header) {
  border-radius: 0px !important;
}
.table-tool {
  height: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(197, 207, 209, 0.4);
  border-bottom: 0px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

  .table-tool-left,
  .table-tool-right {
    display: flex;
    flex: 1;
    align-items: center;
  }
  .table-tool-right {
    justify-content: end;
  }

  .total-num {
    font-size: 16px;
    color: #60666b;
  }
}
:deep(.ant-input-borderless) {
  padding: 4px 0px !important;
}
</style>
