<template>
  <div id="putawayId">
    <div style="width:100%;position: absolute;top: 15px;left: 0;">
      <div style="display: flex;
    align-items: center;padding-left: 20px;">
        <svg-icon
        icon-class="icon150"
        style="font-size: 30px;margin-right: 10px;"
      />
      <span>一键启用/禁用</span>
      </div>
      <el-divider style="width:100%"></el-divider>
    </div>
    <el-row>
      <el-form ref="form" :rules="rules" :model="importData" label-width="70px" :size="$store.getters.size" style="height: 31vh;">
        <el-row :gutter="gridNum.row.gutter">
          <span style="width:100%;display:block;text-align:center;font-size: 18px;">您当前共选择 <span style="color:red">{{ this.multipleSelection.length }}</span> 条数据</span>
          <el-col :span="20">
            <el-form-item class="putawayClass" style="margin: 20px 0px;fon">
              <el-radio v-model="importData.enableMark" label="1">启用</el-radio>
              <el-radio v-model="importData.enableMark" label="0">禁用</el-radio>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="22">
            <el-form-item prop="putawayRemark">
              <el-input style="height:75px" type="textarea" v-model="importData.putawayRemark" clearable placeholder="启用/禁用原因" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-col :span="24" style="text-align: right;position:absolute;bottom: 15px;right:0">
          <el-divider></el-divider>
          <div>
            <el-button @click="close">取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >提交</el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilCompanySiteRelationApi from '@/api/user/oilCompanySiteRelation'
import { imgCompress } from '@/utils'

import utils from '@/utils/encode'
const JSESSIONID = utils.uuid()
export default {
  props: {
    multipleSelection: {
      type: Array,
      default() {

      }
    }
  },
  data() {
    return {
      imgCompress,
      arrList:[],
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      importData:{
        enableMark:'1'
      },
      
      rules:{
        putawayRemark: [
          { required: true, message: '请输入原因', trigger: 'blur' },
          // { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.multipleSelection.forEach(element => {
            this.arrList.push(element.id)
          });
          if(this.importData.enableMark === '0'){
            this.$confirm('是否一键禁用?', '提示', { type: 'success' }).then(() => {
              this.save()
              
            })
            
          }
          if(this.importData.enableMark === '1'){
            this.$confirm('是否一键启用?', '提示', { type: 'success' }).then(() => {
              this.save()
            })
          }
        }
      })
    },
    save() {
      var data = {
        ids: this.arrList,
        enableMark:this.importData.enableMark,
        putawayRemark:this.importData.putawayRemark
      }
      oilCompanySiteRelationApi.updateBatchByIds(data).then(res => {
        this.$emit('closeDialog')
        this.$emit('getByPage')
        this.importData.putawayRemark = ''
      })
      this.arrList = []
    },
    close() {
      this.$emit('closeDialog')
      this.importData.putawayRemark = ''
    }
  }
}

</script>
<style>
#putawayId .putawayClass .el-form-item__content{
  margin-left: 70px !important;
  font-size: 18px;
}
.el-divider--horizontal{
  margin: 10px 0;
  }
#putawayId{
  margin:30px 0 0
}
.putawayId .el-dialog__body{
  padding-bottom: 0;
}
.putawayId .el-textarea textarea{
  height: 100%;
}
</style>