<template>
 <div class="detailListPanel">
   <div class="mainTitle">
     <span v-if="this.isCreate">新增主表信息</span>
     <span v-else>修改主表信息</span>
   </div>
   <div class="mainFormOpra">
     <span >基本信息</span>
     <!-- <div class="mainFormEdit" v-if="!this.isCreate">
       <i class="el-icon-edit" @click="formEdit" ></i>
     </div> -->
     <div class="mainFormEdit">
       <i class="el-icon-edit " @click="formEdit"  v-if="!this.isCreate"></i>
       <el-button type="text" @click="showForm" class="elButton">
         <i class="el-icon-arrow-up" v-if="this.isHide"></i>
         <i class="el-icon-arrow-down" v-if="!this.isHide"></i>
       </el-button>
     </div>
   </div>
   <div class="mainDetailForm" :class="{hide: isHide}">
     <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" v-if="!(this.isFormEdit)">
       <el-form-item label="编码" prop="type_code">
         {{formData.type_code}}
       </el-form-item>
       <el-form-item label="名称" prop="type_name">
         {{formData.type_name}}
       </el-form-item>
       <el-form-item label="业务编码" prop="bu_id">
         {{formData.bu_id}}
       </el-form-item>
       <el-form-item label="描述" prop="type_desc">
         {{formData.type_desc}}
       </el-form-item>
     </el-form>
     <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" v-else>
       <el-form-item label="编码" prop="type_code">
         <el-input v-model="formData.type_code"></el-input>
       </el-form-item>
       <el-form-item label="名称" prop="type_name">
         <el-input v-model="formData.type_name"></el-input>
       </el-form-item>
       <el-form-item label="业务编码" prop="bu_id">
         <el-input v-model="formData.bu_id"></el-input>
       </el-form-item>
       <el-form-item label="描述" prop="type_desc">
         <el-input type="textarea" v-model="formData.type_desc"></el-input>
       </el-form-item>
       <el-form-item class="primaryOpra">
         <el-button type="primary" @click="onSubmit">完成</el-button>
         <el-button @click="onCancel">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
  <!-- <el-dialog :title="editRowIndex > -1 ? '修改自定义档案分类' : '新增自定义档案分类'" v-model="s_editFormVisible" size="tiny"> -->
    <div id="staff-sublist">
      <div class="subTitle">
        <span>子表信息</span>
        <div class="subTableOpra">
          <i class="el-icon-plus" @click="subCreate"></i>
          <i class="el-icon-delete" @click="subDeleteClick"></i>
          <el-button type="text" @click="showTable" class="elButton">
            <i class="el-icon-arrow-up" v-if="this.isTableHide"></i>
            <i class="el-icon-arrow-down" v-if="!this.isTableHide"></i>
          </el-button>
        </div>
      </div>
      <div :class="{hide: isTableHide}" id="sub-table-info">
        <el-table ref="multipleTableSub" :data="tableData" border style="width: 100%;" @row-click="SubDetail" @selection-change="subHandleSelectionChange">
          <el-table-column
            type="selection"
            width="42">
          </el-table-column>
          <el-table-column prop="doc_code" label="编码">
          </el-table-column>
          <el-table-column prop="doc_name" label="名称">
          </el-table-column>
          <el-table-column prop="shortname" label="简称">
          </el-table-column>
          <el-table-column prop="pid_showname" label="上级档案">
            <template scope="scope">
              <div>{{scope.row.beanMap?scope.row.beanMap.pid_ref?scope.row.beanMap.pid_ref[scope.row.pid].name:'':''}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type_desc" label="启用状态">
            <template scope="scope">
              <!-- <div>{{scope.row.enablestate===1? "启用":"停用"}}</div> -->
              <div style="text-align:center;">
                <el-switch v-model="scope.row.enablestate"  off-color="#ccc" :on-value="1" :off-value="2" @change="function(flag){test(flag, scope)}">
                </el-switch>
                <!-- <el-button @click="changeState(scope)" v-if="scope.row.enablestate === 1" type="primary" icon="circle-check" size="small" title="启用"></el-button> -->
                <!-- <el-button @click="changeState(scope)"  v-if="scope.row.enablestate === 2" type="primary" icon="circle-close" size="small" title="停用"></el-button> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type_desc" label="是否预置">
            <template scope="scope">
              <div>{{scope.row.is_preset===true? "是":"否"}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type_desc" label="描述">
          </el-table-column>
          <!-- <el-table-column prop="operate" label="操作" width="150"> -->
            <!-- <template scope="scope"> -->
              <!-- <el-button-group> -->
                <!-- <el-button @click="editClick(scope)" type="text"  size="small" title="编辑">编辑</el-button> -->
                <!-- <el-button @click="deleteClick(scope)" v-show="!scope.row.is_preset" type="text"  size="small" title="删除">删除</el-button> -->
              <!-- </el-button-group> -->
            <!-- </template> -->
          <!-- </el-table-column> -->
        </el-table>
        <!--pagination-->
        <div class="addSubTable" v-if="!isSubFormEdit">
          <i class="el-icon-plus" @click="subCreate"></i>
        </div>
        <div  class="subCreate" v-if="isSubFormEdit">
          <el-template  :pkTemp="pk_temp"
                        ref="subformData"
                        :rules= "subRules"
                        :hideTitle="true"
                        :isEdit="true"
                        :refQueryParams="refQueryParams"
                        :templateValue="subformData">
          </el-template>
          <el-button-group>
            <el-button type="primary" @click="onSubmitSub">完成</el-button>
            <el-button @click="onSubCancel">取消</el-button>
          </el-button-group>
          <!-- <el-button type="primary" @click="onSubmit" class="subButton">完成</el-button>
          <el-button @click="onCancel" class="subButton">取消</el-button> -->
        </div>

        <input type="text" id="p" style="visibility: hidden">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalElements">
        </el-pagination>
      </div>
      <el-dialog
        title="提示"
        v-model="subDelDialogVisible"
        :modal="true"
        size="tiny">
        <span>确认删除？删除后无法恢复。</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="subDelDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteSubFun">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  <!-- </el-dialog> -->
 </div>
</template>
<script>
export default {
    name: 'editForm',
    data() {
      var defdocId = this.$root.$router.currentRoute.params.id;
      var defdocbuId = this.$root.$router.currentRoute.params.buid;
      var isCreate = this.$route.fullPath === "/defdocEditRules/add";
      var refQueryParams = [{itemCode:'DefDocEntity.pid',params:{id: defdocId}}];
      return {
        formData:{},
        tableData: [],
        isHide:false,
        isTableHide:false,
        isCreate: isCreate,
        defdocId:defdocId,
        defdocbuId:defdocbuId,
        subDelDialogVisible: false,
        currentPage: 1,
        totalElements: 0,
        pageSize: 10,
        isFormEdit: isCreate,
        isSubFormEdit: false,
        isSubCreate: false,
        subArr:[],
        refQueryParams:refQueryParams,
        pk_temp: '17b1ef3b-bfd8-4426-a47a-cba3b2f30897',
        subformData:{},
        subIndex: 0,
        rules:{
          type_code:[
            {required: true, message: '请输入编码', trigger: 'blur' },
            {max: 30, message: '长度最多 30 个字符', trigger: 'blur' }
          ],
          type_name:[
            {required: true, message: '请输入名称', trigger: 'blur' },
            {max: 200, message: '长度最多 200 个字符', trigger: 'blur' }
          ],
          bu_id:[
            {required: true, message: '请输入业务编码', trigger: 'blur' },
            {max: 500, message: '长度最多 200 个字符', trigger: 'blur' }
          ],
          type_desc:[
            {max: 500, message: '长度最多 500 个字符', trigger: 'blur' }
          ]
        },
        subRules:{
          doc_code:[
            {required: true, message: '请输入编码', trigger: 'blur' },
            {max: 50, message: '长度最多 50 个字符', trigger: 'blur' }
          ],
          doc_name:[
            {required: true, message: '请输入名称', trigger: 'blur' },
            {max: 200, message: '长度最多 200 个字符', trigger: 'blur' }
          ],
          shortname:[
            {max: 200, message: '长度最多 200 个字符', trigger: 'blur' }
          ],
          doc_desc:[
            {max: 500, message: '长度最多 500 个字符', trigger: 'blur' }
          ]
        },
        s_editFormVisible: false
      };
    },
    // props: ['formData','editFormVisible', 'editRowIndex'],
    methods: {
      //新增子表信息
      subCreate() {
        if(this.isCreate) {
          this.$message("先保存主表数据！");
          return;
        }
        this.subformData = {
          type_id:this.defdocId,
          bu_id:this.defdocbuId
        };
        this.isSubFormEdit = true;
        this.isSubCreate = true;
      },
      showForm() {
        this.isHide = !this.isHide;
      },
      showTable() {
        this.isTableHide = !this.isTableHide;
      },
      formEdit() {
        this.isFormEdit = !this.isFormEdit;
      },
      SubDetail (row ,event){
        if (event.target.className.indexOf("el-checkbox") < 0) {
          this.subformData = JSON.parse(JSON.stringify(row));
          this.subIndex = event.currentTarget.rowIndex;
          this.isSubFormEdit = true;
          this.isSubCreate = false;
        }
      },
      subHandleSelectionChange(val) {
        // debugger;
        this.subArr=[];
        if (val.length > 0) {
          val.forEach((v) => {
            if (this.subArr.indexOf(v.id) === (-1)) {
              this.subArr.push(v);
            }
          });
        }
      },
      subDeleteClick(){
        if(this.subArr && this.subArr.length>0){
          this.subDelDialogVisible = true;
        }

      },
      deleteSubFun: function(){
        var url = '/ifbp-app-sm-defdoc-web/defdoc/deleteBatch';
        var data = this.subArr;
        this.$http({
          url: url,
          method: 'post',
          data: data,
          dataType: 'json',
          headers:{
            'Content-Type':'application/json'
          }
        }).then((res) => {
          if (res.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.subDelDialogVisible = false;
            this.requestDetail();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        });
      },
      requestRefdoc(){
            var url ="/ifbp-app-sm-defdoc-web/defdoclist/page";
            var data ={
              searchParams: {
                searchMap:{
                  id:this.defdocId,
                  bu_id:this.defdocbuId
                }
              },
            };
            this.$http({
              url: url,
              method: 'post',
              data:data,
              dataType: 'json',
            }).then((res) => {
              if (res && res.data.success) {
                  this.formData = res.data.data.content[0];
              }
            }).catch(() => {
              this.$message({
                message: '获取失败',
                type: 'error'
              });
            });
      },

      requestDetail() {
        var url = '/ifbp-app-sm-defdoc-web/defdoc/page';
        var data = {
          searchParams: {
            searchMap:{
              type_id:this.defdocId,
              bu_id:this.defdocbuId,
            }
          },
          pageNum: this.currentPage -1,
          pageSize: this.pageSize
        };
        this.$http({
          url: url,
          method: 'post',
          data: data,
          dataType: 'json'
        }).then((res) => {
          // debugger;
          this.tableData=res.data.data.content;
          this.totalElements = res.data.data.totalElements ;       // 总条数
          this.pageSize = res.data.data.size;                          // 每页的条数
        }).catch(() => {
          this.$message({
            message: '档案信息获取失败',
            type: 'error'
          });
        });
      },
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.request();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.request();
      },
      onSubmit() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            var url = '/ifbp-app-sm-defdoc-web/defdoclist/create';
            if(this.$root.$router.currentRoute.params.id) {
              url = '/ifbp-app-sm-defdoc-web/defdoclist/update';
            }
            this.$http({
              url: url,
              method: 'post',
              data: this.formData,
              dataType: 'json',
            }).then((res) => {
              if (res) {
                if(res.data.success){
                  this.formData = res.data.data;
                  this.subformData.bu_id = this.formData.bu_id;
                  this.subformData.type_id = this.formData.id;
                  this.isCreate = false;
                  this.isFormEdit = false;
                  this.$emit('onSubmit', this.formData);
                } else {
                  this.$message({
                    message: res.data.error.errorMessage,
                    type: 'error'
                  });
                }
              }
            }).catch(() => {
              this.$message({
                message: '保存失败',
                type: 'error'
              });
            });
          }
        });
      },
      onCancel() {
        if(this.isCreate){
          this.$router.back(-1);
        } else {
          this.isCreate = false;
          this.isFormEdit = false;
        }
      },
      onSubmitSub() {
        this.$refs.subformData.validate((valid) => {
          if (valid) {
            this.s_editFormVisible = false;
            var url = '/ifbp-app-sm-defdoc-web/defdoc/create';
            if(this.subformData.id){
              url = '/ifbp-app-sm-defdoc-web/defdoc/update';
            }
            this.$http({
              url: url,
              method: 'post',
              data: this.subformData,
              dataType: 'json',
            }).then((res) => {
              if (res) {
                if(res.data.success){
                  this.subformData = res.data.data;
                  if(this.isSubCreate) {
                    this.tableData.push(this.subformData);
                  } else {
                    this.tableData.splice(this.subIndex, 1, this.subformData);
                  }
                  this.isSubFormEdit = false;
                  this.totalElements += 1;
                  this.$emit('onSubmitSub', this.formData);
                }else{
                  this.$message({
                    message: res.data.error.errorMessage,
                    type: 'error'
                  });
                }

              }
            }).catch(() => {
              this.$message({
                message: '保存失败',
                type: 'error'
              });
            });
          }
        });
      },
      onSubCancel() {
        this.isSubFormEdit = false;
      },
    },

    watch: {
      editFormVisible: function(value) {
        this.s_editFormVisible = value;
      },
      s_editFormVisible: function(value) {
        this.$emit('changeVisible', value);
      },
    },
    created() {
      if(this.defdocId && this.defdocbuId){
        this.requestRefdoc();
        this.requestDetail();
      }
    },

};
</script>
<style>

</style>
