<template>
  <!-- 基础页面 -->
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent label-width="80px">
      <el-form-item label="分公司" prop="impUnitName">
        <el-select
          v-model="queryParams.impUnitName"
          placeholder="请选择分公司"
          clearable
          filterable
          style="width: 215px"
        >
          <el-option v-for="item in impUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择单位" prop="unitId">
        <TreeSelect
          v-model="queryParams.unitId"
          :options="unitList"
          :normalizer="normalizer"
          :show-count="true"
          style="width: 215px"
          :disable-branch-nodes="true"
          noChildrenText="没有数据了"
          noOptionsText="没有数据"
          noResultsText="没有搜索结果"
          placeholder="请选择单位"
          @select="unitChange"
        />
      </el-form-item>

      <el-form-item label="选择工程" prop="projectId">
        <TreeSelect
          v-model="queryParams.projectId"
          :options="proList"
          :normalizer="normalizer"
          :show-count="true"
          style="width: 215px"
          :disable-branch-nodes="true"
          noChildrenText="没有数据了"
          noOptionsText="没有数据"
          noResultsText="没有搜索结果"
          placeholder="请选择工程"
          @select="proChange"
        />
      </el-form-item>
      <el-form-item label="推送月份" prop="month">
        <el-date-picker
          v-model="queryParams.month"
          type="month"
          :clearable="false"
          placeholder="请选择月份"
          value-format="yyyy-MM"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="提交状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 215px">
          <el-option v-for="item in pushList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <!-- 表单按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini"  @click="submit">提 交</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      :data="tableList"
      fit
      highlight-current-row
      show-summary
      ref="multipleTable"
      row-key="id"
      :summary-method="getSummaries"
      style="width: 100%"
      :max-height="650"
      @selection-change="selectionChange"
    >
      <!-- 多选 -->
      <el-table-column type="selection" width="65" align="center" :selectable="row => row.pushStatus != 1" />
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="index => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="index"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <!-- 插槽 -->
        <template v-slot="{ row }" v-if="column.prop == 'leaseMoney'">
          <span style="color: #409eff; cursor: pointer" @click="openDialog(row)">{{ row.leaseMoney }}</span>
        </template>
        <template v-slot="{ row }" v-else-if="column.prop == 'pushStatus'">
          <span v-if="row.pushStatus == 0">未推送</span>
          <span v-else-if="row.pushStatus == 1">已推送</span>
          <span v-else-if="row.pushStatus == 2">已退回</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
    </el-table>

    <!-- 分页 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->

    <!-- 弹框 -->
    <el-dialog title="查看" :visible.sync="dialogVisible" width="70%">
      <el-form ref="dialogForm" :model="dialogForm" label-width="80px" size="small" inline @submit.native.prevent>
        <el-form-item label="" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入机具名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-input v-model="dialogForm.type" placeholder="请输入规格型号" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDiaList">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetDialog">重置</el-button>
          <el-button type="warning" icon="el-icon-download" @click="handleDiaExport">导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="dialogTableList"
        fit
        highlight-current-row
        show-summary
        :summary-method="getDiaSummaries"
        style="width: 100%"
      >
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column
          v-for="(column, index) in dialogColumns"
          show-overflow-tooltip
          :key="index"
          :label="column.label"
          :prop="column.prop"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectList, getUnitList, getAgreementInfoById } from '@/api/back/index.js'
import { getConsumPushCheckList, getConsumPushCheckListCount, submitPushSafetyConsumeCosts,getConsumeDetailsListApi } from '@/api/costPush/costPush'
import { getImpUnitListApi } from "@/api/materialsStation"
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import ExcelJS from 'exceljs';
export default {
  components: { TreeSelect },
  data() {
    return {
      showSearch: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 多选框选中数据
      ids: [],
      taskId:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        unitId: null,
        projectId: null,
        agreementId: '',
        agreementCode: '',
        month: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0'),
        isSend: null,
        impUnitName: null,
      },
      unitList: [], // 单位
      proList: [], // 工程
      impUnitOptions: [], // 分公司下拉选项
      pushList: [
        { label: '未推送', value: '0' },
        { label: '已推送', value: '1' },
        { label: '已退回', value: '2' },
      ], // 工程状态
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '协议编号', prop: 'agreementCode' },
        { label: '分公司', prop: 'impUnitName' },
        { label: '单位名称', prop: 'unitName' },
        { label: '工程名称', prop: 'projectName' },
        { label: '推送月份', prop: 'month' },
        { label: '消耗品费用', prop: 'leaseMoney' },
        { label: '推送状态', prop: 'pushStatus' },
        { label: '推送备注', prop: 'pushRemark' }
      ],
      // 表格数据
      tableList: [],
      // 合计
      totalCost: 0,
      selectionList: [], // 选中行
      // 弹窗数据
      dialogVisible: false,
      dialogForm: {
        name: '',
        type: ''
      },
      dialogTableList: [],
      dialogColumns: [
        { label: '机具名称', prop: 'typeName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '领料时间', prop: 'leaseDate' },
        { label: '消耗品数量', prop: 'num' },
        { label: '消耗品费用', prop: 'consMoney' }
      ]
    }
  },
  created() {
    this.getImpUnitOptions() //获取分公司下拉
    this.GetUnitData()
    this.GetProData()
    this.getList()
  },
  methods: {
    /** 获取分公司下拉 */
    async getImpUnitOptions() {
      try {
        const res = await getImpUnitListApi()
        this.impUnitOptions = res.data.map(item => ({
          label: item.impUnitName,
          value: item.impUnitName
        }))
        if (this.impUnitOptions.length === 1) {
          this.queryParams.impUnitName = this.impUnitOptions[0].value
          await this.onImpUnitChange(this.queryParams.impUnitName)
        }
      } catch (e) {
        console.error('获取分公司下拉失败:', e)
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.$refs.queryForm.resetFields()
      this.getList()
      this.GetUnitData()
      this.GetProData()
    },
    // 获取列表
    async getList() {
      console.log('列表-查询', this.queryParams)
      const loading = this.$loading({ text: '加载中...' })
      try {
        const params = { ...this.queryParams }
        const res = await getConsumPushCheckList(params)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableList = res.rows
        this.total = res.total
        const res2 = await getConsumPushCheckListCount(params)
        this.totalCost = res2.data.leaseMoney
        loading.close()
      } catch (error) {
        console.log('🚀 ~ 获取列表 ~ error:', error)
        this.tableList = []
        this.total = 0
        loading.close()
      }
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 多选
    selectionChange(selection) {
      console.log("xxxxxxxxxxxxx",selection)
        this.taskId = selection.map((item) => item.taskId).filter(id => id != null)
        this.ids = selection.map((item) => item.agreementId).filter(id => id != null)
        this.single = selection.length != 1
        this.multiple = !selection.length
    },
    // 合计
    getSummaries() {
      const sums = []
      sums[0] = '合计'
      sums[6] = this.totalCost

      return sums
    },
    // 获取 单位 列表数据
    async GetUnitData() {
      try {
        const res = await getUnitList({})
        this.unitList = res.data
        this.getAgreementInfo()
      } catch (error) {
        console.log('🚀 ~ GetUnitData ~ error:', error)
      }
    },
    unitChange(val) {
      setTimeout(() => {
        this.queryParams.projectId = null
        this.queryParams.agreementId = null
        this.queryParams.agreementCode = null
        this.GetProData()
      }, 300)
    },
    // 获取 工程名称 列表数据
    async GetProData() {
      const params = {
        unitId: this.queryParams.unitId
      }
      try {
        const res = await getProjectList(params)
        this.proList = res.data
        this.getAgreementInfo()
      } catch (error) {
        console.log('🚀 ~ GetProData ~ error:', error)
      }
    },
    proChange(val) {
      setTimeout(() => {
        this.GetUnitData()
      }, 500)
    },
    // 获取 协议id
    async getAgreementInfo() {
      if (this.queryParams.unitId && this.queryParams.projectId) {
        const params = {
          unitId: this.queryParams.unitId,
          projectId: this.queryParams.projectId
        }
        try {
          const res = await getAgreementInfoById(params)
          console.log('🚀 ~ 协议id ~ res:', res)
          if (res.data && res.data.agreementId) {
            this.queryParams.agreementId = res.data.agreementId
            this.queryParams.agreementCode = res.data.agreementCode
          } else {
            this.$message.error('当前单位和工程无协议！')
            this.queryParams.unitId = null
            this.queryParams.projectId = null
            this.GetUnitData()
            this.GetProData()
          }
        } catch (error) {
          console.log('🚀 ~ getAgreementInfo ~ error:', error)
        }
      }
    },
    formatTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}${month}${day}_${hours}${minutes}${seconds}`
    },

    /** 外层导出 */
      async handleExport() {
        if (!this.tableList || this.tableList.length === 0) {
          this.$modal.msgWarning('没有可导出的数据');
          return;
        }

        try {
          // 创建工作簿
          const workbook = new ExcelJS.Workbook();
          const worksheet = workbook.addWorksheet('消耗性费用推送审核记录');

          // 定义列配置
          const columns = [
            { header: '序号', key: 'index', width: 8 },
            { header: '协议编号', key: 'agreementCode', width: 18 },
            { header: '单位名称', key: 'unitName', width: 20 },
            { header: '工程名称', key: 'projectName', width: 20 },
            { header: '推送月份', key: 'month', width: 12 },
            { header: '消耗品费用（元）', key: 'leaseMoney', width: 12 },
            { header: '推送状态', key: 'pushStatus', width: 12 },
            { header: '推送备注', key: 'pushRemark', width: 12 },
          ];

          worksheet.columns = columns;

          // 定义表头样式
          const headerStyle = {
            font: { bold: true, color: { argb: 'FFFFFFFF' }, size: 11 },
            fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4472C4' } },
            alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
            border: {
              top: { style: 'thin', color: { argb: 'FF000000' } },
              bottom: { style: 'thin', color: { argb: 'FF000000' } },
              left: { style: 'thin', color: { argb: 'FF000000' } },
              right: { style: 'thin', color: { argb: 'FF000000' } }
            }
          };

          // 定义数据行样式
          const dataStyle = {
            alignment: { horizontal: 'center', vertical: 'center' },
            border: {
              top: { style: 'thin', color: { argb: 'FF000000' } },
              bottom: { style: 'thin', color: { argb: 'FF000000' } },
              left: { style: 'thin', color: { argb: 'FF000000' } },
              right: { style: 'thin', color: { argb: 'FF000000' } }
            }
          };

          // 定义合计行样式
          const totalStyle = {
            font: { bold: true, size: 11 },
            fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFF8F8F9' } },
            alignment: { horizontal: 'center', vertical: 'center' },
            border: {
              top: { style: 'thin', color: { argb: 'FF000000' } },
              bottom: { style: 'thin', color: { argb: 'FF000000' } },
              left: { style: 'thin', color: { argb: 'FF000000' } },
              right: { style: 'thin', color: { argb: 'FF000000' } }
            }
          };

          // 设置表头样式
          worksheet.getRow(1).eachCell((cell) => {
            cell.style = headerStyle;
          });

          // 添加数据行（排除最后一行合计行）
          const dataRows = this.tableList;
          dataRows.forEach((row, index) => {
            const dataRow = {
              index: index + 1,
              agreementCode: row.agreementCode || '',
              unitName: row.unitName || '',
              projectName: row.projectName || '',
              month: this.originalMonthTrue || row.month || '',
              leaseMoney: row.leaseMoney ? parseFloat(row.leaseMoney) : 0,
              pushStatus: row.pushStatus == 1 ? '已推送' :  row.pushStatus == 0 ? '未推送' : '已退回',
              pushRemark: row.pushRemark || '',
            };

            const newRow = worksheet.addRow(dataRow);

            // 设置数据行样式
            newRow.eachCell((cell) => {
              cell.style = dataStyle;
            });

            // 设置费用列的数字格式（2位小数）
            newRow.getCell(6).numFmt = '0.00';  // 合计费用
          });

          // 添加合计行
          const totalRow = this.tableList[this.tableList.length - 1];
          const totalDataRow = {
            index: '合计',
            agreementCode: '',
            unitName: '',
            projectName: '',
            month: '',
            leaseMoney: this.totalCost ? parseFloat(this.totalCost) : 0,
            pushStatus: '',
            pushRemark: ''
          };

          const newTotalRow = worksheet.addRow(totalDataRow);

          // 设置合计行样式
          newTotalRow.eachCell((cell) => {
            cell.style = totalStyle;
          });

          // 设置合计行费用列的数字格式
          newTotalRow.getCell(6).numFmt = '0.00';   // 租赁费用

          // 生成文件名
          const fileName = `消耗性费用推送审核记录_${new Date().toISOString().slice(0, 10)}.xlsx`;

          // 生成Excel文件并下载
          const buffer = await workbook.xlsx.writeBuffer();
          const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

          // 创建下载链接
          const link = document.createElement('a');
          const url = URL.createObjectURL(blob);
          link.setAttribute('href', url);
          link.setAttribute('download', fileName);
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

          // 清理URL对象
          URL.revokeObjectURL(url);

          this.$modal.msgSuccess('Excel导出成功');
        } catch (error) {
          console.error('导出Excel失败:', error);
          this.$modal.msgError('导出Excel失败，请稍后重试');
        }
      },


    submit() {
      this.ids = this.ids.filter(id => id != null)
        console.log("xxxxxxxxxxxxxxx",this.ids)
        if (this.ids.length == 0) {
              this.$message({
                type: 'warning',
                message: '请选择数据',
              })
            return;
      }
      // 弹框确认
      this.$confirm('是否确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          try {
            let params = {
              agreementIds: this.ids.filter(id => id != null),
              taskId: this.taskId.filter(id => id!= null)[0]
            }
            submitPushSafetyConsumeCosts(params).then(res => {
              // 确定
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getList()
            })
          } catch (error) {
            console.log('🚀 ~ .then ~ error:', error)
          }
        })
        .catch(() => {
          // 取消
        })
    },
    // 弹框
    openDialog(row, type) {
      this.dialogVisible = true
      this.dialogForm.agreementId = row.agreementId
      this.dialogForm.taskId = row.taskId
      this.getDiaList()
    },
    // 弹框列表
    async getDiaList() {
      const params = { ...this.dialogForm }
      try {
          const res = await getConsumeDetailsListApi(params)
          this.dialogTableList = res.rows
          console.log("xxxxxxxxxxxx",this.dialogTableList)
        //  else if (this.costIndex === 2) {
        //   res = await
        // } else if (this.costIndex === 3) {
        //   res = await
        // }
      } catch (error) {
        console.log('🚀 ~ getDiaList ~ error:', error)
      }
    },
    // 弹框重置
    resetDialog() {
      this.dialogForm = {
        name: '',
        type: ''
      }
      this.getDiaList()
    },
    // 弹框合计
    getDiaSummaries(param) {
      const { columns, data } = param
      const sums = []
      sums[0] = '合计'
      let total = 0
      data.forEach((column, index) => {
        total += Number(column.consMoney)
      })
      sums[5] = total ==0 ? 0:total.toFixed(5)
      return sums
    },
    // 弹框导出数据
    handleDiaExport() {
      // 提示
      this.$message({
        type: 'warning',
        message: '导出功能开发中，敬请期待！'
      })
      try {
        let fileName = `数据_${this.formatTime(new Date())}.xLsx`
        let url = ''
        const params = { ...this.dialogForm }
        console.log('🚀 ~ 导出 ~ params:', params)
        // this.download(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
