<style lang="scss" scoped>
.year{
  display: flex;
  height: 100%;
}
.tool-panel{
  width: 250px;
  padding: 15px;
  background-color: #F8F9FB;
  *{
    width: 100%;
    margin: 5px 0;
  }
}
table{
  flex: auto;
  thead{
    color: #909399;
    font-weight: 500;
  }
  tr{
    background-color: #FFF;
  }
  th,td{
    padding: 12px 0;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #EBEEF5;
    a{
      cursor: pointer;
    }
  }
}
.search-part{
  padding: 5px 15px;
  .add-user{
    float: right;
  }
}
.dialog-style{
  div{
    text-align: center;
    margin: 5px;
    label{
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    /deep/ .el-input{
      display: inline-block;
      width: 300px;
    }
  }
}
.center-text{
  text-align: center;
}
</style>
<template>
<div class="year">
  <div class="tool-panel">
    <el-button type="primary" @click="visibleChange = true;">新增年度计划</el-button>
  </div>
  <table>
    <thead>
        <tr>
            <th>计划名</th>
            <th>部门</th>
            <!-- <th>参与成员</th> -->
            <th>年份</th>
            <th>简要说明</th>
            <th style="width:150px">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in planeList" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.depart}}</td>
          <!-- <td>{{item.member}}</td> -->
          <td>{{item.year}}</td>
          <td>{{item.content}}</td>
          <td>
            <a @click="changeData(item)">修改</a>
            &nbsp;&nbsp;
            <a @click="visibleDelete = true;plan.id = item.id">删除</a>
            &nbsp;&nbsp;
            <a>完成</a>
          </td>
        </tr>
    </tbody>
  </table>
  <el-dialog
        class="dialog-style"
        title="编辑"
        :visible.sync="visibleChange"
        width="500px">
        <div>
          <label>名称：</label>
          <el-input name="name" v-model="plan.name" placeholder="请输入名称" required="required"></el-input>
        </div>
        <div>
          <label>年份：</label>
          <el-date-picker
            v-model="yearData"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </div>
        <div>
          <label>内容：</label>
          <el-input v-model="plan.content" placeholder="请输入内容" required="required"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="change">确 定</el-button>
            <el-button type="primary" @click="visibleChange = false;plan={}">取消</el-button>
        </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="visibleDelete"
      width="200px">
      <p class="center-text">确认删除?</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleDelete = false;plan={}">取 消</el-button>
        <el-button type="primary" @click="deletePlan">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { getPlanList,addPlan,updatePlan,deletePlan } from '@/api/year';
export default {
  name: 'Year',
  data () {
      return {
        planeList:[],
        plan:{},
        yearData:'',
        visibleChange: false,
        visibleDelete: false
      }
  },
  created() {
    this.getPlanList();
  },
  methods: {
    getPlanList(){
      getPlanList().then((data) => {
        this.planeList = data.data;
      })
    },
    deletePlan(){
      deletePlan(this.plan).then((result) => {
        alert(result?'删除成功':'删除失败');
        this.visibleDelete = false;
        this.plan = {};
        this.getPlanList();
      })
    },
    changeData(item){
      this.visibleChange = true;
      this.plan = JSON.parse(JSON.stringify( item ));
      this.yearData = new Date(item.year,1,1);
    },
    change(){
      this.plan.year = this.yearData.getFullYear();
      if(this.plan.id){
        updatePlan(this.plan).then((result) => {
          alert(result.result?'更新成功':'更新失败');
          this.visibleChange = false;
          this.plan = {};
          this.getPlanList();
        })
      }
      else{
        addPlan(this.plan).then((result) => {
          alert(result.result?'添加成功':'添加失败');
          this.visibleChange = false;
          this.plan = {};
          this.getPlanList();
        })
      }
    },
  }
}
</script>