<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:wuzibianma>
        <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.wuzibianma" placeholder="请填写物资编码" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:zichanmingcheng>
        <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.zichanmingcheng" placeholder="请填写资产名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:wuzileixing>
        <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 :disabled="type==='editor'?true:false" v-model="form.wuzileixing" style="width: 300px;" placeholder="请选择物资类型">
              <el-option
                v-for="item in lexingList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </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:fenlei>
        <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.fenlei" 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:jiliangdanwei>
        <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.jiliangdanwei" placeholder="请填写计量单位" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:suozaicangku_id>
        <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.suozaicangku_id" style="width: 300px;" placeholder="请选择所在仓库">
              <el-option
                v-for="item in cangkuList"
                :key="item.id"
                :label="item.cangkumingcheng"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
<!--      <template v-slot:suozaihuojia>
        <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.suozaihuojia" style="width: 300px;" placeholder="请选择所在货架">
              <el-option
                v-for="item in huojiaList"
                :key="item.huojiamingcheng"
                :label="item.huojiamingcheng"
                :value="item.huojiamingcheng">
              </el-option>
            </el-select>
          </div>
        </div>
      </template> -->
      <template v-slot:rukushijian>
        <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-date-picker style="width: 300px;" v-model="form.rukushijian" type="date" placeholder="选择入库时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </template>
<!--      <template v-slot:zichanyuanzhi>
        <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.zichanyuanzhi" placeholder="请填写资产原值" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template> -->
      <template v-slot:shiyongnianxian>
        <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.shiyongnianxian" placeholder="请填写使用年限" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
<!--      <template v-slot:shiyongbumen>
        <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.shiyongbumen" placeholder="请填写使用部门" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template> -->
      <template v-slot:shifouweigudingzichan>
        <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.shifouweigudingzichan" style="width: 300px;" placeholder="请选择是否为固定资产">
              <el-option
                v-for="item in isGuding"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:gudingzichanbianma v-if="form.shifouweigudingzichan==='是'">
        <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.gudingzichanbianma" placeholder="请填写固定资产编码" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:jishuziliao v-if="form.shifouweigudingzichan==='是'">
        <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-upload
              class="upload-demo"
              :action="action"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              multiple
              :limit="10"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </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 type="textarea" v-model="form.beizhu" 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: '',
        webType:'',
        titleName: '',
        action:`${process.env.VUE_APP_UPLOAD_API}`,
        fileList:[],
        tableName: 'material_infos',
        cangkuList:[],
        huojiaList:[],
        isGuding: [{
          label: '是',
          value: '是'
        }, {
          label: '否',
          value: '否'
        }],
        lexingList:[{
          label: '一类一码',
          value: '一类一码'
        }, {
          label: '一物一码',
          value: '一物一码'
        }],
        form: {
          wuzibianma:'',
          zichanmingcheng:'',
          wuzileixing:'',
          guigexinghao:'',
          fenlei:'',
          zhuangtai:'',
          jiliangdanwei:'',
          suozaicangku:'',
          suozaicangku_id:'',
          suozaihuojia:'',
          rukushijian:'',
          zichanyuanzhi:'',
          shiyongnianxian:'',
          shiyongbumen:'',
          shifouweigudingzichan:'',
          gudingzichanbianma:'',
          jishuziliao:[],
          beizhu:''
        },
        rules: {
          wuzibianma: [{
            required: true,
            message: '请输入物资编码'
          }],
          zichanmingcheng: [{
            required: true,
            message: '请输入资产名称'
          }],
          wuzileixing: [{
            required: true,
            message: '请输入物资类型'
          }]
        }
      }
    },
    created() {
      this.getCangku()
      this.getHuojia()
    },
    methods: {
      // 获取物资编码
      async getWzbms(){
        const res = await getWzbm()
        this.form.wuzibianma = res
      },
      async getHuojia() {
        let res = await index({
          page_size: 999,
          page: 1,
          table_name: 'shelfs',
        })
        this.huojiaList = res.data
      },
      async getCangku() {
        let res = await index({
          page_size: 999,
          page: 1,
          table_name: 'materialstorages',
        })
        this.cangkuList = res.data
      },
      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.form = {
          wuzibianma:res?.wuzibianma,
          zichanmingcheng:res?.zichanmingcheng,
          wuzileixing:res?.wuzileixing,
          guigexinghao:res?.guigexinghao,
          fenlei:res?.fenlei,
          zhuangtai:res?.zhuangtai,
          jiliangdanwei:res?.jiliangdanwei,
          suozaicangku:res?.suozaicangku,
          suozaicangku_id:res.suozaicangku_id?parseInt(res.suozaicangku_id):'',
          suozaihuojia:res?.suozaihuojia,
          rukushijian:res?.rukushijian,
          zichanyuanzhi:res?.zichanyuanzhi,
          shiyongnianxian:res?.shiyongnianxian,
          shiyongbumen:res?.shiyongbumen,
          shifouweigudingzichan:res?.shifouweigudingzichan,
          gudingzichanbianma:res?.gudingzichanbianma,
          jishuziliao:res?.jishuziliao,
          beizhu:res?.beizhu
        }
        if(res.jishuziliao_upload_details){
          for(var j of res.jishuziliao_upload_details){
            this.fileList.push({
              id:j.id,
              name:j.original_name,
              url:j.url
            })
          }
        }
      },
      submit() {
        // return
        console.log(this.fileList)
        this.form.jishuziliao = []
        if (this.fileList.length > 0) {
          for (var g of this.fileList) {
            if (g.response) {
              this.form.jishuziliao.push(g.response.id)
            } else {
              this.form.jishuziliao.push(g.id)
            }
          }
        } else {
          this.form.jishuziliao = []
        }
        // return
        if (this.type === 'add') {
          save({
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增成功'
            })
            this.isShow = false
            this.$emit('refresh')
            if(this.webType=='insert'){
              this.$emit('insert',this.form)
            }
          })
          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')
          })
        }
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handleSuccess(response, file, fileList) {
        this.fileList = fileList
      },

    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.titleName = this.type === 'add' ? `新增物资` : `编辑物资`
          if (this.type === 'editor') {
            this.getDetail()
          }else{
            this.getWzbms()
          }
          // if(this.webType=='insert'){
          //   console.log("insert")
          // }
        } else {
          this.id = ''
          this.type = ''
          this.fileList = []
          this.webType = ''
          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>
