<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="tbrq">
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="daterange"
            v-model="formInline.tbrq"
            range-separator="至"
            start-placeholder="开始日期"
            end-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('formInline')"
            size="small"
            class="iconfont iconzhongzhi"
          >重置</el-button>
        </div>
      </el-form>
    </div>
    <el-row style="background: rgb(237, 245, 253); line-height: 50px;margin-bottom: 10px;">
      <el-button type="primary" class="iconfont iconxinzeng11" size="small" @click="handleClick(msStatus)">新增</el-button>
    </el-row>
    <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="tbdwbmmc" label="填报单位" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sczs" label="市场总数" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cjl" label="成交量（万吨）" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cje" label="成交额（亿元)" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="tbrbmmc" label="填报人" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="tbrq" label="填报日期" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ztbmmc" label="状态" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              @click="onDetail(scope.row,'detail',msStatus)"
              type="primary"
              size="small"
              class="operate_show_btn iconfont iconchakan2"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="编辑" placement="top">
            <el-button
              @click="onDetail(scope.row,'edit',msStatus)"
              type="primary"
              size="small"
              v-show="scope.row.ztbm == 0"
              class="operate_edit_btn iconfont iconxiugai1"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="上报" placement="top">
            <el-button
              @click="onsubmit(scope.row)"
              type="primary"
              size="small"
              v-show="scope.row.ztbm == 0"
              class="operate_issued_btn iconfont iconshangbao"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top">
            <el-button
              @click="onDelete(scope.row)"
              type="primary"
              size="small"
              v-show="scope.row.ztbm == 0"
              class="operate_delete_btn iconfont iconshanchu"
            ></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 {
  selectPageByEntity,
  updateStatusByEntity,
  deleteByEntity
} from "@/api/grainCirculationPrice/foodMarketConstruction";
export default {
  name: "CountyList",
  data() {
    return {
      msStatus:'third',
      pageForm: {
        pageNum: 1,
        total: 0,
        pageSize: 10
      },
      formInline: {
        tbrq: "" // 申请日期
      },
      tableData: []
    };
  },
  created() {
    this.onSearch();
  },
  methods: {
    handleClick(msStatus) {
      console.log(msStatus)
      this.$router.push({
        path: "detail",
        query: {msStatus:msStatus }
      });
    },
    onsubmit(row) {
      updateStatusByEntity({ jsbm: row.jsbm, ztbm: 1, ztbmmc: "已上报" }).then(
        res => {
          if (res.infoCode == 200) {
            this.$message({
              message: "上报成功",
              type: "success"
            });
            this.onSearch();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        }
      );
    },
    onDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        deleteByEntity({ jsbm: row.jsbm })
        .then(res => { 
          if (res.infoCode == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.onSearch();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        })
      })
      
      .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleTabClick(tab, event) {
      console.log(tab, event, 123);
    },
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.onSearch();
    },
    onSearch() {
      let data = {
        tbrqStart: this.formInline.tbrq ? this.formInline.tbrq[0] : "",
        tbrqEnd: this.formInline.tbrq ? this.formInline.tbrq[1] : "",
        tbdwlx:
          sessionStorage.getItem("orgCode").length == 5
            ? 0
            : sessionStorage.getItem("orgCode").length == 8
            ? 1
            : 2
      };
      selectPageByEntity({ ...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: row.jsbm, state: state,msStatus:msStatus }
      });
      // this.$router.push({
      //   path: "detail",
      //   query: { id: row.jsbm, state: state,msStatus:msStatus }
      // });
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val;
    },
    handleCurPageChange(val) {
      this.pageForm.pageNum = val;
    }
  }
};
</script>