<template>
  <div class="dashboard-container">
    <el-form  class="demo-form-inline mar-l-0 listStyle" style="width:100%;" :model="form" ref="form">
      <div class="all-row-b5" style="margin-bottom:10px;">
        <el-row>
          <el-col :span="7">
            <el-form-item label="统计日期" class="fourLabel">
              <el-date-picker v-model="form.value1" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="价格类型：" placeholder="请输入" prop="takTask" class="pubWid">
              <el-select v-model="form.takTask" clearable placeholder="全部" class="search-width">
                <el-option v-for="item in dataDictioPubArr" :key="item.cogKey" :label="item.cogValue"
                  :value="item.cogKey">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="统计品种：" prop="runState">
              <el-select v-model="form.runState" clearable placeholder="全部" class="search-width">
                <el-option v-for="item in dataDictioPubArr" :key="item.cogKey" :label="item.cogValue"
                  :value="item.cogKey">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button class="outButton" icon="el-icon-search" size="primary" type="primary">查询</el-button>
          <el-button class="outButton" icon="el-icon-search" size="primary" type="primary">清空</el-button>
          <el-button class="outButton" icon="el-icon-plus" size="small" @click="addBtn" type="primary">导出</el-button>
          </el-button>

        </el-row>
      </div>
    </el-form>
    <div>
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="12">
          <header class="header-title2">粮食类 走势图</header>
          <div class="tx-container">
            <div class="echarts-box" id="blockMap">

            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <header class="header-title2">粮食类 走势表</header>
          <div class="tx-container">
            <ul class="notice-ul mar1">
              <li v-for="i in 6" :key="i">
                <el-row>
                  <el-col :span="19">通告</el-col>
                  <el-col class="notice-time" :span="5">2019-03-08</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="12">
          <header class="header-title2">
            油脂类 走势图 <div class="header-right">
              期数：
              <el-select size="small" v-model="value" placeholder="请选择" style="width:120px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </header>
          <div class="tx-container">
            <div class="mar1">
            <!-- charts -->
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <header class="header-title2">
            油脂类 走势表
            <!-- <div class="header-right">
              日期：
              <el-date-picker size="small" style="width:240px;" v-model="timeVal" type="daterange" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div> -->
          </header>
          <div class="tx-container">
              <el-table tooltip-effect="dark" style="width: 100%;margin-top:10px;" align="center" border stripe
                highlight-current-rowv-loading="tableLoading" :data="tableData">
                <el-table-column align="center" label="指标" :show-overflow-tooltip="true" prop="planFileName">
                </el-table-column>
                <el-table-column align="center" label="标准" :show-overflow-tooltip="true" prop="migrationDate">
                </el-table-column>
                <el-table-column align="center" label="收购价" :show-overflow-tooltip="true" prop="city"></el-table-column>
                <el-table-column align="center" label="出库价" :show-overflow-tooltip="true" prop="findingsAudit">
                </el-table-column>
                <el-table-column align="center" label="出厂价" :show-overflow-tooltip="true" prop="city"></el-table-column>
                <el-table-column align="center" label="批发价" :show-overflow-tooltip="true" prop="findingsAudit">
                </el-table-column>
                <el-table-column align="center" label="零售价" :show-overflow-tooltip="true" prop="findingsAudit">
                </el-table-column>
              </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import echarts from 'echarts'

  export default {
    name: 'Daily',
    data() {
      return {
        form: {},
        options: [{
          value: '第一周',
          label: '第一周'
        }, {
          value: '第二周',
          label: '第二周'
        }],
        value: '',
        tableData: [{
          index: 1
        }],
        yearArr: [{
          index: 1,
          value: '发布'
        }],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: [],
        status: [{
          index: 1,
          dictName: '未提交',
        }, {
          index: 2,
          dictName: '已提交',
        }, {
          index: 3,
          dictName: '审核通过',
        }, {
          index: 4,
          dictName: '驳回',
        }],
        dataDictioPubArr: [{
          index: 1
        }],
        tableData: [{
          index: 1
        }],
        limit: {
          page: 1,
          size: 10,
          total: 0
        }
      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    mounted() {
      this.createBlock()
    },
    methods: {
      see(row) {

      },
      handleChangeSize(value) {

      },
      handleCurrentChangePage(value) {
      },
      addBtn() {
        this.$router.push({ path: '/dailyManage/main-detail' })
      },
      createBlock(dataName, dataValue) {
        console.log(dataName)
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('blockMap'));
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 20
          },
          toolbox: {
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '白麦',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '红麦',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '混合麦',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '稻谷',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '大豆',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header-title2 {
    width: 100%;
    height: 44px;
    line-height: 44px;
    color: #fff;
    background: #bbcede;
    padding-left: 5px;
    /* background-image: url("../../../assets/small.png"); */
    /* background-repeat: no-repeat; */
    /* background-size: 100% 100%; */
    /* box-sizing: border-box; */
    /* padding-left: 20px; */
    /* position: relative; */
  }

  .header-right {
    position: absolute;
    right: 10px;
    top: 0px;
  }

  .tx-container {
    width: 100%;
    height: 300px;
    border: 1px solid #eef2f7;
  }

  .mar1 {
    padding: 0 10px;
  }

  .echarts-box {
    width: 100%;
    height: 100%;
  }

  .user-row img {
    max-width: 100%;
    max-height: 100%;
    margin-top: 15px;
  }

  .user-ul {
    padding: 0;
    margin: 0;
  }

  .user-ul li {
    list-style: none;
    color: #333;
    padding: 14px 0px 10px;
    font-size: 14px;
    border-bottom: 1px dotted #ccc;
  }

  .notice-ul {
    padding: 0;
    margin: 0;
  }

  .notice-ul li {
    list-style: none;
    color: #333;
    padding: 14px 10px 10px;
    font-size: 14px;
    border-bottom: 1px dotted #ccc;
  }

  .notice-time {
    text-align: center;
  }

  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>