<template>
  <div class="dashboard-container">
    <!-- <el-row>
        <el-col :span="9">
          <el-button class="outButton" icon="el-icon-search" size="medium" type="primary">提交</el-button>
        </el-col>
      </el-row>  -->
      <el-form size="small" :data="detailData">
          <el-row style="margin:20px;">
            <el-col :span="8" class="colClass">
              <el-form-item label="上报地区：" label-width="130px" label-position="left">
                <div>{{detailData.deptName}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colClass">
              <el-form-item label="行政区划代码：" label-width="130px" label-position="left">
                <div>{{detailData.areaCode}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colClass">
              <el-form-item label="上报监测点：" label-width="130px" label-position="left">
                <div>{{detailData.orgName}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin:20px;">
            <el-col :span="8" class="colClass">
              <el-form-item label="监测点负责人：" label-width="130px" label-position="left">
                <div>{{detailData.swsSerial}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colClass">
              <el-form-item label="填报人：" label-width="130px" label-position="left">
                <div>{{detailData.userName}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colClass">
              <el-form-item label="填报起止时间：" label-width="130px" label-position="left" style="font-size: 8px;">
                <span>{{beginDate}}</span> 至<span>{{endDate}}</span>
                <!-- <div>{{detailData.sbkssj}}</div> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    <el-row>
      <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 type="selection" wjgthlkjhgfdsaasdfghjkjhggfdsa≈cvbnm,./jjmnn9u89idth="50"></el-table-column> -->
        <el-table-column type="index" :index="typeIndex" label="序号" width="40"></el-table-column>
        <el-table-column align="center" label="指标类型" :show-overflow-tooltip="true" prop="pzlb" width="50">
        </el-table-column>
        <el-table-column align="center" label="指标名称" :show-overflow-tooltip="true" prop="pzmc">
        </el-table-column>
        <el-table-column align="center" label="计量标准" :show-overflow-tooltip="true" prop="jlbz">
        </el-table-column>
        <el-table-column align="center" label="计量单位" :show-overflow-tooltip="true" prop="jldw"></el-table-column>
        <el-table-column prop="state" label="产地" align="left" width="120">
         <template slot-scope="scope">
            <el-input style="width:100%" clearable size="small" v-model="scope.row.cd" placeholder="请输入内容"
              :disabled="isShow">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="产地简称" align="left" width="90">
          <template slot-scope="scope">
            <el-input style="width:100%" clearable size="small" v-model="scope.row.cdxzqhbm" placeholder="请输入内容"
              :disabled="isShow">
            </el-input>
          </template>
        </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="pp" width="60"></el-table-column>
        <el-table-column prop="state" label="价格水平" align="left" width="200">
          <template slot-scope="scope">
            <div v-for="(data, index) in scope.row.priceDedailInfoVOList" :key="index">
              <span style="margin-left: 5px; padding:10px 0;display: inline-block" >{{ data.jglx }} :</span>
              <span>{{ data.bqjg }}</span>
            </div>
            <!-- <div v-if="scope.row.priceMap.priceType2" class="setBottm">
              <span style="width:80px; display:inline-block;">　{{scope.row.priceMap.priceType2}}:</span>
              <el-input style="width:50%;margin-left: 5px;" clearable size="small" v-model="scope.row.priceMap.nowPrice2"
                placeholder="请输入内容" :disabled="isShow">
              </el-input>
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="state" label="价格环比" align="left" width="200">
          <template slot-scope="scope">
             <div v-for="(data, index) in scope.row.priceDedailInfoVOList" :key="index">
              <span>{{ data.jglx }} :</span>
              <span v-if="data.sqjg == null || data.sqjg == 0"> </span>
              <span v-else style="width:50%;margin-left: 5px; padding:10px 0;display: inline-block" :class="data.hbzzl > data.momVal ? 'act' : ''"> {{ data.hbzzl = (data.bqjg / data.sqjg).toFixed(2) }}</span>
            </div>
            <!-- <div v-if="scope.row.lastPriceMap.priceType2" class="setBottm">
              <span style="width:80px; display:inline-block;">　{{scope.row.lastPriceMap.priceType2}}:</span>
              <el-input style="width:50%;margin-left: 5px;" clearable size="small" v-model="scope.row.lastPriceMap.lastPrice2"
                placeholder="" :disabled="!isShow">
              </el-input>
            </div> -->
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="价格水平" :show-overflow-tooltip="true" prop="bqjg"></el-table-column> -->
        <!-- <el-table-column align="center" label="价格环比" :show-overflow-tooltip="true" prop="sqjg"></el-table-column> -->
        <el-table-column align="center" label="备注" :show-overflow-tooltip="true" prop="bjyy"></el-table-column>

      </el-table>
    </el-row>
    <div style="text-align: center;margin-top:10px;">
      <!-- <el-button type="primary" @click="submitData">
        <i class="iconfont">
          &#xe681;
        </i>
        <span> 提交</span>
      </el-button> -->
      <el-button type="primary" @click="returnList">
        <i class="iconfont iconfanhui"></i>
        <span> 返回</span>
      </el-button>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { showDataLists, saveDataLists } from '@/api/grainCirculationPrice/monitorWarning/index'
  import { Message } from 'element-ui';

  export default {
    name: 'Daily',
    data() {
      return {
        isShow: false,
        detailData: {
          // sbdq: sessionStorage.getItem('deptName'),
          // xzqhbm: sessionStorage.getItem('userCode'),
          // jcd: sessionStorage.getItem('deptName'),
          // swsSerial: sessionStorage.getItem('userName'),
          // swsName: '111'
        },
        peopleform: {},
        yearArr: [{
          index: 1,
          value: '发布'
        }],
        status: [{
          index: 1,
          dictName: '未提交',
        }, {
          index: 2,
          dictName: '已提交',
        }, {
          index: 3,
          dictName: '审核通过',
        }, {
          index: 4,
          dictName: '驳回',
        }],
        dataDictioPubArr: [{
          index: 1
        }],
        tableData: [],
        limit: {
          page: 1,
          size: 10,
          total: 0
        },
        // lolist:[],
        arrList: [],
        endDate: '',
        beginDate: ''
      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    created() {
      this.showList()
      this.getDate()
    },
    methods: {
      submitData() {
        const data = {
          // 'sbdq': this.detailData.sbdq,
          // 'xzqhbm': this.detailData.xzqhbm,
          // 'jcd': this.detailData.jcd,
          'swsSerial': this.detailData.swsSerial,
          'priceInfoVOList': this.tableData,
          'sbjssj': this.endDate,
          'sbkssj': this.beginDate,
          'bblxId': 'LtdXKgAUOJ3D7tpkHxP',
          'lcid':'1'

        }
        console.log(data)
        saveDataLists(data).then(res => {
          if (res.status === 'SUCCESS') {
            Message({
              message: '新增成功！',
              type: 'success',
            });
            // this.returnList()
          } else {
            // this.butisloding = false
            Message({
              message: res.msg,
              type: 'warning',
            });
          }
        })
      },
      getDate() { 
        // 格式化日期类型 为sting 
        Date.prototype.format = function (format) {
          var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(), //day
            "H+": this.getHours(), //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
            "S": this.getMilliseconds() //millisecond
          }

          if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          }

          for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
              format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            }
          }
          return format;
        }

        // 获取当前周 （工作日的周）
        let now = new Date();
        let nowTime = now.getTime();
        let day = now.getDay();
        let oneDayLong = 24 * 60 * 60 * 1000; 
        let MondayTime = nowTime - (day - 1) * oneDayLong;
        let SundayTime = nowTime + (5 - day) * oneDayLong; 
        this.beginDate = new Date(MondayTime).format("yyyy-MM-dd ") 
        this.endDate = new Date(SundayTime).format("yyyy-MM-dd ")
        // this.beginDate = new Date(MondayTime).format("yyyy-MM-dd HH:mm:ss") 
        // this.endDate = new Date(SundayTime).format("yyyy-MM-dd HH:mm:ss")
      },
      showList() {
        showDataLists().then(res => {
          this.tableData = res.data.list;
          this.detailData = res.data; 
          //       this.tableData.forEach((val) => {
          //               if (val.lyjgmxInfoVOList !== "") {
          //                   this.arrList.push(val.lyjgmxInfoVOList)
          //               }
          //           })
          //  console.log(this.arrList)
          // for(const i =0;i<this.tableData.)
          //  this.volist = res.data.lyjgmxInfoVOList

        })
      },

      see(row) {

      },
      returnList(){
        this.$router.push({ name: 'monitorWarning' })
      },
      handleChangeSize(value) {

      },
      handleCurrentChangePage(value) {
      },
      addBtn() {
        this.$router.push({ path: '/onlineContribute/detail' })
      },
      typeIndex(index) {
        return index + (this.limit.page - 1) * this.limit.size + 1;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .setBottm {
    margin-bottom: 5px;
    margin-top: 5px
  }

  .colClass {
    border: 1px solid #e6e7e8;
  }

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

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