<template>
  <div>
    <el-drawer
      size="600px"
      title="设置清单类型"
      :visible.sync="drawer"
      direction="rtl">
      <div style="padding: 10px 20px;">
        <el-descriptions direction="vertical" :column="2" :labelStyle="{ 'font-weight': 600 }">
          <el-descriptions-item label="已选清单" :span="2">
            <div v-for="(item, index) in selections">
              <Tag closable color="primary" @on-close="selections.splice(index, 1)">
                {{ item.title }}
              </Tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="人员选择" :span="2">
            <Transfer
              :data="persons"
              :target-keys="selectedPersons"
              filterable
              :filter-method="filterMethod"
              @on-change="arr => selectedPersons = arr"></Transfer>
          </el-descriptions-item>
          <el-descriptions-item label="开始填报月份">
            <DatePicker type="month" v-model="startMonth" placeholder="请选择开始填报月份"></DatePicker>
          </el-descriptions-item>
          <el-descriptions-item label="结束填报月份">
            <DatePicker type="month" v-model="endMonth" placeholder="请选择结束填报月份"></DatePicker>
          </el-descriptions-item>
        </el-descriptions>
        <Button type="primary" shape="circle" style="width: 40%;margin-top: 20px;" @click="submit">确定</Button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { index, assignCategoryType } from "@/api/person";
export default {
  data() {
    return {
      drawer: false,
      selections: [],
      persons: [],
      selectedPersons: [],
      startMonth: '',
      endMonth: ''
    }
  },
  methods: {
    async getPersons () {
      this.persons = (await index({ page: 1, page_size: 9999 },false)).data.map(i => ({
        key: i.id,
        label: i.name
      }))
    },
    filterMethod (data, query) {
      return data.label.indexOf(query) > -1;
    },
    setSelections (arr) {
      if (arr instanceof Array) {
        this.selections = arr
      }
    },
    show () {
      this.drawer = true;
    },
    hide () {
      this.drawer = false;
    },
    submit () {
      assignCategoryType({
        person_id: this.selectedPersons.toString(),
        category_id: this.selections.map(i => i.id).toString(),
        start_year_month: this.$moment(this.startMonth).format("YYYY-MM"),
        end_year_month: this.$moment(this.endMonth).format("YYYY-MM"),
      }).then(res => {
        this.hide()
      })
    }
  },
  computed: {},
  created() {
    this.getPersons()
  }
}
</script>

<style scoped lang="scss">
::v-deep .ivu-tag {
  height: auto;
  line-height: 1.5;
  padding: 4px 8px;
}
::v-deep .ivu-tag .ivu-icon-ios-close {
  top: 0;
}
</style>
