<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showRuleVisible"
      width="60%"
      append-to-body
      close-on-click-modal
      close-on-press-escape
      center>
      <div>
        <el-tabs tab-position="left" style="height: 420px; overflow: auto;">

          <el-tab-pane label="Null Count">
            <div class="table-style1">
              <p>Null is a special marker used to indicate that a data value does not exist.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the Null Count of "FIRSTNAME" is
                <span class="table-style3">2</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.FRISTNAME === 'null'" style="color: red">{{ scope.row.FRISTNAME }}</span>
                    <span v-else>{{ scope.row.FRISTNAME }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Distinct Count">
            <div class="table-style1">
              <p>The Distinct Constraint prevents two records from having identical values in a particular column.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then
                the Distinct Count is
                <span class="table-style3">2</span>
              </p>
              <el-table
                :data="tableDataDistinct"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="NAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
                <el-table-column
                  prop="food"
                  label="FAVOURITE FOOD">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Total Count">
            <div class="table-style1">
              <p>Total Count is a count of the number of values of the selected column.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the total count of ID is:
                <span class="table-style3">5</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Maximum">
            <div class="table-style1">
              <p>Maximum is the biggest value of the selected column.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the maximum is:
                <span class="table-style3">24</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                  <template slot-scope="scope">
                    <span v-if="scope.row.LASTNAME === 'aaa'" style="color: #ff0000">{{ scope.row.age }}</span>
                    <span v-else>{{ scope.row.age }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Minimum">
            <div class="table-style1">
              <p>Minimum is smallest value of the selected colum.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the minimum is:
                <span class="table-style3">20</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                  <template slot-scope="scope">
                    <span v-if="scope.row.LASTNAME === 'zhang'" style="color: #ff0000">{{ scope.row.age }}</span>
                    <span v-else>{{ scope.row.age }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Average">
            <div class="table-style1">
              <p>Average is the average of the data values.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the Average of AGE is:
                <span class="table-style3">22</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="Median">
            <div class="table-style1">
              <p>Median is the middle value.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then the median of AGE is:
                <span class="table-style3">22</span>
              </p>
              <el-table
                :data="tableDataNull"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                  <template slot-scope="scope">
                    <span v-if="scope.row.LASTNAME === 'wang'" style="color: #ff0000">{{ scope.row.age }}</span>
                    <span v-else>{{ scope.row.age }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="TOP 10">
            <div class="table-style1">
              <p> The top ten most frequent occurrences in the data.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                Suppose we have the below data table, then cloum LASTNAME of  top 18 is:
                <span class="table-style3" style="font-size: 15px">(cao,3);(fan,2);(ding,2); (huang,2); (hua,1) (han,1) (li,1) (liu,1); (lv,1); (guan,1)</span>
              </p>
              <el-table
                :data="tableDataTop10"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="FRISTNAME"
                  label="FRISTNAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="LASTNAME"
                  label="LASTNAME">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!--          <el-tab-pane label="Rule Detection Count">定时任务补偿</el-tab-pane>-->
          <el-tab-pane label="Enum Detection Count">
            <div class="table-style1">
              <p>The Enum Detection Count is a statement of GROUP BY , which often used with aggregate functions
                (COUNT, MAX, MIN, SUM, AVG) to group the result-set by one or more columns.</p>
              <h5 class="table-style2">Example</h5>
              <p style="text-align: left;">
                We can use Enum Detection Count to search the lists the number of customers in each country in the
                following table:
              </p>
              <el-table
                :data="tableDataSQL"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="NAME"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="AGE">
                </el-table-column>
                <el-table-column
                  prop="country"
                  label="COUNTRY">
                </el-table-column>
              </el-table>
              <p class="text-left">
                <strong>Suppose Enum Expression is :</strong> SELECT COUNT(CUSTORMERID), COUNTRY FROM Customers GROUP
                BY COUNTRY;
              </p>
              <p class="text-left">
                The result is:
                <br>
                <template style="margin-left: 10px">
                  <kbd>COUNTRY |COUNT(CUSTOMERID)
                    <br> China |2
                    <br> Mexico |2
                    <br> UK |1
                  </kbd>
                </template>
              </p>
            </div>
          </el-tab-pane>
          <!--          <el-tab-pane label="Regular Expression Match">定时任务补偿</el-tab-pane>-->

        </el-tabs>

      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="showRuleVisible = false">取 消</el-button>
    <el-button type="primary" @click="showRuleVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'showRules',
  data () {
    return {
      showRuleVisible: false,
      vaType: null,
      title: 'rules',
      tableDataNull: [
        {
          id: 1,
          FRISTNAME: 'san',
          LASTNAME: 'zhang',
          age: 20
        }, {
          id: 2,
          FRISTNAME: 'si',
          LASTNAME: 'li',
          age: 21
        }, {
          id: 3,
          FRISTNAME: 'null',
          LASTNAME: 'wang',
          age: 22
        }, {
          id: 4,
          FRISTNAME: 'liu',
          LASTNAME: 'tang',
          age: 23
        }, {
          id: 5,
          FRISTNAME: 'null',
          LASTNAME: 'aaa',
          age: 24
        }
      ],
      tableDataTop10: [
        {
          id: 1,
          FRISTNAME: 'cao',
          LASTNAME: 'cao',
          age: 60
        }, {
          id: 2,
          FRISTNAME: 'zhi',
          LASTNAME: 'cao',
          age: 40
        }, {
          id: 3,
          FRISTNAME: 'hong',
          LASTNAME: 'cao',
          age: 20
        }, {
          id: 4,
          FRISTNAME: 'lao',
          LASTNAME: 'fan',
          age: 20
        }, {
          id: 5,
          FRISTNAME: 'kang',
          LASTNAME: 'fan',
          age: 20
        },
        {
          id: 6,
          FRISTNAME: 'feng',
          LASTNAME: 'ding',
          age: 20
        }, {
          id: 7,
          FRISTNAME: 'yi',
          LASTNAME: 'ding',
          age: 20
        }, {
          id: 8,
          FRISTNAME: 'zhong',
          LASTNAME: 'huang',
          age: 20
        }, {
          id: 9,
          FRISTNAME: 'gai',
          LASTNAME: 'huang',
          age: 20
        }, {
          id: 10,
          FRISTNAME: 'gai',
          LASTNAME: 'huang',
          age: 20
        }, {
          id: 11,
          FRISTNAME: 'tuo',
          LASTNAME: 'hua',
          age: 20
        }, {
          id: 12,
          FRISTNAME: 'xin',
          LASTNAME: 'han',
          age: 20
        },
        {
          id: 13,
          FRISTNAME: 'tong',
          LASTNAME: 'li',
          age: 20
        },
        {
          id: 14,
          FRISTNAME: 'bei',
          LASTNAME: 'liu',
          age: 20
        },
        {
          id: 15,
          FRISTNAME: 'bu',
          LASTNAME: 'lv',
          age: 20
        }, {
          id: 16,
          FRISTNAME: 'yu',
          LASTNAME: 'guan',
          age: 20
        }
      ],
      tableDataDistinct: [{
        id: 1,
        name: 'Lily',
        age: 20,
        food: 'APPLE'
      }, {
        id: 2,
        name: 'Lucy',
        age: 20,
        food: 'APPLE'
      }, {
        id: 3,
        name: 'Sam',
        age: 35,
        food: 'banana'
      }, {
        id: 4,
        name: 'David',
        age: 35,
        food: 'banana'
      }],
      tableDataSQL: [{
        id: 1,
        name: 'allen',
        age: 20,
        country: 'China'
      }, {
        id: 2,
        name: 'allen',
        age: 20,
        country: 'China'
      }, {
        id: 3,
        name: 'allen',
        age: 20,
        country: 'UK'
      }, {
        id: 4,
        name: 'allen',
        age: 20,
        country: 'Mexico'
      }, {
        id: 5,
        name: 'allen',
        age: 20,
        country: 'Mexico'
      }]
    }
  },
  methods: {
    init () {
      this.showRuleVisible = true
    },
    ngOnInit () {
      this.vaType = '2'
    }
  }
}
</script>

<style scoped>

.table > thead > tr.success > td {
  background-color: #77b300;
}

mark {
  background-color: #ff8800;
  padding: .2em;
}

h5 {
  font-size: 20px;
}

.table-style1 {
  margin-left: 10px;
  /*margin-top: -10px;*/
  word-break: break-word
}

.table-style2 {
  text-align: left;
  margin: 5px 0px 10px 5px;
}

.table-style3 {
  font-size: 20px;
  margin-left: 10px;
  color: #2f4f46;
}

.text-left {
  text-align: left;
}

.y-scrollable::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.y-scrollable::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
  background-color: #F5F5F5;
}

.y-scrollable::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #AAAAAA;
}
</style>
