<template>
  <div>
    <el-dialog :title='props.titles' width="1200px" top="10%" v-model="props.modelValue" :before-close="handleClose">
      <div class="config">
        <section class="eltab3" v-if="props.typetj == 'dw'">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          </MOSTY.Table>
        </section>
        <section class="eltab3" v-if="props.typetj == 'pf'">
          <MOSTY.Table :table-columns="tableColumns2" :tableData="tableData2" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #ctype="{ row }">
              <dict-tag v-if="row.ctype" :options="D_BZ_YSFYLB" :value="row.ctype" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #totalcost="{ row }">
              <span>{{ row.totalcost ? row.totalcost : 0 }}</span>
            </template>
          </MOSTY.Table>
        </section>
        <section class="eltab3" v-if="props.typetj == 'sy'">
          <MOSTY.Table :table-columns="tableColumns3" :tableData="tableData3" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #costFee="{ row }">
              <span>{{ row.costFee ? row.costFee : 0 }}</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye" v-if="props.typetj == 'pf' || props.typetj == 'sy'">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChanges" @changeSize="handleSizeChanges">
          </MOSTY.Pages>
        </div>

      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_BZ_YSFYLB } = proxy.$dict("D_BZ_YSFYLB");
const loading = ref(false); //新增保存按钮截流
// 数据
const tableData2 = ref([]);
const tableData3 = ref([]);
const tableData = ref([]);
const total = ref(0);
const tableloading = ref(false)
const listQuery = reactive({
  years: new Date().getFullYear().toString(),
  orgid: null,
  ctype: null
});
const listQuery2 = reactive({
  pageCurrent: 1,
  pageSize: 10,
  years: new Date().getFullYear().toString(),
  orgid: null,
  ctype: null
});
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  orgid: String,
  titles: String,
  typetj: String,
  ctype: String,

});
const tableColumns = reactive([
  {
    title: "单位名称",
    prop: "orgname",
  },
  {
    title: "批复金额（万元）",
    prop: "budget"
  },
  {
    title: "使用金额（万元）",
    prop: "costFee"
  },
  {
    title: "安全设施费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype1_budget",
        width: '130',
      },
      {
        title: "使用",
        prop: "ctype1_costFee",
        width: '130',
      }
    ]
  },
  {
    title: "应急救援费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype2_budget",
        width: '130',
      },
      {
        title: "使用",
        prop: "ctype2_budget",
        width: '130',
      }
    ]
  },
  {
    title: "安全防护用品费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype3_budget",
        width: '130',
      },
      {
        title: "使用",
        prop: "ctype3_costFee",
        width: '130',
      }
    ]
  },
  {
    title: "执行率",
    prop: "zxl"
  }
])
/** 单位全字段（备用） */
const tableColumns99 = ref([
  {
    title: "单位名称",
    prop: "orgname",
   // slot: true,
    width: '300',
    fixed: 'left',

  },
  {
    title: "批复金额",
    prop: "budget",
   // slot: true,
    width: '130',
    fixed: 'left',

  },
  {
    title: "安全设施费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype1_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype1_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "应急救援费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype2_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype2_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全防护用品费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype3_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype3_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全信息化",
    suntab: [
      {
        title: "批复",
        prop: "ctype4_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype4_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全生产宣传教育培训支出",
    suntab: [
      {
        title: "批复",
        prop: "ctype5_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype5_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "隐患奖励",
    suntab: [
      {
        title: "批复",
        prop: "ctype6_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype6_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全保险",
    suntab: [
      {
        title: "批复",
        prop: "ctype7_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype7_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全咨询服务",
    suntab: [
      {
        title: "批复",
        prop: "ctype8_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype8_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "消防警卫费",
    suntab: [
      {
        title: "批复",
        prop: "ctype10_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype10_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全管理人员薪酬",
    suntab: [
      {
        title: "批复",
        prop: "ctype11_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype11_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "其他",
    suntab: [
      {
        title: "批复",
        prop: "ctype9_budget",
       // slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype9_costFee",
       // slot: true,
        width: '130',
      }
    ]
  },

  {
    title: "使用金额",
    prop: "costFee",
   // slot: true,
    fixed: 'right',
  },
  {
    title: "执行率",
    prop: "syl",
    fixed: 'right',
  },
])
const tableColumns2 = reactive([
  {
    title: "单位名称",
    prop: "orgname",
  },
  {
    title: "使用部门",
    prop: "usedeptname"
  },
  {
    title: "预算明细",
    prop: "budgettitle"
  },
  {
    title: "预算类别",
    prop: "ctype",
    slot: true
  },
  {
    title: "批复金额（万元）",
    prop: "budget"
  },
  {
    title: "使用金额（万元）",
    prop: "totalcost",
    slot: true
  }
])
const tableColumns3 = reactive([
  // {
  //   title: "预算使用标题",
  //   prop: "costTitle",
  // },
  {
    title: "使用明细",
    prop: "costDetailTitle"
  },
  {
    title: "情况说明",
    prop: "costExplain"
  },
  {
    title: "添加时间",
    prop: "addtime"
  },
  {
    title: "使用金额（万元）",
    prop: "costFee",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const emits = defineEmits(["update:modelValue", "changeAddVi"]);

onMounted(() => {
  listQuery.orgid = props.orgid
  listQuery2.orgid = props.orgid
  listQuery2.ctype = props.ctype

  if (props.typetj == 'dw') {
    getDataList()
  } else if (props.typetj == 'pf') {
    getysData()
  } else {
    getsyData()
  }

});
// 	查询各个部门的使用情况
function getDataList() {
  tableloading.value = true
  // getApi(listQuery, '/mosty-jcgl/budgetsCost/aqtrtjListShowInfo').then((res) => {
  getApi(listQuery, '/mosty-jcgl/budgetsCost/getDeptUseInfo').then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      tableData.value.forEach(async (item) => {
        item.zxl = (item.budget > 0 ? Math.round(item.costFee / item.budget * 100 * 100) / 100 : 0) + '%';
        item.ctype1_budget = item.ctype1_budget ? item.ctype1_budget : 0
        item.ctype1_costFee = item.ctype1_costFee ? item.ctype1_costFee : 0
        item.ctype2_budget = item.ctype2_budget ? item.ctype2_budget : 0
        item.ctype2_costFee = item.ctype2_costFee ? item.ctype2_costFee : 0
        item.ctype3_budget = item.ctype3_budget ? item.ctype3_budget : 0
        item.ctype3_costFee = item.ctype3_costFee ? item.ctype3_costFee : 0
      })
    } else {
      tableloading.value = false;
      tableData.value = [];
    }
  })
}
//安全投入统计统计列表--查看预算情况
function getysData() {
  tableloading.value = true
  getApi(listQuery2, '/mosty-jcgl/budgetsCost/aqtrtjListShowInfo').then(res => {
    if (res.records) {
      tableloading.value = false;
      tableData2.value = res.records;
      tableData.value.forEach(async (item) => {
        item.totalcost = item.totalcost ? item.totalcost : 0
      })
    } else {
      tableloading.value = false;
      tableData2.value = [];
    }
    pageConfiger.total = res.total

  }
  )
}
// 安全投入统计统计列表--查询使用情况
function getsyData() {
  tableloading.value = true
  getApi(listQuery2, '/mosty-jcgl/budgetsCost/aqtrtjListShowCostInfo').then(res => {
    if (res.records) {
      tableloading.value = false;
      tableData3.value = res.records;
      tableData.value.forEach(async (item) => {
        item.costFee = item.costFee ? item.costFee : 0
      })
    } else {
      tableloading.value = false;
      tableData3.value = [];
    }
    pageConfiger.total = res.total

  }
  )
}

// 关闭
const handleClose = () => {
  emits("update:modelValue", false);
};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
  emits("update:modelValue", false);
};

const handleSizeChanges = (currentSize) => {
  listQuery2.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getysData();
};
const handleCurrentChanges = (currentPage) => {
  listQuery2.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getysData();
};
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 400px);
}
</style>
