<template>
  <div class="change-plan">
    <el-dialog
      title="变更计划"
      v-model="showChangePlan"
      width="35%"
      v-if="showThisPage"
      :before-close="clickClose"
      center
    >
      <el-form
        :model="planChangeData"
        label-width="110px"
        :rules="rules"
        ref="planChangeData"
      >
        <el-form-item label="分组：" prop="yLabelList">
          <el-select
            v-model="planChangeData.yLabelList"
            multiple
            @change="selectGroup"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in realGroup"
              :key="index"
              :label="item.labelName"
              :value="item.labelId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="履约计划：" prop="planId">
          <el-select
            v-model="planChangeData.planId"
            @change="selectPlan"
            size="small"
          >
            <el-option
              v-for="(item, index) in planOption"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="履约开始时间：" prop="startDate">
          <el-date-picker
            v-model="planChangeData.startDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="timestamp"
            :editable="false"
            placeholder="选择履约开始时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button class="button-white" @click="clickClose" size="small" plain
            >取 消</el-button
          >
          <el-button
            class="button-green"
            @click="changePlans"
            size="small"
            type="primary"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import { mapState, mapActions } from 'vuex'
import { changePlan } from '../../../../utils/followup/followapis'
export default {
  name: 'change-plan',
  props: {
    showThisPage: {
      //是否显示model
      type: Boolean,
      default: function () {
        return false
      },
    },
    planChangeData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    /*groupOption: {
      type: Array,
      default: function () {
        return [];
      }
    },*/
    /*planOption: {
      type: Array,
      default: function () {
        return [];
      }
    },*/
  },
  data() {
    return {
      showChangePlan: true,
      selectedGroup: [],
      rules: {
        planId: [
          { required: true, message: '请选择履约计划', trigger: 'change' },
        ],
        startDate: [
          { required: true, message: '请选择履约开始时间', trigger: 'change' },
        ],
      },
      realGroup: [],
      selectPlanName: '',
    }
  },
  mounted() {
    this.getPlanOptions()
    // 获取履约时间列表
  },
  computed: {
    ...mapState('planManage', {
      planOption: (state) => state.planOption,
      groupList: (state) => state.groupList,
      nodeTimeList: (state) => state.nodeTimeList,
    }),
  },
  methods: {
    ...mapActions('planManage', [
      'getPlanOptions',
      'getResidentList',
      'getResidentDetail',
    ]),
    selectGroup(val) {
      const _this = this
      _this.selectedGroup = []
      val.forEach(function (item, index) {
        let nodeItem = _this.groupList.filter(function (item1) {
          return item1.labelId == item
        })
        let pushItem = {
          labelId: nodeItem[0].labelId,
          label: nodeItem[0].labelName,
        }

        _this.selectedGroup.push(pushItem)
      })
    },
    selectPlan(val) {
      let arr = this.planOption.filter((item) => {
        return item.id == val
      })
      this.selectPlanName = arr[0].name
    },
    clickClose() {
      $emit(this, 'closeChangePlan', false)
    },
    changePlans() {
      const _this = this
      this.$refs['planChangeData'].validate((valid) => {
        if (valid) {
          const { planPatientsId, planId, patientId, startDate, planIdOld } =
            this.planChangeData
          changePlan({
            planPatientsId,
            planId,
            patientId,
            yLabelList: this.selectedGroup,
            startDate,
            oldPlanId: parseInt(planIdOld),
          })
            .then((data) => {
              if (data.code == '000000') {
                this.$message({
                  message: '变更计划成功！',
                  type: 'success',
                })
                if (this.$route.name == 'residentList') {
                  this.getResidentList({
                    planId: this.planChangeData.planIdOld,
                    status: this.planChangeData.status,
                  })
                } else if (this.$route.name == 'residentDetail') {
                  this.$router.push({
                    path: '/followup/plan-manage/resident-detail',
                    query: { patientId: patientId, planId: planId },
                  })
                  this.getResidentDetail({
                    planId,
                    patientId,
                  })
                }

                this.clickClose()
              } else if (data.code == '200005') {
                this.$message({
                  message: `${this.planChangeData.patientName}用户已经在${this.selectPlanName}计划中。`,
                  type: 'success',
                })
              } else {
                this.$message({
                  message: `${data.message}`,
                  type: 'error',
                })
              }
            })
            .catch((err) => {
              this.$message({
                message: `${err.message}`,
                type: 'error',
              })
            })
        } else {
          return false
        }
      })
    },
  },
  watch: {
    planChangeData(val) {
      const _this = this
      let labelList = val.yLabelList
      labelList.forEach(function (item, index) {
        let nodeItem = _this.groupList.filter(function (item1) {
          return item1.labelId == item
        })
        let pushItem = {
          labelId: nodeItem[0].labelId,
          label: nodeItem[0].labelName,
        }

        const isPush = _this.selectedGroup.filter(function (t) {
          return t.labelId == pushItem.labelId
        })
        if (!isPush.length) {
          _this.selectedGroup.push(pushItem)
        }
      })
    },
    groupList(val) {
      this.realGroup = val.filter((item) => {
        return item.labelName !== '未分组'
      })
    },
  },
  emits: ['closeChangePlan'],
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>
