<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-form :inline="true" :model="queryform"  label-width="88px" ref="queryform">
          <el-form-item label="标题：" label-width="56px" prop="data">
            <el-input placeholder="请输入" style="width:180px" v-model="queryform.data" clearable></el-input>
            <!-- <el-date-picker v-model="queryform.data" class="dateInputCompatible" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
            </el-date-picker> -->
          </el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <el-button type="primary" @click="getList" size="small" class="iconfont iconchaxun"> 查询</el-button>
            <el-button type="primary" @click="resetInfo('queryform')" size="small" class="iconfont iconzhongzhi"> 重置</el-button>
          </div>
        </el-form>

      </el-row>
    </div>
    <el-row>
      <el-table tooltip-effect="dark" align="center" border
        v-loading:body="isloading" :data="tableData"  @row-click="rowFun">
        <el-table-column type="index" :index="typeIndex" label="序号" width="100"></el-table-column>
        <el-table-column align="center"  label="标题" :show-overflow-tooltip="true" prop="title">
           <!-- <template slot-scope="scope"> -->
              <!-- <el-tooltip class="fl item" effect="light" content="查看" placement="top">
                 <el-button class="button operate_show_btn" type="primary" @click.stop="see(scope.row, '查看')">
                 </el-button>
               </el-tooltip> -->
              <!-- </template>  -->
        </el-table-column>
        <el-table-column align="center" label="操作时间" :show-overflow-tooltip="true" prop="updateTime"></el-table-column>
      </el-table>
      <!-- 分页开始 -->
      <div class="pag-right clearFix">
          <el-pagination
            class="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="limit.page"
            :page-sizes="[10,20,30,40]"
            :page-size="limit.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="limit.total"
          ></el-pagination>
        </div>
    </el-row>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="35%">
      <el-row style="margin-bottom:20px">
          <el-col  :span="24">
            <span class="span_right">标题：</span>
            <el-input v-model="tableText.title" style="width:370px"  clearable></el-input>
          </el-col>
      </el-row>
      <el-row style="margin-bottom:20px">
          <el-col  :span="24">
            <span class="span_right">附件：</span>
            <p style="display: inline-block;" @click="downBtn(tableText.annex)">
                <i class="el-icon-document"></i>
                {{fileName}}
              </p>
          </el-col>
      </el-row>
      <el-row style="margin-bottom:20px">
          <el-col  :span="24">
            <span class="span_right">预览：</span>
              <p style="display: inline-block;margin-left: 105px;">
                <img width="90%;"  :src="url" alt="">
              </p>
          </el-col>
      </el-row>
      <el-row style="margin-bottom:20px">
          <el-col :span="11" style="margin-left: 20px;">
            <span >操作人：</span>
            <el-input v-model="tableText.updateBy" style="width:150px" ></el-input>
          </el-col>
          <el-col  :span="12">
            <span >操作时间：</span>
            <el-input v-model="tableText.updateTime" style="width:150px" ></el-input>
          </el-col>
      </el-row>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      <!-- <span slot="footer" class="dialog-footer">
        
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
  import { weeklyList,fileAllFn } from '@/api/grainCirculationPrice/grainPriceQuotation/historyData/index'
  // import {weeklyList} from '@api/grainCirculationPrice/grainPriceQuotation/priceMovementTion/index'
  import { queryReportTime } from '@/api/grainCirculationPrice/grainPriceQuotation/weekQuotation/index'
  import { FileApi } from '@/api/index'
  export default {
    name: 'Daily',
    data() {
      return {
        url:'',
        dialogImageUrl: null, // 图片预览地址
        dialogVisible: false,
        peopleform:{},
        date:'1575550121',
        queryform: {
          data:''
        },
        fileName:'',
        tableText:{},
        tableData: [],
        limit: {
          page: 1,
          size: 10,
          total: 0
        },
        isloading: false,
      }
    },
    created() {
      this.getList();
    },
    methods: {
      downBtn(id){
                window.open(`${FileApi}/file/download?id=${id}`);
            },
      rowFun(row){
        this.dialogVisible = true
        this.tableText = row
        this.url = `${FileApi}/file/download?id=${row.annex}`
        fileAllFn(row.annex).then( res => {
          this.fileName = res.data[0].name;
          //  for (var j = 0; j < res.data.length; j++) {
          //     this.fileName = res.data[j].name;
          //   }
        })

        
        // this.$router.push({ path: 'weekPriceDetail', query: { id: row.id, startTime: row.startTime, endTime: row.endTime} })
      },
      resetInfo(formName) {
        this.$refs[formName].resetFields();
        this.getList()
      },
      // List init
      getList() {
        // const title = {
        //   "startTime": this.queryform.data[0],
        //   "endTime": this.queryform.data[1]
        // }
        const pageData = {
          page: this.limit.page,
          size: this.limit.size
        }
        //this.limit.page,this.limit.size,this.peopleform.title,this.date
        weeklyList(this.limit.page,this.limit.size,this.queryform.data).then(res => {
          this.tableData = res.data.resultList.map(({ updateTime, title, annex, id, updateBy }) => ({ updateTime:updateTime == null ? '' : updateTime.substring(0, 10), title, annex, id, updateBy }))
          console.log(this.tableData)
          this.limit.total = res.data.total
          this.isloading = false
        }).catch(function (error) {
          console.log(error)
        })
      },
      handleSizeChange(val) {
        this.limit.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.limit.page = val;
        this.getList();
      },
      typeIndex(index) {
        return index + (this.limit.page - 1) * this.limit.size + 1;
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
<style>
  .span_right{
    text-align: right;
    width: 100px;
    display: inline-block;
    color: #606266;
  }
  .weekprice .el-table tr.el-table__row{ cursor: pointer;}
</style>
