<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="报废类型">
              <el-select v-model="form.scrapType" placeholder="请选择报废类型">
                <el-option
                  v-for="dict in scrapTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报废时间" prop="scrapTime">
              <el-date-picker clearable size="small"
                              v-model="form.scrapTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择报废时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理部门" prop="depName">
              <el-input v-model="form.depName" placeholder="请输入处理部门" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理人" prop="scrapUser">
              <el-input v-model="form.scrapUser" placeholder="请输入处理人" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="资产类型" prop="dbMaterielId">
              <treeselect
                v-model="form.dbMaterielId"
                :options="treeOptions"
                :show-count="true" @select="selectDepart" :disabled="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资产" prop="dbAsStId">
              <el-select v-model="form.dbAsStId" placeholder="请选择资产" @change="setData">
                <el-option
                  v-for="dict in stockOption"
                  :key="dict.aId"
                  :label="dict.aName"
                  :value="dict.aId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="资产编号" prop="dbAsStNumber">
          <el-input v-model="form.dbAsStNumber" placeholder="请输入资产编号" :disabled="true"/>
        </el-form-item>
        <el-form-item label="供应商" prop="dbSupplierName">
          <el-input v-model="form.dbSupplierName" placeholder="请输入供应商名称" :disabled="true"/>
        </el-form-item>
        <el-form-item label="报废原因" prop="scrapReason">
          <el-input v-model="form.scrapReason" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </el-card>
    <br/>
    <el-card class="box-card">
      <template>
        <el-tag>提交人&nbsp;:&nbsp;{{form.scrapUser}}</el-tag>
        <br/>
        <br/>
        <el-tag>提交时间&nbsp;:&nbsp;{{form.createTime}}</el-tag>
      </template>
    </el-card>
  </div>
</template>

<script>
  import {
    getScrap
  } from '@/api/assets/scrap'
  import { selectlistStock, selectStockDictLabel } from '@/api/assets/stock'

  import { treelist } from '@/api/system/materiel'

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Scrap',
    components: {
      Treeselect
    },
    props: ['id'],
    data() {
      return {
        id: this.id,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 报废类型字典
        scrapTypeOptions: [],
        // 表单参数
        form: {},
        treeOptions: [],
        stockOption: [],
        user: {
          id: undefined,
          name: undefined,
          deptId: undefined,
          deptName: undefined
        }
      }
    },
    created() {
      this.getDicts('scrap_type').then(response => {
        this.scrapTypeOptions = response.data
      })
      this.treelist()
      this.showForm(this.id)
    },
    methods: {
      // 表单重置
      reset() {
        this.form = {
          aId: undefined,
          scrapType: undefined,
          dbMaterielId: undefined,
          dbSupplierId: undefined,
          dbSupplierName: undefined,
          dbAsStId: undefined,
          dbAsStName: undefined,
          dbAsStNumber: undefined,
          scrapTime: undefined,
          depId: undefined,
          depName: undefined,
          scrapReason: undefined,
          scrapUserId: undefined,
          scrapUser: undefined,
          remark: undefined,
          instanceId: undefined,
          taskId: undefined,
          state: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        }
        this.resetForm('form')
      },
      /** 修改按钮操作 */
      showForm(aid) {
        this.reset()
        getScrap(aid).then(response => {
          this.form = response.data
          this.selectlistStock(this.form.dbMaterielId)
        })
      },
      treelist() {
        treelist().then(response => {
          this.treeOptions = response.data
        })
      },
      // 获取当前选中部门的名称
      selectDepart(val) {
        let dbMaterielId = val.id
        this.stockOption = []
        this.form.dbAsStId = undefined
        this.selectlistStock(dbMaterielId)
      },
      selectlistStock(dbMaterielId) {
        selectlistStock(dbMaterielId).then(response => {
          this.stockOption = response.data
          console.log(this.stockOption)
        })
      },
      setData(val) {
        console.log(val)
        var obj = selectStockDictLabel(this.stockOption, val)
        console.log(obj)
        this.form.dbAsStName = obj.aName
        this.form.dbAsStNumber = obj.aNumber
        //供应商id
        this.form.dbSupplierId = obj.sId
        //供应商id
        this.form.dbSupplierName = obj.sName
      }
    },
    watch: {
      'id': function(newVal){
        this.showForm(newVal);
      }
    }
  }
</script>
