<template>
  <!-- 动态生成表格，slot不支持 -->
  <div>


    
    <div v-for="(tableData, index) in tablesData" :key="index">
      <el-table :data="tableData.data" :props="tableData.props">
        <el-table-column v-for="(column, colIndex) in tableData.columns" :key="colIndex" :prop="column.prop" :label="column.label">
          <template v-if="column.slot" v-slot="{row}">
            <component :is="column.slot" :row="row" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <el-table :data="jinDuData" style="width: 100%">
             <el-table-column
               prop="progress"
               label="进度"
             >
               <template slot-scope="scope">
                 <el-progress
                   type="line"
                   :stroke-width="15"
                   :percentage="scope.row.progress"
                   :color="blue"
                 ></el-progress>
               </template>
      </el-table-column>
</el-table> -->

  </div>

</template>

<script>
const jsonString = `{
  "身份类别": [
    {
      "createTime": 1679377861000,
      "usertel": "13857185591"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185592"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185593"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185594"
    }
  ],
  "我来医院看病是因为": [
    {
      "createTime": 1679377861000,
      "usertel": "13857185595"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185596"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185597"
    },
    {
      "createTime": 1679377861000,
      "usertel": "13857185598"
    }
  ]
}`;

const jsonObject = JSON.parse(jsonString);

const identityCategoryArray = jsonObject["身份类别"];
const hospitalVisitReasonArray = jsonObject["我来医院看病是因为"];

import { getWqdaSum,createWqda, updateWqda, deleteWqda, getWqda, getWqdaPage, exportWqdaExcel } from "@/api/system/wqda";

export default {
  data() {
    return {
      reverse: true,
     jinDuData:[{
       zhuangtai:'进行中',
       progress:10
     },{
       zhuangtai:'进行中',
       progress:90
     },{
       zhuangtai:'已延期',
       progress:50
     },{
       zhuangtai:'已延期',
       progress:70
     },{
       zhuangtai:'未开始',
       progress:100
     },{
       zhuangtai:'已结束',
       progress:10
     },{
       zhuangtai:'已结束',
       progress:30
     }],      
      num:10,
      tablesData: [
      ]
    }
  },
  created() {
    this.getList();
  },
  components: {
        genderSlot: {
          props: ['row'],
          template: '<el-progress type=\"line\" :stroke-width=\"15\" :percentage=\"scope.row.progress\" :color=\"blue\"></el-progress>',
      }},   
  methods: {
    /** 查询列表 */
    getList() {
      // this.loading = true;
      // 执行查询
      getWqdaSum(this.queryParams).then(response => {
        this.tablesData = JSON.parse(response.data);
        //alert(JSON.stringify(this.tablesData[0].data));
      });
    },
    format(row, column) {
      return () => {
        if (column.label === '里程数') {
          return row.num + 'km'
        }
      }
    },    
    percentageFormatter(row, column, cellValue, index) {
      alert("ttt");
      const percentage = (row.value2 / row.value1) * 100;
      return `${percentage.toFixed(2)}%`;
     }
  },
  mounted() {
    // alert(JSON.stringify(identityCategoryArray));
    // 获取数据数组和属性对象
    // const dataArray1 = [ { col1: '数据1', col2: '数据2', col3: '数据3' }, { col1: '数据4', col2: '数据5', col3: '数据6' } ];
    // const propObject1 = { height: '500px' };

    // const dataArray2 = [ { col1: '数据A', col2: '数据B' }, { col1: '数据C', col2: '数据D' } ];
    // const propObject2 = { stripe: true };

    // // 将数据数组和属性对象传递给每个el-table组件
    // this.tablesData[0].data = dataArray1;
    // this.tablesData[0].props = propObject1;

    // this.tablesData[1].data = dataArray2;
    // this.tablesData[1].props = propObject2;

    // this.tablesData.data = dataArray1;
    // this.tablesData.props = propObject1;
    // this.tablesData.cloumns = propObject1;
  }
}
</script>
