<!--
 * @Author: zwq
 * @Date: 2020-12-29 16:37:56
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-11 16:26:29
 * @enName:
-->
<template>
  <div style="margin:20px">
    <el-row :gutter="15">
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="rules"
        size="medium"
        label-width="140px"
      >
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.cache.CacheName')" prop="tareaName">
            <el-input v-model="dataForm.tareaName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.cache.CacheCode')" prop="code">
            <el-input v-model="dataForm.code" :disabled="isdetail" :label="$t('module.basicData.cache.CacheCode')" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
            <el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
            <el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.visual.Specs')" prop="spec">
            <el-input v-model="dataForm.spec" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.visual.CurrentState')" prop="status">
            <el-select
              v-model="dataForm.status"
              :disabled="isdetail"
              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.CurrentState')])"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in currentStatusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.cache.StockNumber')" prop="locationNum">
            <el-input-number v-model="dataForm.locationNum" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StockNumber')])" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.cache.AreaNumber')" prop="shelfNum">
            <el-input-number v-model="dataForm.shelfNum" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaNumber')])" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="note">
            <el-input v-model="dataForm.note" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div style="margin:20px">
      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
      <span v-if="!isdetail">
        <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
        <el-button v-if="listQuery.id" type="primary" @click="addNew()">{{ $t('module.basicData.cache.addCacheArea') }}</el-button>
      </span>
    </div>
    <div style="height:380px;overflow:auto">
      <base-table
        :page="listQuery.current"
        :limit="listQuery.size"
        :table-config="tableProps"
        :table-data="list"
      >
        <method-btn
          v-if="!isdetail"
          slot="handleBtn"
          :method-list="tableBtn"
          @clickBtn="handleClick"
        />
      </base-table>
    </div>
    <shelfAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.id" @refreshDataList="getList" />
  </div>
</template>

<script>import i18n from '@/lang'
import { cacheDetail, cacheUpdate, cacheAdd, cacheCode } from '@/api/basicData/Cache/cache'
import { areaList, areaDelete } from '@/api/basicData/Cache/area'
import BaseTable from '@/components/BaseTable'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import shelfAttrAdd from './shelfAttr-add.vue'
import shelfBtn from './shelfBtn.vue'
const tableBtn = [
  {
    type: 'edit',
    btnName: 'btn.edit'
  },
  {
    type: 'delete',
    btnName: 'btn.delete'
  }
]
const tableProps = [
  {
    prop: 'name',
    label: i18n.t('module.basicData.cache.AreaName'),
    align: 'center'
  },
  {
    prop: 'code',
    label: i18n.t('module.basicData.cache.AreaCode'),
    align: 'center'
  },
  {
    prop: 'shelfNum',
    label: i18n.t('module.basicData.cache.StorageQuantity'),
    align: 'center'
  },
  {
    prop: 'rowNum',
    label: i18n.t('module.basicData.cache.rowNum'),
    align: 'center'
  },
  {
    prop: 'columnNum',
    label: i18n.t('module.basicData.cache.columnNum'),
    align: 'center'
  },
  {
    prop: 'shelf',
    label: i18n.t('module.basicData.cache.Location'),
    subcomponent: shelfBtn,
    align: 'center'
  }
]

export default {
  components: { BaseTable, MethodBtn, shelfAttrAdd },
  data() {
    return {
      addOrUpdateVisible: false,
      tableBtn,
      trueWidth: 200,
      tableProps,
      list: [],
      dataForm: {
        tareaName: '',
        code: '',
        enName: '',
        abbr: '',
        spec: '',
        status: '',
        locationNum: '',
        shelfNum: '',
        note: ''
      },
      listQuery: {
        current: 1,
        size: 990,
        id: ''
      },
      rules: {
        tareaName: [{
          required: true,
          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheName')]),
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheCode')]),
          trigger: 'blur'
        }]
      },
      currentStatusOptions: [{
        'label': '正常',
        'value': 0
      }, {
        'label': '暂停',
        'value': 1
      }, {
        'label': '维修',
        'value': 2
      }],
      id: '', // 缓存区id
      isdetail: false
    }
  },
  created() {
    this.id = this.$route.query.id
    this.init()
  },
  methods: {
    init() {
      this.isdetail = false
      this.isdetail = Boolean(this.$route.query.isdetail)
      this.listQuery.id = ''
      this.list.splice(0, this.list.length)
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.id) {
          cacheDetail(this.id).then(res => {
            this.dataForm = res.data
          })
          this.listQuery.id = this.id
          areaList(this.listQuery).then(response => {
            if (response.data.records) {
              this.list = response.data.records
            } else {
              this.list.splice(0, this.list.length)
            }
          })
        } else {
          cacheCode().then(res => {
            this.dataForm.code = res.data
          })
        }
      })
    },
    getList() {
      areaList(this.listQuery).then(response => {
        if (response.data.records) {
          this.list = response.data.records
        }
      })
    },
    handleClick(raw) {
      if (raw.type === 'delete') {
        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
          type: 'warning'
        }).then(() => {
          areaDelete(raw.data.id).then(response => {
            this.$message({
              message: this.$t('module.basicData.visual.success'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getList()
              }
            })
          })
        }).catch(() => {})
      } else {
        this.addNew(raw.data.id)
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = {
            'abbr': this.dataForm.abbr,
            'code': this.dataForm.code,
            'status': this.dataForm.status,
            'enName': this.dataForm.enName,
            'tareaName': this.dataForm.tareaName,
            'note': this.dataForm.note,
            'spec': this.dataForm.spec,
            'locationNum': this.dataForm.locationNum,
            'shelfNum': this.dataForm.shelfNum,
            'id': this.id
          }
          if (this.id) {
            cacheUpdate(data).then(res => {
              this.$message({
                message: this.$t('module.basicData.visual.success'),
                type: 'success',
                duration: 1500
              })
            })
          } else {
            cacheAdd(data).then(res => {
              this.$message({
                message: this.$t('module.basicData.visual.success'),
                type: 'success',
                duration: 1500
              })
              this.listQuery.id = res.data.id
            })
          }
        }
      })
    },
    // 新增 / 修改
    addNew(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.drawer-footer {
  width: 100%;
  margin-top: 50px;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 50px;
  text-align: left;
  background: #fff;
}
</style>
