<template>
  <div>
    <xy-dialog ref="dialog" :width='70' :is-show.sync="isShow" type="form" :title="titleName" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:cangkumingcheng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.cangkumingcheng" @change="changeCk" style="width: 300px;" placeholder="请选择仓库">
              <el-option
                v-for="item in cangkuList"
                :key="item.id"
                :label="item.cangkumingcheng"
                :value="item.cangkumingcheng">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:wuzidaima>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>物资代码：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.wuzidaima" placeholder="请填写物资代码" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:xianwuzimingcheng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>现物资名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.xianwuzimingcheng" placeholder="请填写现物资名称" clearable style="width: 300px;"></el-input>

          </div>
        </div>
      </template>
      <template v-slot:yuanwuzimingcheng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>原物资名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.yuanwuzimingcheng" placeholder="请填写原物资名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:guigexinghao>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>规格型号：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.guigexinghao" placeholder="请填写规格型号" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:shuliang>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>数量：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.shuliang" placeholder="请填写数量" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:danwei>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>单位：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.danwei" placeholder="请填写单位" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:jiazhiyuan>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>价值(元)：
          </div>
          <div class="xy-table-item-content">
           <el-input v-model="form.jiazhiyuan" placeholder="请填写价值(元)" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:shengchanriqi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>生产日期：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.shengchanriqi" placeholder="请填写生产日期" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:rukuriqi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>入库日期：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.rukuriqi" placeholder="请填写入库日期" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:chubeinianxian>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>储备年限：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.chubeinianxian" placeholder="请填写储备年限" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:zhuangtai>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>状态：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.zhuangtai" placeholder="请填写状态" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:zijinlaiyuan>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>资金来源：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.zijinlaiyuan" placeholder="请填写资金来源" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:chubeifangshi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>储备方式：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.chubeifangshi" placeholder="请填写储备方式" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:chubeididian>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>储备地点：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.chubeididian" placeholder="请填写储备地点" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:beizhu>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.beizhu" placeholder="请输入储备层级" clearable
              style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:chubeicengji>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>储备层级：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.chubeicengji" placeholder="请输入储备层级" clearable
              style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:shifouzhanshi>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>是否展示：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.shifouzhanshi" placeholder="请输入是否展示" clearable
              style="width: 300px;"></el-input>
          </div>
        </div>
      </template>



    </xy-dialog>
  </div>
</template>

<script>
  import {
    save,
    index,
    show
  } from "@/api/system/baseForm.js"
  import {
    getWzbm
  } from "@/api/mater.js"
  import {
    Message
  } from 'element-ui'
  export default {

    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        titleName: '',
        tableName: 'flood_materials',
        cangkuList:[],

        form: {
          guanliancangku:'',
          cangkumingcheng:'',
          wuzidaima:'',
          xianwuzimingcheng:'',
          yuanwuzimingcheng:'',
          guigexinghao:'',
          shuliang:'',
          danwei:'',
          jiazhiyuan:'',
          shengchanriqi:'',
          rukuriqi:'',
          chubeinianxian:'',
          zhuangtai:'',
          zijinlaiyuan:'',
          chubeifangshi:'',
          chubeididian:'',
          beizhu:'',
          chubeicengji:'',
          shifouzhanshi:''
        },
        rules: {
          cangkumingcheng: [{
            required: true,
            message: '请选择仓库'
          }]
        }
      }
    },
    created() {

    },
    methods: {
      setCkList(e){
        if(e){
          this.cangkuList = e
        }
      },
      changeCk(e){
        if(e){
          this.cangkuList.map(item=>{
            if(e===item.cangkumingcheng){
              this.form.guanliancangku = item.id
            }
          })
          console.log(this.form.guanliancangku)
        }
      },
      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.form = {
          guanliancangku:res?.guanliancangku,
          cangkumingcheng:res?.cangkumingcheng,
          wuzidaima:res?.wuzidaima,
          xianwuzimingcheng:res?.xianwuzimingcheng,
          yuanwuzimingcheng:res?.yuanwuzimingcheng,
          guigexinghao:res?.guigexinghao,
          shuliang:res?.shuliang,
          danwei:res?.danwei,
          jiazhiyuan:res?.jiazhiyuan,
          shengchanriqi:res?.shengchanriqi,
          rukuriqi:res?.rukuriqi,
          chubeinianxian:res?.chubeinianxian,
          zhuangtai:res?.zhuangtai,
          zijinlaiyuan:res?.zijinlaiyuan,
          chubeifangshi:res?.chubeifangshi,
          chubeididian:res?.chubeididian,
          beizhu:res?.beizhu,
          chubeicengji:res?.chubeicengji,
          shifouzhanshi:res?.shifouzhanshi

        }
      },
      submit() {
        console.log("this.form",this.form)
        // return
        if (this.type === 'add') {
          save({
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },

    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.titleName = this.type === 'add' ? `新增物资` : `编辑物资`
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .mingxiwrap {
    display: flex;
    flex-wrap: wrap;
  }

  .mingxiwrap .xy-table-item {
    margin-bottom: 10px
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  ::v-deep .searchCompanys .el-input {
    width: 82%
  }

  .xy-table-item-label {
    width: 160px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  ::v-deep .xy-table-item-label {
    width: 160px !important;
  }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }
</style>
