<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
          <el-form-item label="发布日期:">
            <el-date-picker
              class="inputCompatible"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="formInline.fbsj"
              clearable
              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="getList">查询</el-button>
            <el-button type="primary" @click="resetInfo('formInline')" size="small" class="iconfont iconzhongzhi"
              >重置</el-button
            >
          </div>
        </el-form>
      </el-row>
    </div>

      <el-row style="background: rgb(237, 245, 253); line-height: 50px;margin-bottom: 10px;">
        <el-button type="primary" @click="addData" class="iconfont iconxinzeng11" size="small">新增</el-button>
      </el-row>
    <el-table :data="tableData" stripe v-loading="listLoading" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号" width="70">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fbsj" label="发布日期"></el-table-column>
      <el-table-column align="center" prop="zdztmc" label="是否置顶"></el-table-column>
      <el-table-column align="center" prop="fbr" label="发布人"></el-table-column>
      <el-table-column align="center" prop="fbztmc" label="状态"></el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              type="primary"
              size="small"
              class="iconfont iconchakan2 operate_show_btn"
              @click="handleDetail(scope.row, 'detail')"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="编辑" placement="top">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.fbztmc == '未发布'"
              class="iconfont iconxiugai operate_edit_btn"
              @click="handleDetail(scope.row, 'edit')"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="发布" placement="top">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.fbztmc == '未发布'"
              class="iconfont iconfabu operate_issued_btn"
              @click="submit(scope.row, 'edit')"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.fbztmc == '未发布'"
              class="iconfont iconshanchu operate_delete_btn"
              @click="deleteData(scope.row, 'edit')"
            ></el-button>
          </el-tooltip>

          <!--          <el-button type="text" size="small" @click="handleDetail(scope.row,'detail')" class="iconfont iconchaxun">查看</el-button>-->
          <!--          <el-button type="text" v-if="scope.row.fbztmc == '未发布'" size="small" @click="handleDetail(scope.row,'edit')" class="iconfont iconxiugai">编辑</el-button>-->
          <!--          <el-button type="text" v-if="scope.row.fbztmc == '未发布'" size="small" @click="deleteData(scope.row)" class="iconfont iconshanchu">删除</el-button>-->
          <!--          <el-button type="text" v-if="scope.row.fbztmc == '未发布'" size="small" @click="submit(scope.row)" class="iconfont icontijiao">发布</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>
  </div>
</template>
<script>
import {
  selectFarmProduceTransactionPageList,
  deleteFarmProduceTransaction,
  updateFarmProduceTransactionState
} from '@/api/grainCirculationPrice/tradingCenter/agricultureProducts'

export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      pageForm: {
        page: 1,
        size: 10,
        total: 0
      },
      listLoading: true
    }
  },
  methods: {
    getList() {
      let data = {
        fbsj: this.formInline.fbsj,
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size
      }
      //列表接口
      selectFarmProduceTransactionPageList(data).then(res => {
        console.log(res.data)
        if (res.infoCode == 200) {
          this.listLoading = false
          this.tableData = res.data.list
          this.pageForm.total = res.data.total
        }
      })
    },
    addData() {
      this.$router.push({
        name: 'agricultureProductsDetail'
      })
    },
    handleDetail(row, state) {
      this.$router.push({
        name: 'agricultureProductsDetail',
        query: { id: row.hqbm, state: state }
      })
    },
    deleteData(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        deleteFarmProduceTransaction({ hqbm: row.hqbm }).then(res => {
          if (res.infoCode == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          }
        })
      })
      .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      
    },
    submit(row) {
      // return false
      updateFarmProduceTransactionState({ hqbm: row.hqbm, fbzt: 1, fbztmc: '已发布', status: 1 }).then(res => {
        console.log(res, '发布后的数据')
        if (res.infoCode == 200) {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    resetInfo(formName) {
      // this.$refs[formName].resetFields();
      this.formInline.fbsj = ''
      this.getList()
    },
    handleSizeChange(val) {
      this.pageForm.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageForm.page = val
      this.getList()
    }
  },
  created() {
    this.getList()
  }
}
</script>
<style scoped></style>
