<template>
    <div class="app-container">

      <div class="bor-bai" v-for="(item,index) in gunList" :key="index">
        <div class="box-top">
          <div class="title_">{{item.oilType}} {{item.oilName}}</div>
          <div>
            <el-button
              type="primary"
              style="background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%);"
              icon="el-icon-plus"
              @click="gunAdd(item.numberId)"
              v-hasPermi="['oilConfig:oilGun:list:add']"

            >新增油枪</el-button>
          </div>
        </div>
        <div class="conten-bottom">
          <div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' ,'boxborder': item.status == '启用' }"  v-for="(item,index) in item.oilGunList" :key="index">
            <div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">
              <div>{{item.tankName}}</div>
              <div style="cursor: pointer" ><i class="el-icon-edit-outline"
                                               v-hasPermi="['oilConfig:oilGun:list:update']"
                                               @click="gunEdit(item)"></i>
                <i class="el-icon-delete"
                   v-hasPermi="['oilConfig:oilGun:list:del']"
                   @click="delGun(item.id)"></i></div>
            </div>

            <img v-if="item.status == '启用'" class="cardbox-rd" src="./imgs/r-img.png" alt="">

            <div class="cardbox-title">
              <div class="cardbox-gunName">{{item.gunName}}</div>
            </div>
            <div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">
              <!--                <div>ID:{{ item.id }}</div>-->
            </div>
            <template v-if="item.status == '启用'">
              <div class="cardboxb" v-if="item.oilMachineGunNumber != null  ">
                <div >{{item.oilMachineGunNumber}}</div>
              </div>
            </template>


          </div>
        </div>


      </div>





<!--      <el-card class="box-card">-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span>油枪管理</span>-->
<!--        </div>-->

<!--        <div class="conten-box" v-for="(item,index) in gunList" :key="index">-->
<!--          <div class="conten-top" style="display: flex; justify-content: space-between;">-->
<!--            <div>{{item.oilType}} {{item.oilName}}</div>-->
<!--            <div>-->
<!--              <el-button-->
<!--                type="primary"-->
<!--                icon="el-icon-plus"-->
<!--                @click="gunAdd(item.numberId)"-->
<!--              >新增油枪</el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="conten-bottom">-->
<!--            <div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }"  v-for="(item,index) in item.oilGunList" :key="index">-->
<!--              <div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">-->
<!--                <div>{{item.tankName}}</div>-->
<!--                <div style="cursor: pointer" ><i class="el-icon-edit"  @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>-->
<!--              </div>-->

<!--                <img  class="cardbox-rd" src="./imgs/r-img.png" alt="">-->

<!--              <div class="cardbox-title">-->
<!--                <div>{{item.gunName}}</div>-->
<!--              </div>-->
<!--              <div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">-->
<!--&lt;!&ndash;                <div>ID:{{ item.id }}</div>&ndash;&gt;-->
<!--              </div>-->
<!--              <div class="cardboxb" v-if="item.oilMachineGunNumber != null ">-->
<!--                <div>{{item.oilMachineGunNumber}}</div>-->
<!--              </div>-->

<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-card>-->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        :close-on-click-modal="false">
        <el-form :model="gunForm" :rules="rules" ref="gunForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="油枪名称" prop="gunName">

            <el-input placeholder="请输入内容" v-model="gunForm.gunName" class="input-with-select">
              <el-select v-model="gunForm.select" slot="append" placeholder="选择油枪" @change="chooseName">
                <el-option
                  v-for="option in 50"
                  :key="option"
                  :label="option + '号枪'"
                  :value="option + '号枪'"
                ></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="油机编号" prop="name">
            <el-input v-model="gunForm.oilMachineGunNumber"></el-input>
            <div style="font-size: 12px;color: #999999">油机连接模式下 绑定油机系统中的枪号信息与当前枪号绑定</div>
          </el-form-item>
          <el-form-item label="所属油罐" prop="tankId">
            <el-select v-model="gunForm.tankId" placeholder="请选择所属油罐">
              <el-option
                v-for="option in tankList"
                :key="option.id"
                :label="option.tankName"
                :value="option.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="gunForm.status">
              <el-radio
                v-for="dict in dict.type.zhzt"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                @change="handleIsopenSelect"
              />
            </el-radio-group>
          </el-form-item>
        </el-form>
           <span slot="footer" class="dialog-footer">
<!--/*           <el-button v-if="judgement"  type="danger" @click="delGun()" style="float: left;">删除</el-button>*/-->
           <el-button @click="dialogVisible = false,getList()">取 消</el-button>
             <el-button type="primary" @click="submitForm()">确 定</el-button>
          </span>
      </el-dialog>
    </div>
</template>

<script>
import {getGunApi, insertGunApi, updateGunApi,selectTankByNumberApi,delGunApi} from "@/api/oilConfig/oilGuns";
import {cleanTankApi} from "@/api/oilConfig/oilTank";

  export default {
    name: 'oilqiang',
    dicts: ['zhzt'],

    data(){
      return{
        title:"",
        dialogVisible: false,
        list:[
          {type:1,xb:'you'},
          {type:1,xb:'meiyou'},
          {type:1,xb:'you'},
          {type:1,xb:'you'},
          {type:2,xb:'you'},
          {type:1,xb:'you'},
          {type:1,xb:'you'},
          {type:1,xb:'you'},
        ],
        // 判断当前窗口是新增还是修改该
        judgement:false,
        tankList: [],
        gunList: [],
        c:'',
        gunForm: {
          id: '',
          gunName: '',
          tankId: '',
          status: '',
          storeId: '',
          createTime: '',
          updateTime: '',
          createBy: '',
          updateBy: '',
          numberId: '',
          oilMachineGunNumber: '',
          select: ''
        },
        statusOut:'',
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          select:'请选择',
          resource: '',
          desc: ''
        },
        rules: {
          gunName: [
            { required: true, message: '请输入油枪名称', trigger: 'blur' },
          ],

          tankId: [
            { required: true, message: '请选择所属油罐', trigger: 'change' }
          ],
        }
      }
    },

    async created() {
      let this_ = this
      await this_.getList()
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (oldValue) {
          this.$refs["gunForm"].resetFields();
        }
      }
    },
    methods:{
      handleIsopenSelect() {
        this.$forceUpdate()
      },
      getList() {
        this.gunList = []
        getGunApi().then(response => {
          this.gunList = response.data;
        })
      },
      // 添加油枪
      gunAdd(numberId){
        // this.$refs["gunForm"].validate
        // 假设 formRules 是你的验证规则对象
        // this.$refs.gunForm.clearValidate(); // 清空验证状态
        // this.$set(this, 'formRules', {}); // 设置为空对象

        let this_ = this;
        this_.dialogVisible = true;
        this_.judgement = false;
        this_.gunForm = {} // 清空数据
        this_.gunForm.status = '启用'
        this_.title = '添加油枪'
        this_.selectTankByNumber(numberId)
      },
      gunEdit(data) {
        let this_ = this;
        this_.dialogVisible = true;
        this_.judgement = true;
        this_.gunForm = data;
        this_.statusOut = data.status;
        this_.title = '修改油枪'

        this_.selectTankByNumber(data.numberId)
      },
      delGun(id) {
        this.$confirm('此操作将删除油枪信息,请谨慎操作!是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let fil = {
            id: id
          }
          delGunApi(fil).then(response => {
            this.dialogVisible = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      submitForm() {
        this.$refs["gunForm"].validate((valid) => {
          if (valid) {
            // 查询numberId
            for (let tankListKey in this.tankList) {
              if (parseInt(this.gunForm.tankId) === parseInt(this.tankList[tankListKey].id)) {
                this.gunForm.numberId = parseInt(this.tankList[tankListKey].numberId);
              }
            }
            if (!this.gunForm.id) {
              insertGunApi(this.gunForm).then(response => {
                console.log("response",response)
                if (response.code == 200) {
                  this.$modal.msgSuccess("新增成功");
                  this.dialogVisible = false;
                  this.getList();

                }else {

                }
              }).catch(reason => {
              });
            } else {
              updateGunApi(this.gunForm).then(response => {
                if (response.code == 200) {
                  this.$modal.msgSuccess("修改成功");
                  this.dialogVisible = false;
                  this.getList();
                  this.dialogVisible = false

                }
              });
            }

          } else {
            return false;
          }
        });
        // this.getList();
      },
      chooseName() {
        var this_ = this
        this_.gunForm.gunName = this_.gunForm.select
      },
      handleClose(){
        this.dialogVisible = false;
      },

      // 查询油罐信息
      selectTankByNumber(data) {
          let numberId = data
        selectTankByNumberApi(numberId).then(response => {
          this.tankList = response.data;
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container{
    height: 100%;
  }
  .bor-bai{
    width: 100%;
    border-radius: 10px ;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-bottom: 20px;


  }
  .title_{
    font-weight: bold;
    font-size: 18px;
    color: #333333;
  }
  .wrap-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .oil-box{

  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .conten-box{
    width: 100%;
    border: 1px solid #ebeef5;
    margin: 20px 0px;
  }
  .conten-top{
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
    padding: 18px 20px;
  }
  .conten-bottom{
    box-sizing: border-box;
    padding: 20px 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .cardbox{
    height: 87px;
    width: 278px;
    margin-right: 35px;
    margin-bottom: 35px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    //width: 19%;

    background-size:40% 70%;
    background-color: #f9f9f9;
    position: relative;


  }

  .boxborder {
    border-color: #FF9655;
    border:1px solid;
  }
  .cardbox-rd{
    position: absolute;
    right: 5px;
    bottom: 0px;
    width:50px;
    height: 50px;

  }
  .act-cardbox{
    margin-right: 35px;
    height: 87px;
    width: 278px;
    position: relative;
    overflow: hidden;
    //margin-right: 10px;
    margin-bottom: 35px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    //width: 19%;
    //background: url(../../../assets/images/jybjj.png) center no-repeat;
    background-size:40% 70%;
    background-color: #fff9f5;
    color: #FF9655 !important;
  }



  .cardboxb{
    position: absolute;
    /*width: 50px;*/
    width: auto;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    left: 0px;
    bottom: 0px;
    padding: 5px 10px;
    background: linear-gradient( 312deg, #FF8646 0%, #FFA360 100%);
    border-radius: 0px 10px 0px 10px;
  }

  .actcolor{
    color: #FF9655 !important;
  }
  .cardbox-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #5b5e62;
    font-size: 12px;

    font-family: Source Han Sans CN;
    //font-weight: 400;
  }
  .cardbox-title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 28px;
    //margin: 15px 0px;


  }
  .cardbox-gunName{
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 28px;
    //color: #FF9655;
    //line-height: 0px;
    //text-align: center;
    //font-style: normal;
    //text-transform: none;
  }
  .cardbox-bottom{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    color: #5b5e62;
    font-size: 14px;
  }
  .input-box{
    display: flex;
    align-items: center;
  }
  .box-top{
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
  }


</style>
