<template>
  <!-- 钢瓶状态 -->
  <div class="card_cylinder_condition">
    <!-- 重瓶区域 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_green">重瓶区</div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input" placeholder="输入单位内编号搜索"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(1)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div class="card_red">删除</div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in">
          <pagination :total="Pagination.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
            :currentPage="Pagination.PageIndex" @changeSize="changeSize" @changeCurrent="changeCurrent">
          </pagination>
        </div>
      </div>
    </div>
    <!-- 空瓶区 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_yellow">空瓶区</div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input" placeholder="输入单位内编号搜索"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(2)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData1.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData1" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div class="card_red">删除</div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in">
          <pagination :total="Pagination1.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
            :currentPage="Pagination1.PageIndex" @changeSize="changeSize1" @changeCurrent="changeCurrent1">
          </pagination>
        </div>
      </div>
    </div>
    <!-- 不合格瓶区 -->
    <div class="card_bottle">
      <div class="card_district">
        <div class="herderArea center_in title_red">不合格瓶区</div>
        <div class="same_row_in card_add_cylinder">
          <el-input style="margin-right: 10px;" v-model="input" placeholder="输入单位内编号搜索"></el-input>
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="AddCylinder(3)">添加</el-button>
        </div>
        <div style="width: calc(100% - 30px);padding: 0px 15px 15px 15px;" v-if="bottleData2.length > 0">
          <div class="card_item_condition" v-for="(item,index) in bottleData2" :key="index">
            <div class="same_row_in">
              <span class="item_index">{{index + 1}}</span>
              <div class="card_item_code">{{item.inner_code}}</div>
            </div>
            <div class="card_red">删除</div>
          </div>
        </div>
        <div v-else><el-empty :image="require('../../assets/image/empty.png')" description="暂无燃气瓶"></el-empty></div>
        <div class="card_pagination center_in">
          <pagination :total="Pagination2.Total" :pagerCountnum="5" layout="prev, pager, next, jumper"
            :currentPage="Pagination2.PageIndex" @changeSize="changeSize2" @changeCurrent="changeCurrent2">
          </pagination>
        </div>
      </div>
    </div>
    <!-- 添加钢瓶 -->
    <el-dialog title="添加" :visible.sync="staffDialogVisible" width="600px" :close-on-click-modal="false"
      @close="closeDialog">
      <forms ref="childRules" :formNewList="formRuleList" :ruleForm="ruleForm" labelWidth="100px"></forms>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCylinderStatus,
    addCylinderStatus,
    delCylinderStatus
  } from '@/api/condition'
  import pagination from '@/components/pagination'
  import forms from '@/components/forms'
  export default {
    components: {
      pagination,
      forms
    },
    data() {
      return {
        input: '',
        // 重瓶
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
          Total: 0,
        },
        bottleData: [],
        // 空瓶
        Pagination1: {
          PageIndex: 1,
          PageSize: 10,
          Total: 0,
        },
        bottleData1: [],
        // 不合格瓶区
        Pagination2: {
          PageIndex: 1,
          PageSize: 10,
          Total: 0,
        },
        bottleData2: [],
        staffDialogVisible: false,
        formRuleList: [],
        ruleForm: {
          name: '',
          price: '',
          remark: '',
        },
        confirmLoading: false,
      }
    },
    mounted() {
      this.getList(1)
      this.getList1(2)
      this.getList2(3)
    },
    methods: {
      getList(state) {
        getCylinderStatus({
          status: state,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData = res.data.list
            this.Pagination.Total = res.data.count
          }
        })
      },
      getList1(state) {
        getCylinderStatus({
          status: state,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData1 = res.data.list
            this.Pagination1.Total = res.data.count
          }
        })
      },
      getList2(state) {
        getCylinderStatus({
          status: state,
        }).then(res => {
          if (res.code == 200) {
            this.bottleData2 = res.data.list
            this.Pagination2.Total = res.data.count
          }
        })
      },
      // 添加钢瓶
      AddCylinder(type) {
        console.log(type, 222)
        this.staffDialogVisible = true
      },
      handleAdd() {

      },
      // 重瓶区域
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
      // 空瓶区
      changeSize1(val) {
        this.Pagination1.PageSize = val
        this.getList1()
      },
      changeCurrent1(val) {
        this.Pagination1.PageIndex = val
        this.getList1()
      },
      // 不合格瓶区
      changeSize2(val) {
        this.Pagination2.PageSize = val
        this.getList2()
      },
      changeCurrent2(val) {
        this.Pagination2.PageIndex = val
        this.getList2()
      },
      // 弹窗关闭
      closeDialog() {
        this.staffDialogVisible = false
      }
    }
  }
</script>

<style lang="scss">
  .card_cylinder_condition {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .card_bottle {
    padding: 10px 10px 15px 10px;
    flex: 1;
  }

  .card_district {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    // background-color: #354233;
    background-color: rgba(13, 162, 203, 0.1);
    border-radius: 10px;
  }

  .herderArea {
    font-size: 22px;
    font-weight: 500;
    margin-top: 15px;
    width: 250px;
    height: 35px;
    background: url(../../assets/image/decorate.png) no-repeat;
    background-size: 100% 100%;
  }

  .card_add_cylinder {
    width: calc(100% - 30px);
    margin: 15px;
  }

  .card_pagination {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    overflow: hidden;
  }

  .card_item_condition {
    margin: 10px 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item_index {
    color: #fff;
    font-size: 18px;
  }

  .card_item_code {
    margin-left: 10px;
    color: #fff;
    font-size: 18px;
  }

  .card_red {
    cursor: pointer;
    color: #F56C6C;
    font-size: 18px;
  }

  .title_green {
    color: #67C23A;
  }

  .title_yellow {
    color: #E6A23C;
  }

  .title_red {
    color: #F56C6C;
  }
</style>
