<template>
  <div>
    <div class="search-bm-boder">
      <el-form
        :inline="true"
        ref="formInline"
        :model="formInline"
        class="demo-form-inline search-form"
      >
        <el-form-item label="年度:" prop="nd">
          <el-date-picker
            :picker-options="startDatePicker"
            value-format="yyyy"
            clearable
            v-model="formInline.tbrqKs"
            type="year"
            placeholder="选择年">
          </el-date-picker>
          <span>至</span>
          <el-date-picker  
            :picker-options="endDatePicker"
            value-format="yyyy"
            v-model="formInline.tbrqJs"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <div class="search-button">
          <span class="search-line"></span>
          <el-button type="primary" size="small" class="iconfont iconchaxun" @click="onSearch">查询</el-button>
          <el-button
            type="primary"
            @click="resetInfo()"
            size="small"
            class="iconfont iconzhongzhi"
          >重置</el-button>
        </div>
      </el-form>
    </div>

    <el-table border :data="tableData" stripe style="width:100%">
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <el-table-column prop="sczs" label="市场总数" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sl" label="商流" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cpl" label="成品粮" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="gydz" label="国有独资" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="gfz" label="股份制" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="my" label="民营" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cjl" label="成交量(万吨)" width="115" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cje" label="成交额(亿元)" width="115" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="nd" label="年度" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cz" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              @click="onDetail(scope.row,'sum',msStatus)"
              type="primary"
              size="small"
              class="operate_show_btn iconfont iconchakan2"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurPageChange"
      :current-page="pageForm.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageForm.total"
    ></el-pagination>
  </div>
</template>
<script>
import { selectChildByEntity } from "@/api/grainCirculationPrice/foodMarketConstruction";
export default {
  name: "LeagueCityList",
  data() {
    return {
      pageForm: {
        pageNum: 1,
        total: 0,
        pageSize: 10
      },
      formInline: {
        nd: "" // 日期
      },
      tableData: [],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      msStatus:"second"
    };
  },
  created() {
    this.onSearch();
  },
  methods: {
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formInline.tbrqJs) {
            //如果结束时间不为空，则小于结束时间
            return (
              new Date(self.formInline.tbrqJs).getTime() < time.getTime()
            );
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formInline.tbrqKs) {
            //如果开始时间不为空，则结束时间大于开始时间
            return (
              new Date(self.formInline.tbrqKs).getTime() > time.getTime()
            );
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },

    handleTabClick(tab, event) {
      console.log(tab, event, 123);
    },
    resetInfo() {
      this.formInline.tbrqKs = '';
      this.formInline.tbrqJs = ''
      this.onSearch();
    },
    onSearch() {
      let data = {
        ndStart: this.formInline.tbrqKs ? this.formInline.tbrqKs : "",
        ndEnd: this.formInline.tbrqJs ? this.formInline.tbrqJs : "",
        tbdwlx:
          sessionStorage.getItem("orgCode").length == 5
            ? 1
            : sessionStorage.getItem("orgCode").length == 8
            ? 2
            : ""
      };
      selectChildByEntity({ ...this.pageForm, ...data }).then(res => {
        if (res.infoCode == 200) {
          this.tableData = res.data.items;
          this.pageForm.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
    },
    onDetail(row, state,msStatus) {
      this.$router.push({
        path: "detail",
        query: { id: JSON.stringify(row), state: state,msStatus:msStatus }
      });
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val;
    },
    handleCurPageChange(val) {
      this.pageForm.pageNum = val;
    }
  }
};
</script>
<style scoped>
.dataStyle{
  width:250px!important;
}
</style>