<template>
  <div class="crop-table">
     <table class="area">
      <thead>
        <tr v-show="optionsType == 'mqjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">四类苗</th>
          <th class="minValue">三类苗</th>
          <th class="averageValue">二类苗</th>
          <th class="assessValue">一类苗</th>
          <th class="assessValue">云量</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'trsqjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">最大含水量</th>
          <th class="minValue">最小含水量</th>
          <th class="averageValue">平均含水量</th>
        </tr> 
        <tr v-show="optionsType == 'bcqjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">总面积</th>
          <th class="minValue">无风险</th>
          <th class="averageValue">低风险</th>
          <th class="assessValue">中风险</th>
          <th class="assessValue">高风险</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'qxjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">最大降水量</th>
          <th class="minValue">最小降水量</th>
          <th class="averageValue">平均降水量</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'qxzhjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">未受灾</th>
          <th class="minValue">轻度受灾</th>
          <th class="averageValue">中度受灾</th>
          <th class="assessValue">重度受灾</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'zwsb'">
          <th class="cityName">区域</th>
          <th class="maxValue">面积</th>
          <th class="minValue">占比</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'zsjc'">
          <th class="cityName">区域</th>
          <th class="maxValue">差</th>
          <th class="minValue">较差</th>
          <th class="averageValue">中等</th>
          <th class="assessValue">较好</th>
          <th class="assessValue">好</th>
          <th class="assessValue">很好</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'csdyg'">
          <th class="cityName">区域</th>
          <th class="maxValue">最大成熟度</th>
          <th class="minValue">最小成熟度</th>
          <th class="averageValue">平均成熟度</th>
        </tr>
        <tr class="trsqjc" v-show="optionsType == 'clyg'">
          <th class="cityName">区域</th>
          <th class="maxValue">最大量产</th>
          <th class="minValue">最小量产</th>
          <th class="averageValue">平均量产</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index+'mqjc'" v-show="optionsType == 'mqjc'">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
          <th class="assessValue">{{(item.weatherValue * Math.random()).toFixed(2)}}</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'trsqjc'" v-show="optionsType == 'trsqjc'">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index+'bcqjc'" v-show="optionsType == 'bcqjc'">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'qxjc'" v-show="optionsType == 'qxjc'">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'qxzhjc'" v-show="optionsType == 'qxzhjc'">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'zwsb'" v-show="optionsType == 'zwsb' && index < 5">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.zbValue}}%</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'zsjc'" v-show="optionsType == 'zsjc' && index < 5">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
          <th class="assessValue">{{item.assessValue}}</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'csdyg'" v-show="optionsType == 'csdyg' && index < 5">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.averageValue}}%</th>
          <th class="minValue">{{item.minValue}}%</th>
          <th class="averageValue">{{item.assessValue}}%</th>
        </tr>
        <tr class="trsqjc" v-for="(item, index) in tableData" :key="index+'clyg'" v-show="optionsType == 'clyg' && index < 5">
          <th class="cityName">{{item.cityName}}</th>
          <th class="maxValue">{{item.maxValue}}</th>
          <th class="minValue">{{item.minValue}}</th>
          <th class="averageValue">{{item.averageValue}}</th>
        </tr>
      </tbody>
     </table>
  </div>
</template>

<script>

export default {
  name: "echartsTable",
  props: {
    title: "拜泉县",
    optionsType:{
      type: String,
      default:'zwsb'
    }
  },
  mounted() {
  },
  data() {
    return {
      tableData:[
        {
          cityName: '高城镇',
          maxValue: 120,
          minValue: 82,
          averageValue: 90,
          assessValue: 92,
          weatherValue: 1,
          zbValue:22,
        },
        {
          cityName: '厉山镇',
          maxValue: 124,
          minValue: 83,
          averageValue: 97,
          assessValue: 106,
          weatherValue: 1,
          zbValue:23,
        },
        {
          cityName: '殷店镇',
          maxValue: 110,
          minValue: 90,
          averageValue: 91,
          assessValue: 100,
          weatherValue: 1,
          zbValue:17,
        },
        {
          cityName: '草店镇',
          maxValue: 113,
          minValue: 79,
          averageValue: 89,
          assessValue: 98,
          weatherValue: 1,
          zbValue:19,
        },
        {
          cityName: '小林镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
          zbValue:20,
        },
        {
          cityName: '淮河镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
          zbValue:20,
        },
        {
          cityName: '万和镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
        },
        {
          cityName: '尚市镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
        },
        {
          cityName: '唐县镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
        },
        {
          cityName: '吴山镇',
          maxValue: 126,
          minValue: 89,
          averageValue: 97,
          assessValue: 105,
          weatherValue: 1,
        }
      ]
    };
  },
  created() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.crop-table {
  margin-top: 10px;
    width: 100%;
    height: 100%;
    padding: 0 1.2vw;
  table, thead, tbody {
    display: block;
    width: 100%;
  }
  
  .area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    thead {
      padding: 5px 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 1vw;
      color: rgba(255,255,255,0.8);
      line-height: 27px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      border-bottom: 3px solid #8E9AAE;
    }
    tbody {
      flex: 1;
      tr {
        border-bottom: 1px dashed #8E9AAE;
      }
    }
    tr {
      display: flex;
      align-items: center;
      
      td,th{
        flex: 2;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 1vw;
        color: #FFFFFF;
        line-height: 53px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .cityName {
        flex: 3;
      }
      
    }
    .trsqjc{
      td,th{
        flex: 3;
      }
        
    }
    
  }
}
</style>
