<template>
  <div class="change-plan">
    <el-dialog
      title="变更计划"
      :visible.sync="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"
            placeholder="选择随访开始时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" 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>
    </el-dialog>
  </div>
</template>

<script>
  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' },
          ],
        },
        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() {
        this.$emit('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!=='未分组'}))
      }
    }
  }
</script>

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