<template>
  <div>
    <!-- 搜索区域 -->
    <el-row :gutter="10" class="toolbar">
      <el-col :span="7">
        <el-input v-model="queryInfo.cebType" placeholder="申报业务类型" clearable></el-input>
      </el-col>
      <el-col :span="7">
        <el-select v-model="queryInfo.decStatus" placeholder="申报状态">
          <el-option label="暂存" value="1"></el-option>
          <el-option label="申报" value="2"></el-option>
          <el-option label="已回执" value="3"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="searchLogInfo">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="applyAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 表格展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="uuid" label="主键"></el-table-column>
      <el-table-column prop="cebType" label="申报业务类型"></el-table-column>
      <el-table-column prop="decType" label="申报类型" :formatter="formatDecType"></el-table-column>
      <el-table-column prop="decDate" label="申报时间" :formatter="formatDate"></el-table-column>
      <el-table-column prop="decStatus" label="申报状态" :formatter="formatAppStatus"></el-table-column>
      <el-table-column prop="billGuid" label="单证GUID/编号"></el-table-column>
      <el-table-column prop="decUser" label="申报人"></el-table-column>
<!--      <el-table-column prop="decPiece" label="申报件数"></el-table-column>-->
<!--      <el-table-column prop="decWeight" label="申报重量"></el-table-column>-->
      <el-table-column prop="headGuid" label="报头ID/批次ID"></el-table-column>
      <el-table-column prop="decNum" label="申报序号"></el-table-column>
      <el-table-column prop="recDate" label="回执时间" :formatter="formatDate"></el-table-column>
      <el-table-column prop="recStatus" label="回执状态"></el-table-column>
      <el-table-column prop="recDescription" label="回执说明"></el-table-column>
<!--      <el-table-column fixed="right" label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" @click="applyView(scope.row)">查看</el-button>-->
<!--          <el-button type="text" @click="applyEdit(scope.row)">编辑</el-button>-->
<!--          <el-button type="text" @click="applyDel(scope.$index, scope.row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.pageNum"
        :total="total"
        @current-change="handleCurrentChange">
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
      <el-form ref="logFormRef" :model="logInfo" :rules="rules" label-width="120px">
        <!-- 录入表单字段 -->
        <el-form-item label="主键" prop="uuid">
          <el-input v-model="logInfo.uuid"></el-input>
        </el-form-item>
        <!-- ... 其他字段 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitForm(dialogType)">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import { addLogInfo, editLogInfo, deleteLogInfo, selectAllByPage } from '@/api/cbecd/send_log';

export default {
  name: 'Send-Log',
  props: {
    billGuid: {
      type: String,
      default: ''
    }
  },
  watch: {
    billGuid: {
      handler(newBillGuid) {
        if (newBillGuid) {
          this.queryInfo.sendLog.billGuid = newBillGuid;
          this.searchLogInfo();
        }
      },
      immediate: true // 立即执行一次监听器
    }
  },
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        sendLog:{
          billGuid:'uuid'
        }
      },

      tableData: [],
      total: 0,
      logInfo: {},
      dialogType: '',
      showDialog: false,
      dialogStateMap: {
        view: '查看',
        edit: '编辑',
        add: '新增'
      },
      rules: {
        // 录入表单字段校验规则
        uuid: [{ required: true, message: '请输入主键', trigger: 'blur' }],
        // ... 其他字段的校验规则
      }
    };
  },
  methods: {
    formatAppStatus: function (row, column,cellValue, index) {
      const map = {
        "1": { text: "暂存", type: "" },
        "2": { text: "申报", type: "info" },
        "3": { text: "申报中", type: "warning" }, // 默认样式
        "4": { text: "已回执", type: "success" }  // 默认样式
      };

      const tagInfo = map[cellValue] || { text: "未知状态", type: "" };

      // 使用 createElement 创建 VNode
      return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);

      // 使用 createElement 创建 VNode
      return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
    },
    formatDecType: function (row, column,cellValue, index) {
      cellValue = ''+ cellValue;
      console.log(row, column,cellValue, index);
      const map={
        "1": "新增",
        "2": "变更",
        "3": "删除"
      }
      return map[cellValue];
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hours = d.getHours().toString().padStart(2, '0');
      const minutes = d.getMinutes().toString().padStart(2, '0');
      const seconds = d.getSeconds().toString().padStart(2, '0');

      // 格式化为 YYYY-MM-DD HH:mm:ss
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    searchLogInfo() {
      selectAllByPage(this.queryInfo.sendLog,this.queryInfo).then(response => {
        this.tableData = response.data.data.list;
        this.total = response.pages;
      });
    },
    applyAdd() {
      this.dialogType = 'add';
      this.showDialog = true;
      // 清空表单
      this.logInfo = {};
    },
    applyEdit(row) {
      this.dialogType = 'edit';
      this.showDialog = true;
      this.logInfo = Object.assign({}, row);
    },
    applyView(row) {
      this.dialogType = 'view';
      this.showDialog = true;
      // 设置为只读模式
      this.$refs.logFormRef.setDisabled(true);
      this.logInfo = Object.assign({}, row);
    },
    applyDel(index, row) {
      deleteLogInfo(row.uuid).then(() => {
        this.tableData.splice(index, 1);
      });
    },
    submitForm(type) {
      if (type === 'add') addLogInfo(this.logInfo);
      else if (type === 'edit') editLogInfo(this.logInfo);
      // 关闭对话框
      this.showDialog = false;
      // 刷新数据列表
      this.searchLogInfo();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.searchLogInfo();
    }
  }
}
</script>

<style>
</style>