<template>
  <div class="page">
    <el-card class="year-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="head clearfix">
        <span>年度列表</span>
        <el-button size="mini" style="margin-right: -15px;" type="success" @click="addYear">新增年度</el-button>
      </div>
      <el-table size="mini" highlight-current-row :current-row-key="curRow.id" row-key="id" @row-click="rowClick"
        :show-header="false" :data="yearList" max-height="470px">
        <el-table-column prop="year" align="center">
        </el-table-column>
        <el-table-column prop="operateDate" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="editYear(scope.row)" style="padding-right: 5px;">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="delYear(scope.row)">
              <el-button slot="reference" type="text" style="color:#F56C6C">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="content-box" ref='cardForm'>
      <content-box :detail="curRow" @getData="getYearList" @saveContent="saveContent" />
    </el-card>
    <dia-year ref="diaYear" :visible="yearVisible" @submit="handleSubmit" @cancel="cancel" />
  </div>
</template>
<script>
  import diaYear from "./components/diaYear.vue"
  import contentBox from "./components/content.vue"
  import {
    getYearList,
    addYear,
    editYear,
    delYear
  } from "@/api/archives-management/annualReport"
  import {
    message
  } from "@/utils/common"

  export default {
    data() {
      return {
        yearList: [],
        yearVisible: false,
        curRow: {},
      }
    },
    components: {
      diaYear,
      contentBox,
    },
    methods: {
      saveContent(content) {
        const params = {
          ...this.curRow,
          content,
        }
        this.editYearAsync(params)
      },
      editYearAsync(params) {
        editYear(params).then(res => {
          this.$refs.diaYear.btnloading = false
          if (res.code === '100') {
            message('success', '保存成功', 2000)
            this.cancel()
            this.getYearList()
          }
        }).catch(() => {
          this.$refs.diaYear.btnloading = false
        })
      },
      handleSubmit(val) {
        if (!val.id) {
          addYear(val).then(res => {
            this.$refs.diaYear.btnloading = false
            if (res.code === '100') {
              message('success', '保存成功', 2000)
              this.cancel()
              this.getYearList()
            }
          }).catch(() => {
            this.$refs.diaYear.btnloading = false
          })
        } else {
          this.editYearAsync(val)
        }
      },
      rowClick(row) {
        this.curRow = row;
      },
      cancel() {
        this.yearVisible = false;
      },
      addYear() {
        this.yearVisible = true;
        this.$refs.diaYear.form = this.$refs.diaYear.$options.data().form
      },
      editYear(row) {
        this.yearVisible = true;
        this.$refs.diaYear.title = '编辑年度'
        this.$refs.diaYear.form = {
          ...row
        }
      },
      delYear(row) {
        delYear({
          id: row.id
        }).then(res => {
          if (res.code === '100') {
            message('success', '删除成功', 2000)
            this.getYearList()
          }
        })
      },
      getYearList() {
        getYearList({}).then(res => {
          if (res.code === '100') {
            this.yearList = res.body.list
          }
        })
      },
    },
    created() {
      this.getYearList()
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    display: flex;
    justify-content: space-around;

    .year-box {
      width: 22%;

      background-color: #fff;
      padding: 5px 10px;

      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }

    .content-box {
      width: 77%;

      background-color: #fff;
      padding: 5px 10px;

      ::v-deep {
        .el-card__body {
          padding: 10px 5px 5px;
        }
      }
    }
  }

</style>
