
<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="1380px"
    >
      <div class="user-panel" v-loading="loading">
        <el-form
          ref="form"
          :model="formModel"
          :rules="ruleValidate"
          :label-width="'100px'"
          :inline="true"
        >
        <el-row class="button-group">
          <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">新增新项</el-button>
        </el-row>
        <el-divider></el-divider>
            <el-table 
                class="compact-table"
                :data="formModel.optionList" >
                <el-table-column prop="serialNum" label="序号" width="100"></el-table-column>
                <el-table-column prop="name" label="名称" width="200"></el-table-column>
                <el-table-column prop="budgetRevenue" label="预算收入">
                  <template slot-scope="{row}">
                    {{formaNum(row.budgetRevenue)}}
                  </template>
                </el-table-column>
                <el-table-column prop="incomeTimeRange" label="收入时间区间" width="180"></el-table-column>
                <!-- <el-table-column prop="incomeTypeN" label="收入类型"></el-table-column> -->
                <el-table-column prop="endDate" label="终止日" width="130"></el-table-column>
                <el-table-column prop="departmentNames" label="部门"></el-table-column>
                <el-table-column prop="isSum" label="是否合计">
                    <template slot-scope="{row}" >
                        <span v-if="row.isSum" style="color:#67C23A">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="chargePerson" label="责任人"></el-table-column>
                <el-table-column prop="index" label="排序号" ></el-table-column>
                <el-table-column label="操作"  width="180">
                  <template slot-scope="{row}">
                    <el-link v-if="formModel.status=='0'" type="warning" @click="handleEdit(row)" style="margin-right:10px">编辑 -</el-link>
                    <el-link v-if="!row.isSum" type="primary" @click="handlebudgetEdit(row)">修改预算-</el-link>
                    <el-link type="primary" @click="handleNameEdit(row)">修改名称</el-link>
                  </template>
                </el-table-column>
            </el-table>
        </el-form>
      </div>
      <div class="el-table__empty-block">
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
      </span>
      <templateDepartment-edit
        v-if="showModal"
        :businessKey2="businessKey2"
        :title="modalTitle"
        @close="onDetailModalClose"
      ></templateDepartment-edit>
      <budgetModify-detail
        v-if="showModal3"
        :businessKey2="businessKey2"
        :title="modalTitle3"
        @close="onDetailModalClose3"
      ></budgetModify-detail>
      <templateDepartTitle-edit
        v-if="showModal4"
        :businessKey2="businessKey2"
        :title="modalTitle4"
        @close="onDetailModalClose4"
      ></templateDepartTitle-edit>
      <templateDepartName-edit
        v-if="showModal5"
        :businessKey2="businessKey2"
        :title="modalTitle5"
        @close="onDetailModalClose5"
      ></templateDepartName-edit>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import templateOptionApi from "@/api/base/templateOption";
  import departmentInfoApi from "@/api/base/departmentInfo";
  import templateDepartmentEdit from "./templateDepartment-edit";
  import templateDepartTitleEdit from "./templateDepartTitle-edit";
  import budgetModifyDetail from "./budgetModify-detail";
  import templateDepartNameEdit from "./templateDepartName-edit";

 
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          ruleValidate: {
              userName: [
              { required: true, message: "用户名不能为空", trigger: "blur" },
              ],
              realName: [
              { required: true, message: "真实名称不能为空", trigger: "blur" },
              ],
          },
          roleList: [],
          formModel: {
            optionList:[],
          },
          showDialog: true,
          loading: false,
          submitting: false,
          enterpriseList:[],
          optionList:[],
          departmentList:[],
          isSumList:[
          {
            "label":"否",
            "value":false
          },
          {
            "label":"是",
            "value":true
          }],
          showModal: false,
          showModal3: false,
          showModal4:false,
          showModal5:false,
          modalTitle3:"",
          modalTitle4:"",
          modalTitle5:"",
          
      };
    },
    computed:{
      formaNum(){
        return function(numer){
          if(numer!=null){
            return numer.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          }
          else{
            numer;
          }
        }
      }
    },
    created() {
      var self = this;
    
      departmentInfoApi.list().then(function (response) {
        var jsonData = response.data;
        if (jsonData.result) {
          if (jsonData.data != null && jsonData.data != "") {
            self.departmentList = jsonData.data;
          }
        }
      });
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      handleSubmit() {
        var self = this;
  
        this.$refs["form"].validate((valid) => {
          if (valid) {
            (function () {
                var id = self.formModel.id;
                self.formModel.templateOptionList = self.formModel.optionList;
                return templateOptionApi.update(self.formModel);
            })().then(function (response) {
              var jsonData = response.data;
  
              if (jsonData.result) {
                self.$message({
                  message: "保存成功!",
                  type: "success",
                });
  
                self.$emit("close", true);
              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });
  
                self.$emit("close", false);
              }
            });
          }
        });
      },
      handleAdd() {
        var self = this;
        
        self.modalTitle4 = "新增项目";
        self.businessKey2 = self.formModel.templateId;
        self.showModal4 = true;
      },
      handleInsert(row) {
        this.formModel.optionList.push({
            serialNumber: "",
            name: "",
          });
      },
      handleDelete(row) {
        var optionList = this.formModel.optionList;

        optionList.splice(optionList.indexOf(row), 1);
      },
      handleEdit(record) {
        var self = this;
        
        self.modalTitle = "编辑模板";
        self.businessKey2 = record.id;
        self.showModal = true;
      },
      handlebudgetEdit(record) {
        var self = this;
        
        self.modalTitle3 = "编辑模板";
        self.businessKey2 = record.id;
        self.showModal3 = true;
      },
      handleNameEdit(record) {
        var self = this;
        
        self.modalTitle5 = "编辑项目";
        self.businessKey2 = record.id;
        self.showModal5 = true;
      },
      onDetailModalClose(refreshed) {
        this.showModal = false;
        if(refreshed) {
          this.loadDataList(this.businessKey)
        }
      },
      onDetailModalClose3(refreshed) {
        this.showModal3 = false;
        if(refreshed) {
          this.loadDataList(this.businessKey)
        }
      },
      onDetailModalClose4(refreshed) {
        this.showModal4 = false;
        if(refreshed) {
          this.loadDataList(this.businessKey)
        }
      },
      onDetailModalClose5(refreshed) {
        this.showModal5 = false;
        if(refreshed) {
          this.loadDataList(this.businessKey)
        }
      },
      loadDataList(businessKey){
        var self = this;
        self.loading = true;
    
        (function () {
            return templateOptionApi.templateDepartmentEdit(businessKey);
        })()
          .then((response) => {
            var jsonData = response.data;
    
            if (jsonData.result) {
              self.formModel = jsonData.data;
              self.formModel.optionList = jsonData.data.templateOptionList;
            } else {
              self.$message.error(jsonData.message + "");
            }
    
            self.loading = false;
          })
          .catch((error) => {
            self.$message.error(error + "");
            self.loading = false;
          });
      }
    },
    async mounted() {
      this.loadDataList(this.businessKey);
    },
    components: {
      "templateDepartment-edit":templateDepartmentEdit,
      "budgetModify-detail":budgetModifyDetail,
      "templateDepartTitle-edit":templateDepartTitleEdit,
      "templateDepartName-edit":templateDepartNameEdit
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>