<template>
  <div class="plan-list-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="plan-list-content f-main-content screenSet">
      <div class="page-title">计划管理</div>
      <div class="search-div">
        <div class="search-input">
          <el-form ref="serchForm" :model="searchData" :inline="true" label-suffix=":" label-width="125px" size="small">
            <el-form-item label="随访计划名称">
              <el-input v-model="searchData.name" placeholder="请输入关键词" maxlength="20" style="width: 250px" clearable></el-input>
            </el-form-item>
            <el-form-item label="开始年份">
              <el-select v-model="searchData.startYear" placeholder="请选择时间范围" style="width: 250px">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item,index) in timeRangeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button class="button-green" size="small" type="primary" @click="search(1)">查询</el-button>
          <el-button class="button-white" size="small" plain @click="reseat">重置</el-button>
        </div>
      </div>
      <div class="table-content">
        <div class="content-group-btn"><el-button type="primary" size="small" @click="addNewPlan">新建随访计划</el-button></div>
        <div>
          <el-table :data="planList.fPlanDtoList" style="width: 100%;margin-top: 20px;">
            <el-table-column
              prop="name"
              label="随访计划名称"
              min-width="180"
              align="left"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-button class="btn-right-class" type="text" @click="visitDetail(scope.row)">{{scope.row.name}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="startYear"
              label="开始年份"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="num"
              label="总人数"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="250">
              <template slot-scope="scope">
                <el-button class="btn-right-class" type="text" @click="visitRow(scope.row)">查看居民</el-button>|
                <el-button class="btn-right-class" type="text" @click="changeRow(scope.row)"> 修改</el-button>|
                <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" class="margin-top20">
            <el-pagination
              background
              v-if="planList.fPlanDtoList"
              @size-change="handleSizeChangePre"
              @current-change="handleCurrentChangePre"
              layout="total, sizes, prev, pager, next, jumper"
              :current-page="paginationSet.pageNo"
              :page-sizes="paginationSet.pageSizes"
              :page-size="paginationSet.pageSize"
              :total="paginationSet.total">
            </el-pagination>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from "@/components/breadcrumb";
  import { mapState, mapActions} from 'vuex'
  import {deletePlan} from '@/utils/followup/followapis'
  export default {
    components:{
      BreadCrumb,
    },
    data(){
      return{
        curmbFirst: '随访管理',
        curmbSecond: '计划管理',
        searchData: {
          name: '',
          startYear: '',
        },
        timeRangeList:[
          {
            label: '2018年',
            value: 0
          }, {
          label: '2019年',
          value: 1
        },{
          label: '2020年',
          value: 2
        }, {
          label: '2021年',
          value: 3
        },{
          label: '2022年',
          value: 4
        },{
          label: '2023年',
          value: 5
        },{
          label: '2024年',
          value: 6
        },{
          label: '2025年',
          value: 7
        },{
          label: '2026年',
          value: 8
        },{
          label: '2027年',
          value: 9
        },{
          label: '2028年',
          value: 10
        },{
          label: '2029年',
          value: 11
        },{
          label: '2030年',
          value: 12
        }
        ],
        paginationSet: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10,20,50,100]
        },
      }
    },
    computed: {
      ...mapState('planManage', {
        planList: state => state.planList,
      })
    },
    created() {
      this.search(1);
    },
    methods: {
      ...mapActions('planManage', ['getPlanList', 'setResidentCrumb', 'setPlanModifyCrumb']),
      async search(currentPage){
        await this.getPlanList({
          ...this.searchData,
          pageNo: currentPage || this.paginationSet.pageNo,
          pageSize: this.paginationSet.pageSize,
        });
        const {pageNo, pageSize, totalRow} = this.planList;
        this.paginationSet.total = totalRow;
        this.paginationSet = {
          ...this.paginationSet,
          pageNo: pageNo,
          pageSize: pageSize,
        }
      },
      reseat(){
        this.searchData.name = '';
        this.searchData.startYear = '';
        this.search(1);
      },
      addNewPlan(){
        this.$router.push({path: '/followup/plan-manage/new-plan'})
      },
      visitDetail(row){
        this.$router.push({path: '/followup/plan-manage/plan-detail', query: {planId:row.id}})
      },
      visitRow(row){
        let residentCrumb = [
          {
            name: '随访管理',
            href: null
          },
          {
            name: '计划管理',
            href: `#/followup/plan-manage/plan-list`
          },
          {
            name: '查看居民',
            href: null
          }
        ]
        this.setResidentCrumb(residentCrumb);
        this.$router.push({path: '/followup/plan-manage/resident-list', query: {planId:row.id, planName: row.name}})
      },
      changeRow(row){
        let planModifyCrumb = [
          {
            name: '随访管理',
            href: null
          },
          {
            name: '计划管理',
            href: `#/followup/plan-manage/plan-list`
          },
          {
            name: '修改计划',
            href: null
          }
        ]
        this.setPlanModifyCrumb(planModifyCrumb)
        this.$router.push({path: '/followup/plan-manage/plan-modify', query: {planId:row.id}})
      },
      deleteRow(row){
        this.$confirm(`是否确定删除${row.name}, 删除后计划将无法恢复!`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          deletePlan(row.id).then(({data}) => {
            this.search(1);
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
      },

      handleSizeChangePre(pageSize){
        this.paginationSet['pageSize'] = pageSize;
        this.paginationSet['pageNo'] = 1;
        this.search()
      },
      handleCurrentChangePre(pageNo){
        this.paginationSet['pageNo'] = pageNo
        this.search()
      },
    },
    filters: {},
  }
</script>

<style scoped lang="scss">

  @import '../../../style/followup/followup-common';
  @import '../../../style/followup/element-reset.css';
  .plan-list-wrapper{
    .plan-list-content{
      .search-input{
        max-width: none;
        flex: 1;
      }
      .margin-top20{
        margin-top: 20px;
      }
      .status-span{
        color: $picaGreen;
      }
    }
    .content-group-btn{
      text-align: right;
    }
  }
</style>
