<template>
  <div>
    <Modal v-model="isShowModal" fullscreen class-name="oa-modal" footer-hide title="科室资金执行率明细" :mask-closable="false">
      <div class="department-progress-detail">
        <el-container>
          <el-main>
            <!-- 科室标题 -->
            <div class="department-title">
              <h3>{{ row?(row.plan_department?row.plan_department.name:''):'' }} - 资金执行率明细</h3>
            </div>

            <!-- 执行率统计卡片 -->
            <el-row :gutter="20" class="mb-4">
              <el-col :span="8">
                <el-card class="summary-card" shadow="hover">
                  <div class="card-title">当前执行率</div>
                  <div class="execution-rate">{{ getCompletionRate(row.rate) }}%</div>
                  <div class="card-desc">已财务确认的资金比例</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="summary-card" shadow="hover">
                  <div class="card-title">预计执行率</div>
                  <div class="execution-rate">{{ getCompletionRate(row.rate_end) }}%</div>
                  <div class="card-desc">全部付款确认后预计的执行率</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="summary-card" shadow="hover">
                  <div class="card-title">预算金额</div>
                  <div class="execution-rate">{{ formatToWan(row.money_total) }}</div>
                  <div class="card-desc">科室预算金额</div>
                </el-card>
              </el-col>
            </el-row>

            <!-- 已执行项目表格 -->
            <el-card class="table-container mb-4">
              <div class="section-title" style="display:flex;align-items:center;justify-content:space-between;">
                <span>资金执行明细</span>
                <el-button type="primary" size="mini" @click="exportEnd">导出</el-button>
              </div>
              <xy-table ref="xyTable" :list="endList" :table-item="endTable" :height="300">
                <template v-slot:status>
                  <el-table-column header-align="center" label="当前状态" width="120">
                    <template slot-scope="scope">
                      <el-tag type="success">已完成</el-tag>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:btns>
                  <el-table-column
                    :fixed="$store.getters.device === 'mobile'?false:'right'"
                    header-align="center"
                    label="操作"
                    width="120"
                  >
                <template slot-scope="scope">
                      <el-button v-if="scope.row.contract_id" type="primary" size="small" @click="showContractDetail(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </template>
              </xy-table>
              <div style="display: flex; justify-content: flex-end">
                <Page :total="endTotal" show-elevator @on-change="endPageChange" />
              </div>
            </el-card>

            <!-- 未执行完项目表格 -->
            <el-card class="table-container">
              <div class="section-title" style="display:flex;align-items:center;justify-content:space-between;">
                <span>未执行完项目（流程中/预算流转中）</span>
                <el-button type="primary" size="mini" @click="exportPart">导出</el-button>
              </div>
              <xy-table ref="xyTable" :list="partList" :table-item="table" :height="300">
                <template v-slot:status>
                  <el-table-column header-align="center" label="当前状态" width="120" align="center">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.funds_count>0" type="warning">部分支付中</el-tag>
                      <el-tag v-else type="warning">oa流程中</el-tag>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:btns>
                  <el-table-column
                    :fixed="$store.getters.device === 'mobile'?false:'right'"
                    header-align="center"
                    label="操作"
                    width="120"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-button type="primary" size="small" @click="showContractDetail(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </template>
              </xy-table>
              <div style="display: flex; justify-content: flex-end">
                <Page :total="partTotal" show-elevator @on-change="partPageChange" />
              </div>
            </el-card>
          </el-main>
        </el-container>
      </div>

    </Modal>
    <!-- <detail ref="detail" /> -->
    <ContractDetailDrawer ref="contractDetailDrawer" :visible.sync="isShowContractDetail" />
  </div>
</template>

<script>
import {
  endIndex,
  endIndex2,
  partIndex
} from '@/api/departmentProgress'
// import detail from '../components/detail.vue'
import ContractDetailDrawer from '@/components/contractIntegration/index.vue'
import { getToken } from '@/utils/auth'
export default {
  name: 'DepartmentProgressDetail',
  components: {
    // detail,
    ContractDetailDrawer
  },
  data() {
    return {
      isShowModal: false,
      isShowContractDetail: false,
      row: {},
      endTotal: 0,
      partTotal: 0,
      endSelect: {
        page: 1,
        page_size: 10
      },
      partSelect: {
        page: 1,
        page_size: 10
      },
      endList: [],
      partList: [],
      endTable:[{
        prop: 'model_type_text',
        label: '类型',
        width: 120,
        align: 'center'
      },{
        prop: 'name',
        label: '关联名称',
        width: 240,
        align: 'center'
      }, {
        prop: 'use_money',
        label: '使用金额',
        width: 240
      }, {
        prop: 'admin_name',
        label: '发起人',
        width: 120,
        align: 'center'
      },{
        prop: 'created_at',
        label: '发起时间',
        width: 180,
        align: 'center'
      },{
        prop: 'status',
        label: '状态',
        width: 120,
        align: 'center'
      }],
      table: [{
        prop: 'name',
        label: '项目名称',
        // fixed: 'left',
        // width: 240,
        align: 'left'
      }, {
        prop: 'department.name',
        label: '科室',
        width: 240,
        align: 'left'
      }, {
        prop: 'admin.name',
        label: '经办人',
        width: 100
      }, {
        prop: 'money',
        label: '预算金额',
        width: 100,
        formatter(v1, v2, value) {
          return value || '0.00'
        }
      }, {
        prop: 'funds_count',
        label: '发起支付笔数',
        width: 100
      }, {
        prop: 'contract_plan_act_sum',
        label: '已确认付款金额',
        width: 120,
        formatter(v1, v2, value) {
          return value || '0.00'
        }
      }, {
        prop: 'status',
        label: '当前状态',
        export:'funds_count_text',
        width: 120
      }]
    }
  },
  watch: {
    isShowModal(newval) {
      if (newval) {

      } else {
        this.row = {}
      }
    },
    row(newval) {
      if (newval) {
        this.getEndIndex(newval.plan_department_id)
        this.getPartIndex(newval.plan_department_id)
      }
    }
  },
  methods: {
    partPageChange(e) {
      this.partSelect.page = e
      this.getPartIndex(this.row.plan_department_id)
    },
    endPageChange(e) {
      this.endSelect.page = e
      this.getEndIndex(this.row.plan_department_id)
    },
    async getEndIndex(id) {
      
      const res = await endIndex2({
        department_id: id,
        page: this.endSelect.page,
        page_size: this.endSelect.page_size
      })
        this.endList = res.list.data
        this.endTotal = res.list.total
      
      
    },
    async getPartIndex(id) {
      const res = await partIndex({
        department_id: id,
        page: this.partSelect.page,
        page_size: this.partSelect.page_size
      })
      this.partList = res.list.data
      this.partTotal = res.list.total
    },
    getDetail(row, type) {
      this.$refs.detail.type = type
      this.$refs.detail.detailRow = row
      this.$refs.detail.detailDrawerVisible = true
    },
    showContractDetail(row) {
      this.isShowContractDetail = true
      this.$nextTick(() => {
        this.$refs.contractDetailDrawer.getDetail(row.contract_id)
      })
    },
    getCompletionRate(dept) {
      return dept ? Number(dept.toFixed(2)) : 0
    },
    formatToWan(num) {
      if (num === null || num === undefined) return '0元'
      num = Number(num)
      if (isNaN(num)) return '0元'

      if (Math.abs(num) < 10000) {
        return num.toFixed(2).toString() + '元' // 小于1万直接返回原数值
      } else {
        return (num / 10000).toFixed(2) + '万元' // 除以1万并保留两位小数
      }
    },
    exportEnd() {
      const name = this.row?(this.row.plan_department?this.row.plan_department.name:''):''
      const file_name = name+'资金执行明细'
      // const export_fields = 'export_fields[name]=项目名称&export_fields[department.name]=科室&export_fields[admin.name]=经办人&export_fields[money]=预算金额&export_fields[funds_count]=发起支付笔数&export_fields[contract_plan_act_sum]=已确认付款金额&export_fields[funds_count_text]=当前状态'
      const export_fields = 'export_fields[model_type_text]=类型&export_fields[name]=关联名称&export_fields[use_money]=使用金额&export_fields[created_at]=发起时间&export_fields[funds_count_text]=状态&export_fields[admin_name]=发起人'

      window.open(`${process.env.VUE_APP_BASE_API}/api/ht/contract/end-index-v2?token=${getToken()}&is_export=1&page=1&page_size=999&department_id=${this.row.plan_department_id}&${export_fields}&file_name=${file_name}`, '_blank')
    },
    exportPart() {
      const name = this.row?(this.row.plan_department?this.row.plan_department.name:''):''
      const file_name = name+'未执行完项目'
      const export_fields = 'export_fields[name]=项目名称&export_fields[department.name]=科室&export_fields[admin.name]=经办人&export_fields[money]=预算金额&export_fields[funds_count]=发起支付笔数&export_fields[contract_plan_act_sum]=已确认付款金额&export_fields[funds_count_text]=当前状态'
      window.open(`${process.env.VUE_APP_BASE_API}/api/ht/contract/part-index?token=${getToken()}&is_export=1&page=1&page_size=999&department_id=${this.row.plan_department_id}&${export_fields}&file_name=${file_name}`, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .ivu-modal-body {
    max-height: none !important;
    overflow: scroll!important;
  }
  .department-progress-detail {
    min-height: 100vh;
    background: #f4f6fa;
  }

  .header-bg {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: white;
    padding: 0;
    height: 70px;
    display: flex;
    align-items: center;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 30px;
  }

  .header-title {
    font-size: 20px;
    font-weight: bold;
  }

  .header-user {
    font-size: 14px;
  }

  .sidebar {
    background-color: #f8f9fa;
    min-height: calc(100vh - 70px);
    border-right: 1px solid #dee2e6;
  }

  .department-title {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
  }

  .action-buttons {
    margin-bottom: 20px;
    text-align: right;
  }

  .summary-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .card-title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .execution-rate {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .card-desc {
    font-size: 13px;
  }

  .section-title {
    background-color: #f8f9fa;
    padding: 15px;
    margin: 20px 0 15px 0;
    border-left: 4px solid #007bff;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
  }

  .table-container {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .detail-table {
    font-size: 14px;
  }
</style>