<template>
  <BasicDrawer @register="registerBaseDrawer" style="margin-top:5px" title="评估统计表" width="1200" destroyOnClose>
  <div style="margin-top:5px">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
      <!--
        <a-tab-pane key="1" tab="得分统计">
          <a-row>
            <a-col :span="16">
              <Bar :chartData="barDataSource" height="50vh" :option="{ title: { text: '各领域得分统计', left: 'center' } }"></Bar>
            </a-col>
             <a-col :span="8"> 
                            配置项：
                            <textarea rows="18" style="width: 500px">{{ barDataSource }}</textarea>
                            
            <table>
              <tr  class="line1">
                <td>评估要素</td>
                <td>得分</td> </tr>
              <tr v-for="(item,i) in keyitemDataSource">
                <td> {{ item.name }}</td>
                <td> {{ item.value }}</td> 
                </tr>
              </table>
             </a-col>
          </a-row>
        </a-tab-pane>
        -->
      
        <a-tab-pane key="1" tab="得分统计" force-render>
          
          <a-row>
            <a-col :span="16">
              <BarMulti :chartData="barMultiData" :option="multiBarOption" height="50vh"></BarMulti>
            </a-col>
            
             <a-col :span="8"> <!--
                            配置项：
                            <textarea rows="18" style="width: 500px">{{ barMultiData }}</textarea>
                             -->
                           
            <table>
              <tr  class="line1">
                <td>评估要素</td>
                <td>得分</td> </tr>
              <tr v-for="(item,i) in keyitemDataSource">
                <td> {{ item.name }}</td>
                <td> {{ item.value }}</td> 
                </tr>
              </table>
             
             </a-col>
          </a-row>

        </a-tab-pane>

        <a-tab-pane key="2" tab="得分率统计" force-render>
          
          <a-row>
            <a-col :span="16">
              <BarMulti :chartData="ratioDataSource" :option="ratioOption" height="50vh"></BarMulti>
            </a-col>
            
             <a-col :span="8"> 
             <!--            
            <table>
              <tr  class="line1">
                <td>评估要素</td>
                <td>得分</td> </tr>
              <tr v-for="(item,i) in keyitemDataSource">
                <td> {{ item.name }}</td>
                <td> {{ item.value }}</td> 
                </tr>
              </table>
              -->
             
             </a-col>
          </a-row>

        </a-tab-pane>




        <a-tab-pane key="3" tab="得分统计" force-render>
          
          <a-row>
            <a-col :span="16">
              <Bar :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></Bar>
            </a-col>
            
             <a-col :span="8"> <!--
                            配置项：
                            <textarea rows="18" style="width: 500px">{{ barMultiData }}</textarea>
                             -->
                           
            <table>
              <tr  class="line1">
                <td>评估要素</td>
                <td>得分</td> </tr>
              <tr v-for="(item,i) in keyitemDataSource">
                <td> {{ item.name }}</td>
                <td> {{ item.value }}</td> 
                </tr>
              </table>
             
             </a-col>
          </a-row>

        </a-tab-pane>
         
        
      </a-tabs>
    </a-card>
  </div>
    
    
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref,defineProps, watch, unref } from 'vue';
 
  import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
  import { useModal } from '/src/components/Modal';
  import { getData } from '../chartdemo.data.ts';
  import Bar from '../BarRow.vue';
  import {rateStaiList,rateStaikeyitemList,rateStaiRatioList} from '../RateTask.api';
  
  import BarMulti from '../BarMultiRow.vue';
  const barDataSource = ref([])
  const barMultiData = ref([])
  const keyitemDataSource = ref([])
  const ratioDataSource = ref([])
  const taskid = ref('');
  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    taskid.value = data.id;
    rateStaiList({taskid:taskid.value}).then(rep=>{
      // barDataSource.value =rep;
       barMultiData.value =rep;
      })

    rateStaikeyitemList({taskid:taskid.value}).then(rep=>{
       keyitemDataSource.value =rep;
      })

    rateStaiRatioList({taskid:taskid.value}).then(rep=>{
       
       ratioDataSource.value =rep;
      })

  });


   const activeKey = ref('1');
 // const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
 // const {   barMultiData} = getData;
  const multiBarOption = {
    title: { text: '各领域得分统计', left: 'center' },
  };
  const ratioOption = {
    title: { text: '各领域得分率统计', left: 'center' },
  };
  //const rankList = loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店');
  //tab切换
  function tabChange(key) {
    console.log('切换的key:', key);
  }
 
  function loadData(x, y, max, min, before = '', after = '月') {
    let data = [];
    for (let i = 0; i < 12; i += 1) {
      data.push({
        [x]: `${before}${i + 1}${after}`,
        [y]: Math.floor(Math.random() * max) + min,
      });
    }
    return data;
  }

  

</script>

<style type="text/css"  scoped> 
table{
   width:360px;
   height:100px;
   border-collapse:collapse;
   background:#FFFFFF;} 
td{
   border:1px solid #333333;
   text-align: center; /*将文本水平居中*/
   }
.line1{
   background:#33ccFF;}
</style>
