<template>
  <div class="app-container">
    <!-- <router-view /> -->
    <div class="header boxShadow">
      <!-- <div class="header-title">协议管理</div> -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="粮库名称" prop="name">
          <el-input v-model="form.orgName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item class="fr">
          <el-button @click="search">查询</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <van-list>
      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
        <div class="list-main">
          <div class="list-content">
            <van-row class="content-1">
              <van-col span="6">粮库名称: <span>{{item.orgName}}</span></van-col>
              <van-col span="6">识别码：<span>{{item.orgCode}} </span></van-col>
              <van-col span="6">联系人: <span>{{item.orgContacts}} </span></van-col>
            </van-row>
            <van-row class="content-1">
              <van-col span="6">企业规模: <span>{{item.orgScale}} </span></van-col>
              <van-col span="6">所在地区: <span>{{item.orgArea}} </span></van-col>
              <van-col span="6">行业: <span>{{item.orgTrade}}</span></van-col>
            </van-row>
          </div>
          <div class="list-btns">
            <el-button type="primary" @click="handleDetail(item)">详情</el-button>
            <el-button type="primary" @click="handleEdit(item)">修改</el-button>
            <el-button type="primary" @click="handleDelete(item.id)">删除</el-button>
          </div>
        </div>
      </div>
    </van-list>
    <div class="pagination-container">
      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit"
                     :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange"
                     @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>

<script>
  import {getPageList, deleteById} from '@/api/unitInfo/index.js'

  export default {
    data() {
      return {
        form: {
          id: '',
          orgName: '',
          orgTrade: '',
          orgContacts: '',
          orgArea: '',
          orgIntroduction: '',
          orgCode: '',
          orgScale: '',
          zipCode: '',
          detailedAddress: ''
        },
        list: [],
        listQuery: {
          condition: "",
          page: 1,
          limit: 10,
          total: 10,
        }
      }
    },
    created() {

    },
    mounted() {
      this.getList()
    },
    methods: {
      // 检索
      search() {
        this.getList()
      },
      getList() {
        // 查询条件
        let data = {
          pageIndex: this.listQuery.page,
          pageSize: this.listQuery.limit,
          condition: this.form.orgName.trim()
        };
        // 调用接口
        getPageList(data).then(res => {
          if (res.code === 200) {
            this.list = res.data.records;
            this.listQuery.limit = res.data.size;
            this.listQuery.total = res.data.total;
          }
        }).catch(err => [
          console.log(err)
        ])
      },
      // 新增
      handleAdd() {
        let onlyFlag = false;
        this.$router.push({
          path: `/OrgInfoAdd`,
          name: 'OrgInfoAdd',
          params: {
            onlyFlag: onlyFlag,
            orgInfo: this.form
          }
        })
      },
      // 修改
      handleEdit(item) {
        let onlyFlag = false;
        this.$router.push({
          path: `/OrgInfoEdit`,
          name: 'OrgInfoEdit',
          params: {
            onlyFlag: onlyFlag,
            orgInfo: item
          }
        })
      },
      // 详情
      handleDetail(item) {
        this.$router.push({
          path: '/OrgInfoCheck',
          name: 'OrgInfoCheck',
          params: {
            orgInfo: item,
            onlyFlag: true
          }
        })
      },
      // 删除
      handleDelete(id) {
        deleteById(id).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.error("删除失败");
          }
        }).catch(err => {
          console.log(err);
        })
      },
      // 页码
      sizeChange(v) {
        this.listQuery.limit = v;
        console.log(`每页 ${v} 条`);
        this.list.splice(v, this.list.length - 1)
      },
      // 翻页
      pageChange(v) {
        this.listQuery.page = v;
        console.log(`当前页: ${v}`);
        this.getList()
      },
    }
  }
</script>
<style lang='scss' scoped>
  .boxShadow {
    box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
  }

  ::v-deep .van-notice-bar {
    font-weight: 600;
    padding: 0;
    cursor: pointer;
  }

  .header {
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    // height: 160px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    .header-title {
      font-size: 14px;
      font-weight: 600;
      padding-left: 10px;
      border-left: 4px solid #5283e7;
    }
    .van-notice-bar {
      padding: 10px 0 10px 0;
    }
    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }
      .fr {
        float: right;
      }
    }
  }

  .list {
    background-color: #fff;
    border-radius: 15px;
    margin-top: 10px;
    .list-main {
      padding-left: 15px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .list-title {
        font-size: 15px;
        font-weight: 700;
        padding: 10px 0;
      }
      .list-content {
        width: 78%;
        padding: 10px 10px 10px 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .content-1 {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          // padding: 5px 0;
          strong {
            color: #d24848;
          }
          .text-colorc {
            color: #b8b8b8;
          }
        }
        .content-1:nth-last-child(1) {
          padding-bottom: 10px;
        }
      }
      .list-btns {
        width: 22%;
        background-color: #edf2fd;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }
</style>
