<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" @click="createNew">
          <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
          <span class="d-in-block v-mid font-size-16">新建预算申报</span>
        </el-button>
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="state_value">
          <el-select class="mr10" v-model="status_value" placeholder="请选择状态" @change="getListData">
            <el-option
                v-for="item in status_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker style="width: 100%"
                          v-model="time"
                          type="date"
                          placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input
              placeholder="请输入搜索关键字"
              clearable
              @clear="getListData"
              v-model="keyword"
          >
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我申请的" name="first">
        <el-table :data="applyTable"  v-loading="loading" tooltip-effect="dark" style="width: 100%">
          <el-table-column
              type="selection"
              align="center"
              width="55">
          </el-table-column>
          <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              label="标题"
              show-overflow-tooltip
              prop="jsy_title"
              width="auto">
          </el-table-column>
          <el-table-column
              label="部门/单位"
              width="200"
              prop="jsy_dept_id"
          ></el-table-column>
          <el-table-column
              label="设备类别"
              width="150"
              prop="jsy_sblb"
          ></el-table-column>
          <el-table-column
              label="预算初始额"
              prop="jsy_yscse"
              width="150">
          </el-table-column>
          <el-table-column
              label="弹性比例（%）"
              align="center"
              prop="jsy_txbl"
              width="150">
          </el-table-column>
          <el-table-column
              label="日期"
              prop="jsy_date"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              label="状态"
              width="100">
            <template v-slot="scope">
              <span v-if="scope.row.jsy_zt_option_k == 1">待审核</span>
              <span v-if="scope.row.jsy_zt_option_k == 2">已通过</span>
              <span v-if="scope.row.jsy_zt_option_k == 3">不通过</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="editData(scope.row)"
              >编辑
              </el-button>
              <el-button
                  type="text"
                  @click="delData(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待我审核的" name="second">
        <el-table :data="auditTable" tooltip-effect="dark" style="width: 100%">
          <el-table-column
              type="selection"
              align="center"
              width="55">
          </el-table-column>
          <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              label="标题"
              show-overflow-tooltip
              prop="jsy_title"
              width="auto">
          </el-table-column>
          <el-table-column
              label="部门/单位"
              width="200"
              prop="jsy_dept_id"
          ></el-table-column>
          <el-table-column
              label="设备类别"
              width="150"
              prop="jsy_sblb"
          ></el-table-column>
          <el-table-column
              label="预算初始额"
              prop="jsy_yscse"
              width="150">
          </el-table-column>
          <el-table-column
              label="弹性比例（%）"
              align="center"
              prop="jsy_txbl"
              width="150">
          </el-table-column>
          <el-table-column
              label="日期"
              prop="jsy_date"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              label="状态"
              width="100">
            <template v-slot="scope">
              <span v-if="scope.row.jsy_zt_option_k == 1">待审核</span>
              <span v-if="scope.row.jsy_zt_option_k == 2">已通过</span>
              <span v-if="scope.row.jsy_zt_option_k == 3">不通过</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="verify(2,scope.row)"
              >通过
              </el-button>
              <el-button
                  type="text"
                  @click="verify(3,scope.row)"
              >不通过
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <footer
        class="flex-item-none"
        style="display: flex;justify-content: flex-end;margin-top: 30px;"
    >
      <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="limit"
          :total="total"
          :current-page.sync="cur_page"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="530px">
      <el-form :model="dialogForm" label-width="90px">
        <el-form-item label="标题" prop="jsy_title">
          <el-input v-model="dialogForm.jsy_title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="设备类别" prop="jsy_sblb">
          <el-select v-model="dialogForm.jsy_sblb" style="width: 100%" placeholder="请选择类别">
            <el-option
                v-for="item in lb_list"
                :key="item.jslx_id"
                :label="item.jslx_name"
                :value="item.jslx_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker
              style="width: 400px"
              v-model="dialogForm.jsy_date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请部门" prop="jsy_dept_id">
          <el-cascader
              style="width: 100%"
              v-if="dialogFormVisible"
              v-model="dialogForm.jsy_dept_id"
              ref="sq_dep"
              :options="defaultData"
              :props="props"
              :show-all-levels="false"
              clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="审核部门">
          <el-cascader
              style="width: 100%"
              v-if="dialogFormVisible"
              v-model="dialogForm.jsy_sh_dep"
              ref="sh_dep"
              :options="defaultData"
              :props="props"
              :show-all-levels="false"
              :placeholder="dialogForm.jsy_sh_dep_name"
              clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="审核人员" prop="shry">
          <el-select
              style="width: 100%"
              v-model="dialogForm.shry"
              placeholder="请选择审核人员"
          >
            <el-option
                v-for="item in userList"
                :key="item.user_id"
                :label="item.user_realname"
                :value="{value:item.user_id,label:item.user_realname}"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预算初始额" prop="jsy_yscse">
          <el-input v-model="dialogForm.jsy_yscse" placeholder="请输入预算初始额"></el-input>
        </el-form-item>
        <el-form-item label="弹性比例" prop="jsy_txbl">
          <el-input-number v-model="dialogForm.jsy_txbl" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {sbys_list,sbys_add,sbys_edit,sbys_del,sbys_verify,sblb_list,org_list_tree,org_users} from "./api";
import { useUserStore } from "@/stores/user";
const { real_name, dept_ids } = useUserStore();
export default {
  name: "index",
  data() {
    return{
      loading: false,
      time: '',
      title:'',
      keyword: '',
      status_value: '',
      status_list: [{
        label: '全部',
        value: '0'
      }, {
        label: '待审核',
        value: '1'
      }, {
        label: '已审核',
        value: '2'
      }, {
        label: '不通过',
        value: '3'
      }],
      activeName: 'first',
      applyTable: [],
      auditTable: [],
      limit: 10,
      total: 0,
      cur_page: 1,
      lb_list:[],
      dialogFormVisible: false,
      dialogForm:{
        jsy_id: '',
        jsy_title:'',
        jsy_dept_id:'',
        jsy_sh_dep:'',
        jsy_sh_dep_name:'',
        shry:{},
        jsy_sblb:'',
        jsy_yscse:'',
        jsy_txbl:'',
        jsy_date:'',
      },
      isEdit:false,
      timestamp: Date.now(),
      props: {
        multiple:true,
        value: 'id',
        label: "label",
        checkStrictly: false,
        expandTrigger: "hover",
      },
      defaultData: [],
      userList:[],
    }
  },
  methods:{
    getOrgTree() {
      let data = {};
      org_list_tree(data).then((res) => {
        if (res.code == 1) {
          this.defaultData = res.data.one_info;
        }
      });
    },
    getUserList() {
      let data = {
        dept_id: dept_ids[0],
        page: 1,
        limit: 9999
      }
      org_users(data).then(res => {
        if (res.code == 1) {
          this.userList = res.data.page_data;
        }
      })
    },
    getLbList() {
      let data = {
        page: '1',
        limit: '999'
      };

      sblb_list(data).then((res) => {
        this.lb_list = res.data.page_data;
      });
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        jsy_date: this.time,
        jsy_zt: this.status_value
      };

      sbys_list(data).then((res) => {
        this.loading = false;
        this.applyTable = res.data.page_data;
        this.auditTable = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
    },
    createNew() {
      this.isEdit = false;
      this.title = '新建预算申报';
      this.dialogForm = {
        jsy_id: '',
        jsy_title:'',
        jsy_dept_id:'',
        jsy_sblb:'',
        jsy_yscse:'',
        jsy_txbl:'',
        jsy_date:'',
        jsy_sh_dep:'',
        jsy_sh_dep_name:'',
        shry:{},
      }
      this.dialogFormVisible = true;
    },
    editData(item) {
      this.isEdit = true;
      this.title = '编辑预算申报';
      this.dialogForm = {
        jsy_id: item.jsy_id,
        jsy_title: item.jsy_title,
        jsy_dept_id: item.jsy_dept_id,
        jsy_sblb: item.jsy_sblb,
        jsy_yscse: item.jsy_yscse,
        jsy_txbl: item.jsy_txbl,
        jsy_date: item.jsy_date,
        jsy_sh_dep:item.sy_shbm_dept_id,
        jsy_sh_dep_name:item.sy_shbm_dept_name,
        shry:{
          value:item.sy_shry_user_id,
          label:item.sy_shry_user_realname
        }
      };
      this.dialogFormVisible = true;
    },
    formSubmit() {
      const obj_sq = this.$refs['sq_dep'].getCheckedNodes();
      this.dialogForm.jsy_dept_id = obj_sq[0].data.id;
      const obj_sh = this.$refs['sh_dep'].getCheckedNodes();
      this.dialogForm.jsy_sh_dep = obj_sh[0].data.id;
      this.dialogForm.jsy_sh_dep_name = obj_sh[0].data.label;
      let data = {
        jsy_title: this.dialogForm.jsy_title,
        jsy_dept_id: this.dialogForm.jsy_dept_id,
        jsy_sblb: this.dialogForm.jsy_sblb,
        jsy_yscse: this.dialogForm.jsy_yscse,
        jsy_txbl: this.dialogForm.jsy_txbl,
        jsy_date: this.dialogForm.jsy_date,
        sy_shbm_dept_id: this.dialogForm.jsy_sh_dep,
        sy_shbm_dept_name: this.dialogForm.jsy_sh_dep_name,
        sy_shry_user_id: this.dialogForm.shry.value,
        sy_shry_user_realname:this.dialogForm.shry.label
      }
      if(!this.isEdit) {
        sbys_add(data).then(res=>{
          if(res.code == 1) {
            this.$message({
              message: "预算申报新建成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      } else {
        data.jsy_id = this.dialogForm.jsy_id;
        sbys_edit(data).then(res =>{
          if(res.code == 1) {
            this.$message({
              message: "预算申报编辑成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      }

    },
    delData(item) {
      this.$confirm('确定要删除该申报?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          jsy_id: item.jsy_id
        }
        sbys_del(data).then(res =>{
          if(res.code == 1) {
            this.$message({
              message: "申报删除成功！",
              type: "success",
            });
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })

      }).catch(() => {});
    },
    verify(type,item) {
      let data = {
        jsy_zt: type,
        jsy_id: item.jsy_id
      }
      sbys_verify(data).then(res =>{
        if(res.code == 1) {
          this.$message({
            message: "审核成功！",
            type: "success",
          });
          this.getListData();
        }
      })
    },
  },
  mounted() {
    this.getOrgTree();
    this.getUserList();
    this.getLbList();
    this.getListData();
  }
}
</script>

<style scoped>

</style>