<template>
  <div style="padding:20px 0">

    <el-row :gutter="20" class='elrows'>
      <el-col :span="24">
        <PanelGroup :totaldata="list"></PanelGroup>
      </el-col>

      <el-col :span="24" class="chartSize">
        <div class="search">
          <div class="title">月度业务统计</div>
          <div class="search-wrap">
            <div>
              <el-date-picker @change="getFillChart" v-model="monthSelect.year" value-format="yyyy" type="year"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <div>
              <el-select style="width:100%" @change="changeBussiness" v-model="monthSelect.business_id"
                placeholder="请选择业务">
                <el-option v-for="item in list_business" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div v-if="stateObj.is_admin">
              <el-select style="width:100%" @change="changeArea" v-model="monthSelect.area_id" placeholder="请选择区域">
                <el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select style="width:100%" @change="getFillChart" v-model="monthSelect.business_type_id"
                placeholder="请选择业务类别">
                <el-option v-for="item in list_type" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>

          </div>
        </div>
        <myecharts :width="'100%'" :height="'400px'" :data="overall_month_data"></myecharts>
      </el-col>
      <el-col :span="24" class="chartSize" v-if="stateObj.is_dashboard_show">
        <div class="search">
          <!-- 年度业务统计 -->
          <div class="title">各区域应收款到账情况</div>
          <div class="search-wrap">
            <!-- <div>
              <el-date-picker @change="getYearChart" v-model="yearSelect.year" value-format="yyyy" type="year"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <div v-if="stateObj.is_admin">
              <el-select style="width:100%" @change="getYearChart" v-model="yearSelect.area_id" placeholder="请选择区域">
                <el-option v-for="item in all_areas" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div> -->

          </div>
        </div>
        <div v-if="showList">
          <xy-table :list="caiwuList" :is-page="false" :height="550"
            :table-item="caiwuTable">
          </xy-table>
        </div>
        <div class="yearData" v-if="false">
          <myecharts v-if="false" style="margin-top:20px" :width="'100%'" :height="'350px'" :data="budget_data"></myecharts>

          <div class="yearData-item" v-for="item in yearsArr">
            <el-descriptions :title="item.name" direction="vertical" :column="1" border>
              <!-- <el-descriptions-item>
                <template slot="label">年度预算：{{item.budgets.all_year}}</template>
                <myecharts style="margin-top:20px" :width="'100%'" :height="'250px'" :data="item.budgets"></myecharts>
                <el-descriptions :column="2" v-else border v-for="budget in item.budgets">
                  <el-descriptions-item label="年度总预算" :span="2">
                    {{budget.all_year}}
                  </el-descriptions-item>
                  <el-descriptions-item label="第一季度预算">
                    {{budget.quarter_1}}
                  </el-descriptions-item>
                  <el-descriptions-item label="第二季度预算">
                    {{budget.quarter_2}}
                  </el-descriptions-item>
                  <el-descriptions-item label="第三季度预算">
                    {{budget.quarter_3}}
                  </el-descriptions-item>
                  <el-descriptions-item label="第四季度预算">
                    {{budget.quarter_4}}
                  </el-descriptions-item>
                </el-descriptions>

              </el-descriptions-item> -->
              <el-descriptions-item label="业务数据">
                <myecharts style="margin-top:20px" :width="'100%'" :height="'300px'" :data="item.list"></myecharts>

                <!-- <div v-if="item.list.length<1" style="text-align: center;">暂无数据</div>
                <el-descriptions :column="1" border v-else>
                  <el-descriptions-item v-for="li in item.list" :label="li.name">
                    {{li.total}}
                  </el-descriptions-item>
                </el-descriptions> -->

              </el-descriptions-item>
            </el-descriptions>
          </div>


        </div>
        <!-- <myecharts :width="'100%'" :height="'300px'" :data="overall_year_data"></myecharts> -->
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import myecharts from '@/components/myecharts';
  import PanelGroup from './components/PanelGroup';
  import {
    home,
    yearChart,
    fillChart
  } from "@/api/home"
  import {
    index,
    show
  } from "@/api/system/baseForm.js"
  import state from '@/store/modules/user.js'
  export default {
    components: {
      myecharts,
      PanelGroup
    },
    data() {
      return {
        list: {
          // recordsTotal: 0,
          // organizesTotal: 0,
          // areasTotal: 0,
          status1Total: 0,
          dateTotal: 0,
          person:{
            total:0,
            manage:0,
            serve:0
          }
        },
        stateObj: {},
        nowDate: '',
        // 月度统计
        list_areas: [],
        list_business: [],
        list_type: [],
        monthSelect: {
          year: '',
          business_id: '',
          business_type_id: '',
          area_id: ''
        },
        overall_month_data: {},
        budget_data: {},
        // 年度统计
        yearSelect: {
          year: '',
          area_id: ''
        },
        yearsArr: [],
        yearList: {},
        all_areas: [],
        overall_year_data: {},
        monthArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        // 财务数据
        caiwuTable:[{
          prop:'name',
          label:'区域',
          width:180,
          align:'center',
          fixed:'left'
        }],
        showList:false,
        caiwuList:[],
        id_business_types_business_id_relation:[], //财务填报的业务类型
        id_business_datas_business_id_relation:[], //财务填报的业务数据

      }
    },
    watch: {

    },
    created() {
      this.monthSelect.year = this.$moment(new Date).format("YYYY")
      this.yearSelect.year = this.$moment(new Date).format("YYYY")
      this.stateObj = state.state
      this.init()
      this.getRecords()
      this.getPerson()
      this.getMonthList()
      this.getYearList()
      this.getCaiwuTable()
    },
    mounted() {

    },
    methods: {
      // 获取 预警
      async getRecords() {
        await this.getList()
        await this.getStatusList()
      },
      async getList() {
        this.nowDate = this.$moment().add(3, 'months').format('YYYY-MM-DD')
        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
        const res = await index({
          page_size: 9999,
          page: 1,
          table_name: 'records',
          is_auth: 1,
          filter: [{
            key: 'status',
            op: 'eq',
            value: 0
          }, {
            key: 'end_date',
            op: 'range',
            value: [this.startDate, this.nowDate]
          }]
        })
        this.list.dateTotal = res.total
      },
      // 获取当月员工人数 固定的数据获取
      // http://sstt-dangan.ali251.langye.net/api/fill-datas-chart?business_id=20&year=2025&business_type_id=88&area_id=13
      async getPerson(){
        const res = await fillChart({
          business_id: 20,
          year: this.monthSelect.year,
          business_type_id: 88,
          area_id: 13
        })
        const monthNum = (new Date()).getMonth()
        const currentMonth = monthNum===0?'01':String(new Date().getMonth()).padStart(2, '0');

        const currentMonthData = res.list[currentMonth] || [];
        currentMonthData.forEach(item => {
          switch (item.name) {
            case "总人数":
              this.list.person.total = item.total; // 赋值总人数
              break;
            case "管理人员人数":
              this.list.person.manage = item.total; // 赋值管理人员人数
              break;
            case "服务人员人数":
              this.list.person.serve = item.total; // 赋值服务人员人数
              break;
          }
        });
      },
      // 获取财务部 填报的数据内容
      // http://sstt-dangan.ali251.langye.net/api/admin/base-form/show?id=15&table_name=businesses&json_data_fields[]=area_ids
      async getCaiwuTable(){
        const res = await show({
          id: 15,
          table_name: 'businesses',
        })
        res.id_business_types_business_id_relation.map(item=>{
          this.caiwuList.push({
            business_type_id:item.id,
            name:item.name
          })
        })
        res.id_business_datas_business_id_relation.map(item=>{
          this.caiwuTable.push({
            prop:item.name,
            business_data_id:item.id,
            label:item.name
          })
          this.caiwuList.map(item1=>{
            item1.business_data_id = item.id
            item1[item.name] = 0
          })
        })
        this.getCaiwuList()
      },
      async getCaiwuList(){
        const res = await index({
          page_size: 9999,
          page: 1,
          table_name: 'fills',
          filter: [{
            "key": "business_id",
            "op": "eq",
            "value": 15
          },{
            "key": "year",
            "op": "eq",
            "value": this.monthSelect.year
          }],
        })

        // return
        // 1. 先将 id_fill_datas_fill_id_relation 转换为映射表，提高查询效率
        if(res.data.length>0){
          const data = res.data[0]
          console.log("data",data)
          // 1. 先按 business_type_id 对 id_fill_datas_fill_id_relation 分组，提高匹配效率
          const relationGroup = {};
          data.id_fill_datas_fill_id_relation.forEach(relationItem => {
            const typeId = relationItem.business_type_id;
            // 按 business_type_id 分组，每组存储该类型下的所有 relation 项
            if (!relationGroup[typeId]) {
              relationGroup[typeId] = [];
            }
            relationGroup[typeId].push(relationItem);
          });
          console.log("relationGroup",relationGroup)
          // 2. 遍历 caiwuList，匹配并赋值
          this.caiwuList.forEach(caiwuItem => {
            const targetTypeId = caiwuItem.business_type_id;
            // 找到同 business_type_id 的所有 relation 项
            const matchedRelations = relationGroup[targetTypeId] || [];
            // 遍历同类型的 relation 项，匹配 business_data.name 与 caiwuItem 的属性
            matchedRelations.forEach(relationItem => {
              // 获取 relation 项中 business_data 的 name（注意处理可能的空值）
              const targetProp = relationItem.business_data?.name;
              if (!targetProp) return; // 若 name 不存在，跳过

              // 若 caiwuItem 存在该属性，则赋值
              if (caiwuItem.hasOwnProperty(targetProp)) {
                caiwuItem[targetProp] = relationItem.value;
              }
            });
          });
          console.log("this.caiwuList",this.caiwuList)
          console.log("this.caiwuTable",this.caiwuTable)
          this.$forceUpdate()
        }
        this.showList = true
      },

      async getStatusList() {
        this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
        const res = await index({
          page_size: 9999,
          page: 1,
          table_name: 'records',
          is_auth: 1,
          filter: [{
            key: 'status',
            op: 'eq',
            value: 1
          }]
        })
        this.list.status1Total = res.total
      },
      // 获取 月度图表 相关
      // 获取 业务
      changeBussiness(e) {
        this.list_business.map(item => {
          if (e === item.id) {
            // 如果是管理员 变更 区域
            if (this.stateObj.is_admin) {
              this.list_areas = item.area_ids_details
              this.monthSelect.area_id = this.list_areas[0].id
            }

            this.list_type = item.id_business_types_business_id_relation.filter(item => {
              return item.area_id == this.monthSelect.area_id
            })

            this.monthSelect.business_type_id = this.list_type[0].id
            this.getFillChart()
          }
        })
      },

      changeArea(e) {
        this.list_business.map(item => {
          if (this.monthSelect.business_id === item.id) {
            this.list_type = item.id_business_types_business_id_relation.filter(item => {
              return item.area_id == e
            })
            this.monthSelect.business_type_id = this.list_type[0].id
            this.getFillChart()
          }
        })
      },
      async getMonthList() {
        await this.getBusinessList()
        await this.getFillChart()
      },
      async getBusinessList() {
        const res = await index({
          page_size: 9999,
          page: 1,
          table_name: 'businesses',
          json_data_fields: ['area_ids'],
        })

        // 区域只能查看自己的 业务
        // 初始化赋值  获取月度统计
        // 区域只能看到自己的 不用选择区域了，业务数据并选择
        if (!this.stateObj.is_admin) {
          this.list_business = res.data.filter(item => {
            return item.area_ids.includes(this.stateObj.area_id)
          })
          this.monthSelect.business_id = this.list_business[0].id
          this.monthSelect.area_id = this.stateObj.area_id
          this.list_type = this.list_business[0].id_business_types_business_id_relation.filter(item => {
            return item.area_id == this.monthSelect.area_id
          })
          this.monthSelect.business_type_id = this.list_type[0].id
        } else {
          this.list_business = res.data.reverse()
          this.monthSelect.business_id = res.data[0].id
          this.list_areas = res.data[0].area_ids_details
          this.monthSelect.area_id = this.list_areas[0].id
          this.list_type = res.data[0].id_business_types_business_id_relation.filter(item => {
            return item.area_id == this.monthSelect.area_id
          })
          this.monthSelect.business_type_id = this.list_type[0].id
        }



      },
      async getFillChart() {
        // const res1 = await yearChart()
        const res = await fillChart({
          business_id: this.monthSelect.business_id,
          year: this.monthSelect.year,
          business_type_id: this.monthSelect.business_type_id,
          area_id: this.monthSelect.area_id
        })
        let xMonth = this.monthArr
        let dMonth = this.getMonthArr(res.list)
        this.overall_month_data.x = xMonth
        this.overall_month_data.list = dMonth
        // console.log("this.overall_month_data", this.overall_month_data)
      },
      // 月度数据根据类别 归类
      getMonthArr(list) {
        // 定义正确的月份顺序
        const monthsOrder = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
        // 初始化归类对象
        const categorizedData = {};
        // 按照定义的顺序遍历 list 对象
        monthsOrder.forEach(month => {
          if (list[month]) {
            list[month].forEach(item => {
              const {
                name,
                business_data_id,
                total
              } = item;
              if (!categorizedData[business_data_id]) {
                categorizedData[business_data_id] = {
                  name,
                  business_data_id,
                  type: 'bar',
                  barGap: '0%',
                  // barWidth: '30%', // 设置柱子粗细
                  data: Array(12).fill(0), // 初始化长度为12且值全为0的数组
                  label: {
                    show: true,
                    position: 'top',
                    color: "#333",
                    formatter: function(para) {
                      if (para.value > 0) {
                        if (para.seriesName.includes('费用') || para.seriesName.includes('补贴')) {
                          return para.value + '万元'
                        }else if (para.seriesName=='服务人数') {
                          return para.value + '百人'
                        } else {
                          return para.value
                        }

                      } else {
                        return ''
                      }
                    }
                  },
                };
              }
              // 将 total 添加到对应位置
              let last_total = total
              if (name.includes('费用') || name.includes('补贴')) {
                last_total = parseFloat(total / 10000).toFixed(2)
              }
              if (name=='服务人数') {
                last_total = total / 100
              }

              categorizedData[business_data_id].data[parseInt(month) - 1] = last_total;
            });
          }
        });
        // 构建最终结果
        const result = Object.values(categorizedData);
        return result
      },
      // 获取年度统计
      async getYearList() {
        await this.getAreas()
        await this.getYearChart()
      },

      async getAreas() {
        const res = await index({
          page_size: 999,
          page: 1,
          table_name: 'areas',
          sort_type: 'ASC',
          sort_name: 'sort',
        })
        this.all_areas = res.data
        // 只能查看自己区域的业务
        if (!this.stateObj.is_admin) {
          this.yearSelect.area_id = this.stateObj.area_id
        } else {
          this.yearSelect.area_id = this.all_areas[0].id
        }
      },
      async getYearChart() {
        const res = await yearChart({
          year: this.yearSelect.year,
          area_id: this.yearSelect.area_id
        })
        this.yearsArr = this.getYearObj(res.list, res.budgets)
        // console.log("getYearObj", this.getYearObj(res.list, res.budgets))
      },
      // 合并预算  和业务数据
      getYearObj(list, budgets) {
        let flatBudgets = [].concat(...budgets);
        let yearObjs = [];
        let budget_data_x = []
        this.budget_data.list.map(item=>{
          item.data = []
        })
        for (let name in list) {
          budget_data_x.push(name)

          if (list.hasOwnProperty(name)) {
            let yearObj = {
              name: name,
              budgets: {
              },
              list: {
                trigger: 'item',
                xShow: false,
                yShow: false,
                all_year: 0,
                legend: {
                  left: 'left',
                  top: 0
                },
                list: [{
                  name: name,
                  type: 'pie',
                  radius: '60%',
                  tooltip: {
                    formatter: function(item) {
                      // console.log(item)
                      let result = `${item.seriesName}<br/>`;
                      const name = item.name; // 系列名称
                      const value = item.value; // 数据值
                      const marker = item.marker; // 标志图形
                      let unit = item.name.includes('费用') || item.name.includes('补贴') ? '万元' : ''
                      if(item.name=='服务人数'){
                        unit='百人'
                      }
                      result += `${marker}${name}: ${value}${unit}<br/>`;
                      return result;
                    },
                  },
                  data: [],
                  label: {
                    show: true,
                    position: 'outer',
                  },
                }]
              },
            };
            let matchedBudgets = flatBudgets.filter(budget =>
              list[name].some(item => item.business_id === budget.business_id)
            );
            // console.log(name, list[name], matchedBudgets)
            // 年度预算
            this.budget_data.list.map(item=>{
              if(item.id==='quarter_1'){
                item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_1/10000 : 0)
              }else if(item.id==='quarter_2'){
                item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_2/10000 : 0)
              }else if(item.id==='quarter_3'){
                item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_3/10000 : 0)
              }else if(item.id==='quarter_4'){
                item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_4/10000 : 0)
              }
            })
            // 业务数据
            list[name].map(item => {
              let last_total = item.total
              if (item.name.includes('费用') || item.name.includes('补贴')) {
                last_total = item.total / 10000
              }
              yearObj.list.list[0].data.push({
                name: item.name,
                value: last_total
              })
            })
            yearObjs.push(yearObj);
            // console.log("budget_data", this.budget_data)
          }
        }
        this.budget_data.x = budget_data_x
        return yearObjs
      },



      // 初始化图表
      init() {
        this.overall_month_data = {
          xShow: true,
          yShow: true,
          xAxis: {
            axisLabel: {
              show: true,
              // rotate: 35, //35度角倾斜显示
            },
          },
          formatter: function(params) {
            let result = `${params[0].name}<br/>`;
            params.forEach(function(item) {
              // item 是每一个系列的数据
              const seriesName = item.seriesName; // 系列名称
              const value = item.value; // 数据值
              const marker = item.marker; // 标志图形
              let unit = item.seriesName.includes('费用') || item.seriesName.includes('补贴') ? '万元' : ''
              if(item.seriesName=='服务人数'){
                unit = '百人'
              }

              result += `${marker}${seriesName}: ${value}${unit}<br/>`;
            });
            return result;
          },
          x: [],
          list: []
        }
        this.overall_year_data = {
            trigger: 'item',
            xShow: false,
            yShow: false,
            list: [{
              name: '档案数',
              type: 'pie',
              radius: '80%',
              // center:['20%','20%'],
              data: [],
              label: {
                show: true,
                position: 'center'
              },
            }]
          },
          this.budget_data = {
            xShow: true,
            yShow: true,
            xAxis: {
              axisLabel: {
                show: true,
                // rotate: 35, //35度角倾斜显示
              },
            },
            formatter: function(params) {
              let result = `${params[0].name}<br/>`;
              params.forEach(function(item) {
                // item 是每一个系列的数据
                const seriesName = item.seriesName; // 系列名称
                const value = item.value; // 数据值
                const marker = item.marker; // 标志图形
                const unit = '万元'
                result += `${marker}${seriesName}: ${value}${unit}<br/>`;
              });
              return result;
            },
            x: [],
            list: []
          }
        let four = [{
          name: '第一季度',
          id: 'quarter_1'
        }, {
          name: '第二季度',
          id: 'quarter_2'
        }, {
          name: '第三季度',
          id: 'quarter_3'
        }, {
          name: '第四季度',
          id: 'quarter_4'
        }]
        four.map(item => {
          this.budget_data.list.push({
            name:item.name,
            id:item.id,
            type: 'bar',
            barGap: '0%',
            // barWidth: '30%', // 设置柱子粗细
            data: [], // 初始化长度为12且值全为0的数组
            label: {
              show: true,
              position: 'top',
              color: "#333",
              formatter: function(para) {
                if (para.value > 0) {
                  if (para.seriesName.includes('费用') || para.seriesName.includes('补贴')) {
                    return para.value + '万元'
                  } else {
                    return para.value
                  }
                } else {
                  return ''
                }
              }
            },
          })
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .elrows {
    // margin: 0 !important;

    .el-col {
      padding: 10px !important
    }

    .chartSize {
      width: calc(100% - 20px) !important;
      margin: 10px !important;
      background: #fff;

      .search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px;

        .title {
          padding: 10px;
          color: #b3241d;
          font-size: 18px
        }

        &-wrap {
          display: flex;
          align-items: center;

          &>div {
            margin-left: 10px;
          }
        }
      }
    }

    .yearData {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      min-height: 350px;
      margin: 20px;

      &-item {
        // width: 30%;
        flex-basis: 32%;
        margin: 0.5%;
        margin-bottom: 20px;
      }
    }
  }
</style>
