<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 添加或修改资产出库对话框 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="true">
        <el-form-item label="出库类型">
          <el-select v-model="form.stockType" placeholder="请选择出库类型">
            <el-option
              v-for="dict in stockTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库时间" prop="stockOutTime">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.stockOutTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择出库时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="领用部门" prop="depName">
          <el-input v-model="form.depName" placeholder="请输入领用部门名称" :disabled="true"/>
        </el-form-item>

        <el-form-item label="领用人" prop="leadUser">
          <el-input v-model="form.leadUser" placeholder="请输入领用人" :disabled="true"/>
        </el-form-item>
        <el-form-item label="资产类型" prop="dbMaterielId">
          <treeselect :disabled="true"
            v-model="form.dbMaterielId"
            :options="treeOptions"
            :show-count="true" @select="selectDepart"
            placeholder="选择上级菜单"
          />
        </el-form-item>
        <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-form-item label="资产编号">
          <el-input v-model="form.dbAsStNumber" placeholder="请输入备注" :disabled="true"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
    </el-card>
    <br/>
    <el-card class="box-card">
      <template >
        <el-tag>提交人&nbsp;:&nbsp;{{form.createUser}}</el-tag>
        <br/>
        <br/>
        <el-tag>提交时间&nbsp;:&nbsp;{{form.createTime}}</el-tag>
      </template>
    </el-card>
  </div>
</template>

<script>
  import { getOut } from '@/api/assets/out'

  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: 'Out',
    components: {
      Treeselect
    },
    props: ['id'],
    data() {
      return {
        id: this.id,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 出库类型字典
        stockTypeOptions: [],
        // 表单参数
        form: {},
        user: {
          id: undefined,
          name: undefined,
          deptId: undefined,
          deptName: undefined
        },
        stockOption: [],
        treeOptions: []
      }
    },
    created() {
      this.getDicts('stock_type').then(response => {
        this.stockTypeOptions = response.data
      })
      this.treelist()
      this.showForm(this.id)
    },
    methods: {
      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
      },
      // 出库类型字典翻译
      stockTypeFormat(row, column) {
        return this.selectDictLabel(this.stockTypeOptions, row.stockType)
      },
      // 表单重置
      reset() {
        this.form = {
          aId: undefined,
          stockType: undefined,
          stockOutTime: undefined,
          depId: undefined,
          depName: undefined,
          leadUserId: undefined,
          leadUser: undefined,
          dbMaterielId: undefined,
          dbAsStId: undefined,
          dbAsStName: undefined,
          dbAsStNumber: undefined,
          remark: undefined,
          instanceId: undefined,
          state: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        }
        this.resetForm('form')
      },
      /** 修改按钮操作 */
      showForm(id) {
        this.reset()
        getOut(id).then(response => {
          this.form = response.data
          this.selectlistStock(this.form.dbMaterielId)
          this.open = true
          this.title = '修改资产出库'
        })
      }
    },
    watch: {
      'id': function(newVal){
        this.showForm(newVal);
      }
    }
  }
</script>
