<template>
  <div style="padding: 0 20px">
    <lx-header icon="md-apps" text="预算计划" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      <div slot="content"></div>
      <slot>
        <div>
          <span style="padding: 0 6px;">年份</span>
          <span>
            <DatePicker placeholder="选择所属年份" type="year" placement="bottom" :value="select.year" style="width: 130px;" @on-change="(e)=>select.year = e"></DatePicker></DatePicker>
          </span>

          <span style="padding: 0 6px;">
            预算类型
          </span>
          <span>
            <Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
              <Option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </span>

          <span style="padding: 0 6px;">
            科室
          </span>
          <span>
            <el-cascader
              placeholder="选择科室"
              size="small"
              :value="select.department"
              style="width: 160px;"
              :options="departments"
              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
              clearable
              @change="e => select.department = e[e.length-1] || ''"/>
          </span>
          <Button type="primary"  style="margin-left: 10px" @click="isShowAdd = true,getDepartment()">新增</Button>
          <Button type="primary"  style="margin-left: 10px" @click="getBudgets">查询</Button>
          <Button type="primary"  style="margin-left: 10px" @click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table :table-item="table" :list="list" @delete="deleteTable" @editor="showEditor"></xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" show-elevator @on-change="pageChange"/>
    </div>

<!--    新增-->
    <xy-dialog :is-show.sync="isShowAdd" type="form" :form="form" title="新增计划" :rules="rules" @submit="submit" ref="addBudget">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写项目名称" v-model="form.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择预算类型" v-model="form.type" style="width: 300px;">
              <el-option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:year>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份
          </div>
          <div class="xy-table-item-content">
            <el-datePicker value-format="yyyy" clearable placeholder="请选择所属年份" type="year" placement="bottom" v-model="form.year" style="width: 300px;"></el-datePicker>
          </div>
        </div>
      </template>
      <template v-slot:department>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>科室
          </div>
          <div class="xy-table-item-content">
            <el-cascader
              :value="form.department"
              style="width: 300px;"
              :options="departments"
              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
              clearable
              @change="e => form.department = e[e.length-1] || ''"/>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容
          </div>
          <div class="xy-table-item-content">
            <el-input clearable type="textarea" placeholder="请填写内容" v-model="form.content" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input clearable placeholder="请填写金额" v-model="form.money" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>备注
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写备注" type="textarea" v-model="form.remark" style="width: 300px;"/>
          </div>
        </div>
      </template>
    </xy-dialog>

<!--    编辑-->
    <xy-dialog title="编辑" type="form" :is-show.sync="isShowEditor" :form="editorForm" :rules="rules" ref="editorDialog">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写项目名称" v-model="editorForm.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型
          </div>
          <div class="xy-table-item-content">
            <el-select placeholder="请选择预算类型" v-model="editorForm.type" style="width: 300px;" clearable>
              <el-option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:year>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份
          </div>
          <div class="xy-table-item-content">
            <el-datePicker clearable value-format="yyyy" placeholder="请选择所属年份" type="year" placement="bottom" v-model="editorForm.year" style="width: 300px;"></el-datePicker>
          </div>
        </div>
      </template>
      <template v-slot:department>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>科室
          </div>
          <div class="xy-table-item-content">
            <el-cascader
              size="small"
              :value="editorForm.department"
              style="width: 300px;"
              :options="departments"
              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
              clearable
              @change="e => editorForm.department = e[e.length-1] || ''"/>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容
          </div>
          <div class="xy-table-item-content">
            <el-input clearable type="textarea" placeholder="请填写内容" v-model="editorForm.content" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input clearable placeholder="请填写金额" v-model="editorForm.money" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>备注
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写备注" type="textarea" v-model="editorForm.remark" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:footerContent>
        <Button type="primary" @click="editorTable">确定</Button>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {addBudget,getBudget,delBudget,editorBudget,detailBudget} from "@/api/budget/budget"
import {listdept} from "@/api/system/department"
import {Message} from "element-ui";
import {parseTime} from "@/utils"
export default {
  data() {
    return {
      isShowAdd:false,
      form:{
        name:"",
        type:"",
        year:"",
        department:"",
        money:"",
        content:"",
        remark:""
      },
      rules:{
        name:[
          {required:true,message:"必填项"}
        ],
        type:[
          {required:true,message:"必选项"}
        ],
        year:[
          {required:true,message:"必选项"}
        ],
        department:[
          {required:true,message:"必选项"}
        ],
        money:[
          {required:true,message:"必填项"}
        ],
        content:[
          {required:true,message:"必填项"}
        ],
        remark:[
          {required:true,message:"必填项"}
        ]
      },
      list:[],
      total:0,
      pageIndex:1,
      table:[
        {
          label:"预算类型",
          prop:'type',
          width:120,
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "部门预算"
                break;
              case 2:
                return "水务计划"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          label:"项目名称",
          prop:'name',
          width: 200,
          align:'left',
          sortable:false
        },
        {
          label:"所属年份",
          prop:'year',
          width: 120
        },
        {
          label: "相关科室",
          prop:'plan_department.name',
          width: 180
        },
        {
          label:'金额',
          prop:'money',
          align:'right',
          width: 160
        },
        {
          label:"描述",
          prop:'content',
          align:'left',
          sortable:false
        },
        {
          label:"创建信息",
          prop:'created_at',
          width: 200,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value))
          }
        }
      ],
      select:{
        page:1,
        year:"",
        type:"",
        department:""
      },
      departments:[],//部门类型

      //编辑信息
      isShowEditor:false,
      editorForm:{},
    }
  },
  methods: {
    //翻页
    pageChange(e){
      this.pageIndex = e
      this.getBudgets()
    },
    //获取科室
    getDepartment(){
      listdept().then(res=>{
        this.departments = res
      })
    },
    //查询计划列表
    getBudgets(){
      getBudget({
        page_size:10,
        page:this.pageIndex,
        year:this.select.year,
        type:this.select.type,
        plan_department_id:this.select.department
      }).then(res=>{
        this.list = res.data
        this.total = res.total
      })
    },
    //新增提交
    submit(){
      addBudget({
        name:this.form.name,
        type:this.form.type,
        year:this.form.year,
        content:this.form.content,
        money:this.form.money,
        plan_department_id:this.form.department,
        remark:this.form.remark
      }).then(res=>{
        Message({
          message:'操作成功',
          type:'success'
        })
        this.isShowAdd = false
        this.$refs["addBudget"].reset()
        this.getBudgets()
      })
    },
    //删除
    deleteTable(e){
      delBudget({id:e.id}).then(res=>{
        Message({
          message:'操作成功',
          type:'success'
        })
        this.getBudgets()
      })
    },

    //修改
    editorTable(){
      this.$refs['editorDialog'].$refs['elForm'].validate().then(res=>{
        editorBudget({
          id:this.editorForm.id,
          name:this.editorForm.name,
          type:this.editorForm.type,
          year:this.editorForm.year,
          content:this.editorForm.content,
          money:this.editorForm.money,
          remark:this.editorForm.remark,
          plan_department_id:this.editorForm.department
        }).then(res=>{
          this.isShowEditor = false
          Message({
            message:'操作成功',
            type:'success'
          })
          this.getBudgets()
        })
      }).catch(err=>{
        this.$message({
          message:'请填写完整信息',
          type:'error'
        })
      })
    },
    showEditor(row){
      this.getDepartment()
      detailBudget({id:row.id}).then(res=>{
        this.editorForm =
          {
            id:res.id,
            name:res.name,
            type:res.type,
            department:res.plan_department_id,
            money:res.money,
            year:res.year,
            content:res.content,
            remark:res.remark
          }
        this.isShowEditor = true
        console.log(this.editorForm)
      })
    },
  },
  mounted() {
    this.getDepartment()
    this.getBudgets()
  }
}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 140px;
}
.xy-table-item-price{
  position: relative;
  &::after{
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    content:'（元）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 30px;
    z-index: 2;
  }
}
</style>
