<template>
  <div id="exportReceipt">
    <!-- 搜索区域 -->
    <el-row :gutter="10" class="toolbar">
      <el-col :span="7">
        <el-input v-model="queryInfo.receiptGuid" prefix-icon="el-icon-search" size="small"
                  placeholder="系统唯一编号" clearable>
          <template slot="prepend">系统唯一编号</template>
        </el-input>
      </el-col>
      <!-- 其他搜索字段类似添加 -->
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchExportReceipts">
          查询
        </el-button>
        <el-button type="success" icon="el-icon-plus" size="small" @click="openDialog('add')">新增</el-button>
        <el-button type="warning" icon="el-icon-message" size="small" @click="declare()">申报</el-button>
      </el-col>
      <el-col :span="6">
        <el-upload
            style="display: inline; margin-left: 10px;margin-right: 10px;"
            action=""
            :http-request="uploadFile"
            :limit=1
            :on-exceed="fileExceed"
            :file-list="fileList"
            accept="application/vnd.ms-excel,application/vnd.ms-excels,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            ref="fileupload">
          <el-button slot="trigger" style="width:150px"  icon="el-icon-folder-add" type="primary">导入excel</el-button>
        </el-upload>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table :data="exportReceiptsData" border
              style="border-radius: 10px 10px 0px 0px;line-height: 25px;width: 100%"
              :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
              @selection-change="selsChange"
    >
      <el-table-column type="selection" width="55" :selectable="isSelectable"></el-table-column>
      <el-table-column prop="receiptGuid" label="系统唯一编号"></el-table-column>
      <el-table-column prop="appType" label="报送类型" :formatter="formatAppType"></el-table-column>
      <el-table-column prop="appTime" label="报送时间" :formatter="formatDate"></el-table-column>
      <el-table-column prop="appStatus" label="申报状态" :formatter="formatAppStatus"></el-table-column>
      <el-table-column prop="ebpName" label="电商平台登记名称"></el-table-column>
      <el-table-column prop="ebpCode" label="电商平台代码"></el-table-column>
      <el-table-column prop="ebcCode" label="电商企业代码"></el-table-column>
      <el-table-column prop="ebcName" label="电商企业名称"></el-table-column>
      <el-table-column prop="orderNo" label="电商订单编号"></el-table-column>
      <el-table-column prop="payCode" label="支付企业代码"></el-table-column>
      <el-table-column prop="payName" label="支付企业名称"></el-table-column>
      <el-table-column prop="payNo" label="支付交易编号"></el-table-column>
      <el-table-column prop="charge" label="订单交易金额"></el-table-column>
      <el-table-column prop="currency" label="币制"></el-table-column>
      <el-table-column prop="accountingDate" label="到账时间" :formatter="formatDate"></el-table-column>

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-row type="flex"  justify="left">
<!--            <el-col :span="6"><el-button type="info"  @click="openDialog('view', scope.row)">查看</el-button></el-col>-->
            <el-col :span="6"><el-button type="primary" icon="el-icon-edit" @click="openDialog('edit', scope.row)"></el-button></el-col>
            <el-col :span="6">
              <el-popconfirm title="确定删除吗？" @confirm="deleteExportReceipt(scope.row.receiptGuid)">
              <el-button slot="reference" type="danger" icon="el-icon-delete"></el-button>
            </el-popconfirm>
            </el-col>
          </el-row>
          <el-row type="flex"  justify="left">
            <el-col :span="6"><el-button type="info" icon="el-icon-search" @click="openSendLogView(scope.row)">回执</el-button></el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination layout="prev, pager, next" :total="totalRecords" @current-change="handleCurrentChange"
                   background style="margin-top: 10px">
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
      <el-form ref="exportReceiptForm" :model="exportReceiptForm" :rules="formRules"
               label-width="120px">
        <!-- 表单字段 -->
        <el-form-item label="系统唯一编号" prop="receiptGuid">
          <el-input v-model="exportReceiptForm.receiptGuid"></el-input>
        </el-form-item>
        <!-- 其他表单字段类似添加 -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(dialogType)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="回执明细" :visible.sync="sendLogDialogShow" width="80%">
      <send-log :bill-guid="billGuid"> </send-log>
    </el-dialog>
  </div>
</template>

<script>
import { addExportReceipt, updateExportReceipt, deleteExportReceipt, getExportReceipt,
  selectAllByPage,uploadExportReceipt, batchDeclare} from '@/api/cbecd';
import sendLog from "./send_log.vue"
export default {
  computed: {
  },
  components: { sendLog },
  data() {
    return {
      fileList: [],
      sendList:[],
      queryInfo: {},
      exportReceiptsData: [],
      totalRecords: 0,
      pageNum: 1,
      pageSize: 10,
      showDialog: false,
      sendLogDialogShow: false,
      dialogType: '',
      billGuid:'',
      dialogStateMap: {
        view: '查看',
        edit: '编辑',
        add: '新增'
      },
      exportReceiptForm: {},
      formRules: {
        receiptGuid: [{ required: true, message: '请输入系统唯一编号', trigger: 'blur' }],
        // 其他字段规则类似添加
      }
    };
  },
  methods: {
    formatAppType: function (row, column,cellValue, index) {
      const map={
        "1": "新增",
        "2": "变更",
        "3": "删除"
      }
       return map[cellValue];
    },
    formatAppStatus: function (row, column,cellValue, index) {
      const map = {
        "1": { text: "暂存", type: "" },
        "2": { text: "申报", type: "info" },
        "3": { 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);
    },
    formatDate: function (row, column,cellValue, index) {
      // 获取单元格数据
      if(cellValue) {
        let dt = new Date(cellValue)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
      }else {
        return '';
      }

    },
    searchExportReceipts() {
      selectAllByPage(this.queryInfo, this.pageNum, this.pageSize).then(response => {
        const data = response.data;
        if (data.code === '200') {
          this.exportReceiptsData = data.data.list; // 假设返回数据包含list字段
          this.totalRecords = data.data.total; // 假设返回数据包含total字段
        }
      });
    },
    openDialog(type, row) {
      if (type === 'view' || type === 'edit') {
        getExportReceipt(row.receiptGuid).then(response => {
          const data = response.data;
          if (data.code === '200') {
            this.exportReceiptForm = data.data; // 假设返回数据包含data字段
          }
        });
      } else {
        this.exportReceiptForm = {}; // 清空表单，用于新增操作
      }
      this.dialogType = type;
      this.showDialog = true;
    },
    openSendLogView(row) {
      this.sendLogDialogShow = true;
      this.billGuid = row.receiptGuid;
    },
    submitForm(type) {
      if (type === 'add') {
        addExportReceipt(this.exportReceiptForm).then(response => {
          const data = response.data;
          if (data.code === '200') {
            this.$message.success('新增成功');
            this.showDialog = false;
            this.searchExportReceipts(); // 刷新列表
          }
        });
      } else if (type === 'edit') {
        updateExportReceipt(this.exportReceiptForm).then(response => {
          const data = response.data;
          if (data.code === '200') {
            this.$message.success('编辑成功');
            this.showDialog = false;
            this.searchExportReceipts(); // 刷新列表
          }
        });
      } else if (type === 'view') {
        this.showDialog = false; // 查看模式下，直接关闭对话框
      }
    },
    deleteExportReceipt(guid) {
      deleteExportReceipt(guid).then(response => {
        const data = response.data;
        if (data.code === '200') {
          this.$message.success('删除成功');
          this.searchExportReceipts(); // 刷新列表
        }
      });
    },// 自定义上传
    uploadFile (item) {
      const form = new FormData()
      form.append('file', item.file)
      uploadExportReceipt(form).then(res =>{
        if(res.data.code =='200'){
          this.$message.success(res.data.msg);
          this.searchExportReceipts();
          this.fileList = [];
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch(e =>{
        this.$message.error(e.toString())
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchExportReceipts();
    },
    // 导入excel
    fileExceed(){
      this.$message.error('别贪心！一次只能上传一个哦~');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    selsChange(selection){
      this.sendList = selection;
      // 如果用户尝试选择了不允许的选择项，则移除这些选择
      this.sendList = selection.filter(row => this.isSelectable(row));
    },
    isSelectable(row) {
      // 只有当appStatus是"1"或"2"的时候才可选
      return ['1'].includes(row.appStatus);
    },
    declare(){
      batchDeclare(this.sendList).then(response => {
        const data = response.data;
        if (data.code === '200') {
          this.$message.success('申报成功');
          this.searchExportReceipts(); // 刷新列表
        }
      }).catch(e =>{
        this.$message.error(e.toString());
      });
    }
  }
};
</script>