<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryRef" inline label-width="70px">
        <el-form-item label="客户名称" prop="customerName" class="custom-form-item">
          <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="拜访人" prop="visitor" class="custom-form-item">
          <el-input v-model="queryParams.visitor" placeholder="请输入拜访人" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="拜访日期" prop="callDate" class="custom-form-item">
          <el-date-picker v-model="queryParams.callDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" style="width: 240px" />
        </el-form-item>
        <div class="search-btns-area">
          <el-button icon="Search" @click="handleQuery" class="btn-search">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery" class="btn-reset">重置</el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 列表标题 -->
    <div class="title-container">
      <span class="list-title">跟进记录信息列表</span>
    </div>

    <!-- 表格区域 -->
    <el-card shadow="never" class="table-card">
      <el-table ref="tableRef" v-loading="loading" :data="dataList" border class="custom-table" :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold', fontSize: '13px' }">
        <el-table-column label="记录编号" align="center" prop="recordsNo" width="140">
          <template #default="scope">
            <span class="link-text" @click="handleDetail(scope.row)">{{ scope.row.recordsNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" prop="customerName" min-width="250" show-overflow-tooltip />
        <el-table-column label="部门" align="center" prop="department" width="120" />
        <el-table-column label="行业" align="center" prop="profession" width="100" />
        <el-table-column label="业务员" align="center" prop="salesman" width="120" />
        <el-table-column label="对象类型" align="center" prop="dataType" width="100">
           <template #default="scope">
             <span>{{ scope.row.dataType === 1 ? '项目' : '通用' }}</span>
           </template>
        </el-table-column>
        <el-table-column label="拜访对象" align="center" prop="goalObject" width="160" show-overflow-tooltip />
        <el-table-column label="拜访人" align="center" prop="visitor" width="100" />
        <el-table-column label="随访人" align="center" prop="followPeopleName" width="100" />
        <el-table-column label="拜访日期" align="center" prop="callDate" width="120">
          <template #default="scope">
            <span>{{ parseTime(scope.row.callDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template #header>
             <div class="op-header">操作 <el-icon><Setting /></el-icon></div>
          </template>
          <template #default="scope">
            <el-button link type="primary" @click="handleDetail(scope.row)" class="table-btn-link">详情</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)" class="table-btn-link">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>


    <!-- 详情抽屉 -->
    <el-drawer v-model="detailOpen" size="80%" destroy-on-close :with-header="false" class="custom-drawer">
      <div class="drawer-container">
        <!-- 顶部标题栏 -->
        <div class="drawer-header">
           <span class="header-title">{{ detailData.customerName }}</span>
           <el-icon class="close-icon" @click="detailOpen = false"><Close /></el-icon>
        </div>

        <div class="detail-wrap">
          <!-- 左侧：跟进资料与附件 -->
          <div class="left-panel">
            <el-tabs v-model="leftTab" class="red-tabs" tab-position="top">
              <el-tab-pane label="跟进资料" name="followup">
                <div class="pane-content">
                  <!-- 基本信息 -->
                  <div class="section-container">
                    <div class="section-header">基本信息</div>
                    <el-row :gutter="20" class="info-grid">
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">记录编号</span>
                          <span class="value">{{ detailData.recordsNo }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">客户编号</span>
                          <span class="value">{{ detailData.customerNo || '' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">客户名称</span>
                          <span class="value">{{ detailData.customerName }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">部门</span>
                          <span class="value">{{ detailData.department || '' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">行业</span>
                          <span class="value">{{ detailData.profession || '' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">负责人</span>
                          <span class="value">{{ detailData.salesman || '' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">对象类型</span>
                          <span class="value">{{ detailData.dataType === 1 ? '项目' : '通用' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">拜访对象</span>
                          <span class="value">{{ detailData.goalObject }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">拜访人</span>
                          <span class="value">{{ detailData.visitor }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">随访人</span>
                          <span class="value">{{ detailData.followPeopleName }}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>

                  <!-- 拜访信息 -->
                  <div class="section-container">
                    <div class="section-header">拜访信息</div>
                    <el-row :gutter="20" class="info-grid">
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">拜访时间</span>
                          <span class="value">{{ parseTime(detailData.callDate, '{y}-{m}-{d}') }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">下次拜访时间</span>
                          <span class="value">{{ parseTime(detailData.nextCallDate, '{y}-{m}-{d}') }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">拜访方式</span>
                          <span class="value">
                             {{ callTypeOptions.find(d => String(d.dictValue) === String(detailData.callTypeCode))?.dictLabel || '上门拜访' }}
                          </span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="info-item">
                          <span class="label">拜访目的</span>
                          <span class="value">{{ detailData.callAim }}</span>
                        </div>
                      </el-col>
                      <el-col :span="24">
                        <div class="info-item">
                          <span class="label">拜访情况</span>
                          <span class="value">{{ detailData.followUpCondition }}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>

                  <!-- 记录图片 -->
                  <div class="section-container">
                    <div class="section-header">记录图片</div>
                    <div class="image-list">
                       <el-image v-if="detailData.recordPicture" style="width: 100px; height: 100px; border-radius: 4px" :src="detailData.recordPicture" :preview-src-list="[detailData.recordPicture]" />
                       <span v-else class="empty-text">暂无图片</span>
                    </div>
                  </div>

                  <!-- 签到信息 -->
                  <div class="section-container">
                    <div class="section-header">签到信息</div>
                    <el-row :gutter="20" class="info-grid">
                      <el-col :span="12"><div class="info-item"><span class="label">签到时间</span><span class="value">{{ detailData.signInTime ? parseTime(detailData.signInTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签退时间</span><span class="value">{{ detailData.signOutTime ? parseTime(detailData.signOutTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签到地址</span><span class="value">{{ detailData.signInAddress || detailData.address || '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签到精度</span><span class="value">{{ detailData.signInAccuracy || '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签到经度</span><span class="value">{{ detailData.signInLongitude || detailData.longitude || '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签退精度</span><span class="value">{{ detailData.signOutAccuracy || '' }}</span></div></el-col>
                      <el-col :span="12"><div class="info-item"><span class="label">签退经度</span><span class="value">{{ detailData.signOutLongitude || '' }}</span></div></el-col>
                    </el-row>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="附件" name="attachment">
                <div class="pane-content">
                  <div class="file-upload-row">
                    <el-upload
                      multiple
                      :action="uploadFileUrl"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleUploadSuccess"
                    >
                      <el-button type="primary" icon="Upload" size="small">上传附件</el-button>
                    </el-upload>
                  </div>
                  <el-table :data="fileList" border class="file-table" empty-text="暂无附件">
                    <el-table-column label="文件名称" align="left" prop="fileName" min-width="200" show-overflow-tooltip />
                    <el-table-column label="文件类型" align="center" prop="fileType" width="100" />
                    <el-table-column label="文件大小" align="center" prop="fileSize" width="100">
                      <template #default="scope">
                        {{ scope.row.fileSize ? (scope.row.fileSize / 1024).toFixed(1) + 'KB' : '' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" prop="uploadTime" width="160" />
                    <el-table-column label="上传人" align="center" prop="uploader" width="100" show-overflow-tooltip />
                    <el-table-column label="操作" align="center" width="140">
                      <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleDownloadFile(scope.row)">下载</el-button>
                        <el-button link type="danger" size="small" @click="handleDeleteFile(scope.$index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <!-- 右侧：评论与管理信息 -->
          <div class="right-panel">
            <el-tabs v-model="rightTab" class="red-tabs">
              <el-tab-pane label="评论" name="comment">
                <div class="pane-content-custom">
                  <div class="comment-input-section">
                    <el-input v-model="commentText" type="textarea" :rows="4" placeholder="请输入内容" class="comment-textarea" />
                    <div class="comment-btn-row">
                      <el-button type="primary" class="btn-comment-blue" @click="submitComment">
                        <el-icon class="mr5"><ChatLineRound /></el-icon> 评论
                      </el-button>
                    </div>
                  </div>
                  <div v-if="commentList.length" class="comment-list">
                    <div v-for="item in commentList" :key="item.id" class="comment-item">
                      <el-avatar v-if="item.avatar" :size="36" :src="item.avatar" class="comment-avatar" />
                      <div class="comment-body">
                        <div class="comment-header">
                          <span class="comment-user">{{ item.userName }}</span>
                          <span class="comment-time">{{ item.time }}</span>
                        </div>
                        <div class="comment-content">{{ item.content }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="comment-list-empty">暂无评论记录</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="管理信息" name="manage">
                <div class="pane-content-custom">
                  <el-row :gutter="20" class="manage-grid">
                    <el-col :span="12">
                      <div class="m-info-item">
                        <span class="m-label">创建日期</span>
                        <span class="m-value">{{ detailData.createTime || detailData.createDate ? parseTime(detailData.createTime || detailData.createDate, '{y}-{m}-{d}') : '' }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="m-info-item">
                        <span class="m-label">创建人</span>
                        <span class="m-value">{{ detailData.createByName || detailData.createUserName || detailData.nickName || detailData.visitor || detailData.salesman || detailData.createBy || '' }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="m-info-item">
                        <span class="m-label">修改日期</span>
                        <span class="m-value">{{ detailData.updateTime || detailData.updateDate ? parseTime(detailData.updateTime || detailData.updateDate, '{y}-{m}-{d}') : '' }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="m-info-item">
                        <span class="m-label">最后修改人</span>
                        <span class="m-value">{{ detailData.updateByName || detailData.updateUserName || detailData.followPeopleName || detailData.updateBy || '' }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script setup name="VisitRecord">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { Setting, Close, ChatLineRound, Upload } from '@element-plus/icons-vue';
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/visit/record";
import { listCustomerInfo, getCustomerInfo } from "@/api/customer/customerInfo/";
import { listCommonDict } from "@/api/customer/customerDict";
import { globalHeaders } from "@/utils/request";
import { useUserStore } from "@/store/modules/user";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();

const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const detailOpen = ref(false);
const callTypeOptions = ref([]);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  recordsNo: undefined,
  customerName: undefined,
  visitor: undefined,
  callDate: undefined
});

const detailData = ref({});
const leftTab = ref('followup');
const rightTab = ref('comment');
const commentText = ref('');
const commentList = ref([]);
const fileList = ref([]);
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload');
const headers = ref(globalHeaders());

const getList = () => {
  loading.value = true;
  listRecord(queryParams).then(response => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};


const handleDetail = (row) => {
  getRecord(row.id).then(response => {
    detailData.value = { ...row, ...(response.data || {}) };
    fileList.value = response.data?.fileList || row.fileList || [];
    commentList.value = response.data?.commentList || row.commentList || [];
    detailOpen.value = true;
  });
};

const handleEditFromDetail = () => {
  // 暂时保留，但目前不提供编辑入口
};

const submitComment = () => {
  if (!commentText.value.trim()) {
    proxy.$modal.msgError("请输入评论内容");
    return;
  }
  const now = new Date();
  commentList.value.unshift({
    id: Date.now(),
    content: commentText.value.trim(),
    userName: userStore.nickname || userStore.name || '当前用户',
    avatar: userStore.avatar || '',
    time: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
  });
  commentText.value = '';
  proxy.$modal.msgSuccess("评论成功");
};

const handleUploadSuccess = (res, file) => {
  if (res.code === 200) {
    const item = res.data;
    const name = item.originalName || item.fileName || file.name;
    const getExt = (n) => {
      const parts = n.split('.');
      return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : '文件';
    };
    fileList.value.push({
      ossId: item.ossId,
      fileName: name,
      fileType: getExt(name),
      fileUrl: item.url,
      url: item.url,
      uploadTime: new Date().toISOString().split('T')[0],
      uploader: '当前用户'
    });
    proxy.$modal.msgSuccess("上传成功");
  } else {
    proxy.$modal.msgError(res.msg || '上传失败');
  }
};

const handleDeleteFile = (index) => {
  fileList.value.splice(index, 1);
};

const handleDownloadFile = (row) => {
  if (!row.fileUrl && !row.url) return;
  window.open(row.fileUrl || row.url, '_blank');
};

const handleDelete = (row) => {
  proxy.$modal.confirm(`确认删除数据?`).then(() => {
    return delRecord(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};




onMounted(() => { 
  getList(); 
  listCommonDict("visit_type").then(res => {
    callTypeOptions.value = res.data || [];
  });
});
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px 20px;
  background-color: #fcfcfc;
  min-height: calc(100vh - 84px);
}

/* 搜索栏样式重构 - 严格对照原型图 */
.search-card {
  border: none;
  background-color: #fff;
  :deep(.el-card__body) {
    padding: 10px 0;
  }
  border-bottom: 1px solid #efefef;
  margin-bottom: 0;
}

.custom-form-item {
  margin-bottom: 10px !important;
  margin-right: 20px;
  :deep(.el-form-item__label) {
    font-size: 13px;
    color: #333;
    font-weight: 500;
  }
  :deep(.el-input__wrapper) {
    background-color: #f7f8fa;
    box-shadow: none !important;
    border-radius: 4px;
    height: 36px;
  }
}

.search-btns-area {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 10px;
  .btn-search {
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #333;
    &:hover { background: #f5f7fa; }
  }
  .btn-reset {
    background: #fff;
    color: #333;
  }
}

/* 标题样式 */
.title-container {
  padding: 15px 0;
  .list-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
}

/* 表格样式重构 */
.table-card {
  border: none;
  :deep(.el-card__body) { padding: 0; }
}

.custom-table {
  border-radius: 4px;
  overflow: hidden;
  :deep(.el-table__header-wrapper) {
     th { background-color: #f1f3f7 !important; border-bottom: none; }
  }
  :deep(.el-table__row) {
     td { padding: 8px 0; font-size: 13px; color: #333; }
  }
}

/* 橙色记录编号链接 */
.link-text {
  color: #ff8c42;
  font-weight: 500;
  cursor: pointer;
  &:hover { text-decoration: underline; }
}

.table-btn-link {
    font-size: 13px;
    color: #409eff;
    &.el-button--danger { color: #f56c6c; }
}

.op-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 分页容器靠右 */
.pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}

/* 详情抽屉样式重构 */
.custom-drawer {
    :deep(.el-drawer__body) { padding: 0; background: #fff; overflow: hidden; }
}

.drawer-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.drawer-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
    .header-title { font-size: 16px; font-weight: bold; color: #333; }
    .close-icon { font-size: 20px; cursor: pointer; color: #909399; &:hover { color: #333; } }
}

.detail-wrap {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.left-panel {
    flex: 7;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f0f0f0;
}

.right-panel {
    flex: 3;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* 红色 Tab 覆盖样式 - 彻底简化，确保置顶 */
.red-tabs {
    flex: 1;
    :deep(.el-tabs__header) {
        margin: 0;
        padding: 0 10px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }
    :deep(.el-tabs__nav-wrap::after) { height: 0; }
    :deep(.el-tabs__active-bar) { background-color: #e60012; height: 3px; }
    :deep(.el-tabs__item) {
        font-size: 14px;
        color: #333;
        height: 50px;
        line-height: 50px;
        &.is-active { color: #e60012; font-weight: bold; }
        &:hover { color: #e60012; }
    }
    :deep(.el-tabs__content) { 
        padding: 0;
        overflow-y: auto;
    }
}

.pane-content-custom {
    padding: 20px;
}

.pane-content {
    padding: 20px;
}

.file-upload-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.file-table {
    width: 100%;
    :deep(th.el-table__cell) {
        background-color: #f8fafc !important;
        font-size: 13px;
        font-weight: 500;
        color: #475569;
    }
    :deep(td.el-table__cell) {
        font-size: 13px;
    }
}

/* 右侧评论区专有样式 - 放在 Tab 内部 */
.comment-input-section {
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
    .comment-textarea {
        :deep(.el-textarea__inner) {
            border: 1px solid #e1e1e1;
            box-shadow: none;
            resize: none;
            padding: 10px;
            font-size: 13px;
            &:focus { border-color: #dcdfe6; }
        }
    }
}

.comment-btn-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .btn-comment-blue {
        background-color: #409eff;
        border-color: #409eff;
        font-size: 13px;
        padding: 7px 18px;
        display: flex;
        align-items: center;
        .mr5 { margin-right: 5px; }
    }
}

.comment-list-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding-top: 20px;
}

.comment-list {
    .comment-item {
        display: flex;
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
        &:last-child { border-bottom: none; }
    }
    .comment-avatar {
        flex-shrink: 0;
        margin-right: 12px;
        background-color: #409eff;
        font-size: 13px;
    }
    .comment-body {
        flex: 1;
        min-width: 0;
    }
    .comment-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
    }
    .comment-user {
        font-size: 13px;
        font-weight: 500;
        color: #333;
    }
    .comment-time {
        font-size: 12px;
        color: #999;
    }
    .comment-content {
        font-size: 13px;
        color: #555;
        line-height: 1.6;
        word-break: break-all;
    }
}

.section-container {
    margin-bottom: 30px;
}

.section-header {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.info-grid {
    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 1.5;
        .label { color: #909399; width: 90px; flex-shrink: 0; }
        .value { color: #333; word-break: break-all; }
    }
}

.image-list {
    padding: 10px 0;
    .empty-text { color: #c0c4cc; font-size: 13px; }
}

/* 评论区样式 */
.comment-area {
    .comment-input {
        :deep(.el-textarea__inner) {
            background: #fcfcfc;
            border-radius: 4px;
            padding: 10px;
            resize: none;
            &:focus { border-color: #dcdfe6; }
        }
    }
    .comment-btn-row {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        .btn-comment {
            background-color: #409eff;
            border: none;
            padding: 8px 20px;
            height: 32px;
            font-size: 13px;
        }
    }
}

.manage-grid {
    .m-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 14px;
        .m-label {
            color: #909399;
            width: 80px;
            flex-shrink: 0;
        }
        .m-value {
            color: #303133;
            flex: 1;
        }
    }
}
</style>
