<template lang="html">
  <div class="sheet_demo">
    <el-container class="container">
      <!-- main -->
      <el-container class="main">
        <el-main id="bill_main">
          <el-table
            :highlight-current-row=true
            :data="bill_list"
            ref="multipleTable"
            :border=true
            :fit=true
            :row-style="set_row_style"
            :max-height="600"
            style="width: 100%; overflowY: hidden"
            @row-click="row_click"
          >
            <!--=====================================表自定义========================================-->
            <!-- <el-table-column prop="app_code" sortable :show-overflow-tooltip=true label="应用编号">
            </el-table-column>
            <el-table-column  prop="tenant_code"  :show-overflow-tooltip=true label="应用名称">
            </el-table-column> -->
            <el-table-column  prop="app_name" label="APP名称" :show-overflow-tooltip=true>
            </el-table-column>
               <el-table-column   v-for="(item, index) in tableData"  :label="item" :key="index">
                     <template slot-scope="scope" >
                          <a class="item_text-decoration" @click='click_open(scope.row.url[index])'>{{scope.row.url[index]}}</a> 
                        </template>
            </el-table-column>
              <el-table-column  prop="version" :show-overflow-tooltip=true label="版本号">
            </el-table-column>
               <el-table-column  prop="state" :show-overflow-tooltip=true label="状态">
            </el-table-column>
               <el-table-column  prop="status" :show-overflow-tooltip=true label="启动时间">
            </el-table-column>
             </el-table-column>
               <el-table-column  prop="creat_time" :show-overflow-tooltip=true label="创建时间">
            </el-table-column>
            <!--====================================================================================-->
          </el-table>
          <div class="pageControl">
            <!-- <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page.sync="page"
                           :page-sizes="page_sizes"
                           :page-size="per_page"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination> -->
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style src="@components/common/sheet_demo.css" scoped></style>
<script>
  import utilSingeUc from '@basicClass/util_singe_uc.js'
  // import '@components/common/sheet_demo.css'
  export default {
    mixins: [utilSingeUc],
    data() {
      return {
        tableData: [],
        orderData: [],
        multiple: [],
        searchParam: {
        },
        // 主表
        module_name: '/mesAPI/info/app_list', // 表数据
        api_query_list: '', // 查询列表
        api_save_one: '', // 新增或者修改
        api_delete_list: '', // 批量删除
        api_query_one: '',
        bill_not_check: {
          id: ''       // 不检查字段 默认不修改
        },
        bill_type: 1313,
        bill_query_one_detail: {
          usable: false
        },
        menu_data_dialog: false,
        current_menu_data: ''
      }
    },
    methods: {
      click_open(url) {
        url = `http://${url}`
        window.open(url)
      },
      getMaxLenght(max) {
        for (var i = 0; i < max; i++) {
          this.tableData.push(`地址${i + 1}`)
        }
      },
      query_bill_list_callback(data) {
        const counts = []
        data.forEach((item, index) => {
          for (const itemName in item) {
            if (itemName === 'app_url') {
              this.$set(data[index], 'url', data[index][itemName].split('  '))
              counts.push(data[index][itemName].split('  ').length)
            }
          }
        })
        this.bill_list = data
        const max = Math.max(...counts)
        this.getMaxLenght(max)
      }
    },
    activated() {
      this.query_bill_list()
    }
  }
</script>
<style scoped>
  .add_form >>> .el-form-item__error {
    padding-top: 8px!important;
  }
  .add_form >>> .el-input__inner {
    width: 150px !important;
  }
  pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
  .string { color: green; }        /*字符串的样式*/
  .number { color: darkorange; }    /*数字的样式*/
  .boolean { color: blue; }        /*布尔型数据的样式*/
  .null { color: magenta; }        /*null值的样式*/
  .key { color: red; }            /*key值的样式*/
</style>
