<template>
  <div>
    <div>
    <el-transfer
      v-model="contents"
      :data="contentOptions"
      :titles="['材料清单', '选择的清单']"
      :props="{ key : 'id' , label: 'name' }"
    />
    </div>
    <div style="margin-top:6px">
    <el-transfer
      v-model="depts"
      :data="deptOptions"
      :titles="['单位列表', '选择的单位']"
      :props="{ key : 'id' , label: 'name' }"
    />
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="confirm()">确认</el-button>
    </div>
  </div>
</template>
<style lang="scss">
.el-transfer-panel {
  width: 470px;
}
.el-transfer__buttons {
  padding: 0 2px;
  .el-button {
    display: block;
  }
}

</style>
<script>
import { getOrgList } from "@/api/org";
import { getContentList } from "@/api/content";
export default {
  name: "taskinit",
  data() {
    return {
      depts: [],
      deptOptions: [],
      contents: [],
      contentOptions: [],
    };
  },
  created() {
    this.getOrgList();
    this.getContentList();
  },
  methods: {
    getOrgList() {
      getOrgList({can_supervision:true}).then((res) => {
        this.deptOptions = res.data;
      });
    },
    getContentList() {
        getContentList().then(res=>{
            this.contentOptions = res.data
        })
    },
    confirm(){
        if(this.contents.length>0 && this.depts.length>0){
            var data = {
            depts:this.depts,
            contents: this.contents
        }
        this.$emit('handleChose', data)
        }else{
            this.$message.error('请选择清单和单位!')
        }
        
    }
  },
};
</script>