<template>
  <div class="sys-task sys-box">
    <div class="sys-operate">
      <el-button type="primary" v-has="'management:project:add'" @click="add()" >新增</el-button>
      <!-- <el-button type="primary" :disabled="btnDelDisabled" @click="remove()" >删除</el-button> -->
      <el-button type="primary" v-has="'management:project:show'"  @click="show()" :disabled="btnOtherDisabled" >编辑</el-button>
      <el-button type="primary" v-has="'management:project:audit'"  @click="audit(1)" :disabled="btnOtherDisabled" >审核</el-button>
      <el-button type="primary" v-has="'management:project:disAudit'" @click="disAudit(1)" :disabled="btnOtherDisabled" >反审核</el-button>
    </div>
    <div class="sys-search">
      <el-form inline>
        <el-form-item label="项目名称">
          <el-input placeholder="请输入项目名称" v-model="search_data.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="sys-table">
      <el-table border
                v-loading="pictLoading"
                @row-click="clickRow"
                ref="tb"
                :data="tableData"
                :header-cell-style="{fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="code" label="项目代码" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click.stop="openDetails(scope.row)">{{scope.row.code}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remarks" align="center" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="auditSignName" align="center" label="审核状态" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="sys-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="search_data.pageno"
        :page-sizes="pageSizes"
        :page-size="search_data.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="dialogTitle" center :visible.sync="dialogVisible" width="900px">

      <el-form
        v-loading="dialogLoading"
        label-width="110px"
        :model="formData"
        :rules="rulesForm"
        class="company-form"
        ref="form"
      >

                <el-form-item prop="code" label="项目代码" >
                   <el-input v-model="formData.code"></el-input>
                </el-form-item>


                <el-form-item prop="name" label="项目名称">
                   <el-input v-model="formData.name"></el-input>
                </el-form-item>


                <el-form-item prop="remarks" label="备注"  >
                  <el-input type="textarea" :autosize="{ minRows: 2}" v-model="formData.remarks"></el-input>
                </el-form-item>

          <!-- <div class="dialog-flex">
                <el-form-item prop="auditorName" label="审核人" >
                  <el-input placeholder="审核人" v-model="formData.auditorName" disabled></el-input>
                </el-form-item>
          </div> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">{{config.cancelText}}</el-button>
          <el-button type="primary" @click="save('form')" v-if="this.formData.auditSign==178||this.formData.auditSign == undefined" :disabled="isDisabled">保存</el-button>

          <el-button type="primary" size="small" @click="audit" v-if="this.formData.auditSign==178"  >审核</el-button>
          <el-button type="primary" size="small" @click="disAudit" v-if="this.formData.auditSign==179"  >反审核</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import config from "@/utils/config.js";
  import Cookies from "js-cookie";
  export default {
    components: {

    },
    data() {
      return {
        rulesForm: {
          name: [{ required: true, message: "请输入项目名称", trigger: "change" }],
          code: [{ required: true, message: "请输入项目代码", trigger: "change" }],
        },
        total: 0, //总条数
        pageSizes: [10, 20, 50], //每页展示多少条
        search_data: {
          pageno: 1,
          pagesize: 10,
        },
        options: [],
        expenseOptions:[],
        chooseDevicesVisible: false,
        btnDelDisabled: true,
        btnOtherDisabled: true,
        rowIds: [],
        tableData: [],
        userInfo: {},
        deviceoptions: [],
        dialogVisible: false,
        dialogTitle: "新增",
        formData: {

        },
        btn: false,
        loading: false,
        isDisabled: false,
        // options: [],
        getUserList: [],
        selectDeptId: [],
        depOptions: [],
        pictLoading: false,
        dialogLoading: false,
        chooseUserVisible: false,
        chooseID: "" ,//编辑的id
        config:config
      };
    },
    mounted() {

      this.getList();
    },
    watch: {

    },
    methods: {
        settime(n) {
        if (n.toString().length == 1) {
          return "0" + n.toString()
        } else {
          return n;
        }
      },

      clickRow(row) {
        this.$refs.tb.toggleRowSelection(row);
      },

      /**
       *获取列表
       */
      getList() {
        this.pictLoading = true;
        this.$api.projectAPI
          .pageList(this.search_data)
          .then(res => {
            this.pictLoading = false;
            if (res.data) {
              this.total = res.data.totalRows;
              this.tableData = res.data.datas ? res.data.datas : [];
            } else {
              this.total = 0;
              this.tableData = [];
            }
          })
          .catch(r => {
            console.log(r);
          });
      },
      /**
       * 查询
       */
      search() {
        this.search_data.pageno = 1;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(val) {
        this.search_data.pageno = val;
        this.getList();
      },
      // 每页显示多少条
      handleSizeChange(val) {
        this.search_data.pagesize = val;
        this.getList();
      },
      /**
       * 新增费用
       */

      add() {
        this.chooseID = ''
        this.formData = {}
        this.dialogVisible = true;
        this.dialogTitle = "新增项目信息";
        if (this.$refs["form"] !== undefined) {
          this.$refs["form"].resetFields();
        }
      },


      /**
       *查看明细
       */
      openDetails(r) {
        console.log(r);
        this.dialogVisible = true;
        this.chooseID = r.id;
        if (this.$refs["form"] !== undefined) {
          this.$refs["form"].resetFields();
        }
        this.getDetail();
        this.dialogTitle = "编辑项目信息";
      },
      // 查看
      show() {
        this.dialogVisible = true;
        this.chooseID = this.rowIds[0].id;
        if (this.$refs["form"] !== undefined) {
          this.$refs["form"].resetFields();
        }
        this.getDetail();
        this.dialogTitle = "编辑项目信息";
      },
      /**
       * 获取明细
       */
      getDetail() {
        this.dialogLoading = true;
          this.formData={};//先清空
        this.$api.projectAPI
          .detail(this.chooseID)
          .then(res => {
            this.dialogLoading = false;
            if (res.data) {
                this.formData=Object.assign({}, this.formData, res.data)

            } else {
              this.dialogVisible = false;
              this.$alert("获取项目信息明细失败", "提示", { type: "warning" });
            }
          })
          .catch(r => {
            console.log(r);
          });
      },
      /**
       * 保存
       */
      save(form) {
        this.$refs[form].validate(valid => {
          if (valid) {

            if (this.chooseID) {
              this.formData.Id= this.chooseID;
              if(this.isDisabled) {
                return
              }
              this.isDisabled = true
              this.$api.projectAPI
                .save(this.formData)
                .then(res => {
                  this.isDisabled = false
                  if (res.code === 0) {
                    this.$message({
                      message: res.msg,
                      type: "success",
                    });
                    this.dialogVisible = false;
                    this.getList();
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error"
                    });
                  }
                })
                .catch(r => {
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                });
            } else {
              if(this.isDisabled) {
                return
              }
              this.isDisabled = true
              this.$api.projectAPI
                .save(this.formData)
                .then(res => {
                  this.isDisabled = false
                  if (res.code === 0) {
                    this.$message({
                      message: res.msg,
                      type: "success"
                    });
                    this.dialogVisible = false;
                    this.getList();
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error"
                    });
                  }
                })
                .catch(r => {
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                });
            }
          } else {
            return false;
          }
        });
      },

      /**
       * 审核
       */
      audit(n) {
          let id;
          if(n==1){//点击列表上面的审核按钮
              id =this.rowIds[0].id
          }else{//点击弹出框里面的审核按钮
              id = this.formData.id;
          }
        this.$api.projectAPI
          .audit(id)
          .then(res => {
            if(res.code === 0) {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.dialogVisible = false;
                this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              })
            }
          })
      },

      /**
       * 反审核
       */
      disAudit(n) {
          let id;
          if(n==1){//点击列表上面的审核按钮
              id =this.rowIds[0].id
          }else{//点击弹出框里面的审核按钮
              id = this.formData.id;
          }
        this.$api.projectAPI
          .reverseAudit(id)
          .then(res => {
            if(res.code === 0) {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.dialogVisible = false;
                this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              })
            }
          })
      },



      /**
       * 删除费用
       */
    //   remove() {
    //     let ids = [];
    //     this.rowIds.forEach(item => {
    //       ids.push(item.id);
    //     });
    //     //let id = this.rowIds[0].id;
    //     this.$confirm("确认删除项目信息吗?", "提示", {
    //       type: "warning"    //     }).then(() => {
    //       this.$api.projectAPI
    //         .delete({ids:ids})
    //         .then(res => {
    //           if (res.code === 0) {
    //             this.$message({
    //               message: res.msg,
    //               type: "success"
    //             });
    //             this.getList();
    //           } else {
    //             this.$message({
    //               message: res.msg ? res.msg : "删除失败，请重试",
    //               type: "error"
    //             });
    //           }
    //         })
    //         .catch(error => {
    //           this.$message({
    //             message: "删除失败，请重试",
    //             type: "error"
    //           });
    //         });
    //     });
    //   },
      /**
       * 处理选中
       */
      handleSelectionChange(val) {
        this.rowIds = val;
        this.setBtn(val);
      },
      /**
       * 控件操作按钮状态
       */
      setBtn(val) {
        let isFlag = true;
        let isDelFlag = true;
        if (val.length > 0) {
          isDelFlag = false;
          if (val.length == 1) {
            isFlag = false;
          }
        } else {
          isFlag = true;
          isDelFlag = true;
        }
        this.btnDelDisabled = isDelFlag;
        this.btnOtherDisabled = isFlag;
      }
  }
  }
</script>

<style scoped>

  .company-form{
    overflow: auto;
  }
  .company-form .el-textarea,.company-form  .el-input{
    width: 100%;
  }
  .company-form .form-inline,.company-form .form-inline1 {
    float: left;
    /*display: inline-block;*/
  }
  .company-form .form-inline .el-input,.company-form .el-select,.company-form .el-cascader{
    width:200px;
    display: block;
  }

  .company-form textarea {
    height: 80px;
  }



</style>
