<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 添加或修改资产调拨对话框 -->
      <el-form ref="form" :model="form" label-width="80px" :disabled="true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="调出部门" >
              <treeselect v-model="form.depOutId"
                          :options="deptOptions"
                          @select="selectDepart"
                          placeholder="请选择归属部门"
                          :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调出人">
              <el-select v-model="form.leadOutUserId" @change="changeSelect" placeholder="请选择">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="物资" >
          <el-select v-model="form.stockValue" multiple placeholder="请选择">
            <el-option
              v-for="item in stockOption"
              :key="item.aId"
              :label="item.aName"
              :value="item.aId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="领用部门" >
              <treeselect
                v-model="form.depId"
                :options="deptOptions"
                placeholder="请选择归属部门"
                :disabled="true"

              />
            </el-form-item>
            {{form.depId}}
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用人" >
              <el-select v-model="form.leadUserId" placeholder="请选择">
                <el-option
                  v-for="item in userAllotOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" >
          <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 { getAllot } from '@/api/assets/allot'

  import { outlistStock } from '@/api/assets/stock'

  import { selectlist } from '@/api/system/user'

  import { treeselectAll } from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Allot',
    components: { Treeselect },
    props: ['id'],
    data() {
      return {
        userOptions: undefined,
        userAllotOptions: undefined,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 部门树选项
        deptOptions: [],
        //物资选项集合
        stockOption: [],
        stockValue: [],
        hforms: {
          title: '查看审核流程',
          open: false,
          data: []
        },
        activitiImg: {
          title: '查看审核流程图',
          open: false,
          src: ''
        },
        instanceId: ''
      }
    },
    created() {
      this.getTreeselect()
      this.showForm(this.id)
    },
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselectAll().then(response => {
          this.deptOptions = response.data
        })
      },
      // 表单重置
      reset() {
        this.form = {
          aId: undefined,
          depOutId: undefined,
          leadOutUserId: null,
          depId: undefined,
          leadUserId: null,
          remark: undefined,
          instanceId: undefined,
          taskId: undefined,
          state: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          stockValue: []
        }
        this.userOptions = []
        this.stockOption = []
        this.userAllotOptions = []
        this.resetForm('form')
      },
      /** 修改按钮操作 */
      showForm(id) {
        this.reset()
        getAllot(id).then(response => {
          this.form = response.data
          let depOutId = this.form.depOutId
          selectlist(depOutId).then(response => {
            this.userOptions = response.data
            this.outlistStock(depOutId, '')
          })
          let depId = this.form.depId

          selectlist(depId).then(response => {
            this.userAllotOptions = response.data
          })
          this.form.leadOutUserId = this.form.leadOutUserId + ''
          this.form.leadUserId = this.form.leadUserId + ''
          this.open = true
          this.title = '修改资产调拨'
        })
      },
      // 获取当前选中部门的名称
      selectDepart(val) {
        this.form.leadOutUserId = undefined
        selectlist(val.id).then(response => {
          this.userOptions = response.data
          this.outlistStock(val.id, '')
        })
      },
      changeSelect(value) {
        this.outlistStock('', value)
      },
      // 获取当前选中部门的名称
      selectAllotDepart(val) {
        selectlist(val.id).then(response => {
          this.userAllotOptions = response.data
        })
      },
      //获取资源数据
      outlistStock(depId, userId) {
        outlistStock(depId, userId).then(response => {
          this.stockOption = response.data
        })
      }
    },
    watch: {
      'form.depOutId': function(newVal) {
        console.log(newVal)
        if (newVal == undefined) {
          console.log(newVal)
          this.form.stockValue = []
          this.form.leadOutUserId = undefined
          this.userOptions = []
        }
      },
      'id': function(newVal){
        this.showForm(newVal);
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

